/* ============================================================
   CCC - Page-level composition layouts
   How specific pages arrange their component blocks.
   ============================================================ */

/* ----- Homepage ----- */

.home-layout {
  display: grid;
  gap: var(--space-section);
  padding-block: var(--space-section-tight);
}

.home-layout > .container,
.home-layout > .container--wide {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
}

/* Homepage feature cards: 3-up bento (Demo Cities / Library / News) */
.home-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
}

@media (max-width: 900px) {
  .home-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .home-cards {
    grid-template-columns: 1fr;
  }
}

/* ----- Listings (Cities / Library / PR Kit) ----- */

.listing-layout {
  display: grid;
  gap: var(--space-section);
}

.listing-section {
  display: grid;
  gap: clamp(20px, 3vw, 36px);
}

/* ----- City detail ----- */

.city-layout {
  display: grid;
  gap: var(--space-section);
}

.city-approach {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
  padding: clamp(24px, 3vw, 40px);
  background: var(--color-action-alt);
  border-radius: var(--radius-panel);
  color: var(--color-on-action);
}

.city-approach h2 {
  max-width: 28ch;
  color: inherit;
  font-size: clamp(1.7rem, 1.3rem + 1.1vw, 2.3rem);
  font-weight: var(--weight-medium);
  line-height: 1.1;
}

.city-approach p {
  max-width: 56ch;
  margin-top: var(--sp-3);
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--fs-lede);
  line-height: var(--lh-snug);
  text-align: var(--body-copy-align);
}

.city-approach--coming-soon {
  grid-template-columns: 1fr;
  background: var(--color-paper);
  color: var(--color-ink-soft);
}

.city-approach--coming-soon h2 {
  color: var(--color-ink-soft);
}

@media (max-width: 720px) {
  .city-approach {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

/* ----- Advisory desk: form + contact split ----- */

.advisory-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.6fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

@media (max-width: 900px) {
  .advisory-layout {
    grid-template-columns: 1fr;
  }
}

/* ----- About: text + media facts ----- */

.about-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
}

.about-layout__copy h1 {
  margin-bottom: var(--sp-5);
}

.about-facts {
  display: grid;
  gap: var(--sp-5);
  padding: clamp(24px, 3vw, 40px);
  background: var(--color-paper);
  border-radius: var(--radius-panel);
}

.about-facts__row {
  display: grid;
  gap: var(--sp-1);
}

.about-facts__row dt {
  color: var(--color-green);
  font-size: var(--fs-tag);
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.about-facts__row dd {
  margin: 0;
  font-size: var(--fs-h4);
  font-weight: var(--weight-medium);
}

@media (max-width: 900px) {
  .about-layout {
    grid-template-columns: 1fr;
  }
}

/* ----- News archive ----- */

.news-layout {
  display: grid;
  gap: var(--space-section-tight);
}

/* ----- Section block (a labelled section with eyebrow + heading + body) ----- */

.block {
  display: grid;
  gap: clamp(20px, 3vw, 40px);
}

.block + .block {
  margin-top: var(--space-section);
}

.block__header {
  display: grid;
  gap: var(--sp-3);
  max-width: 60ch;
}

.block__header h2 {
  font-size: var(--fs-h2);
  font-weight: var(--weight-medium);
}

.block__lead {
  color: var(--color-ink-soft);
  font-size: var(--fs-lede);
  line-height: var(--lh-snug);
}

/* ----- Page wrapper ----- */

.site-main {
  min-height: 60vh;
  padding-block-end: clamp(40px, 6vw, 96px);
}

/* ----- Spacing and helper utilities (replace one-off inline styles) ----- */

.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }
.mb-5 { margin-bottom: var(--sp-5); }
.pagination-row { margin-top: var(--sp-7); }
.text-magenta { color: var(--color-magenta); }