/* ==========================================================================
   MadCo Glass - layout.css
   Grid, section rhythm and page structure.
   Reference behavior: full bleed sections, contained inner width, backgrounds
   alternate white and light neutral, hard edges between sections, no divider
   rules and no overlap transitions.
   ========================================================================== */

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

.container-narrow {
  width: 100%;
  max-width: 780px;
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

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

@media (min-width: 1024px) {
  .section { padding-block: var(--section-pad-y-lg); }
}

/* --------------------------------------------------------------------------
   Section heading blocks
   No eyebrow labels above headings on this project. The heading carries the
   section on its own.
   -------------------------------------------------------------------------- */

.section-head { margin-bottom: var(--space-xl); }

.section-head-centered {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: var(--space-2xl);
}

.section-head-centered p { margin-inline: auto; }

/* --------------------------------------------------------------------------
   Split layout
   Copy one side, imagery the other, sides alternating down the page.
   Ratio between 50/50 and 55/45. Single column below the large breakpoint.
   -------------------------------------------------------------------------- */

.split {
  display: grid;
  gap: var(--space-2xl);
  align-items: center;
}

@media (min-width: 1024px) {
  .split {
    grid-template-columns: 1.1fr 1fr;
    gap: 4rem;
  }

  .split-media-first .split-media { order: -1; }
}

.split-copy > *:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Stacked image pair
   Two images overlapping in one column. A recurring device in the reference.
   The overlap only applies at large sizes where there is room for it.
   -------------------------------------------------------------------------- */

.media-stack { position: relative; }

.media-stack-primary img,
.media-stack-secondary img {
  border-radius: var(--radius-media);
  width: 100%;
}

.media-stack-secondary { margin-top: var(--space-md); width: 70%; }

@media (min-width: 768px) {
  .media-stack-secondary {
    position: absolute;
    right: -1.25rem;
    bottom: -2.25rem;
    width: 46%;
    margin-top: 0;
  }

  .media-stack-secondary img {
    box-shadow: var(--shadow-overlap);
    border: var(--border-hairline) solid var(--color-white);
  }

  .media-stack { margin-bottom: 2.25rem; }
}

/* --------------------------------------------------------------------------
   Service grid
   A bordered grid of cells, not detached cards. Cells share hairline borders.
   The lead cell is filled and inverted.
   -------------------------------------------------------------------------- */

.service-grid {
  display: grid;
  grid-template-columns: 1fr;
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-component);
  overflow: hidden;
  background-color: var(--color-white);
}

@media (min-width: 640px) {
  .service-grid { grid-template-columns: repeat(2, 1fr); }
}

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

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

.gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 640px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------------------------------
   Service area list
   -------------------------------------------------------------------------- */

/* Columns rather than a grid. A two column grid forces every row to the height
   of its tallest item, which left a visible gap under any single line entry
   sitting beside a wrapped one. */
.area-list {
  display: block;
  padding: 0;
  margin: 0 0 var(--space-lg);
  list-style: none;
}

.area-list li { break-inside: avoid; }

@media (min-width: 640px) {
  .area-list {
    columns: 2;
    column-gap: var(--space-xl);
  }
}

/* --------------------------------------------------------------------------
   Contact layout
   -------------------------------------------------------------------------- */

.contact-layout {
  display: grid;
  gap: var(--space-2xl);
  align-items: start;
}

@media (min-width: 1024px) {
  .contact-layout { grid-template-columns: 1.15fr 0.85fr; gap: 4rem; }
}

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 640px) {
  .form-row-split { grid-template-columns: repeat(2, 1fr); }
}

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

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

@media (min-width: 768px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-2xl); }
}

@media (min-width: 1024px) {
  /* Brand block, then three heading columns whose headings all sit on the
     same baseline so Contact, Services and Quick Links line up. */
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
}

/* Three column variant, used by the commercial services grid --------------- */

@media (min-width: 1024px) {
  .service-grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* Breathing room between a split block and the grid that follows it. Without
   this the estimate button in the split copy sits almost against the grid. */
.split + .service-grid { margin-top: 3.5rem; }

/* Any image sitting directly in a split media column carries the media radius */
.split-media > img { border-radius: var(--radius-media); width: 100%; }