/* ==========================================================================
   SHARED SECTIONS — header, footer, page hero, quality band, reviews band,
   service / project / post templates (used on 2+ pages). Tokens only.
   ========================================================================== */

/* ---------- Header ---------- */
.site-header { position: relative; z-index: var(--z-sticky); }
.site-header__top { background: var(--color-surface-inverse); }
.site-header__top-inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: var(--topbar-height);
}
.site-header__contacts { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.site-header__contact {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control-height-md); min-width: var(--control-height-md);
  color: var(--color-brand-light); text-decoration: none;
}
.site-header__contact .icon { color: var(--color-text-inverse); }
.site-header__contact:hover { color: var(--color-brand-lighter); }
.site-header__contact-label { display: none; }
.site-header__toggle { color: var(--color-text-inverse); background: transparent; }
.site-header__toggle:hover { color: var(--color-brand-light); }

@media (min-width: 768px) {
  .site-header__contacts { gap: var(--space-6); }
  .site-header__contact-label { display: inline; }
}

/* Mobile nav: popover panel */
.site-nav {
  margin: 0 0 0 auto; padding: var(--space-6);
  width: min(100%, var(--nav-panel-width)); height: 100dvh; max-height: none;
  border: 0; background: var(--color-surface-deep); color: var(--color-text-inverse);
  overflow-y: auto;
}
.site-nav::backdrop { background: var(--color-overlay); }
.site-nav__inner { padding: 0; }
.site-nav__close { display: flex; margin-left: auto; color: var(--color-text-inverse); background: transparent; }
.site-nav__list { display: flex; flex-direction: column; padding: 0; margin: var(--space-4) 0 0; list-style: none; }
.site-nav__link {
  display: flex; align-items: center; gap: var(--space-1);
  min-height: var(--control-height-md); padding: var(--space-2) 0;
  font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--color-text-inverse); text-decoration: none;
}
.site-nav__link:hover, .site-nav__link[aria-current="page"] { color: var(--color-brand-light); }
.site-nav__caret { display: none; }
.site-nav__sub { padding: 0 0 var(--space-2) var(--space-4); margin: 0; list-style: none; }
.site-nav__sublink {
  display: flex; align-items: center; min-height: var(--control-height-sm);
  font-size: var(--text-sm); color: var(--color-text-inverse-muted); text-decoration: none;
}
.site-nav__sublink:hover, .site-nav__sublink[aria-current="page"] { color: var(--color-brand-light); }

@media (min-width: 1024px) {
  .site-header__toggle, .site-nav__close { display: none; }
  .site-nav {
    display: block; position: static; inset: auto;
    width: auto; height: auto; padding: 0; margin: 0;
    overflow: visible;
  }
  .site-nav__inner { padding-inline: var(--container-gutter); }
  .site-nav__list { flex-direction: row; justify-content: center; gap: var(--space-8); margin: 0; }
  .site-nav__item { position: relative; }
  .site-nav__link { min-height: var(--header-height); padding: 0; }
  .site-nav__caret { display: block; }
  .site-nav__sub {
    position: absolute; top: 100%; left: calc(var(--space-4) * -1); z-index: var(--z-dropdown);
    width: var(--dropdown-width); padding: var(--space-2) 0;
    background: var(--color-surface-deep); box-shadow: var(--shadow-lg);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    opacity: 0; visibility: hidden; transform: translateY(var(--space-2));
    transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard), visibility var(--duration-base);
  }
  .site-nav__item:hover > .site-nav__sub,
  .site-nav__item:focus-within > .site-nav__sub { opacity: 1; visibility: visible; transform: none; }
  .site-nav__sublink { padding-inline: var(--space-4); color: var(--color-text-inverse); }
  .site-nav__sublink:hover { background: var(--color-surface-inverse); }
}

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  position: relative; isolation: isolate;
  display: flex; align-items: center;
  min-height: var(--page-hero-min-height);
  padding-block: var(--space-12);
  color: var(--color-text-inverse);
  background: var(--color-surface-inverse);
}
.page-hero__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--color-overlay); }
.page-hero__inner { display: grid; gap: var(--space-8); align-items: center; }
.page-hero__content { display: flex; flex-direction: column; gap: var(--space-4); max-width: var(--container-narrow); }
.page-hero h1 { color: var(--color-text-inverse); text-transform: uppercase; text-shadow: var(--shadow-text); }
.page-hero__lead { font-size: var(--text-lg); text-shadow: var(--shadow-text); }
.page-hero__meta { font-size: var(--text-sm); color: var(--color-text-inverse); }
.page-hero--project { min-height: var(--project-hero-min-height); align-items: flex-end; }
.page-hero--project::before { background: linear-gradient(to top, var(--color-overlay-strong), var(--color-overlay-soft)); }

/* Service hero with estimate form */
.page-hero--form .page-hero__content { max-width: none; }
@media (min-width: 1024px) {
  .page-hero--form { min-height: var(--project-hero-min-height); }
  .page-hero--form .page-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-12); }
}
.estimate { scroll-margin-top: var(--space-6); }
.estimate__title { font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--color-text-inverse); margin-bottom: var(--space-3); }

/* ---------- Service page content ---------- */
.service-content__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-10); align-items: start; }
@media (min-width: 1024px) {
  .service-content__layout { grid-template-columns: minmax(0, 1fr) var(--sidebar-width); gap: var(--space-12); }
  .estimate-card { position: sticky; top: var(--space-6); }
}
.service-content .prose { font-size: var(--text-base); }
.estimate-card {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-6);
  background: var(--color-bg-alt);
  border-radius: var(--card-radius);
  border-top: var(--card-accent-border);
}
.estimate-card__title { font-size: var(--text-2xl); font-weight: var(--weight-bold); }
.estimate-card__contacts { display: grid; gap: var(--space-2); padding: 0; list-style: none; }
.estimate-card__contacts a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-height-sm); font-size: var(--text-sm); font-weight: var(--weight-bold); text-decoration: none; overflow-wrap: anywhere; }

/* ---------- Quality band ---------- */
.quality-band {
  position: relative; isolation: isolate;
  padding-block: var(--section-padding-y);
  color: var(--color-text-inverse);
  background: var(--color-surface-inverse);
}
.quality-band__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.quality-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--color-overlay); }
.quality-band__inner { display: grid; gap: var(--space-10); align-items: center; }
@media (min-width: 1024px) {
  .quality-band { min-height: var(--project-hero-min-height); display: flex; align-items: center; }
  .quality-band__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12); }
}
.quality-band__intro { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); text-align: center; }
.quality-band__title { color: var(--color-text-inverse); font-size: var(--text-3xl); text-shadow: var(--shadow-text); }
.quality-band__text { font-size: var(--text-xl); text-shadow: var(--shadow-text); }
.integrity-card {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-8) var(--space-6);
  background: var(--color-surface-deep);
  border-radius: var(--card-radius);
}
@media (min-width: 640px) { .integrity-card { padding-inline: var(--space-12); } }
.integrity-card__title { color: var(--color-text-inverse); font-size: var(--text-2xl); text-align: center; }
.integrity-card__text { font-size: var(--text-sm); }
.integrity-card .check-list { font-size: var(--text-sm); }

/* ---------- Reviews band ---------- */
.reviews-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: 88%;
  gap: var(--grid-gap);
  padding: 0 0 var(--space-4); margin: 0; list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: 0;
  scrollbar-color: var(--color-brand-light) transparent;
}
.reviews-row > li { scroll-snap-align: start; display: flex; }
.reviews-row .review-card { width: 100%; }
@media (min-width: 768px) { .reviews-row { grid-auto-columns: calc((100% - var(--grid-gap)) / 2); } }
.reviews-band__hint { margin-top: var(--space-3); font-size: var(--text-sm); text-align: center; color: var(--color-text-inverse-muted); }

/* ---------- Project page ---------- */
.project-content__text { margin-inline: auto; margin-bottom: var(--space-10); }

/* ---------- Blog post ---------- */
.post-body__figure { margin-bottom: var(--space-8); }
.post-body__img { width: 100%; border-radius: var(--card-radius); aspect-ratio: 16 / 9; object-fit: cover; }
.post-body .prose { margin-inline: auto; }
.post-cta {
  max-width: var(--measure); margin: var(--space-10) auto 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4);
  padding: var(--space-6); border-radius: var(--card-radius); background: var(--color-bg-alt);
}

/* ---------- Footer ---------- */
.site-footer { background: var(--color-surface-inverse); color: var(--color-text-inverse); font-size: var(--text-sm); }
.site-footer__grid { display: grid; gap: var(--space-8); padding-block: var(--space-12); }
@media (min-width: 640px) { .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .site-footer__grid { grid-template-columns: 1.1fr 1.3fr 0.9fr 1.3fr; } }
.site-footer__title { margin-bottom: var(--space-4); font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--color-brand-light); }
.site-footer__list { display: grid; gap: var(--space-2); padding: 0; margin: 0; list-style: none; }
.site-footer a { color: var(--color-text-inverse); text-decoration: none; }
.site-footer a:hover, .site-footer a[aria-current="page"] { color: var(--color-brand-light); }
.site-footer__nav a { display: inline-flex; align-items: center; min-height: var(--control-height-sm); }
.site-footer__contact { display: inline-flex; align-items: center; gap: var(--space-3); min-height: var(--control-height-sm); }
.site-footer__contact .icon { color: var(--color-brand-light); }
.site-footer__bottom { background: var(--color-surface-deep); padding-block: var(--space-4); text-align: center; color: var(--color-text-inverse); }

/* ---------- Text + form split (contact, leave a review) ---------- */
.form-split { display: grid; gap: var(--space-10); align-items: start; }
@media (min-width: 1024px) { .form-split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12); } }
.form-split__text { display: flex; flex-direction: column; gap: var(--space-4); }
.form-split__title { font-size: var(--text-2xl); font-weight: var(--weight-bold); }
.form-panel {
  padding: var(--space-6);
  background: var(--color-surface);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}

/* ---------- 404 / simple centered message ---------- */
.not-found { text-align: center; }
.not-found .btn-group { justify-content: center; margin-top: var(--space-6); }
.not-found p { margin-top: var(--space-4); }