/* ==========================================================================
   PATH: /css/bands.css
   TYPE: stylesheet
   STATUS: shared
   USES: shared section shells, band themes, intro columns, layout wrappers

   PURPOSE
   This file owns the reusable horizontal band system used across core pages,
   service-area pages, and canonical city pages.

   KEEP IN THIS FILE
   - shared light/dark band wrappers
   - shared section labels
   - shared intro-column spacing
   - shared two-column / three-column band shell layouts

   DO NOT PUT IN THIS FILE
   - generic sitewide layout primitives like .section or .container
   - CTA styling
   - component internals for cards or lists
   - FAQ accordion internals
   - journal card styles
   - portfolio card styles
   - service card styles
   - city-card styles
   - page-only overrides
   - hero, header, footer, or lightbox styling

   OWNERSHIP NOTES
   - If a selector controls the outer section wrapper or shared band-shell
     rhythm, it belongs here.
   - If a selector styles the contents inside a module, it belongs in that
     component file instead.
   - Dark and light band treatments are shared system styles, not page styles.
   ========================================================================== */

/* ==========================================================================
   SHARED BAND THEMES
   These classes control band background and default text color only.
   They are intentionally generic because they are reused across multiple pages.
   ========================================================================== */

.band-light {
  background: var(--light);
  color: var(--text-dark);
}

.band-dark {
  background:
    radial-gradient(circle at top right, var(--gold-tint-mid), transparent 24%),
    linear-gradient(135deg, #1b1816 0%, #141210 100%);
  color: var(--text-light);
}

/* ==========================================================================
   SHARED LABEL PATTERN
   Reusable small uppercase label used at the top of intro columns across
   homepage sections, city pages, and support pages.

   KEEP HERE
   - outer label pattern and its divider line
   - theme-level light/dark color handling

   DO NOT ADD HERE
   - page-specific label spacing tweaks
   - component-specific badge/tag styles
   ========================================================================== */

.label {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1rem;
  font-family: var(--font-body);
  font-size: var(--type-label-size);
  font-weight: 600;
  letter-spacing: var(--type-label-tracking-wide);
  line-height: 1;
  text-transform: uppercase;
  color: var(--muted-dark);
}

.label::after {
  content: "";
  width: 52px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}

.band-dark .label,
.cta-label {
  color: var(--muted-light);
}

/* ==========================================================================
   SHARED TEXT-LINK SHELL
   Used for band-level "View portfolio", "Read the journal", "See the process"
   style links that sit inside intro columns.

   KEEP HERE
   - shared link-arrow layout and typography

   DO NOT ADD HERE
   - service-card links
   - footer nav links
   - text-body link styling
   ========================================================================== */

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.7rem;
  font-family: var(--font-body);
  font-size: var(--type-link-size);
  font-weight: 600;
  letter-spacing: var(--type-link-tracking);
  line-height: 1.1;
  text-transform: uppercase;
}

/* ==========================================================================
   SHARED BAND SHELL GRIDS
   These selectors own the outer section layouts only.

   WHY THEY LIVE HERE
   The same shell patterns are reused across the homepage and city-page family:
   - intro column + content column
   - intro column + multi-card content area
   - intro/quote/image three-part trust layout

   DO NOT PUT MODULE INTERNALS HERE
   For example:
   - .service-card belongs in services.css
   - .faq-list details belongs in faq.css
   - .journal-card belongs in journal.css
   - .portfolio-grid internals belong in portfolio.css
   ========================================================================== */

.featured-grid,
.process-grid,
.trust-grid,
.services-wrap,
.areas-grid,
.faq-grid {
  display: grid;
  gap: 0;
}

/* Trust uses a distinct three-part shell, so its column-gap is owned here. */
.trust-grid {
  column-gap: 2rem;
}

/* ==========================================================================
   SHARED INTRO COLUMN SPACING
   These are repeated intro-shell blocks used beside component content across
   multiple sections and page families.

   KEEP HERE
   - intro column padding and outer spacing
   - shared intro-column typography shell for headings and supporting copy

   DO NOT ADD HERE
   - paragraph color rules tied to a specific component
   - one-off text measure rules
   - card-grid spacing
   - FAQ answer spacing
   ========================================================================== */

.featured-intro,
.process-intro,
.trust-intro,
.trust-quote,
.services-intro,
.areas-intro,
.faq-intro {
  padding: 1.95rem 1.25rem 1.95rem 0;
}

.featured-intro > :last-child,
.process-intro > :last-child,
.trust-intro > :last-child,
.trust-quote > :last-child,
.services-intro > :last-child,
.areas-intro > :last-child,
.faq-intro > :last-child {
  margin-bottom: 0;
}

.featured-intro h2,
.process-intro h2,
.trust-intro h2,
.trust-quote h2,
.services-intro h2,
.areas-intro h2,
.faq-intro h2 {
  margin: 0 0 0.8rem;
  font-family: var(--font-display);
  font-size: var(--type-heading-lg);
  font-weight: 500;
  line-height: 0.98;
  color: inherit;
}

.featured-intro p,
.process-intro p,
.trust-intro p,
.trust-quote p,
.services-intro p,
.areas-intro p,
.faq-intro p {
  margin: 0;
  max-width: var(--measure-copy);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line-loose);
  color: var(--muted-dark);
}

.band-dark .featured-intro p,
.band-dark .process-intro p,
.band-dark .trust-intro p,
.band-dark .trust-quote p,
.band-dark .services-intro p,
.band-dark .areas-intro p,
.band-dark .faq-intro p {
  color: var(--muted-light);
}

/* ==========================================================================
   DESKTOP BAND SHELL LAYOUTS
   These breakpoints define the shared multi-column section structures.

   KEEP HERE
   - repeated section-shell column templates
   - shared band-level min-heights
   - shell-level alignment rules

   DO NOT PUT HERE
   - component card columns that belong to the component itself unless the
     layout is truly part of the outer shell
   ========================================================================== */

@media (min-width: 980px) {
  .featured-grid {
    grid-template-columns: 0.85fr 2.15fr;
    align-items: start;
  }

  .process-grid {
    grid-template-columns: 0.85fr 2.15fr;
    align-items: start;
    min-height: 0px;
  }

  .trust-grid {
    grid-template-columns: 0.8fr 0.95fr 1.25fr;
    align-items: center;
    column-gap: 1.35rem;
    min-height: 430px;
  }

  .services-wrap {
    grid-template-columns: 0.72fr 2.28fr;
    align-items: center;
    column-gap: 1.5rem;
    min-height: 430px;
  }

  .areas-grid,
  .faq-grid {
    grid-template-columns: 0.85fr 2.15fr;
    align-items: center;
  }
}

/* ==========================================================================
   TABLET AND DOWN
   At tablet sizes the repeated section shells collapse to a simpler vertical
   flow. Component internals should manage their own responsive behavior inside
   these wrappers.

   KEEP HERE
   - shell collapse behavior
   - intro-shell spacing adjustments

   DO NOT ADD HERE
   - component-specific card stack logic unless absolutely shared
   ========================================================================== */

@media (max-width: 979px) {
  .trust-grid,
  .featured-grid,
  .process-grid,
  .services-wrap,
  .areas-grid,
  .faq-grid {
    grid-template-columns: 1fr;
  }

  .featured-intro h2,
  .process-intro h2,
  .trust-intro h2,
  .trust-quote h2,
  .services-intro h2,
  .areas-intro h2,
  .faq-intro h2 {
    max-width: 16ch;
  }
}

/* ==========================================================================
   MOBILE
   Mobile keeps the same shared shell ownership but reduces padding on the
   repeated intro columns. This keeps cross-page band rhythm consistent.

   KEEP HERE
   - shared intro-column mobile padding

   DO NOT ADD HERE
   - component-specific typography or card sizing
   ========================================================================== */

@media (max-width: 767px) {
  .featured-intro,
  .process-intro,
  .trust-intro,
  .trust-quote,
  .services-intro,
  .areas-intro,
  .faq-intro {
    padding: 1.75rem 0 1.75rem;
  }

  .label {
    font-size: var(--type-label-size-sm);
  }

  .featured-intro h2,
  .process-intro h2,
  .trust-intro h2,
  .trust-quote h2,
  .services-intro h2,
  .areas-intro h2,
  .faq-intro h2 {
    font-size: var(--type-heading-sm);
    max-width: 100%;
  }

  .featured-intro p,
  .process-intro p,
  .trust-intro p,
  .trust-quote p,
  .services-intro p,
  .areas-intro p,
  .faq-intro p {
    font-size: var(--type-body-size-sm);
  }
}