/* ═══════════════════════════════════════════
   Charlie's Fried Chicken – Our Story (Timeline)
   Editorial vertical timeline: ghosted year, alternating photo,
   right-edge progress rail, per-entry "Read more".
   Hero styles live in about.css (.cfc-about-hero, shared).
   ═══════════════════════════════════════════ */

.cfc-timeline-page {
    --cfc-red: #ff0006;
    --cfc-ink: #141414;
    --cfc-grey: #6b6b6b;
    --cfc-year: #b0b0b0;    /* the big year label — solid grey (not ghosted) */
    --cfc-line: #e4e4e4;
    --cfc-white: #ffffff;
    --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-ink);
    background: var(--cfc-white);
}

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

/* ═══════════════════════════════════════════
   Hero — timeline page only. The banner is made taller via render_hero()'s
   height defaults; here the centered text is dialled down to a smaller, more
   compact block (closer to the reference). Hero base styles live in about.css;
   these scoped rules (`.cfc-timeline-page …`) override just size/spacing.
   ═══════════════════════════════════════════ */
.cfc-timeline-page .cfc-about-hero__content {
    max-width: min(1180px, 92vw);
    padding-block: clamp(2.5rem, 7vw, 5rem);
}
.cfc-timeline-page .cfc-about-hero__eyebrow {
    font-size: 12px;
    letter-spacing: 0.3em;
    margin-bottom: 0.8rem;
    opacity: 0.9;
}
.cfc-timeline-page .cfc-about-hero__title {
    font-size: clamp(2rem, 4.5vw, 3.4rem);
    line-height: 1.04;
    letter-spacing: 0.01em;
    margin-bottom: 0.85rem;
    white-space: nowrap; /* keep the title on one line (desktop); wraps on mobile below */
}
.cfc-timeline-page .cfc-about-hero__subtitle {
    font-size: clamp(14px, 1.4vw, 16px);
    line-height: 1.55;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.92;
}

/* ── Hero title as an image (optional SVG lockup) ──
   Selector is (0,3,0) so it beats every (0,2,0) `…__title` font rule above AND
   the one inside the mobile media query, regardless of source order. The H1
   carries no text node when an image is used, so its type styles are zeroed. */
.cfc-timeline-page .cfc-about-hero .cfc-about-hero__title--img {
    font-size: 0;
    line-height: 0;
    letter-spacing: normal;
    white-space: normal;
    margin-bottom: 1rem;
}

.cfc-timeline-page .cfc-about-hero .cfc-about-hero__title-img {
    display: block;
    width: 100%;
    max-width: 520px;  /* overridden inline by the ACF width field */
    height: auto;      /* keeps the SVG's aspect ratio */
    margin-inline: auto;
}

/* ── Outer frame + centered rail ── */
.cfc-tl {
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
    padding: clamp(3.5rem, 8vw, 7rem) clamp(1.25rem, 5vw, 4rem) clamp(4rem, 9vw, 8rem);
}

/* ── Section title above the milestones ──
   Same lettering as a milestone heading (family, weight, capitals, ink colour)
   so the page reads as one voice, just centered and a step larger since it
   titles the whole run. It sits OUTSIDE .cfc-tl__track, so the rail and its
   dots still start at the first milestone rather than beside this heading. */
.cfc-tl__title {
    font-family: var(--cfc-font-heading);
    font-weight: 800;
    font-size: clamp(1.75rem, 3.6vw, 2.6rem);
    line-height: 1.08;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--cfc-ink);
    text-align: center;
    margin: 0 0 clamp(2rem, 5vw, 3.5rem);
}

/* The track wraps the rail + list so both share ONE positioning box. The rail
   and the per-entry marker dots are therefore measured against the exact same
   left edge and width — they can never drift apart regardless of the outer
   container's padding, a page scrollbar, or theme wrappers around the page. */
.cfc-tl__track {
    position: relative;
}

.cfc-tl__rail {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    background: var(--cfc-line);
    overflow: hidden;
}

.cfc-tl__rail-progress {
    position: absolute;
    inset: 0;
    background: var(--cfc-red);
    transform: scaleY(0);
    transform-origin: top center;
    will-change: transform;
}

/* ── The list ── */
/* !important because content themes commonly indent <ol>/<li> (this theme adds
   a 30px left margin to list elements). Any such indent shifts the entries —
   and their marker dots — off the centered rail, so it must be neutralised. */
.cfc-tl__list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
}

.cfc-tl__list > .cfc-tl-entry {
    margin: 0 !important;
    list-style: none !important;
}
.cfc-tl__list > .cfc-tl-entry::marker {
    content: none;
}

/* ── One milestone ── */
.cfc-tl-entry {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(2.75rem, 6vw, 5.5rem);
    padding: clamp(2rem, 5vw, 4.5rem) 0;
}

/* Image side: default (auto-even) is image LEFT / text RIGHT. */
.cfc-tl-entry--img-left  .cfc-tl-entry__media { order: 1; }
.cfc-tl-entry--img-left  .cfc-tl-entry__text  { order: 2; }
.cfc-tl-entry--img-right .cfc-tl-entry__media { order: 2; }
.cfc-tl-entry--img-right .cfc-tl-entry__text  { order: 1; }

/* ── Marker dot on the right rail ── */
.cfc-tl-entry__marker {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 13px;
    height: 13px;
    margin-top: -6.5px;
    border-radius: 50%;
    background: var(--cfc-white);
    border: 2px solid var(--cfc-red);
    box-shadow: 0 0 0 5px var(--cfc-white); /* punch a gap in the spine behind it */
    transform: translateX(-50%) scale(0.6);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.5s ease;
    z-index: 2;
}

.cfc-tl-entry.is-visible .cfc-tl-entry__marker {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

/* ── Photo ── */
.cfc-tl-entry__media { min-width: 0; }

.cfc-tl-entry__frame {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f2f2f2;
    border-radius: 2px;
}

.cfc-tl-entry__frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.cfc-tl-entry:hover .cfc-tl-entry__frame img {
    transform: scale(1.04);
}

/* ── Text column ── */
.cfc-tl-entry__text {
    min-width: 0;
    position: relative;
    padding-block: 0.5rem;
}

.cfc-tl-entry__year {
    display: block;
    font-family: var(--cfc-font-heading);
    font-weight: 900;
    font-size: clamp(3rem, 7.5vw, 5.5rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--cfc-year);
    margin: 0 0 0.9rem;
    user-select: none;
}

.cfc-tl-entry__heading {
    font-family: var(--cfc-font-heading);
    font-weight: 800;
    font-size: clamp(1.5rem, 3vw, 2.15rem);
    line-height: 1.08;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--cfc-ink);
    margin: 0 0 0.9rem;
}

.cfc-tl-entry__body {
    color: var(--cfc-grey);
    font-size: clamp(0.95rem, 1.15vw, 1.0625rem);
    line-height: 1.72;
    overflow: hidden;
}

.cfc-tl-entry__body p { margin: 0 0 1rem; }
.cfc-tl-entry__body p:last-child { margin-bottom: 0; }

/* Collapsed state: clamp height + fade the cut-off edge. */
.cfc-tl-entry__body.is-collapsible.is-collapsed {
    max-height: 190px;
    -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}

.cfc-tl-entry__body.is-collapsible {
    max-height: 4000px; /* generous open state for the transition */
    transition: max-height 0.5s ease;
}

/* ── Read more toggle ── */
.cfc-tl-entry__more {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    margin-top: 1rem;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cfc-ink);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-bottom: 2px solid var(--cfc-red);
    line-height: 1.4;
    transition: color 0.2s ease, opacity 0.2s ease;
    position: relative;
    /* The theme's button reset sets overflow:hidden, which clipped the 44px
       ::before hit area below back to this button's ~20px box. */
    overflow: visible;
}

/* The label is only ~18px tall but is the primary interaction on this page.
   Padding or min-height would push the red border-bottom away from the text,
   so extend the touch target with an invisible overlay instead — the underline
   stays exactly where it is. */
.cfc-tl-entry__more::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 44px;
}

.cfc-tl-entry__more::after {
    content: '';
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
    transition: transform 0.25s ease;
}

.cfc-tl-entry__more[aria-expanded="true"]::after {
    transform: rotate(-135deg) translateY(-1px);
}

.cfc-tl-entry__more:hover { color: var(--cfc-red); }

/* ── Scroll-in animation ── */
.cfc-tl-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-tl-anim.is-visible {
    opacity: 1;
    transform: none;
}

/* ═══════════════════════════════════════════
   Responsive — stack to a single column with a left rail
   ═══════════════════════════════════════════ */
@media (max-width: 780px) {
    .cfc-tl {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    /* Spine moves to a left gutter. Rail + dots both sit at 0.7rem from the
       track's left edge, so they stay locked together (same as desktop). The
       gutter itself is carved out by indenting each entry's content. */
    .cfc-tl__rail {
        left: 0.7rem;
        transform: translateX(-50%);
    }

    .cfc-tl-entry {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        align-items: start;
        padding-left: 2.25rem;
    }

    /* Photo always above the copy on mobile, regardless of side. */
    .cfc-tl-entry--img-left  .cfc-tl-entry__media,
    .cfc-tl-entry--img-right .cfc-tl-entry__media { order: 1; }
    .cfc-tl-entry--img-left  .cfc-tl-entry__text,
    .cfc-tl-entry--img-right .cfc-tl-entry__text  { order: 2; }

    .cfc-tl-entry__marker {
        top: clamp(2rem, 5vw, 4.5rem);
        left: 0.7rem;
        transform: translateX(-50%) scale(0.6);
        margin-top: 0;
    }

    .cfc-tl-entry.is-visible .cfc-tl-entry__marker {
        transform: translateX(-50%) scale(1);
    }

    .cfc-tl-entry__year { font-size: clamp(2.5rem, 13vw, 4rem); }

    /* DELIBERATE EXCEPTION to the site-wide 40px/900 mobile hero title standard
       (which every other hero still follows via about.css). This page's hero
       title is long, and a fixed 40px never adapted between 320px and 780px —
       so here it scales fluidly instead. Keep about.css's standard as-is; only
       Our Story opts out. Long titles wrap rather than run off-screen. */
    .cfc-timeline-page .cfc-about-hero__title {
        font-size: clamp(1.5rem, 7.5vw, 2.5rem);
        font-weight: 900;
        white-space: normal;
    }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .cfc-tl-anim,
    .cfc-tl-entry__frame img,
    .cfc-tl-entry__marker {
        transition: none;
    }
    .cfc-tl-anim {
        opacity: 1;
        transform: none;
    }
}