/* ═══════════════════════════════════════════
   Charlie's Fried Chicken – About / Our Story
   ═══════════════════════════════════════════ */

.cfc-about-page {
    --cfc-red: #ff0006;
    --cfc-dark-red: #b0001a;
    --cfc-cream: #f5f0eb;
    --cfc-black: #111111;
    --cfc-white: #ffffff;
    --cfc-grey: #4f4f4f;
    --cfc-line: #ececec;
    --cfc-font-heading: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    --cfc-font-body: Arial, 'Helvetica Neue', Helvetica, sans-serif;

    font-family: var(--cfc-font-body);
    color: var(--cfc-black);
    background: var(--cfc-white);
    padding: 0;
}

.cfc-about-page *,
.cfc-about-page *::before,
.cfc-about-page *::after {
    box-sizing: border-box;
}

/* ═══════════════════════════════════════════
   Hero banner (full-bleed, same treatment as the FAQ / menu page)
   ═══════════════════════════════════════════ */
.cfc-about-hero {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    min-height: var(--about-hero-h-desktop, 62vh);
    background-size: cover;
    background-position: center;
    background-color: #1a0606;
    color: var(--about-hero-color, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}

/* ─── Full-screen hero (Our Story only) ───────────────────────────────────
   This hero runs the whole height of the screen rather than the fixed height
   in Charlie's Website → Settings → Hero, so that setting (and this page's own
   height override) no longer drives it.

   A literal 100vh would overshoot the fold: the site header is fixed and the
   body is padded down to clear it, and the page row adds its own padding /
   negative pull on top of that. --about-hero-top is the hero's measured
   distance from the top of the document, published by the inline JS in
   class-charlies-about.php, so the banner ends exactly at the fold whatever
   that offset works out to; the header's own height is the pre-JS fallback.
   svh (not vh) keeps mobile browsers' collapsing toolbars from making the
   section taller than the visible area — same pattern as the homepage hero.

   DESKTOP/TABLET ONLY. Below 720px the hero goes back to the fixed height from
   the hero settings (--about-hero-h-mobile, set per page under Hero) — a
   full-screen banner eats the whole first screen on a phone. 720px is the same
   breakpoint the mobile height rule further down already uses, so the two hand
   over cleanly; the min-width bound is what stops these (0,3,0) selectors from
   beating that (0,1,0) rule.

   Scoped away from .cfc-event-page, which reuses this markup and sets its own
   full-screen height in events.css. */
@media (min-width: 721px) {
    .cfc-about-page:not(.cfc-event-page) .cfc-about-hero {
        min-height: calc(100vh - var(--about-hero-top, var(--cfc-h-height-actual, 96px)));
    }

    @supports (height: 100svh) {
        .cfc-about-page:not(.cfc-event-page) .cfc-about-hero {
            min-height: calc(100svh - var(--about-hero-top, var(--cfc-h-height-actual, 96px)));
        }
    }
}

@media (min-width: 721px) and (max-width: 899px) {
    /* Matches the header's own breakpoint, where its fallback height is 72px. */
    .cfc-about-page:not(.cfc-event-page) .cfc-about-hero {
        min-height: calc(100vh - var(--about-hero-top, var(--cfc-h-height-actual, 72px)));
    }

    @supports (height: 100svh) {
        .cfc-about-page:not(.cfc-event-page) .cfc-about-hero {
            min-height: calc(100svh - var(--about-hero-top, var(--cfc-h-height-actual, 72px)));
        }
    }
}

.cfc-about-hero--noimg {
    background-image:
        radial-gradient(120% 120% at 50% 0%, #ff2a30 0%, var(--cfc-red) 45%, var(--cfc-dark-red) 100%);
}

.cfc-about-hero__overlay {
    position: absolute;
    inset: 0;
    background: var(--about-hero-tint, #000);
    opacity: var(--about-hero-tint-alpha, 0.5);
    z-index: 1;
    pointer-events: none;
}

.cfc-about-hero--noimg .cfc-about-hero__overlay {
    opacity: 0; /* the gradient already provides contrast */
}

/* ─── Background video (Vimeo) — covers the hero like background-size:cover ─── */
.cfc-about-hero__video {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    /* Size container so the iframe below can do its 16:9 cover maths against
       the hero box rather than the viewport. Safe here: the element is
       absolutely positioned with inset:0, so its size is already definite. */
    container-type: size;
}

.cfc-about-hero__video iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    /* Fallback for browsers without container query units. */
    width: 100vw;
    height: 56.25vw;      /* 16:9 based on width */
    min-height: 100vh;
    min-width: 177.78vh;  /* 16:9 based on height — guarantees full cover */
    /* The theme ships a global `iframe { max-width: 100% }`, which clamped the
       cover width back to the container and left the iframe at the container's
       own ratio — the Vimeo player then letterboxed inside it, showing as the
       video "not reaching the bottom" of the hero. Cover REQUIRES overflowing
       one axis, so both caps have to be lifted. */
    max-width: none;
    max-height: none;
    transform: translate(-50%, -50%);
    border: 0;
    pointer-events: none;
}

/* The vh/vw maths above covers the *viewport*, which was right when the hero
   was full-height but wrong now it's a fixed 360px band: min-width:177.78vh
   resolved to ~1500px inside a 390px hero, a 3.8x horizontal crop that left
   only the middle ~26% of the frame visible. cq units cover the hero box
   itself, giving a correct 16:9 cover at any hero height. */
@supports (width: 1cqh) {
    .cfc-about-hero__video iframe {
        width: max(100cqw, 177.78cqh);
        height: max(100cqh, 56.25cqw);
        min-width: 0;
        min-height: 0;
    }
}

.cfc-about-hero__content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    width: 100%;
    padding: clamp(3rem, 8vw, 6rem) 1.5rem;
}

.cfc-about-hero__eyebrow,
.cfc-about-hero__title,
.cfc-about-hero__subtitle {
    color: var(--about-hero-color, #fff) !important;
}

.cfc-about-hero__eyebrow {
    display: inline-block;
    font-size: clamp(12px, 1.4vw, 15px);
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    margin-bottom: 1.1rem;
    opacity: 0.92;
    line-height: 1.4;
    animation: cfcAboutHeroIn 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.05s both;
}

.cfc-about-hero__title {
    font-family: var(--cfc-font-heading);
    font-size: clamp(2.75rem, 8vw, 6rem);
    font-weight: 900;
    line-height: 0.92;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    margin: 0;
    overflow-wrap: anywhere;
    animation: cfcAboutHeroIn 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.18s both;
}

.cfc-about-hero__subtitle {
    margin: 1.15rem auto 0;
    max-width: 640px;
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    font-weight: 500;
    line-height: 1.5;
    opacity: 0.95;
    animation: cfcAboutHeroIn 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.34s both;
}

.cfc-about-hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1.7rem;
    padding: 0.85rem 2rem;
    background: #fff;
    color: #111 !important;
    border-radius: 999px;
    font-family: var(--cfc-font-body);
    font-weight: 700;
    font-size: clamp(0.9rem, 1.4vw, 1rem);
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: transform 0.18s ease, filter 0.18s ease, background 0.18s ease, color 0.18s ease;
    animation: cfcAboutHeroIn 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.5s both;
}

.cfc-about-hero__cta:hover {
    transform: translateY(-2px);
    background: var(--cfc-red);
    color: #fff !important;
}

.cfc-about-hero__cta:active {
    transform: translateY(0);
    filter: brightness(0.96);
}

@keyframes cfcAboutHeroIn {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: var(--about-in-op, 1); transform: translateY(0); }
}

.cfc-about-hero__eyebrow  { --about-in-op: 0.92; }
.cfc-about-hero__subtitle { --about-in-op: 0.95; }

/* ═══════════════════════════════════════════
   Story rows — 50/50 split, alternating
   ═══════════════════════════════════════════ */
.cfc-about__inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: clamp(3rem, 7vw, 6rem) 1.25rem clamp(4rem, 9vw, 8rem);
    display: flex;
    flex-direction: column;
    gap: clamp(3.5rem, 8vw, 7rem);
}

.cfc-about-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(1.75rem, 5vw, 4.5rem);
}

/* Let the fanned deck + its shadow overflow freely (esp. downward) so it
   overlays neighbouring content instead of being cut by the column box. We
   still clip the horizontal axis so a flicked-away photo can't push the page
   into a horizontal scroll — with generous margin so the fan still peeks out. */
.cfc-about-row__media {
    overflow-x: clip;
    overflow-y: visible;
    overflow-clip-margin: 4rem;
}

/* Image side. Default markup order is media-then-text, which is image-left.
   For image-right rows we flip the media column to the end. */
.cfc-about-row--img-right .cfc-about-row__media {
    order: 2;
}
.cfc-about-row--img-right .cfc-about-row__text {
    order: 1;
}

/* ─── Text column ─── */
.cfc-about-row__heading {
    font-family: var(--cfc-font-heading);
    font-size: clamp(1.75rem, 3.4vw, 2.85rem);
    font-weight: 900;
    line-height: 1.02;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    margin: 0 0 1.1rem;
    color: var(--cfc-black);
}

.cfc-about-row__body {
    font-size: clamp(1rem, 1.25vw, 1.1rem);
    line-height: 1.7;
    color: var(--cfc-grey);
}

.cfc-about-row__body p {
    margin: 0 0 1rem;
}
.cfc-about-row__body p:last-child {
    margin-bottom: 0;
}

/* ═══════════════════════════════════════════
   Carousel — fanned 3D photo stack
   ═══════════════════════════════════════════ */
.cfc-about-slider {
    position: relative;
    width: 100%;
    /* Breathing room so fanned/rotated cards peek out without being clipped. */
    padding: 5% 7% 8% 5%;
    perspective: 1400px;
}

/* The stage — reserves height and hosts the absolutely-stacked cards. */
.cfc-about-slider__track {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    transform-style: preserve-3d;
}

/* Each photo is a card in the deck. JS assigns its transform by stack depth. */
.cfc-about-slider__slide {
    position: absolute;
    inset: 0;
    border-radius: 16px;
    overflow: hidden;
    background: #efeae4;
    box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.5);
    transform-origin: 50% 60%;
    transition: transform 0.55s cubic-bezier(0.22, 0.68, 0.24, 1),
                opacity 0.4s ease;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* Single-image rows: no deck, just a flat card. */
.cfc-about-slider.is-single {
    padding: 0;
    perspective: none;
}
.cfc-about-slider.is-single .cfc-about-slider__slide {
    box-shadow: none;
    transform: none;
}

.cfc-about-slider__slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ─── Nav arrows ─── */
.cfc-about-slider__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 30;
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    color: var(--cfc-black);
    cursor: pointer;
    box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.55);
    transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
    opacity: 1; /* always visible */
}

.cfc-about-slider__nav svg {
    width: 30px;
    height: 30px;
}

.cfc-about-slider__nav:hover {
    background: var(--cfc-red);
    color: #fff;
}

.cfc-about-slider__nav:active {
    transform: translateY(-50%) scale(0.94);
}

.cfc-about-slider__nav--prev { left: 16px; }
.cfc-about-slider__nav--next { right: 16px; }

/* ─── Dots ─── */
.cfc-about-slider__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: flex;
    justify-content: center;
    gap: 9px;
}

.cfc-about-slider__dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.22);
    cursor: pointer;
    transition: background 0.16s ease, transform 0.16s ease;
}

.cfc-about-slider__dot.is-active {
    background: var(--cfc-red);
    transform: scale(1.3);
}

.cfc-about-slider__dot:hover {
    background: rgba(0, 0, 0, 0.45);
}

/* ═══════════════════════════════════════════
   Scroll-in animation
   ═══════════════════════════════════════════ */
.cfc-about-anim {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
                transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.cfc-about-anim.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ═══════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════ */
@media (max-width: 860px) {
    .cfc-about-row {
        grid-template-columns: 1fr;
        gap: clamp(1.5rem, 5vw, 2.25rem);
    }
    /* On mobile always stack image above text, regardless of side. */
    .cfc-about-row--img-right .cfc-about-row__media,
    .cfc-about-row__media { order: 1; }
    .cfc-about-row--img-right .cfc-about-row__text,
    .cfc-about-row__text { order: 2; }

    /* Slightly smaller arrows on narrow screens so they don't crowd the image */
    .cfc-about-slider__nav { width: 50px; height: 50px; }
    .cfc-about-slider__nav svg { width: 26px; height: 26px; }
    .cfc-about-slider__nav--prev { left: 10px; }
    .cfc-about-slider__nav--next { right: 10px; }
}

@media (max-width: 720px) {
    .cfc-about-hero {
        min-height: var(--about-hero-h-mobile, 360px);
    }
    /* Site-wide mobile hero title standard: 40px / 900. The base clamp floors
       at 2.75rem (44px) here, which made /events the odd one out against
       /faqs, /contact, /our-location and /menu. */
    .cfc-about-hero__title {
        font-size: 40px;
        font-weight: 900;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cfc-about-hero__eyebrow,
    .cfc-about-hero__title,
    .cfc-about-hero__subtitle,
    .cfc-about-hero__cta {
        animation: none !important;
    }
    .cfc-about-anim {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .cfc-about-slider__slide {
        transition: none;
    }
}