/* Wedding Presentation step (Page 3) only: hero images + click-to-play video
   previews for Retro Disco / Ultimate Premium. Scoped to
   body.context-wedding .step[data-step="recommendation"] so non-wedding
   journeys and every other step are unaffected. The .presentation-option
   wrapper and empty .youtube-shell exist in the shared markup for every
   journey, but stay visually inert outside the wedding context below. */

/* --- Neutral structural wrapper: identical layout to the previous plain
   .card-grid of <label> children, so non-wedding journeys are unaffected. --- */
.presentation-option { display: flex; flex-direction: column; gap: .55rem; min-width: 0; }
.presentation-option .choice-card { flex: 1; }
.youtube-shell:empty { display: none; }

/* --- Wedding-only hero image + video treatment --- */
body.context-wedding .step[data-step="recommendation"] .presentation-options.card-grid { align-items: start; }
body.context-wedding .step[data-step="recommendation"] [data-presentation-media] img { display: block; width: 100%; height: clamp(280px,42vw,440px); object-fit: contain; object-position: center; border-radius: 11px 11px 0 0; }

/* --- Idle (pre-play) preview: compact row, matching wedding plum/ivory language --- */
body.context-wedding .step[data-step="recommendation"] .youtube-shell { border: 1px solid rgba(113,68,94,.24); border-radius: 12px; background: rgba(127,154,120,.06); overflow: hidden; }
body.context-wedding .step[data-step="recommendation"] .youtube-preview { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .55rem .8rem .55rem .55rem; border: 0; background: transparent; color: #513f49; font-family: inherit; text-align: left; cursor: pointer; }
body.context-wedding .step[data-step="recommendation"] .youtube-preview:hover { background: rgba(127,154,120,.12); }
body.context-wedding .step[data-step="recommendation"] .youtube-preview:focus-visible { outline: 2px solid #52694e; outline-offset: -2px; }
body.context-wedding .step[data-step="recommendation"] .youtube-preview__thumb { position: relative; flex: none; width: 58px; height: 58px; border-radius: 9px; overflow: hidden; background: #17131a; }
body.context-wedding .step[data-step="recommendation"] .youtube-preview__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
body.context-wedding .step[data-step="recommendation"] .youtube-preview__shade { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(25,18,23,.08),rgba(25,18,23,.55)); }
body.context-wedding .step[data-step="recommendation"] .youtube-preview__play { position: absolute; inset: 0; display: grid; place-items: center; padding-left: .1rem; color: #fff; font-size: .8rem; }
body.context-wedding .step[data-step="recommendation"] .youtube-preview__play::before { content: ""; position: absolute; width: 26px; height: 26px; border-radius: 50%; background: #71445e; border: 2px solid rgba(255,255,255,.85); box-shadow: 0 4px 10px rgba(0,0,0,.28); z-index: -1; }
body.context-wedding .step[data-step="recommendation"] .youtube-preview:hover .youtube-preview__play::before,
body.context-wedding .step[data-step="recommendation"] .youtube-preview:focus-visible .youtube-preview__play::before { background: #586044; }
body.context-wedding .step[data-step="recommendation"] .youtube-preview__label { font-size: .82rem; font-weight: 700; letter-spacing: -.01em; color: #513f49; }

/* --- Playing state: the shell grows into the actual embedded player --- */
body.context-wedding .step[data-step="recommendation"] .youtube-shell.is-playing { aspect-ratio: 9/16; max-height: 440px; background: #17131a; }
body.context-wedding .step[data-step="recommendation"] .youtube-embed { display: block; width: 100%; height: 100%; border: 0; }

@media (prefers-reduced-motion: reduce) {
  body.context-wedding .step[data-step="recommendation"] .youtube-preview__play::before { transition: none; }
}

/* Shared presentation component: identical AMPT products and media in every journey. */
.step[data-step="recommendation"] .presentation-options.card-grid { align-items: stretch; }
.step[data-step="recommendation"] .presentation-option { height: 100%; }
.step[data-step="recommendation"] .presentation-option .choice-card { height: 100%; }
.step[data-step="recommendation"] [data-presentation-media] img { display:block; width:100%; height:clamp(280px,42vw,440px); object-fit:contain; object-position:center; border-radius:11px 11px 0 0; }
.step[data-step="recommendation"] .included-hours { display:block; margin-top:.55rem; color:var(--green-soft); font-weight:800; }
body.context-wedding .step[data-step="recommendation"] .presentation-standard-hours { display:none; }
.step[data-step="recommendation"] .youtube-shell { display:block; min-height:76px; border:1px solid var(--border); border-radius:12px; background:rgba(127,127,127,.06); overflow:hidden; }
.step[data-step="recommendation"] .youtube-preview { display:flex; align-items:center; gap:.7rem; width:100%; min-height:76px; padding:.55rem .8rem .55rem .55rem; border:0; background:transparent; color:inherit; text-decoration:none; font-family:inherit; text-align:left; cursor:pointer; }
.step[data-step="recommendation"] .youtube-preview__thumb { position:relative; flex:none; width:58px; height:58px; border-radius:9px; overflow:hidden; background:#17131a; }
.step[data-step="recommendation"] .youtube-preview__thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.step[data-step="recommendation"] .youtube-preview__shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(25,18,23,.08),rgba(25,18,23,.55)); }
.step[data-step="recommendation"] .youtube-preview__play { position:absolute; inset:0; display:grid; place-items:center; color:#fff; }
.step[data-step="recommendation"] .youtube-preview__label { font-size:.82rem; font-weight:800; }
.step[data-step="recommendation"] .youtube-preview:hover { background:rgba(127,127,127,.12); }
.step[data-step="recommendation"] .youtube-preview:focus-visible { outline:2px solid var(--green); outline-offset:-2px; }
.step[data-step="recommendation"] .youtube-shell.is-playing { aspect-ratio:9/16; max-height:440px; min-height:280px; background:#17131a; }
.step[data-step="recommendation"] .youtube-shell.is-playing { position:relative; height:440px; aspect-ratio:auto; }
.step[data-step="recommendation"] .youtube-player { position:absolute; inset:0; display:block; width:100%; height:100%; }
.step[data-step="recommendation"] .presentation-options:has(.is-playing) .presentation-option { height:auto; align-self:start; }
.step[data-step="recommendation"] .presentation-options:has(.is-playing) .choice-card { height:auto; flex:none; }
.step[data-step="recommendation"] .youtube-failure { display:block; padding:0 .8rem .65rem; font-size:.8rem; }
.step[data-step="recommendation"] .youtube-embed { display:block; width:100%; height:100%; border:0; background:#17131a; }
.step[data-step="recommendation"] .youtube-player__loading { position:absolute; z-index:1; inset:0; display:grid; place-items:center; overflow:hidden; background:#17131a; color:#fff; font:800 .82rem/1.2 "Avenir Next",Avenir,Inter,sans-serif; }
.step[data-step="recommendation"] .youtube-player__loading img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.52; }
.step[data-step="recommendation"] .youtube-player__loading::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(17,12,18,.1),rgba(17,12,18,.72)); }
.step[data-step="recommendation"] .youtube-player__loading span { position:relative; z-index:1; padding:.55rem .8rem; border-radius:999px; background:rgba(17,12,18,.82); }
.step[data-step="recommendation"] .youtube-player__close { position:absolute; z-index:2; top:.55rem; right:.55rem; min-height:36px; padding:.35rem .65rem; border:1px solid rgba(255,255,255,.55); border-radius:999px; background:rgba(20,14,20,.84); color:#fff; font:700 .72rem/1 "Avenir Next",Avenir,Inter,sans-serif; cursor:pointer; }
.step[data-step="recommendation"] .youtube-player__close:hover { background:#71445e; }
.step[data-step="recommendation"] .youtube-player__close:focus-visible { outline:2px solid var(--green); outline-offset:2px; }