/* ==========================================================================
   AppanDesign — Layout
   Page shell, section rhythm, grids. Colour comes from the tokens in base.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Page shell
   -------------------------------------------------------------------------- */
.page {
  position: relative;
  width: 100%;
  background: var(--white);
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   2. Sections
   -------------------------------------------------------------------------- */
.section {
  position: relative;
  padding: var(--section-y) var(--gutter);
}
.section--tall         { padding-block: var(--section-y-lg); }
.section--flush-top    { padding-top: clamp(24px, 2.6vw, 50px); }
.section--flush-bottom { padding-bottom: clamp(32px, 3.4vw, 64px); }
.section--flush-media  { padding-top: 0; }
.section--clip         { overflow: hidden; }

/* Surfaces */
.section--muted { background: var(--surface-muted); }
.section--paper { background: var(--white); }

/* The Averix services band: ink base with the diagonal artwork over it */
.section--services {
  background:
    linear-gradient(rgba(15, 15, 15, 0.55), rgba(15, 15, 15, 0.55)),
    var(--ink) url("../img/bg/services-bg.jpg") 50% 0% / cover no-repeat;
}
/* On phones the wide photo blows up under `cover`; use a clean dark gradient
   with a soft amber glow instead. */
@media (max-width: 760px) {
  .section--services {
    background:
      radial-gradient(130% 55% at 50% 0%, rgba(236, 176, 20, 0.10), transparent 62%),
      var(--ink);
  }
}

/* Full-bleed hero */
.section--hero {
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: 0 var(--gutter) clamp(48px, 5vw, 96px);
}

/* Interior page head — no image, sits under the fixed nav */
.section--pagehead {
  padding: clamp(150px, 14vw, 260px) var(--gutter) clamp(50px, 5vw, 90px);
  overflow: hidden;
}
/* Image-backed interior head */
.section--pagehead-img {
  min-height: 88svh;
  display: flex;
  align-items: flex-end;
  padding: clamp(150px, 14vw, 240px) var(--gutter) clamp(50px, 5vw, 90px);
  overflow: hidden;
}

/* Centred closing CTA */
.section--cta {
  min-height: 76svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(70px, 7vw, 140px) var(--gutter);
  overflow: hidden;
}
.section--cta-tall  { min-height: 92svh; }
.section--cta-short { min-height: 68svh; }

/* --------------------------------------------------------------------------
   3. Containers
   -------------------------------------------------------------------------- */
.shell {
  position: relative;
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
}
.shell--narrow { max-width: var(--shell-narrow); }
.shell--prose  { max-width: 1100px; }

/* --------------------------------------------------------------------------
   4. Section headers
   -------------------------------------------------------------------------- */
.sec-head {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: clamp(40px, 4.4vw, 80px);
}
.sec-head--ruled {
  border-bottom: 1px solid var(--border-hair);
  padding-bottom: clamp(24px, 2.6vw, 44px);
}
.sec-head--stack { display: block; margin-bottom: clamp(36px, 4vw, 72px); }
.sec-head--center { justify-content: center; text-align: center; }
.sec-head--center .eyebrow { justify-content: center; }
.sec-head__title { margin-top: var(--eyebrow-gap); }
.sec-head__intro {
  max-width: 42ch;
  font-family: var(--font-body);
  font-size: var(--size-body-lg);
  line-height: var(--lh-lead);
  color: var(--text-body);
}

/* --------------------------------------------------------------------------
   5. Grids
   -------------------------------------------------------------------------- */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(24px, 2.4vw, 44px) clamp(20px, 1.8vw, 28px);
}
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-12 { grid-column: span 12; }
.col-end { align-self: end; }

/* On phones every card goes full-width so the screenshots aren't squished into
   a fraction of the screen and cropped. */
@media (max-width: 720px) {
  .col-5, .col-6, .col-7, .col-12 { grid-column: 1 / -1; }
}

.autogrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(28px, 2.8vw, 56px);
}
.autogrid--xs    { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: clamp(24px, 2.6vw, 48px); }
.autogrid--sm    { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.autogrid--md    { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.autogrid--lg    { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(36px, 4vw, 90px); }
.autogrid--tiles { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(20px, 2vw, 28px); }
.autogrid--center { align-items: center; }
.autogrid--start  { align-items: start; }
.autogrid--end    { align-items: end; }

.split-sticky {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(36px, 4vw, 90px);
}
.split-sticky__rail { position: sticky; top: 140px; align-self: start; }

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 110px);
  align-items: start;
}
@media (max-width: 960px) {
  .contact-layout { grid-template-columns: 1fr; }
}

/* Flex helpers */
.row { display: flex; gap: 20px; justify-content: space-between; align-items: flex-start; }
.row--baseline { align-items: center; }
.row--center { justify-content: center; }
.row--wrap { flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; }
.stack--gap-sm { gap: 12px; }
.stack--gap-md { gap: 24px; }
.stack--gap-lg { gap: clamp(26px, 3vw, 40px); }