/* =========================================================================
   pages.css
   Layer: Page-specific composition (hero, grids, timeline, filter bar)

   ARCHITECTURAL NOTE:
   Everything here composes tokens/components from base.css and
   components.css rather than introducing new colors/spacing — page CSS
   should only ever describe LAYOUT, never re-invent visual language.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Hero (Homepage)
   ------------------------------------------------------------------------- */
.hero {
  /* background-color is a fallback only — it shows if the SVG fails to
     load, never stacked on top of it (the SVG is fully opaque and
     already bakes in the same diagonal deep-blue gradient .hero used to
     declare directly, plus a low-opacity blueprint grid, colonnade
     silhouette, and a gold "bridge" of connected nodes — see
     images/hero-pattern.svg for the full rationale). */
  background-color: var(--color-primary);
  background-image: url("../images/hero-pattern.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--color-text-inverse);
  padding-block: var(--space-6);
  text-align: center;
}

/* Homepage-only hero treatment — applied via the hero--index modifier
   class, deliberately NOT rolled into the base .hero rule above, so
   every other page keeps the site-wide hero-pattern.svg.
   heroIndex-final-v7.jpg is a user-supplied source image (originally
   1672x941 PNG) run through ffmpeg: lanczos-upscaled to 1920x1080 and
   re-encoded as JPEG (1.68MB -> ~200KB), since no image-editing
   tooling (Pillow/ImageMagick) is available in this environment —
   same constraint noted for the favicon rasterizer in
   scripts/make_favicon.py. It was the 7th of seven candidates
   compared directly against each other and against hero-pattern.svg
   before this one was chosen for legibility and brand-palette fit;
   only the winning derived JPEG is kept in src/images/, not the
   rejected candidates or the original PNG source.
   The radial-gradient layer is a CSS-only gold accent (matching
   --color-accent, #d4af37, hardcoded here the same way
   hero-pattern.svg hardcodes it — a second background layer can't
   reference the custom property across contexts) blended with
   `lighten` (per-channel max) rather than `screen`: screen's
   multiplicative formula desaturated the gold toward a muddy olive
   against this image's dark navy base, while lighten keeps gold's
   actual hue since gold is brighter than the navy backdrop across all
   three channels. Positioned over the image's own neural-network
   graph (upper right) rather than a random spot, echoing where
   hero-pattern.svg placed its gold "bridge" nodes. */
.hero--index {
  background-image:
    radial-gradient(circle at 88% 28%, rgba(212, 175, 55, 0.45) 0%, rgba(212, 175, 55, 0) 22%),
    url("../images/heroIndex-final-v7.jpg");
  background-blend-mode: lighten, normal;
}

.hero__headline {
  color: var(--color-text-inverse);
  max-width: 900px;
  margin-inline: auto;
  margin-bottom: var(--space-2);
}

.hero__subheadline {
  color: rgba(255, 255, 255, 0.85);
  max-width: 700px;
  margin-inline: auto;
  margin-bottom: var(--space-4);
  font-size: 1.1rem;
}

.hero__cta-group {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.trust-bar {
  background-color: var(--color-surface);
  text-align: center;
  padding-block: var(--space-3);
}

.trust-bar__label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* -------------------------------------------------------------------------
   Grid Scaffolding
   auto-fit + minmax gives us a responsive grid WITHOUT media queries —
   the grid itself decides how many columns fit, which is more resilient
   than hand-coded breakpoints when card content length varies (e.g. a
   case study with 3 industry badges vs. one with a single tag).
   ------------------------------------------------------------------------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-3);
}

.section__heading {
  text-align: center;
  margin-bottom: var(--space-4);
}

.section__intro {
  text-align: center;
  max-width: 700px;
  margin-inline: auto;
  margin-bottom: var(--space-4);
  color: var(--color-text-muted);
}

/* Alternating section background — used to visually separate stacked
   sections without adding borders/dividers. */
.section--surface {
  background-color: var(--color-surface);
}

/* -------------------------------------------------------------------------
   Case Studies: Filter Bar
   ------------------------------------------------------------------------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  justify-content: center;
  margin-bottom: var(--space-4);
}

.filter-btn {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--transition-base), color var(--transition-base);
}

.filter-btn:hover,
.filter-btn:focus-visible {
  background-color: var(--color-border);
}

.filter-btn--active {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-text-inverse);
}

.case-studies__empty {
  text-align: center;
  color: var(--color-text-muted);
  padding-block: var(--space-4);
  display: none;
}

.case-studies__empty--visible {
  display: block;
}

/* -------------------------------------------------------------------------
   Timeline (About page)
   A vertical timeline built with a single pseudo-element rail plus
   flex-positioned nodes — avoids a JS layout library for what is
   fundamentally a styled list.
   ------------------------------------------------------------------------- */
.timeline {
  position: relative;
  max-width: 700px;
  margin-inline: auto;
  padding-left: var(--space-4);
}

.timeline::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: var(--color-border);
}

.timeline__item {
  position: relative;
  padding-bottom: var(--space-4);
}

.timeline__item::before {
  content: "";
  position: absolute;
  left: -30px;
  top: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: var(--color-secondary);
  border: 2px solid var(--color-bg);
}

.timeline__period {
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-secondary);
  font-weight: 700;
}

.timeline__milestone {
  margin-bottom: var(--space-1);
}

.timeline__description {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* -------------------------------------------------------------------------
   About: Quote Block
   ------------------------------------------------------------------------- */
.quote-block {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  padding: var(--space-4);
  border-radius: var(--radius-base);
  text-align: center;
  font-size: 1.25rem;
  font-style: italic;
  max-width: 800px;
  margin-inline: auto;
}

/* -------------------------------------------------------------------------
   Contact / Final CTA
   ------------------------------------------------------------------------- */
.cta-band {
  background-color: var(--color-surface);
  text-align: center;
}

.contact-form {
  max-width: 560px;
  margin-inline: auto;
}

/* -------------------------------------------------------------------------
   Contact page: instructions (left) + action (right)
   Deliberately NOT reusing .legal-content here — that class centers a
   narrower column within its parent (max-width + margin-inline: auto),
   which is correct for a single block of prose (Privacy Policy, Terms of
   Use) but reads as "the text is centered" when the parent section is
   much wider than the block, exactly the layout problem this replaces.
   This is a full-width two-column grid instead: instructions fill the
   left column edge-to-edge, the CTA sits in its own card on the right.
   ------------------------------------------------------------------------- */
.contact-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-5);
  align-items: start;
  text-align: left;
}

.contact-layout h2,
.contact-layout h3 {
  text-align: left;
}

.contact-layout h3 {
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
}

.contact-layout p,
.contact-layout li {
  color: var(--color-text-muted);
}

.contact-layout ul {
  list-style: disc;
  padding-left: var(--space-4);
}

.contact-layout ul li {
  margin-bottom: var(--space-1);
}

.contact-layout__action {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  padding: var(--space-4);
  text-align: center;
  align-self: start;
}

.contact-layout__action .btn {
  width: 100%;
}

.contact-layout__address {
  margin-top: var(--space-3);
  font-weight: 600;
}

.contact-layout__response {
  font-size: var(--font-size-sm);
}

/* Below this width the sidebar CTA no longer has room to breathe next to
   the instructions column — stack instead, action card second so the
   reading order still matches the visual order (info, then what to do). */
@media (max-width: 768px) {
  .contact-layout {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------------------------
   Legal pages (Privacy Policy, Terms of Use)
   Left-aligned prose, capped width for readability — distinct from the
   centered marketing-copy sections used elsewhere.
   ------------------------------------------------------------------------- */
.legal-content {
  /* Explicit, not assumed: this class is also used inside .cta-band,
     which sets text-align: center on itself — without this override,
     .legal-content would inherit that centering instead of being the
     left-aligned prose block it's meant to be. */
  text-align: left;
  max-width: 800px;
  margin-inline: auto;
}

.legal-content h2 {
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
}

.legal-content h2:first-child {
  margin-top: 0;
}

.legal-content p,
.legal-content li {
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.legal-content ul {
  list-style: disc;
  padding-left: var(--space-4);
  margin-bottom: var(--space-2);
}

.legal-content .legal-updated {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-style: italic;
  margin-bottom: var(--space-4);
}