/* Batch 18 layout fixes. Loads after artistic-batch17. Four scoped groups:
   1 Holiday hero caption cards at 600 to 1023, 2 Home hero stack at 768 to 899,
   3 Holiday chapter galleries and zig-zag stacking, 4 Volunteers chapter width. */

/* ---------- 1. Holiday hero: caption cards move below the stage (600 to 1023 only) ----------
   The stage (arch, polaroids, lockup) is not touched. The two cards stay children of the stage but are
   placed in a row directly under it; the hero reserves the row height with a bottom margin. */
@media(min-width:761px) and (max-width:1023px){
  html.omhm-holiday body.om-mvp #hero{height:870px!important;grid-template-rows:var(--rail) minmax(0,calc(720px - var(--rail))) auto!important}
}
@media(min-width:600px) and (max-width:760px){
  html.omhm-holiday body.om-mvp #hero{height:710px!important;grid-template-rows:var(--rail) minmax(0,calc(560px - var(--rail))) auto!important}
}
@media(min-width:600px) and (max-width:1023px){
  html.omhm-holiday body.om-mvp #hero :is(.hero-meta,.hero-list){position:absolute!important;top:calc(100% + 14px)!important;bottom:auto!important;transform:none!important;max-width:none!important;height:112px;display:flex!important;flex-direction:column;justify-content:center;box-sizing:border-box;margin:0!important;font-size:13px!important}
  html.omhm-holiday body.om-mvp #hero .hero-meta{left:2%!important;right:auto!important;width:calc(50% - 10px)!important}
  html.omhm-holiday body.om-mvp #hero .hero-list{left:calc(50% + 8px)!important;right:auto!important;width:calc(48% - 8px)!important}
}
@media(min-width:600px) and (max-width:679px){
  html.omhm-holiday body.om-mvp #hero{height:782px!important}
  html.omhm-holiday body.om-mvp #hero .hero-meta,html.omhm-holiday body.om-mvp #hero .hero-list{left:2%!important;width:96%!important}
  html.omhm-holiday body.om-mvp #hero .hero-list{top:calc(100% + 136px)!important;height:72px}
}

/* ---------- 2. Home hero stacks at 768 to 899: photo 16/10 full width, card below ---------- */
@media(min-width:768px) and (max-width:899px){
  body.om-mvp .omhm26-root.omhm26-journey-home .journey-home-feature.home-hero-split{grid-template-columns:minmax(0,1fr)!important;min-height:0!important;gap:12px!important}
  body.om-mvp .omhm26-root.omhm26-journey-home .home-hero-media{grid-column:1!important;grid-row:1!important;width:100%!important;height:auto!important;aspect-ratio:16/10!important}
  body.om-mvp .omhm26-root.omhm26-journey-home .home-hero-media .journey-home-video{-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 76%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 76%,transparent 100%)}
  body.om-mvp .omhm26-root.omhm26-journey-home .home-hero-media .journey-home-wordmark{width:min(56%,420px)!important}
  body.om-mvp .omhm26-root.omhm26-journey-home .home-hero-split .home-hero-panel{grid-column:1!important;grid-row:2!important;width:100%!important;max-width:none!important;align-self:stretch;padding:28px 24px!important}
}

/* ---------- 3. Holiday chapter galleries ---------- */
html.omhm-holiday :is(#story-makers,#story-bags,#team,#story-party,#words,#story-raffle,#story-volunteers) .maker-accordion-panel img{object-fit:cover!important;object-position:50% 35%!important}
@media(min-width:600px) and (max-width:1023px){
  html.omhm-holiday :is(#story-makers,#story-bags,#team,#story-party,#words,#story-raffle,#story-volunteers) .maker-accordion-strip{display:flex!important;gap:10px!important;height:auto!important;max-height:none!important;aspect-ratio:auto!important;overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x mandatory;scroll-padding-inline:8px;-webkit-overflow-scrolling:touch;padding:clamp(40px,7vw,72px) 8px 20px!important;align-items:flex-start}
  html.omhm-holiday :is(#story-makers,#story-bags,#team,#story-party,#words,#story-raffle,#story-volunteers) .maker-accordion-strip[hidden]{display:none!important}
  html.omhm-holiday :is(#story-makers,#story-bags,#team,#story-party,#words,#story-raffle,#story-volunteers) .maker-accordion-panel:not([hidden]){display:flex!important;flex-direction:column;flex:0 0 calc(50% - 5px)!important;width:calc(50% - 5px)!important;min-width:0;height:auto!important;aspect-ratio:auto!important;overflow:visible!important;scroll-snap-align:start;transition:none}
  html.omhm-holiday :is(#story-makers,#story-bags,#team,#story-party,#words,#story-raffle,#story-volunteers) .maker-accordion-panel img{width:100%!important;height:auto!important;aspect-ratio:4/5;flex:none}
  html.omhm-holiday :is(#story-makers,#story-bags,#team,#story-party,#words,#story-raffle,#story-volunteers) .maker-accordion-caption{position:static!important;opacity:1!important;width:100%!important;padding:8px 8px!important;margin-top:8px;border-radius:4px;box-sizing:border-box;flex-wrap:wrap;align-items:flex-start}
  html.omhm-holiday :is(#story-makers,#story-bags,#team,#story-party,#words,#story-raffle,#story-volunteers) .maker-accordion-caption>span{overflow:visible!important;text-overflow:clip!important;white-space:normal!important;display:block!important;font-size:13px!important}
  html.omhm-holiday :is(#story-makers,#story-bags,#team,#story-party,#words,#story-raffle,#story-volunteers) .maker-accordion-panel.is-active{outline:3px solid #e72330;outline-offset:2px}
}
@media(max-width:599px){
  html.omhm-holiday :is(#story-makers,#story-bags,#team,#story-party,#words,#story-raffle,#story-volunteers) .maker-accordion-strip{aspect-ratio:4/5!important}
}
/* Under 768 the story-origin photo and text stack: photo first at 4/3. */
@media(max-width:767px){
  html.omhm-holiday #story-origin{grid-template-columns:minmax(0,1fr)!important;gap:20px!important}
  html.omhm-holiday #story-origin .origin-preview-photo{order:-1;width:100%}
  html.omhm-holiday #story-origin .origin-preview-photo img{aspect-ratio:4/3!important;object-fit:cover!important;object-position:50% 35%}
}

/* ---------- 4. Volunteers chapter uses the same width as the other chapters ----------
   The chapter sits in a .story-duet wrapper that adds its own side inset, so the shared width token
   resolved against a narrower box. The wrapper insets are removed for this one chapter. */
html.omhm-holiday .story-duet:has(>#story-volunteers){margin-inline:0!important;padding-inline:0!important;width:100%!important;max-width:none!important}

/* ---------- 5. Embedded checkout fallback link (Phase B flag on): distinguish the link from its sentence ---------- */
body.om-mvp .review-checkout-native a{text-decoration:underline!important;text-underline-offset:3px;font-weight:700}