/* 12-column desktop grid + responsive page margins. Mobile collapses to a
   single-column flow rather than preserving the desktop grid. */

.site-container {
  width: 100%;
  padding-left: var(--page-margin);
  padding-right: var(--page-margin);
}

.grid {
  display: grid;
  grid-template-columns: 1fr; /* mobile: single column */
  gap: var(--space-24);
}

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

/* Image-spacing hierarchy utility classes — see docs/design-system.md section 5.
   Applied by templates as content is built out; not forced onto every image. */
.image-gap-sequence {
  margin-bottom: var(--space-32);
}

.image-gap-work {
  margin-bottom: var(--space-64);
}

.image-gap-transition {
  margin-bottom: var(--space-128);
}

.image-gap-section {
  margin-bottom: var(--space-192);
}

/* Homepage editorial opening — structural scaffold; hero photograph not yet
   selected (see docs/design-system.md). The 128px bottom padding is the
   "major visual transition" spacing tier, separating the dominant hero from
   the smaller editorial content that follows. */
.editorial-opening {
  padding-top: var(--space-64);
  padding-bottom: var(--space-128);
}

.editorial-opening__image-placeholder {
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 1px dashed var(--color-border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
}

.editorial-opening__placeholder-label {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: var(--nav-letter-spacing);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Selected hero photograph. Never cropped - object-fit: contain only ever
   letterboxes/pillarboxes, it cannot cut off part of the image. Viewport-
   relative max-height (not a fixed pixel value) lets the hero dominate the
   opening view for both landscape and portrait photographs: landscape
   images are unaffected (they're already shorter than 85vh at full width),
   portrait images are capped so they don't force excessive scrolling before
   anything else appears. Any resulting empty space is transparent, so the
   existing black background (base.css) shows through - no new color added. */
.editorial-opening__image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 85vh;
  object-fit: contain;
}

/* Homepage introductory/editorial area — optional, minimal. Structural
   scaffold only; real copy is not yet written. */
.homepage-intro {
  max-width: var(--measure-text);
}

.homepage-intro__placeholder {
  color: var(--color-text-muted);
}

/* Subtle cue toward PROJECTS — structural gap above uses the "structural"
   spacing tier (nav-to-content relationships). No PROJECTS Page exists yet,
   so this links nowhere real until one is created (same placeholder pattern
   as the primary nav's own PROJECTS link). */
.homepage-cta {
  margin-top: var(--space-64);
  padding-bottom: var(--space-96);
}

.homepage-cta__link {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--nav-font-size);
  letter-spacing: var(--nav-letter-spacing);
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-border-subtle);
  padding-bottom: var(--space-4);
  transition: opacity 0.15s ease;
}

.homepage-cta__link:hover {
  opacity: 0.7;
}