/* ==========================================================================
   Layout — page structure, containers, section rhythm
   Mobile-first; breakpoints at 40em (~640px) and 56.25em (~900px), chosen
   where the card grid and consultation split actually break.
   ========================================================================== */

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

/* Mobile: app-bar row — logo inline-start, menu toggle inline-end.
   The header anchors the absolutely-positioned mobile menu panel. */

.site-header {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs);
  padding-block: var(--space-sm);
  padding-inline: var(--container-gutter);
}

/* From 40em: the mockup's centered stack — logo above inline nav */

@media (min-width: 40em) {
  .site-header {
    flex-direction: column;
    justify-content: center;
    gap: var(--space-sm);
    padding-block: var(--space-md) var(--space-sm);
  }
}

/* --------------------------------------------------------------------------
   Main — section rhythm and content containers
   -------------------------------------------------------------------------- */

.site-main > section + section {
  margin-block-start: var(--space-2xl);
}

.site-main {
  margin-block-end: var(--space-2xl);
}

.hero {
  max-inline-size: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}

.about,
.services,
.consultation {
  max-inline-size: calc(var(--container-max) + 2 * var(--container-gutter));
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}

/* --------------------------------------------------------------------------
   Gallery — scroll-snap carousel: 1-up, then 2-up, then 3-up per view.
   Works without JS as a native swipe/scroll row; JS adds the arrows.
   -------------------------------------------------------------------------- */

.gallery {
  position: relative;
  margin-block-start: var(--space-xl);
}

/* Slides run 25% smaller than a full view (owner request): mobile shows one
   slide with the next peeking; from 40em the whole gallery narrows to 75%
   and centers, so the 2-up/3-up views shrink proportionally. */

@media (min-width: 40em) {
  .gallery {
    max-inline-size: 75%;
    margin-inline: auto;
  }
}

.gallery__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 56.25%;
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-block-end: var(--space-2xs);
}

.gallery__slide {
  scroll-snap-align: start;
}

@media (min-width: 40em) {
  .gallery__track {
    grid-auto-columns: calc((100% - var(--space-md)) / 2);
  }
}

@media (min-width: 56.25em) {
  .gallery__track {
    grid-auto-columns: calc((100% - 2 * var(--space-md)) / 3);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .gallery__track {
    scroll-behavior: smooth;
  }
}


/* --------------------------------------------------------------------------
   Consultation — stacked, then two-column split
   -------------------------------------------------------------------------- */

.consultation {
  display: grid;
  align-items: center;
  gap: var(--space-xl);
  border-block: 1px solid var(--color-border-subtle);
  padding-block: var(--space-xl);
}

@media (min-width: 56.25em) {
  .consultation {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    column-gap: var(--space-2xl);
  }
}

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

.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  padding-block: var(--space-xl);
  padding-inline: var(--container-gutter);
  background-color: var(--color-surface-brand);
}

.site-footer__logo {
  inline-size: 75vw;
}