/* ============================================================
   Brand film showcase — the enamelware + spice-market container
   for assets/videos/myroyalchef-ad.mp4.

   House rules honoured here (see AGENTS.md § design overhaul):
   - no italic accent word, no Georgia, no mono "tech" labels, no tracked
     all-caps eyebrows (the eyebrow is a coloured dot + plain label);
   - hard-edged "enamel offset" shadows instead of soft glows;
   - display type is Bricolage Grotesque (--font-display), body Figtree.
   ============================================================ */

.mrc-promo {
    --promo-enamel: var(--tomato);
    --promo-enamel-deep: var(--tomato-deep);
    --promo-offset: 6px;
    display: grid;
    gap: var(--space-6, 1.75rem);
    padding: var(--space-7, 2.25rem);
    background: var(--bg-secondary);
    border: 2px solid var(--ink-deep);
    border-radius: var(--radius-2xl);
    box-shadow: var(--promo-offset) var(--promo-offset) 0 var(--ink-deep);
}

/* ---------------------------------------------------------
   Variants
   --------------------------------------------------------- */

/* Landing page: full width of the page grid, copy above the film. */
.mrc-promo--hero {
    grid-template-columns: minmax(0, 1fr);
    padding: clamp(1.5rem, 3vw, 2.5rem);
}

/* Secondary pages: copy sits beside the film on wide screens. */
.mrc-promo--panel {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
}

.mrc-promo--panel .mrc-promo-copy {
    position: sticky;
    top: var(--space-5, 1.5rem);
}

/* Denser placement where the page already has a lot going on. */
.mrc-promo--compact {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-5, 1.5rem);
    box-shadow: 4px 4px 0 var(--ink-deep);
}

.mrc-promo--compact .mrc-promo-copy {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2, 0.5rem);
}

/* Different enamel families so repeated embeds on one page stay distinct. */
.mrc-promo--leaf { --promo-enamel: var(--leaf); --promo-enamel-deep: var(--leaf-deep); }
.mrc-promo--saffron { --promo-enamel: var(--saffron); --promo-enamel-deep: var(--saffron-deep); }
.mrc-promo--blueberry { --promo-enamel: var(--blueberry); --promo-enamel-deep: var(--blueberry-deep); }
.mrc-promo--aubergine { --promo-enamel: var(--aubergine); --promo-enamel-deep: var(--aubergine-deep); }
.mrc-promo--teal { --promo-enamel: var(--teal); --promo-enamel-deep: var(--teal-deep); }
.mrc-promo--rose { --promo-enamel: var(--rose); --promo-enamel-deep: var(--rose-deep); }

/* ---------------------------------------------------------
   Copy
   --------------------------------------------------------- */

.mrc-promo-copy {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 0.75rem);
    min-width: 0;
}

.mrc-promo-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-secondary);
}

/* The eyebrow is a coloured dot + plain label — never tracked all-caps. */
.mrc-promo-dot {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    background: var(--promo-enamel);
    box-shadow: 0 0 0 3px var(--promo-enamel-soft, var(--saffron-soft));
}

.mrc-promo-heading {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--ink-deep);
    font-size: clamp(1.6rem, 3.4vw, 2.6rem);
}

.mrc-promo--compact .mrc-promo-heading {
    font-size: clamp(1.3rem, 2.4vw, 1.8rem);
}

.mrc-promo-lede {
    margin: 0;
    max-width: 56ch;
    font-size: 1.06rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.mrc-promo-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted);
}

.mrc-promo-skip {
    align-self: flex-start;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--teal);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.mrc-promo-skip:hover { color: var(--teal-deep); }

.mrc-promo-skip:focus-visible,
.mrc-promo-chapter:focus-visible,
.mrc-promo-play:focus-visible,
.mrc-promo-mute:focus-visible,
.mrc-promo-transcript summary:focus-visible {
    outline: 3px solid var(--promo-enamel);
    outline-offset: 3px;
}

/* ---------------------------------------------------------
   Stage + player
   --------------------------------------------------------- */

.mrc-promo-stage {
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 1rem);
    min-width: 0;
}

.mrc-promo-frame {
    position: relative;
    overflow: hidden;
    background: var(--ink-deep);
    border: 2px solid var(--ink-deep);
    border-radius: var(--radius-xl);
    aspect-ratio: 16 / 9;
}

/* Poster is the LCP element; the video sits exactly on top of it. The native
   control bar stays hidden until the film is actually running — before that
   the only affordances are the big play sticker and the chapter rail, which
   keeps the poster clean and stops a dead 0:00 bar from inviting clicks. */
.mrc-promo-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--ink-deep);
}

/* No controls until the user has started the film. */
.mrc-promo:not(.is-playing) .mrc-promo-video::-webkit-media-controls,
.mrc-promo:not(.is-playing) .mrc-promo-video::-webkit-media-controls-enclosure {
    opacity: 0;
    pointer-events: none;
}

/* The play affordance is an inked sticker, matching the market buttons.
   A gentle scrim sits under the disc so it stays legible over both the pale
   poster and the dark end card. */
.mrc-promo-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3, 0.75rem);
    margin: auto;
    width: 100%;
    height: 100%;
    padding: 0;
    color: var(--ink-deep);
    background:
        radial-gradient(circle at center, rgba(11, 27, 30, 0.28) 0%, rgba(11, 27, 30, 0.12) 32%, rgba(11, 27, 30, 0) 62%);
    border: 0;
    cursor: pointer;
    --promo-disc: var(--promo-enamel);
}

.mrc-promo-play-disc {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(64px, 12vw, 96px);
    height: clamp(64px, 12vw, 96px);
    border-radius: var(--radius-full);
    background: var(--promo-disc);
    border: 3px solid var(--ink-deep);
    box-shadow: 4px 4px 0 var(--ink-deep);
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.mrc-promo-play-disc svg { margin-left: 4px; }

.mrc-promo-play-label {
    position: absolute;
    bottom: clamp(1rem, 3%, 1.75rem);
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 14px;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--bg-secondary);
    background: rgba(11, 27, 30, 0.86);
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.mrc-promo-play:hover .mrc-promo-play-disc {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--ink-deep);
}

.mrc-promo-play:active .mrc-promo-play-disc {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--ink-deep);
}

/* Once playing, the big sticker retires and the native controls take over. */
.mrc-promo.is-playing .mrc-promo-play {
    pointer-events: none;
    opacity: 0;
}

.mrc-promo-mute {
    position: absolute;
    top: var(--space-3, 0.75rem);
    right: var(--space-3, 0.75rem);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    color: var(--ink-deep);
    background: var(--bg-secondary);
    border: 2px solid var(--ink-deep);
    border-radius: var(--radius-full);
    box-shadow: 3px 3px 0 var(--ink-deep);
    cursor: pointer;
}

.mrc-promo-mute[hidden] { display: none; }

.mrc-promo-mute .mrc-icon-sound { display: none; }
.mrc-promo-mute[aria-pressed="true"] .mrc-icon-sound { display: block; }
.mrc-promo-mute[aria-pressed="true"] .mrc-icon-muted { display: none; }

.mrc-promo-noscript,
.mrc-promo-missing {
    position: absolute;
    inset: auto 0 0 0;
    margin: 0;
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    font-size: 0.92rem;
    color: var(--bg-secondary);
    background: rgba(11, 27, 30, 0.92);
}

.mrc-promo-missing a,
.mrc-promo-noscript a { color: var(--saffron); }

/* ---------------------------------------------------------
   Chapter timeline
   --------------------------------------------------------- */

.mrc-promo-timeline {
    display: grid;
    /* Eight chapters: four columns gives two balanced rows. auto-fit would
       land on six columns at desktop width and leave an orphan row of two. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-2, 0.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (max-width: 1000px) {
    .mrc-promo-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The panel variant is half-width, so its chapter rail needs fewer columns
   or the labels wrap into unreadable slivers. */
.mrc-promo--panel .mrc-promo-timeline,
.mrc-promo--compact .mrc-promo-timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Wider screens keep the copy beside the film and the rail under it. */
@media (min-width: 1100px) {
    .mrc-promo--panel .mrc-promo-stage {
        grid-column: 2;
    }
}

/* The rail the chapter dots sit on — a spice-market shelf edge. */
.mrc-promo-chapter {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2, 0.5rem);
    width: 100%;
    padding: var(--space-3, 0.75rem);
    text-align: left;
    background: var(--bg-primary);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease;
}

.mrc-promo-chapter:hover {
    border-color: var(--promo-enamel);
    transform: translateY(-2px);
}

.mrc-promo-chapter.is-active {
    background: var(--promo-enamel);
    border-color: var(--ink-deep);
    box-shadow: 3px 3px 0 var(--ink-deep);
}

.mrc-promo-chapter-time {
    flex: 0 0 auto;
    padding: 2px 8px;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ink-deep);
    background: var(--bg-tertiary);
    border-radius: var(--radius-full);
}

.mrc-promo-chapter.is-active .mrc-promo-chapter-time {
    background: var(--bg-secondary);
}

.mrc-promo-chapter-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mrc-promo-chapter-text strong {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--ink-deep);
    text-wrap: balance;
}

.mrc-promo-chapter-text em {
    font-style: normal;
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--text-secondary);
}

.mrc-promo-chapter.is-active .mrc-promo-chapter-text em {
    color: var(--ink-deep);
}

/* ---------------------------------------------------------
   Transcript
   --------------------------------------------------------- */

.mrc-promo-transcript {
    grid-column: 1 / -1;
    border-top: 2px solid var(--border);
    padding-top: var(--space-3, 0.75rem);
}

.mrc-promo-transcript summary {
    display: inline-block;
    font-weight: 700;
    color: var(--teal);
    cursor: pointer;
}

.mrc-promo-transcript summary::marker { color: var(--promo-enamel); }

.mrc-promo-transcript-body {
    display: grid;
    gap: var(--space-3, 0.75rem);
    max-width: 78ch;
    margin-top: var(--space-3, 0.75rem);
    font-size: 0.98rem;
    line-height: 1.62;
    color: var(--text-secondary);
}

.mrc-promo-transcript-body p { margin: 0; }

.mrc-promo-transcript-body strong { color: var(--ink-deep); }

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 900px) {
    .mrc-promo--panel {
        grid-template-columns: minmax(0, 1fr);
    }

    .mrc-promo--panel .mrc-promo-copy { position: static; }
}

@media (max-width: 560px) {
    .mrc-promo {
        --promo-offset: 4px;
        padding: var(--space-4, 1rem);
        border-radius: var(--radius-lg);
    }

    .mrc-promo-timeline {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mrc-promo-play-disc,
    .mrc-promo-chapter {
        transition: none;
    }

    .mrc-promo-chapter:hover { transform: none; }
    .mrc-promo-play:hover .mrc-promo-play-disc {
        transform: none;
        box-shadow: 4px 4px 0 var(--ink-deep);
    }
}
/* ---------------------------------------------------------
   Page slots
   --------------------------------------------------------- */

/* The page-level wrappers exist only to space the shared block inside a
   container that already owns its own padding. */
.download-promo-slot,
.pricing-promo-slot,
.about-page .public-section .mrc-promo {
    margin-block: clamp(1.5rem, 3vw, 2.5rem);
}

/* Landing page. The block sits directly under the saffron hero, so it needs
   real breathing room on BOTH sides: without it the container's 2px ink border
   and its 6px enamel offset visually merge into the hero's own bottom rule and
   the two blocks read as one shape. The top pad also clears the offset's
   drop shadow, which would otherwise sit on top of the hero band.
   The rhythm matches .hm-head so the page keeps one spacing scale. */
.home-promo-slot {
    padding-top: clamp(2.6rem, 6vw, 5rem);
    padding-bottom: clamp(1.5rem, 4vw, 3rem);
}

.about-page .public-section .mrc-promo {
    padding-inline: 0;
    border-inline: 0;
    border-radius: 0;
    box-shadow: none;
    border-top: 2px solid var(--border);
    padding-top: var(--space-6, 1.75rem);
}