/* ============================================================================
   COMPANY HISTORY PAGE
   ----------------------------------------------------------------------------
   Mirrors Figma "company history" page (file L89Kb9yFgtxnrAS5kntqwp,
   node 2015:185, canvas 1920×5676).
   Sections, top-down:
     1. Photo strip (4 images, full bleed, Figma y=326-685)
     2. Intro row — title (left) + p1 (right)        Figma y=715-1041
     3. Blue band — long body + 100 graphic           Figma y=1093-1723
     4. Dateline — 6 era buttons + 4 sub-labels       Figma y=1491-1690
     5. Timeline — 2 cols + photos in middle gutter   Figma y=1788-5067
   ============================================================================ */

/* --- 1. Photo strip ------------------------------------------------------- */
/* Figma: 4 photos flush across canvas — widths 515/580/473/334, all height 359,
   6-7px gaps, full bleed left and right. ~48px breathing room from nav above. */
.kae-hist__photos {
  display: grid;
  grid-template-columns: 515fr 580fr 473fr 334fr;
  gap: 6px;                                                             /* Figma: 6-7px gaps between photos */
  width: 100%;
  margin: 0;
  padding-top: clamp(4rem, 3rem + 3vw, 7.5rem);                         /* breathing room above photos */
  --wp--style--block-gap: 0;
}
.kae-hist__photo {
  margin: 0 !important;
  padding: 0;
  width: 100%;
  display: block;
}
.kae-hist__photo--1 { aspect-ratio: 515/359; }
.kae-hist__photo--2 { aspect-ratio: 580/359; }
.kae-hist__photo--3 { aspect-ratio: 473/359; }
/* Photo 3 (Leadership 1999 newspaper clipping) is taller than its frame —
   anchor near the top so the headline + faces stay visible, but not flush. */
.kae-hist__photo--3 img { object-position: center 22%; }
.kae-hist__photo--4 { aspect-ratio: 334/359; }
.kae-hist__photo img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; padding: 0; }

/* --- 2. Intro row: title left + p1 right ---------------------------------- */
/* Figma: title at x=80 w=628 y=715; p1 at x=759 w=1081 y=745. Gap of 51px between cols.
   Vertical: ~30px above title (from photos at y=685), ~50px below (to blue band y=1093). */
.kae-hist__intro {
  display: grid;
  grid-template-columns: minmax(0, 628fr) minmax(0, 1081fr);
  column-gap: clamp(1.5rem, 0.5rem + 2.5vw, 3.1875rem);                /* Figma: 51px */
  padding: clamp(1rem, 0.5rem + 1vw, 1.875rem) var(--kae-pad-x) clamp(1.5rem, 1rem + 1.5vw, 2.75rem);
  align-items: start;
}
/* Figma: Nunito Sans Light 105px, line-height 110px, muted gray */
.kae-hist__title {
  font-family: var(--kae-ff-display);
  font-weight: 200;
  font-size: clamp(2.5rem, 1.5rem + 3.5vw, 6.5625rem);                  /* Figma: 105px */
  line-height: 1.048;                                                   /* Figma: 110/105 */
  color: var(--kae-muted);
  margin: 0;
}
/* Figma: Nunito Sans Light 36px, line-height 46px, black */
.kae-hist__p1 {
  font-family: var(--kae-ff-display);
  font-weight: 300;
  font-size: clamp(1.25rem, 0.9rem + 1.1vw, 2.25rem);                   /* Figma: 36px */
  line-height: 1.278;                                                   /* Figma: 46/36 */
  color: #000;
  margin: 0;
  /* Figma: text starts ~30px below title's optical top — small nudge */
  padding-top: clamp(0.75rem, 0.5rem + 0.5vw, 1.875rem);
}

/* --- 3. Blue band: body + 100 graphic + dateline (Figma y=1093-1723) ------ */
/* Figma: bright-blue (#00aeef) box; contains body text, 100 graphic on top
   row, then the era dateline below. */
.kae-hist__blue {
  background: var(--kae-blue);                                          /* Figma: #00aeef */
  /* Top padding matches the dateline's bottom padding — symmetric framing
     of the bright-blue area. Bottom padding is tighter so the dateline
     buttons sit closer to the 100 graphic / Great Depression text above. */
  padding: clamp(0.875rem, 0.7rem + 0.5vw, 1.25rem) var(--kae-pad-x) clamp(0.75rem, 0.6rem + 0.5vw, 1.25rem);
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}
.kae-hist__blue-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(22vw, 422px);
  column-gap: clamp(1.5rem, 1rem + 2vw, 3.125rem);
  align-items: center;                                                  /* vertically center text with 100 graphic */
}
/* Figma: Inter Regular 27px, line-height 38px, white, max width 1384 */
.kae-hist__p {
  font-family: var(--kae-ff-body);
  font-size: clamp(1.0625rem, 0.85rem + 0.85vw, 1.6875rem);             /* Figma: 27px */
  line-height: 1.407;                                                   /* Figma: 38/27 */
  color: var(--kae-surface);
  max-width: min(72vw, 1384px);
  margin: 0;
}
/* 100 graphic = SVG vector backdrop + huge "100" overlaid + EST. 1924 pill below */
.kae-hist__100 {
  position: relative;
  width: 100%;
  max-width: 399px;
  aspect-ratio: 399/356;
  margin-left: auto;
  display: grid;
  place-items: center;
}
.kae-hist__100-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* SVG ships with its own gold radial gradient — no CSS filter needed. */
}
/* "100" centered in the burst — Nunito Sans ExtraBold 150px, white. */
.kae-hist__100-num {
  position: relative;
  z-index: 1;
  font-family: var(--kae-ff-display);
  font-weight: 800;
  font-size: clamp(4.5rem, 3rem + 5vw, 9.375rem);                       /* Figma: 150px */
  line-height: 1;
  color: var(--kae-surface);
  text-align: center;
  margin: 0;
}
/* Figma: Nunito Sans Black 20px, navy text, white pill, gold (#E7C861) 5px border */
.kae-hist__100-est {
  position: absolute;
  z-index: 2;
  bottom: 14%;                                                          /* Figma: pill at ~y=1400 within frame y=1136-1492 */
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--kae-ff-display);
  font-weight: 900;
  font-size: clamp(0.75rem, 0.6rem + 0.4vw, 1.25rem);                   /* Figma: 20px */
  line-height: 1.8;
  letter-spacing: 0.2em;                                                /* Figma: 4px */
  color: var(--kae-navy);
  background: var(--kae-surface);
  border: 3px solid var(--wp--preset--color--division-gold, #E7C861);   /* Figma: 5px gold border (scaled down for smaller pill) */
  padding: 0.15rem 1.1rem;
  border-radius: 12px;                                                  /* Figma: 15px */
  white-space: nowrap;
}

/* --- 4. Dateline (sits inside .kae-hist__blue, on bright-blue background) - */
/* Standalone STICKY era nav. Sticks below the main header as the user scrolls
   through the timeline; click any button to jump to that era. JS toggles the
   .is-active class on the item whose era is currently in view (white text). */
.kae-hist__dateline {
  position: sticky;
  top: min(3.65vw, 70px);
  z-index: 50;
  margin: 0;
  /* Top padding is a touch larger than bottom because the buttons' top
     border-radius (14px) eats into the perceived top whitespace — visually
     they feel equal once we add a few extra px on top. */
  padding: clamp(1.125rem, 0.85rem + 0.7vw, 1.625rem) var(--kae-pad-x) clamp(0.75rem, 0.6rem + 0.5vw, 1.25rem);
  background: var(--kae-blue);
  /* Bottom-only shadow — same softness as the header's shadow but with
     negative spread so it can't bleed above the bar's top edge. */
  box-shadow: 0 16px 24px -10px rgba(0, 0, 0, 0.28);
}
.kae-hist__dateline-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(0.25rem, 0.1rem + 0.4vw, 0.625rem);
  list-style: none;
  margin: 0 0 clamp(1rem, 0.5rem + 1vw, 1.625rem);
  padding: 0;
}
.kae-hist__dateline-item {
  position: relative;
  display: flex;
  justify-content: center;
}
/* Button: rounded rectangle ~284×71, slight top-corner rounding > bottom (Figma).
   Triangle pointer is a ::after on the BUTTON (not the li) so it moves with
   the button's hover-lift and the cursor can cross button↔triangle without
   breaking hover. */
.kae-hist__dateline-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 284px;
  height: clamp(2.5rem, 1.75rem + 1.25vw, 4.4375rem);                   /* Figma: 71px */
  padding: 0 0.5rem;
  border: 0;
  border-radius: 14px 14px 6px 6px;
  font-family: var(--kae-ff-body);
  font-weight: 600;
  font-size: clamp(0.8125rem, 0.6rem + 0.55vw, 1.5625rem);              /* Figma: 25px */
  line-height: 1.6;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  transition: filter 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.kae-hist__dateline-btn:hover {
  transform: translateY(-3px) scale(1.03);
  filter: brightness(1.12) saturate(1.15);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

/* Triangle pointer — present on EVERY button. Hidden by default; revealed
   on hover, on the active button, and on the always-arrowed button. */
.kae-hist__dateline-btn::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left:  clamp(10px, 0.6rem + 0.6vw, 22px) solid transparent;
  border-right: clamp(10px, 0.6rem + 0.6vw, 22px) solid transparent;
  border-top-width: clamp(10px, 0.6rem + 0.5vw, 24px);
  border-top-style: solid;
  border-top-color: transparent;                                        /* per-button rule sets the actual color */
  pointer-events: none;
}

/* Per-button background color (text color is set separately below so the
   active-state can flip to white without per-color specificity battles). */
.kae-hist__dateline-item--navy .kae-hist__dateline-btn          { background: #25408F; }
.kae-hist__dateline-item--navy .kae-hist__dateline-btn::after   { border-top-color: #25408F; }
.kae-hist__dateline-item--cyan .kae-hist__dateline-btn          { background: #9DD9DC; }
.kae-hist__dateline-item--cyan .kae-hist__dateline-btn::after   { border-top-color: #9DD9DC; }
.kae-hist__dateline-item--lime .kae-hist__dateline-btn          { background: #D2E575; }
.kae-hist__dateline-item--lime .kae-hist__dateline-btn::after   { border-top-color: #D2E575; }
.kae-hist__dateline-item--gold .kae-hist__dateline-btn          { background: #ECD895; }
.kae-hist__dateline-item--gold .kae-hist__dateline-btn::after   { border-top-color: #ECD895; }

/* Year text: BLACK on every button by default; flips to WHITE only on the
   active era's button (matches the white sub-label below it). */
.kae-hist__dateline-btn                                       { color: #000; }
.kae-hist__dateline-item.is-active .kae-hist__dateline-btn    { color: #fff; }

/* Sub-labels under buttons (on the bright-blue band) */
.kae-hist__dateline-labels {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(0.25rem, 0.1rem + 0.4vw, 0.625rem);
  list-style: none;
  margin: clamp(0.75rem, 0.5rem + 0.5vw, 1.25rem) 0 0;
  padding: 0;
}
.kae-hist__dateline-label {
  font-family: var(--kae-ff-display);
  font-weight: 300;                                                     /* Figma: Light */
  font-size: clamp(0.875rem, 0.4rem + 1.4vw, 2.5rem);                   /* up to 40px so all labels (incl. "WWII Growth") fit on one line */
  line-height: 1.214;
  color: var(--kae-navy);
  text-align: center;
  white-space: nowrap;                                                  /* never wrap to a second line */
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Era labels span specific columns of the 6-button grid above. */
/* One label per era — each lives in its matching button column. */
.kae-hist__dateline-label--col-1 { grid-column: 1; }
.kae-hist__dateline-label--col-2 { grid-column: 2; }
.kae-hist__dateline-label--col-3 { grid-column: 3; }
.kae-hist__dateline-label--col-4 { grid-column: 4; }
.kae-hist__dateline-label--col-5 { grid-column: 5; }
.kae-hist__dateline-label--col-6 { grid-column: 6; }
.kae-hist__dateline-label.is-active {
  font-weight: 600;                                                     /* Figma: SemiBold */
  color: #fff;                                                          /* Figma: white for active era */
}

/* --- 5. Timeline rows ----------------------------------------------------- */
/* Figma: 2 text columns flanking the canvas center; photos float in the middle
   gutter, varied X offsets per row (-37 to +51 px). Eras 3 and 5 sit on a gray
   band; 1, 2, 4, 6 sit on white. */
.kae-hist__timeline {
  /* No padding here — the rows themselves carry the inline padding so gray
     bands extend full width. */
  padding: 0;
}
.kae-hist__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(320px, 26vw, 500px) minmax(0, 1fr);
  grid-auto-rows: auto;
  column-gap: clamp(1rem, 0.5rem + 1.5vw, 2.5rem);
  padding: clamp(1rem, 0.75rem + 1vw, 2rem) var(--kae-pad-x);
  align-items: start;                                                   /* shorter text col's top aligns with longer text col's top */
}
.kae-hist__row--gray { background: var(--kae-surface-alt); }            /* Figma: light gray for sub-eras */

/* Left column = right-aligned (text reads toward photos in middle).
   Right column = left-aligned (text reads toward photos in middle).
   Both span all rows so photos in middle can stack independently. */
.kae-hist__col {
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 0.5rem + 0.75vw, 1.25rem);                        /* Figma: 20px between paragraphs */
  grid-row: 1 / -1;
  /* No align-self override — inherits align-items: center from .kae-hist__row */
}
/* Tighten line-height on the year header so its visual top sits flush with
   the photo top — avoids the few px of leading that was making text look
   pushed down vs. the photo edge. */
.kae-hist__entry strong { line-height: 1; padding-top: 2px; }
.kae-hist__col--left  { text-align: right; grid-column: 1; }
.kae-hist__col--right { text-align: left;  grid-column: 3; }

/* Figma: Inter Light Italic 22px, year as Bold (non-italic) on its own line */
.kae-hist__entry {
  font-family: var(--kae-ff-body);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(0.9375rem, 0.75rem + 0.4vw, 1.375rem);               /* Figma: 22px */
  line-height: 1.455;                                                   /* Figma: 32/22 */
  color: #000;
  margin: 0;
}
.kae-hist__entry strong {
  font-weight: 700;
  font-style: normal;
  display: block;
  margin-bottom: 2px;
}

/* Photos in the middle gutter — column 2 of the row grid.
   Each <figure> uses --offset for X nudge and --media-w for explicit width
   (Figma-derived per photo). Without --media-w, fills column. */
.kae-hist__media {
  grid-column: 2;
  margin: 0 auto;
  width: var(--media-w, 100%);
  max-width: 100%;
  transform: translateX(var(--offset, 0px));
  position: relative;
  z-index: 3;                                                           /* sit on top of any overlap-photo (z-index: 2) */
}
.kae-hist__media img {
  width: 100%;
  height: 100%;                                                         /* fills figure; figures with explicit aspect-ratio crop via cover */
  display: block;
  object-fit: cover;
  object-position: center;
}
/* Two-photo rows wrap their figures in a flex stack so both photos sit
   within the row's vertical bounds, flanked by text on both sides.
   Stack uses its natural height (no stretch, no space-between) so photos
   sit close together and text columns start at the top of the row. */
.kae-hist__media-stack {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: center;                                                  /* center each photo horizontally */
  gap: clamp(0.25rem, 0.1rem + 0.25vw, 0.5rem);                         /* tight — 4-8px between photos */
}
/* Era 1924 (script logo + pamphlet):
   - more breathing room between its two media items than other timeline rows
   - small lift so the classic logo isn't fully aligned with the side text */
#era-1924 .kae-hist__media-stack {
  gap: clamp(0.625rem, 0.4rem + 0.5vw, 1.25rem);                        /* 10-20px */
  margin-top: clamp(-0.625rem, -0.3rem - 0.25vw, -0.125rem);            /* lift 2-10px */
}
/* Era 1941 (1941 group photo + 1960's photo):
   push the stack DOWN so the first photo sits below the 1950 overlap photo
   that bridges the era-1924 / era-1941 boundary. */
#era-1941 .kae-hist__media-stack {
  margin-top: clamp(1.5rem, 1rem + 1.5vw, 3rem);                        /* 24-48px */
}
/* Era 1970 (1970s photos): stack stretches to fill the row vertically so the
   first image sits at the TOP of the section and the 2nd image sits at the
   BOTTOM, close to the 4-5 overlap photo below. Zero bottom padding so the
   2nd image basically touches the overlap. */
#era-1970 .kae-hist__media-stack {
  grid-row: 1 / -1;
  align-self: stretch;
  justify-content: space-between;
}
#era-1970 {
  padding-bottom: 0;
}
/* Era 2000 (Bob portrait): anchor the stack to the BOTTOM of the row so the
   single image sits in the lower portion of the section, lifted slightly off
   the very bottom edge. */
#era-2000 .kae-hist__media-stack {
  grid-row: 1 / -1;
  align-self: end;
  margin-bottom: clamp(0.75rem, 0.5rem + 0.75vw, 1.25rem);              /* lift 12-20px off bottom */
}

.kae-hist__media-stack .kae-hist__media {
  width: var(--media-w, 100%);
  max-width: 100%;
}

/* Single-photo rows: photo top aligns with text top — no margin nudge. */
.kae-hist__row > .kae-hist__media {
  grid-row: 1 / -1;
  align-self: start;
}

/* Overlap photo — straddles two adjacent sections (e.g. white era + gray era).
   Centered horizontally; pulled UP by half its height so it visually crosses
   the boundary between the previous row and the next row. */
.kae-hist__overlap-photo {
  margin: 0 !important;
  display: block;
  width: var(--media-w, 100%);
  max-width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: clamp(-7rem, -4rem - 5vw, -3rem) !important;              /* pull up into the previous row */
  margin-bottom: clamp(-7rem, -4rem - 5vw, -3rem) !important;           /* let next row's bg cover bottom half */
  position: relative;
  z-index: 2;                                                           /* sits on top of section bg */
  transform: translateX(var(--offset, 0px));                            /* per-photo horizontal nudge */
}
.kae-hist__overlap-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
/* Modifier: shift the overlap photo DOWN so it leans into the NEXT section
   instead of being centered on the boundary. Less of it overlaps the previous
   section, more overlaps the next section. */
.kae-hist__overlap-photo--shift-down {
  margin-top: clamp(-2rem, -1rem - 1vw, -1rem) !important;              /* light pull-up into prev: 16-32px */
  margin-bottom: clamp(-4rem, -2.5rem - 2vw, -2rem) !important;         /* stronger overlap into next: 32-64px */
}

/* White frame + drop shadow for timeline photos.
   Excludes: hero strip (.kae-hist__photo, full-bleed by design), pamphlet
   (.kae-hist__media--no-frame), KAE Classic Logo (.kae-hist__transition-logo),
   Kaemmerlen 100th logo (.kae-hist__centennial), 100-vector burst. */
.kae-hist__media:not(.kae-hist__media--no-frame),
.kae-hist__overlap-photo {
  background: #fff;
  padding: clamp(4px, 0.4vw, 10px);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.08),
    0 6px 18px rgba(0, 0, 0, 0.14);
  box-sizing: border-box;
}
/* Drop-shadow without the white frame — for transparent items like the pamphlet
   that should pop off the page but shouldn't sit in a white card. */
.kae-hist__media--shadow {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.08),
    0 6px 18px rgba(0, 0, 0, 0.14);
}

/* Kaemmerlen 100th logo — closing element after the timeline (Figma y=4953, w=401 h=245) */
.kae-hist__centennial {
  margin: 0;
  display: flex;
  justify-content: center;
  padding: clamp(2rem, 1.5rem + 2vw, 4rem) var(--kae-pad-x) clamp(2rem, 1.5rem + 2vw, 4.5rem);
  background: var(--kae-surface);
}
.kae-hist__centennial img {
  width: clamp(220px, 21vw, 401px);                                     /* Figma: 401px wide */
  height: auto;
  display: block;
}