/* v2 multi-page extensions for arabiansurfacing.com.
 * Everything here reuses tokens from tokens.css and components from
 * styles.css (the uploaded one-page design, untouched). No restyling:
 * these are page-level layouts the one-pager did not need.
 */

/* header legibility at 1440: keep phone + tagline on one line */
.header__phone { white-space: nowrap; }
.header__name small { white-space: nowrap; }
/* at 390 the brand tagline does not fit next to the phone icon and menu
   button: drop it, keep the wordmark only */
@media (max-width: 26rem) {
  .header__name small { display: none; }
}

/* compact photographic hero for sub-pages */
.hero--sub {
  min-height: 0;
  padding-block: var(--space-3xl) var(--space-2xl);
}
.hero--sub .hero__img { object-position: center 30%; }
.hero--sub h1 { font-size: var(--text-2xl); }
.hero--sub .hero__sub { font-size: var(--text-base); max-width: 58ch; }

/* breadcrumb trail */
.crumbs {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-on-coal-2);
  margin-block-start: var(--space-sm);
}
.crumbs a { color: var(--color-on-coal-2); text-decoration: none; }
.crumbs a:hover { color: var(--color-accent); text-decoration: underline; }
.crumbs a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.crumbs .crumbs__here { color: var(--color-on-coal); }

/* prose blocks on white pages */
.prose { max-width: 64ch; }
.prose p { margin-block: var(--space-sm) var(--space-md); color: var(--color-ink-2); }
.prose p strong { color: var(--color-ink); }
.prose__lead {
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--color-ink);
  margin-block-start: var(--space-md);
}

/* two-column editorial split */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: start;
}
@media (max-width: 50rem) {
  .split { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
}

/* what-we-install checklist */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.checklist li {
  display: grid;
  grid-template-columns: 1.4em auto;
  gap: var(--space-sm);
  align-items: baseline;
  color: var(--color-ink-2);
  padding-block: var(--space-2xs);
  border-block-end: var(--rule-hair) solid var(--color-rule-2);
}
.checklist li:last-child { border-block-end: none; }
.checklist svg { color: var(--color-accent); }
.checklist strong { color: var(--color-ink); font-weight: 600; }

/* honest caption line for illustrative imagery on cards */
.card__note {
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin-block-start: var(--space-2xs);
}

/* the quote aside's long "Message us on WhatsApp" label is nowrap (.btn) and
   its min-content pushes the aside column past a 390px viewport: let the
   button wrap inside the card on small screens only */
@media (max-width: 30rem) {
  .contact-card .btn { white-space: normal; }
}

/* CTA band action buttons: flex them so inline svg baseline offsets and
   text-node gaps do not skew their alignment */
.cta-band > div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  align-items: center;
}

/* dark call-to-action band */
.cta-band {
  background: var(--color-coal);
  color: var(--color-on-coal);
  border-radius: var(--radius-l);
  padding: var(--space-xl) var(--space-xl);
  margin-block-start: var(--space-lg);
  display: grid;
  gap: var(--space-sm);
  justify-items: start;
}
@media (min-width: 50rem) {
  .cta-band {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-xl);
  }
}
.cta-band h2, .cta-band h3 { color: var(--color-on-coal); margin: 0; }
.cta-band p { color: var(--color-on-coal-2); margin: 0; max-width: 52ch; }
.cta-band .btn--ghost { border-color: var(--color-on-coal-2); color: var(--color-on-coal); }
.cta-band .btn--ghost:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* section head subline inherits styles.css but the muted grey fails on the
   dark .why band: use the on-coal secondary tone there */
.why .section__sub { color: var(--color-on-coal-2); }

/* current-page state in the header nav (extends styles.css .header__link) */
.header__link[aria-current="page"] { color: var(--color-ink); }
.header__link[aria-current="page"]::after {
  content: "";
  display: block;
  height: 2px;
  background: var(--color-accent);
  border-radius: 1px;
  margin-block-start: var(--space-3xs);
}
@media (max-width: 60rem) {
  .header__link[aria-current="page"]::after { display: none; }
  .header__link[aria-current="page"] {
    background: var(--color-paper-2);
    color: var(--color-accent-deep);
  }
}

/* trust chips row under sub-hero (reuses chip look) */
.hero__chips { margin-block-start: var(--space-lg); }

/* misc */
.page-foot { margin-block-start: var(--space-xl); }
.link-line { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-block-start: var(--space-md); }
.gallery__more { margin-block-start: var(--space-lg); }
.figure-note {
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin-block-start: var(--space-2xs);
}