/* Company History — industrial black + #FF6B4A layout.
   Everything here is scoped to .history-page (or history-* classes used only by that page),
   so no other page inherits these rules. */

.company-history-link { color: inherit; text-decoration: none; cursor: pointer; }
.company-history-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.hero-foot .company-history-link { display: block; min-width: 0; }
.feature.company-history-link { display: block; width: auto; }

.history-page {
  background: var(--bg-page);
  color: var(--text-body);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
.history-page * { box-sizing: border-box; }
.history-page h1, .history-page h2, .history-page h3, .history-page h4 {
  margin: 0; color: #fff; letter-spacing: var(--tracking-tight); line-height: 1.1;
}
.history-page p { margin: 0; }
.history-page a { color: inherit; text-decoration: none; }
.history-page img { max-width: 100%; }

.history-page .container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* An eyebrow is used once, above the hero headline, as the page's category line. */
.history-page .eyebrow {
  display: inline-block;
  color: var(--accent);
  font-size: var(--text-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

.history-page .btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px;
  font-size: .82rem; font-weight: 700;
  letter-spacing: var(--tracking-wider); text-transform: uppercase;
  border: 1px solid transparent;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
/* Near-black label keeps AA contrast on both the rest (#FF6B4A) and pressed (#cc5538) orange. */
.history-page .btn-solid { background: var(--accent); color: var(--charcoal-800); }
.history-page .btn-solid:hover, .history-page .btn-solid:focus-visible { background: var(--accent-pressed); color: var(--charcoal-800); }
.history-page .btn-ghost { border-color: var(--accent); color: var(--accent); }
.history-page .btn-ghost:hover, .history-page .btn-ghost:focus-visible { background: var(--accent); color: var(--charcoal-800); }
.history-page .btn i { font-size: .72rem; }

/* Short orange rule under every section heading — the reference's key signature. */
.history-page .rule-heading { position: relative; padding-bottom: 16px; font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.history-page .rule-heading::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 46px; height: 3px; background: var(--accent);
}

/* ---------- Navigation ---------- */
.history-nav {
  position: fixed; inset: 0 0 auto; z-index: 1000;
  padding: 14px 0;
  background: rgba(10, 12, 16, .96);
  border-bottom: 1px solid var(--border-subtle);
  backdrop-filter: blur(12px);
}
.history-nav-inner { display: flex; align-items: center; gap: 32px; }
.history-nav .logo img, .history-footer .logo img { display: block; width: auto; height: 26px; }
.history-nav-links { display: flex; align-items: center; gap: 30px; margin: 0 auto; }
.history-nav-links a {
  color: var(--text-secondary);
  font-size: .78rem; font-weight: 600;
  letter-spacing: var(--tracking-wider); text-transform: uppercase;
}
.history-nav-links a:hover, .history-nav-links a:focus-visible { color: #fff; }
.history-nav-links a[aria-current="page"] { color: var(--accent); }

/* ---------- Hero: copy left, real warehouse photo right, stats overlapping ---------- */
.history-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  min-height: 620px;
  padding-top: 56px;                       /* clears the fixed nav */
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-page);
}
.history-hero-copy { display: flex; align-items: center; padding: 72px 0 120px; }
.history-hero-copy-inner {
  width: 100%;
  max-width: calc(var(--container-max) / 2);
  margin-left: auto;
  padding: 0 56px 0 var(--container-pad);
}
.history-hero h1 { margin: 20px 0 22px; font-size: clamp(2.6rem, 5vw, 4.2rem); line-height: 1.02; }
.history-hero-copy-inner > p { max-width: 30rem; color: var(--text-secondary); font-size: 1rem; line-height: 1.65; }
.history-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* --ch-hero-image is set at runtime from the Company History authority, so the hero photo can be
   replaced from Admin. The url() here is only the fallback when no override is stored. */
.history-hero-media {
  --ch-hero-image: url("../../photos/warehouse/wh-09.jpg");
  background: linear-gradient(90deg, rgba(10,12,16,.96) 0%, rgba(10,12,16,.25) 26%, rgba(10,12,16,0) 55%),
              var(--ch-hero-image) center/cover no-repeat;
}

.history-hero-stats {
  position: absolute; right: 0; bottom: 0; z-index: 2;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(760px, 62%);
  background: rgba(12, 14, 19, .93);
  border-top: 1px solid var(--border-subtle);
  border-left: 1px solid var(--border-subtle);
}
.history-stat {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: center; column-gap: 16px; row-gap: 6px;
  min-width: 0; padding: 26px 24px;
}
.history-stat + .history-stat { border-left: 1px solid var(--border-subtle); }
.history-stat i { grid-row: 1 / span 2; color: var(--accent); font-size: 1.7rem; }
.history-stat strong { grid-column: 2; align-self: end; color: var(--accent); font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 800; line-height: 1; }
.history-stat > span { grid-column: 2; align-self: start; color: var(--text-secondary); font-size: .78rem; }

/* ---------- Bands ---------- */
.history-band { padding: 76px 0; border-bottom: 1px solid var(--border-subtle); }
.history-section-heading p { margin-top: 16px; max-width: 46rem; color: var(--text-secondary); }

/* Intro: lead copy left, four pillars right, separated by hairlines */
.history-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 56px; align-items: start; }
.history-intro-lead p { margin-top: 18px; color: var(--text-secondary); line-height: 1.7; }
.history-pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.history-pillar { min-width: 0; padding: 0 22px; border-left: 1px solid var(--border-subtle); }
.history-pillar:first-child { padding-left: 0; border-left: 0; }
.history-pillar i { display: block; margin-bottom: 16px; color: var(--accent); font-size: 1.5rem; }
.history-pillar h3 { font-size: .98rem; }
.history-pillar p { margin-top: 10px; color: var(--text-secondary); font-size: .88rem; line-height: 1.6; }

/* ---------- Timeline: horizontal rail, orange nodes, orange years ---------- */
.history-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin-top: 54px;
  padding-top: 30px;
}
.history-timeline::before {
  content: ""; position: absolute; top: 4px; left: 0; right: 0;
  height: 1px; background: var(--border-subtle);
}
.history-milestone { position: relative; min-width: 0; padding: 0 26px 0 0; }
.history-milestone::before {
  content: ""; position: absolute; top: -30px; left: 0;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--bg-page);
}
.history-period {
  color: var(--accent) !important;
  font-size: .74rem; font-weight: 700;
  letter-spacing: var(--tracking-wider); text-transform: uppercase;
}
.history-milestone h3 { margin: 12px 0 10px; font-size: 1rem; }
.history-milestone p { color: var(--text-secondary); font-size: .87rem; line-height: 1.6; }

/* ---------- Team: checklist left, callout right ---------- */
.history-team { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, .9fr); gap: 56px; align-items: start; }
.history-capabilities {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 40px; margin: 34px 0 0; padding: 0; list-style: none;
}
.history-capabilities li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 16px 0; border-bottom: 1px solid var(--border-subtle);
  color: var(--text-body); font-size: .93rem;
}
.history-capabilities li:target, .history-capabilities li:focus {
  outline: 2px solid var(--accent); outline-offset: 6px; background: var(--accent-tint);
}
.history-capabilities i { margin-top: 3px; color: var(--accent); }
.plist a { color: inherit; text-decoration: none; display: inline-flex; gap: 10px; align-items: flex-start; }
.plist a:hover, .plist a:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 4px; }

.history-callout { padding: 34px; border: 1px solid var(--border-subtle); background: var(--bg-card); }
.history-callout i { display: block; margin-bottom: 18px; color: var(--accent); font-size: 2rem; }
.history-callout h3 { font-size: 1.15rem; line-height: 1.25; }
.history-callout p { margin: 14px 0 26px; color: var(--text-secondary); font-size: .9rem; line-height: 1.65; }

/* ---------- Evidence gallery (real published photos/videos) ---------- */
/* The column count follows the number of PUBLISHED items, not a fixed 3. With a single published
   photo the old repeat(3,...) left the figure sitting in the first third of the band and two
   thirds empty to its right. company-history-entry.js writes data-count when it renders, so the
   section looks complete with 1, 2 or many images and the Owner never has to upload filler.
   The count lives in a variable so the viewport rules further down can still clamp it: a
   two-image gallery must not stay two-up on a 390px phone. */
.history-evidence-gallery, .history-evidence-videos {
  --evidence-cols: 3;
  display: grid; grid-template-columns: repeat(var(--evidence-cols), minmax(0, 1fr));
  gap: 18px; margin-top: 34px;
}
.history-evidence-gallery[data-count="1"], .history-evidence-videos[data-count="1"] { --evidence-cols: 1; }
.history-evidence-gallery[data-count="2"], .history-evidence-videos[data-count="2"] { --evidence-cols: 2; }
.history-evidence-gallery figure, .history-evidence-videos figure {
  margin: 0; border: 1px solid var(--border-subtle); background: var(--bg-card);
}
.history-evidence-gallery img, .history-evidence-videos video {
  display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
}
.history-evidence-gallery figcaption, .history-evidence-videos figcaption {
  display: grid; gap: 6px; padding: 14px; color: var(--text-secondary); font-size: .85rem;
}
.history-evidence-gallery figcaption strong, .history-evidence-videos figcaption strong { color: #fff; }

/* ---------- Footer ---------- */
.history-footer { padding: 60px 0 28px; }
.history-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 48px; }
.history-footer h4 { margin-bottom: 12px; font-size: .82rem; letter-spacing: var(--tracking-wider); text-transform: uppercase; }
.history-footer p { margin-top: 14px; color: var(--text-secondary); line-height: 1.9; font-size: .9rem; }
.history-footer a:hover, .history-footer a:focus-visible { color: #fff; }
.history-footer hr { border: 0; border-top: 1px solid var(--border-subtle); margin: 36px 0 22px; }
.history-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--text-secondary); font-size: .78rem; }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .history-hero { grid-template-columns: 1fr; min-height: 0; }
  .history-hero-copy { padding: 56px 0 44px; }
  .history-hero-copy-inner { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); }
  .history-hero-media { min-height: 320px; }
  .history-hero-stats { position: static; width: 100%; border-left: 0; }
  .history-intro { grid-template-columns: 1fr; gap: 40px; }
  .history-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 0; }
  .history-pillar:nth-child(odd) { padding-left: 0; border-left: 0; }
  .history-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 0; }
  .history-team { grid-template-columns: 1fr; gap: 40px; }
  .history-evidence-gallery, .history-evidence-videos { --evidence-cols: 2; }
  .history-evidence-gallery[data-count="1"], .history-evidence-videos[data-count="1"] { --evidence-cols: 1; }
}

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
  .history-nav-links { display: none; }
  .history-nav-inner { justify-content: space-between; }
  .history-hero h1 { font-size: clamp(2.1rem, 8vw, 2.9rem); }
  .history-hero-media { min-height: 230px; }
  .history-hero-stats { grid-template-columns: 1fr; }
  .history-stat + .history-stat { border-left: 0; border-top: 1px solid var(--border-subtle); }
  .history-band { padding: 56px 0; }
  .history-pillars { grid-template-columns: 1fr; gap: 28px; }
  .history-pillar { padding-left: 0; border-left: 0; }

  /* Timeline becomes a vertical rail, keeping the orange nodes and years. */
  .history-timeline { grid-template-columns: 1fr; gap: 0; margin-top: 34px; padding: 0 0 0 26px; }
  .history-timeline::before { top: 6px; bottom: 6px; left: 5px; right: auto; width: 1px; height: auto; }
  .history-milestone { padding: 0 0 30px; }
  .history-milestone::before { top: 4px; left: -26px; }

  .history-capabilities { grid-template-columns: 1fr; gap: 0; }
  .history-callout { padding: 26px; }
  .history-evidence-gallery, .history-evidence-videos,
  .history-evidence-gallery[data-count], .history-evidence-videos[data-count] { --evidence-cols: 1; }
  .history-footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .history-footer-bottom { flex-direction: column; align-items: flex-start; }
}