/* Full-width venue-style photo strip — Editorial Earth */
html body.editorial-page .ffw-photo-strip-full {
    /* Break out of the editorial column and span the full viewport. */
    width: 100vw;
    max-width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0;                  /* no padding between images */
    padding: 0;
    margin-top: 0;
    margin-bottom: 48px;
}
html body.editorial-page .ffw-photo-strip-full > img {
    width: 100%;
    height: 280px;            /* venue-page parity */
    object-fit: cover;
    display: block;
    margin: 0;
    border-radius: 0;
}
@media (max-width: 768px) {
    html body.editorial-page .ffw-photo-strip-full > img {
        height: 220px;
    }
}
@media (max-width: 480px) {
    html body.editorial-page .ffw-photo-strip-full {
        grid-template-columns: repeat(2, 1fr);
    }
    html body.editorial-page .ffw-photo-strip-full > img {
        height: 180px;
    }
}

/* Pick-a-date: tighten bottom padding/margin so cards don't sit in a sea
   of whitespace before the next section. Overrides the prior rule that
   shipped from contrast-guardrail (32px top + 32px bottom = 64px gap). */
html body .ffw-pick-a-date-section {
    padding-top: 32px !important;
    padding-bottom: 8px !important;
    margin-top: 32px !important;
    margin-bottom: 16px !important;
}

/* Class/venue hero image — force fill the container regardless of inline style.
   Earlier images displayed at natural size leaving paper-warm bars top and
   bottom. Lock the img to absolutely fill its container with cover crop. */
html body.editorial-page .class-hero-image,
html body.editorial-page .venue-hero-image {
    aspect-ratio: 4 / 5 !important;
    overflow: hidden !important;
    background: var(--paper-deep) !important;
    display: block !important;
    position: relative !important;
}
html body.editorial-page .class-hero-image > img,
html body.editorial-page .class-hero-image .ffw-class-hero-img,
html body.editorial-page .venue-hero-image > img,
html body.editorial-page .venue-hero-image .ffw-venue-hero-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 0 !important;
    max-height: none !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Class quick-facts bar — full editorial column width, centred contents.
   Earlier the bar was narrower than the surrounding content and had a stray
   top rule above it. Match the 1320px column width and clear any sibling
   border-bottom that was bleeding into the bar from .class-hero. */
html body.editorial-page .class-hero {
    border-bottom: 0 !important;
}
html body .ffw-class-quick-facts,
html body .class-quick-facts {
    max-width: 1320px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 20px 32px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-around !important;
    align-items: center !important;
    gap: 24px !important;
    box-sizing: border-box !important;
    border-top: 0 !important;
}
html body .ffw-class-quick-facts .quick-fact,
html body .class-quick-facts .quick-fact {
    text-align: center !important;
    min-width: 120px !important;
    flex: 0 1 auto !important;
}
@media (max-width: 768px) {
    html body .ffw-class-quick-facts,
    html body .class-quick-facts {
        padding: 16px 20px !important;
        gap: 18px !important;
    }
}

/* Pick-a-date venue cards — let cards size to their content. The Rezdy iframe
   is much taller than what its booking form actually renders, so the cards
   were ending in a sea of paper-warm whitespace. Drop the min-height across
   the card + inner panels and shrink the iframe to the form's real footprint
   (~460px). Card itself gets a small uniform inner padding. */
html body .ffw-venue-card {
    padding-bottom: 12px !important;
    min-height: 0 !important;
    height: auto !important;
}
html body .ffw-venue-card .ffw-venue-card-widget,
html body .ffw-venue-card .ffw-venue-card-coming,
html body .ffw-venue-card .ffw-venue-card-enquiry {
    min-height: 0 !important;
    padding-bottom: 12px !important;
    flex-grow: 0 !important;
}
html body .ffw-venue-card .ffw-venue-card-widget iframe {
    min-height: 460px !important;
    height: 460px !important;
}

/* "On the bench / The menu" section — paper-warm cards in a 4-column grid
   sized to mirror the cheese-page layout Jackie referenced. */
html body .ffw-class-menu-section,
html body .ffw-class-ticket-section {
    max-width: 1320px !important;
    margin: 32px auto !important;
    padding: 32px 24px !important;
}
html body .ffw-class-menu-grid,
html body .ffw-class-ticket-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
    margin-top: 32px !important;
}
@media (max-width: 1100px) {
    html body .ffw-class-menu-grid,
    html body .ffw-class-ticket-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 600px) {
    html body .ffw-class-menu-grid,
    html body .ffw-class-ticket-grid {
        grid-template-columns: 1fr !important;
    }
}
html body .ffw-class-menu-card,
html body .ffw-class-ticket-card {
    background: var(--paper-warm, #ede4d2) !important;
    padding: 24px 20px !important;
    border-left: 3px solid var(--terracotta-text, #9a4827) !important;
    color: var(--ink, #2a1f15) !important;
}
html body .ffw-class-menu-card h3,
html body .ffw-class-ticket-card h3 {
    font-family: Fraunces, serif !important;
    font-weight: 500 !important;
    font-size: 20px !important;
    color: var(--olive-deep, #3d4a2a) !important;
    margin: 0 0 10px 0 !important;
    line-height: 1.25 !important;
}
html body .ffw-class-menu-card p,
html body .ffw-class-ticket-card p {
    font-family: Fraunces, serif !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    color: var(--ink, #2a1f15) !important;
    margin: 0 !important;
}
html body .ffw-ticket-glyph {
    display: inline-block !important;
    font-size: 22px !important;
    color: var(--terracotta-text, #9a4827) !important;
    margin-bottom: 8px !important;
    line-height: 1 !important;
}

/* Hero / CTA / page-hero buttons — keep side-by-side on desktop, stack only
   on mobile. Apply to all hero-actions wrappers sitewide. */
html body .hero-actions,
html body section.cta-strip .hero-actions,
html body section.hero .hero-actions,
html body section.page-hero .hero-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 16px !important;
    margin-top: 16px !important;
}
@media (max-width: 540px) {
    html body .hero-actions,
    html body section.cta-strip .hero-actions,
    html body section.hero .hero-actions,
    html body section.page-hero .hero-actions {
        flex-direction: column !important;
    }
}
html body .hero-actions .btn-primary,
html body .hero-actions .btn-secondary {
    flex: 0 0 auto !important;
    margin: 0 !important;
}

/* Sitewide — halve the vertical spacing between sections. The base Editorial
   Earth design used --s-9 / --s-10 token padding which renders as ~80-96px
   between sections. Cut that in roughly half so pages read tighter. */
html body.editorial-page main > section {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
html body.editorial-page main > section.hero,
html body.editorial-page main > section.page-hero,
html body.editorial-page main > section.class-hero {
    padding-top: 48px !important;
    padding-bottom: 32px !important;
}
html body.editorial-page main > section.cta-strip {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
}
/* Inner content wrappers shouldn't add extra margin */
html body.editorial-page section > .section-inner,
html body.editorial-page section > .surface-inner,
html body.editorial-page section > div:first-child {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* FAQ sitewide — left-justify questions (not centred or full-width), and
   constrain the FAQ block to the 1320px menu column for visual parity with
   the rest of the editorial layout. */
html body .faq-list { max-width: 1320px !important; margin-left: auto !important; margin-right: auto !important; }
html body .faq-list .faq-item { max-width: 1320px !important; margin-left: auto !important; margin-right: auto !important; }
html body details.faq-item > summary,
html body .faq-item > summary,
html body .faq-item .faq-question {
    text-align: left !important;
    justify-content: flex-start !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}
html body section.faq-section { max-width: 1320px !important; margin-left: auto !important; margin-right: auto !important; }

/* Editorial column max-width safety — every main section sits inside the
   1320px column unless it explicitly opts out via .ffw-photo-strip-full or
   .surface-full. This restores the rule that recently went missing. */
html body.editorial-page main > section:not(.surface-full):not(.cta-strip):not(.hero):not(.page-hero):not(.intro-band):not(.surface-olive-deep) {
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
/* Full-width photo strips on venue + class pages keep their viewport-wide
   layout — explicit override against the above. */
html body.editorial-page .ffw-photo-strip-full,
html body.editorial-page .ffw-photo-strip {
    max-width: 100vw !important;
}

/* /cookbooks/ — make the entire 2:3 cover visible (contain, not cover) and
   give the Buy on Amazon + "Or shop here" links proper button styling that
   matches the site button system. */
html body .cookbook-card .cookbook-card-image { aspect-ratio: 2 / 3 !important; overflow: hidden !important; background: var(--paper-warm, #ede4d2) !important; display: flex !important; align-items: center !important; justify-content: center !important; }
html body .cookbook-card .cookbook-card-image img { max-width: 100% !important; max-height: 100% !important; width: auto !important; height: auto !important; object-fit: contain !important; display: block !important; }
html body .cookbook-card .feature-card-cta { display: flex !important; flex-direction: column !important; gap: 10px !important; align-items: stretch !important; padding-top: 8px !important; }
html body .cookbook-card .feature-card-cta a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    padding: 12px 20px !important;
    font-family: "Inter", sans-serif !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    border: 1px solid var(--terracotta-text, #9a4827) !important;
    border-radius: 2px !important;
    transition: all 0.18s ease !important;
}
html body .cookbook-card .feature-card-cta a:first-child {
    background: var(--terracotta-text, #9a4827) !important;
    color: var(--paper, #f5efe4) !important;
}
html body .cookbook-card .feature-card-cta a:first-child:hover {
    background: var(--terracotta, #b85c38) !important;
    border-color: var(--terracotta, #b85c38) !important;
}
html body .cookbook-card .feature-card-cta a:last-child {
    background: transparent !important;
    color: var(--terracotta-text, #9a4827) !important;
}
html body .cookbook-card .feature-card-cta a:last-child:hover {
    background: var(--paper-warm, #ede4d2) !important;
}

/* Venue-page class rows (.ffw-venue-class-row) — stop the Rezdy mini widget
   from being squeezed into a too-narrow column. Force vertical stack with
   maximum specificity to override the inline-style grid-template-columns
   that the theme/content injects at higher specificity. */
html body.editorial-page section .ffw-venue-class-row,
html body .ffw-venue-class-row,
html body.editorial-page .ffw-venue-class-row {
    display: block !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding: 24px !important;
    align-items: stretch !important;
}
html body .ffw-venue-class-row > * {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
}
html body .ffw-venue-class-row .ffw-class-info,
html body .ffw-venue-class-row .ffw-class-info * {
    width: 100% !important;
    max-width: 100% !important;
}
html body .ffw-venue-class-row .ffw-mini-widget {
    background: var(--paper, #f5efe4) !important;
    padding: 12px !important;
    border: 1px solid rgba(42, 31, 21, 0.18) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 16px !important;
}
html body .ffw-venue-class-row .ffw-mini-widget iframe {
    width: 100% !important;
    height: 620px !important;
    min-height: 620px !important;
    border: 0 !important;
    display: block !important;
}
/* Constrain max-width on venue class rows so the row itself + any inner CTA
   button don't stretch the full viewport edge-to-edge. */
html body .ffw-venue-class-row,
html body section .ffw-venue-class-row {
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
html body .ffw-venue-class-row a.btn-primary,
html body .ffw-venue-class-row a.btn-secondary,
html body .ffw-venue-class-row .ffw-mini-widget a {
    max-width: 320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
/* Centre the AVAILABLE NOW / CORPORATE ENQUIRY style mini-widget content */
html body .ffw-venue-class-row .ffw-mini-widget {
    max-width: 380px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
/* Mobile-friendly responsive media query override too */
@media (min-width: 900px) {
    html body .ffw-venue-class-row {
        grid-template-columns: 1fr !important;
        display: block !important;
    }
}

/* Inclusive Experiences page — sensory section single-column + venue access
   cards rendered as a responsive card grid (was a vertical text list). */
html body .sensory-grid {
    display: block !important;
    max-width: 880px !important;
    margin: 0 auto !important;
}
html body .sensory-copy {
    width: 100% !important;
    max-width: 100% !important;
}
html body .sensory-copy p {
    margin-bottom: 16px !important;
}

html body .venue-access-cards {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 20px !important;
    max-width: 1320px !important;
    margin: 24px auto 0 !important;
}
html body .venue-access-card {
    background: var(--paper-warm, #ede4d2) !important;
    border-left: 3px solid var(--terracotta-text, #9a4827) !important;
    padding: 24px 22px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}
html body .venue-access-card h3 {
    font-family: Fraunces, serif !important;
    font-weight: 500 !important;
    font-size: 20px !important;
    color: var(--olive-deep, #3d4a2a) !important;
    margin: 0 0 12px !important;
    line-height: 1.25 !important;
}
html body .venue-access-card h3 a {
    color: inherit !important;
    text-decoration: none !important;
}
html body .venue-access-card p {
    font-family: Fraunces, serif !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    color: var(--ink, #2a1f15) !important;
    margin: 0 0 12px !important;
}
html body .venue-access-card .venue-access-link a {
    font-family: Inter, sans-serif !important;
    font-size: 12px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--terracotta-text, #9a4827) !important;
    text-decoration: none !important;
}

/* cta-strip buttons — fix the green-on-green hover state. The cta-strip sits
   on olive-deep, so on hover the .btn-secondary was inheriting an olive bg
   while the text colour was also resolving to olive (via inherit + cascade
   collision). Lock both buttons to terracotta-text bg + paper text in the
   resting AND hover states. */
html body section.cta-strip .btn-primary,
html body section.cta-strip .btn-secondary,
html body section.cta-strip a.btn-primary,
html body section.cta-strip a.btn-secondary {
    background: var(--terracotta-text, #9a4827) !important;
    color: var(--paper, #f5efe4) !important;
    border: 1px solid var(--terracotta-text, #9a4827) !important;
}
html body section.cta-strip .btn-primary:hover,
html body section.cta-strip .btn-secondary:hover,
html body section.cta-strip a.btn-primary:hover,
html body section.cta-strip a.btn-secondary:hover,
html body section.cta-strip .btn-primary:focus-visible,
html body section.cta-strip .btn-secondary:focus-visible,
html body section.cta-strip a.btn-primary:focus-visible,
html body section.cta-strip a.btn-secondary:focus-visible {
    background: var(--terracotta, #b85c38) !important;
    color: var(--paper, #f5efe4) !important;
    border-color: var(--terracotta, #b85c38) !important;
}