/* =========================================================
   LAYOUT.CSS
   Reusable structural classes. Sections use these building
   blocks rather than one-off containers, but not every
   section is forced into an identical width — narrower
   content areas use .content-shell inside a full-width
   .section when the design calls for it.
   ========================================================= */

/* ---------------------------------------------------------
   PAGE SHELL
   Full page-level container. Centers on large screens,
   shrinks fluidly on smaller ones, preserves responsive
   side margins via --page-padding-inline (set in
   variables.css, overridden in responsive.css).
   --------------------------------------------------------- */
.page-shell {
  width: 100%;
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: var(--page-padding-inline);
}

/* ---------------------------------------------------------
   CONTENT SHELL
   Narrower internal width for editorial content blocks
   (copy, text-led sections) nested inside a page-shell or
   a full-width section.
   --------------------------------------------------------- */
.content-shell {
  width: 100%;
  max-width: var(--content-max-width);
  margin-inline: auto;
}

/* ---------------------------------------------------------
   CONTENT GRID
   The shared grid every section below Hero aligns to: same
   max-width and centering as .page-shell, but WITHOUT its
   padding-inline. Content sits flush against the grid's own
   edges (matching the approved Figma's 1140px frame edge to
   edge) instead of inset by page-shell's 32px — and because
   it's still capped at --page-max-width and centered, the
   outer whitespace still grows on wider viewports exactly
   like .page-shell does. Using this one class everywhere
   (instead of each section rolling its own container) is what
   keeps every section's left/right edges on the same vertical
   line as every other section.
   --------------------------------------------------------- */
.content-grid {
  width: 100%;
  max-width: var(--page-max-width);
  margin-inline: auto;
}

/* ---------------------------------------------------------
   SECTION
   Vertical rhythm between homepage sections. No horizontal
   padding here — that responsibility belongs to page-shell
   / content-shell so a section can also go full-bleed.
   --------------------------------------------------------- */
.section {
  padding-block: var(--space-section);
}

/* ---------------------------------------------------------
   SECTION HEADER
   Eyebrow + title + thin dividing line, used to introduce
   a section in the editorial system.
   --------------------------------------------------------- */
.section-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-block-end: var(--space-7);
}

.section-header__line {
  width: 100%;
  height: 1px;
  background-color: var(--color-line);
  border: none;
}

.section-header__title {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-heading);
}

/* ---------------------------------------------------------
   EYEBROW
   Small uppercase label preceding a heading.
   --------------------------------------------------------- */
.eyebrow {
  display: inline-block;
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------
   VISUALLY HIDDEN
   For skip links and screen-reader-only content.
   --------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.visually-hidden:focus,
.visually-hidden:focus-visible {
  position: fixed;
  inset-block-start: var(--space-2);
  inset-inline-start: var(--space-2);
  width: auto;
  height: auto;
  padding: var(--space-2) var(--space-4);
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background-color: var(--color-background);
  color: var(--color-text);
  z-index: 100;
}