/* ==========================================================================
   King Style — Layout
   Section structure, containers, grid/flex scaffolding.
   Vertical rhythm is driven entirely by the --section-* / --flow-gap tokens
   so no section can leave an unexplained gap, at any viewport width.
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Visual/photo sections only (work strip, gallery) — allowed to use more of
   the screen on large desktops than text sections. */
.container--wide {
  max-width: var(--content-wide);
}

section {
  padding-block: var(--section-pad-y);
}

/* --- One consistent gap between sections -----------------------------------
   `section` applies --section-pad-y at BOTH the top and bottom, so every
   boundary between two stacked sections rendered two full pads — a ~160px
   empty band on wide screens (the "gaten-achtige" ruimte). Collapse each
   boundary to a SINGLE --section-pad-y so the vertical rhythm is the same
   everywhere and stays responsive:
   - a plain section drops its top pad; the previous section's bottom pad
     already carries the rhythm;
   - a tinted .section--alt keeps its own top/bottom pad so its background
     block still breathes, and the section right before it drops its bottom
     pad instead;
   - the last section drops its bottom pad; the footer's own top pad closes
     the page.
   The hero keeps its own padding (its layout is unchanged). */
main > section + section:not(.section--alt) {
  padding-top: 0;
}

main > section:has(+ .section--alt) {
  padding-bottom: 0;
}

main > section:last-of-type {
  padding-bottom: 0;
}

/* In-page nav jumps must clear the fixed header, not tuck under it. */
main > section[id],
#top {
  scroll-margin-top: var(--nav-height);
}

/* Barely-there surface shift so consecutive sections read as distinct blocks
   without hard rules or heavy contrast. */
.section--alt {
  background: var(--color-bg-alt);
}

.section-head {
  max-width: 52ch;
  margin-bottom: var(--section-head-gap);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

/* ---- Header ---- */

.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-header);
  height: var(--nav-height);
  display: flex;
  align-items: center;
  background: linear-gradient(180deg, rgba(8, 7, 6, 0.6) 0%, rgba(8, 7, 6, 0) 100%);
  border-bottom: 1px solid transparent;
  transition: background var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out);
}

.site-header.is-scrolled {
  background: rgba(14, 13, 12, 0.92);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--color-border);
}

/* While the mobile menu is open, lift the header above the dimmed backdrop so
   the toggle (now an X) stays tappable in the top strip. */
body.menu-open .site-header {
  z-index: var(--z-mobile-menu);
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.site-header__nav {
  display: none;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Below 375px the header can't fit brand + phone pill + hamburger on one line
   (the hamburger gets pushed off-screen). Drop the pill there — tap-to-call
   stays in the menu, hero, visit card, CTA band and footer. */
@media (max-width: 374.98px) {
  .site-header__actions .btn--ghost {
    display: none;
  }
}

@media (min-width: 900px) {
  .site-header__nav {
    display: flex;
    align-items: center;
    gap: clamp(var(--space-4), 2.5vw, var(--space-6));
  }
}

/* ---- Hero (split: content panel + photo) ---- */

.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  padding-top: var(--nav-height);
}

.hero__content {
  padding-block: clamp(2.5rem, 1.5rem + 6vw, 5rem);
  padding-inline: var(--gutter);
  max-width: var(--content-max);
  width: 100%;
  margin-inline: auto;
}

.hero__media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Portrait salon photo (barber left, client right, King Style logo centre-
     left). The hero box is roughly portrait on mobile: the photo fills the
     width, so only a little top/bottom is trimmed — pin near the top so the
     barber's head and the full logo always stay in frame. */
  object-position: 50% 8%;
}

/* Keeps the hero photo from feeling detached from the dark UI around it. */
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 9, 8, 0.35) 0%,
    rgba(10, 9, 8, 0) 30%,
    rgba(10, 9, 8, 0) 70%,
    rgba(10, 9, 8, 0.5) 100%
  );
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

@media (min-width: 900px) {
  .hero {
    grid-template-columns: 1.08fr 0.92fr;
    align-items: stretch;
    /* Bounded hero height. The portrait photo used to stretch this row to its
       natural height (~1340px), which pushed the copy down and the CTAs below
       the fold; the image is now taken out of flow (see .hero__media img) so
       only this bound and the copy set the height. Kept under 1080 so the
       title, lead and both CTAs stay above the fold at 1920x1080. */
    min-height: min(90svh, 880px);
  }

  .hero__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-inline: 0;
    /* pull the inner content to the shared container gutter, right edge free
       so it can breathe toward the photo */
    padding-left: var(--gutter);
    max-width: calc(var(--content-max) / 2 + 60px);
    margin-inline: 0 0;
  }

  .hero__media {
    aspect-ratio: auto;
    height: 100%;
  }

  .hero__media img {
    /* Out of flow so the portrait photo cannot drive the grid/hero height;
       it just fills the bounded .hero__media box and is cropped by cover.
       object-position keeps the barber's face, the client and the full
       King Style logo in frame on the wider/shorter desktop box. */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 14%;
  }
}

@media (min-width: 1400px) {
  .hero__content {
    /* Align the copy's left edge with a centred container on wide screens
       using margin, not padding: padding here was subtracted from the
       max-width text column (~300px at 1920px), wrapping the title onto five
       lines and pushing the CTAs off a 1080-tall viewport. */
    padding-left: var(--gutter);
    margin-left: max(0px, calc((100vw - var(--content-max)) / 2 - var(--gutter)));
  }
}

/* ---- Work strip (mosaic) ---- */

.work-strip__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

.work-strip__item {
  aspect-ratio: 3 / 4;
}

/* Lead tile spans the full width only on small screens; on desktop every
   tile is an equal portrait so the row reads clean with no dead column. */
.work-strip__item--wide {
  grid-column: span 2;
  aspect-ratio: 16 / 10;
}

@media (min-width: 700px) {
  .work-strip__grid {
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-4);
  }
  .work-strip__item--wide {
    grid-column: auto;
    aspect-ratio: 3 / 4;
  }
}

/* ---- Price list ---- */

.pricelist {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--flow-gap) clamp(2rem, 5vw, 4.5rem);
}

@media (min-width: 760px) {
  .pricelist {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.pricelist__group > h3 {
  font-size: var(--fs-h3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-accent-line);
  margin-bottom: var(--space-2);
}

.pricelist__note {
  margin-top: var(--space-5);
  font-family: var(--font-body);
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-accent);
}

.pricelist__kids {
  margin-top: var(--flow-gap);
  color: var(--color-text-muted);
  font-size: var(--fs-200);
}

.services-cta {
  margin-top: var(--flow-gap);
}

/* ---- Why (quiet text grid, no media) ---- */

.why-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6) var(--space-8);
  margin-top: var(--flow-gap);
}

@media (min-width: 720px) {
  .why-list {
    grid-template-columns: 1fr 1fr;
  }
}

.why-item {
  display: flex;
  gap: var(--space-4);
}

/* ---- Gallery ---- */

.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--flow-gap);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

@media (min-width: 620px) {
  /* 9 photos -> a clean 3 x 3 block, capped so tiles stay a sensible size */
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    max-width: 1120px;
    margin-inline: auto;
  }
}

.gallery-item {
  aspect-ratio: 4 / 5;
}

/* ---- Reviews ---- */

.reviews-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(82%, 340px);
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: var(--space-4);
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: thin;
}

.reviews-track > * {
  scroll-snap-align: start;
}

@media (min-width: 900px) {
  .reviews-track {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-columns: auto;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
}

.reviews-cta {
  margin-top: var(--flow-gap);
  text-align: center;
}

/* ---- About ---- */

.about-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--flow-gap);
  align-items: center;
}

.about-split__media {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.about-split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}

.about-split h2 {
  margin-bottom: var(--space-4);
}

.about-split p + p {
  margin-top: var(--space-4);
}

@media (min-width: 900px) {
  .about-split {
    grid-template-columns: 1fr 1fr;
    gap: clamp(var(--space-7), 5vw, 5.5rem);
  }
}

.about-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-top: var(--flow-gap);
}

/* ---- Visit (hours + location) ---- */

.visit-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: start;   /* each card sizes to its own content, no stretched gaps */
}

@media (min-width: 800px) {
  .visit-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---- Contact / CTA ---- */

.cta-band {
  text-align: center;
  padding: clamp(2.25rem, 1.5rem + 3vw, 3.75rem) var(--gutter);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-elevated);
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.ig-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin-top: var(--flow-gap);
}

@media (min-width: 560px) {
  .ig-strip {
    grid-template-columns: repeat(4, 1fr);
  }
}

.ig-strip__item {
  aspect-ratio: 1 / 1;
}

.social-row {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--flow-gap);
}

/* ---- Footer ---- */

.site-footer {
  padding-block: var(--section-pad-y) var(--space-6);
  border-top: 1px solid var(--color-border);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--flow-gap);
}

@media (min-width: 700px) {
  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}

.footer-bottom {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
}