/*
 * layout.css — content wrappers, breadcrumbs, full-bleed section helpers,
 * responsive breakpoints. No component styling here.
 */

/* ==============================
   Content wrappers
   ============================== */

.wrap,
.wrap-narrow,
.wrap-prose {
  margin: 0 auto;
  padding: 0 28px;
}

.wrap        { max-width: 1280px; }
.wrap-narrow { max-width: 980px;  }
.wrap-prose  { max-width: 760px;  }

/* ==============================
   Breadcrumbs
   ============================== */

.breadcrumbs {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ink-mute);
  padding: 28px 0 0;
  text-transform: uppercase;
}

.breadcrumbs a {
  color: var(--ink-mute);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}

.breadcrumbs a:hover {
  border-color: var(--clay);
  color: var(--ink);
}

.breadcrumbs .sep {
  margin: 0 10px;
  opacity: .5;
}

.breadcrumbs [aria-current="page"] {
  color: var(--ink);
}

/* ==============================
   Full-bleed sections
   ============================== */

.full-bleed,
.full-bleed-section {
  margin: 0 -28px;
  padding: 110px 28px;
}

.full-bleed.bg-cream-deep,
.full-bleed-section.bg-cream-deep {
  background: var(--cream-deep);
}

.full-bleed.bg-linen,
.full-bleed-section.bg-linen {
  background: var(--linen);
}

.full-bleed.bg-ink,
.full-bleed-section.bg-ink {
  background: var(--ink);
  color: var(--cream);
}

@media (min-width: 1340px) {

  .full-bleed,
  .full-bleed-section {
    margin: 0 calc(-50vw + 50%);
    padding: 110px calc(50vw - 50%);
  }
}

@media (max-width: 1000px) {

  .full-bleed,
  .full-bleed-section {
    padding-top: 64px;
    padding-bottom: 64px;
  }
}

@media (max-width: 640px) {

  .wrap,
  .wrap-narrow,
  .wrap-prose {
    padding: 0 18px;
  }

  .full-bleed,
  .full-bleed-section {
    margin: 0 -18px;
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* ==============================
   Common flow utilities
   ============================== */

.stack > * + * {
  margin-top: 1em;
}

.grid {
  display: grid;
  gap: 24px;
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1000px) {

  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}