/*
 * home.css — page-specific layout for the home page.
 * Consumes tokens.css + the card/header/footer component styles.
 */

/* ---------- Hero (full-bleed) ---------- */
/*
 * Full viewport width, substantial height. `clamp()` keeps the hero:
 *   - at least 520px tall on short screens,
 *   - around 80vh on normal displays,
 *   - capped at 760px so it doesn't dominate 4K monitors.
 * The section itself handles the background image; the inner element
 * controls content width and vertical alignment.
 */
.home-hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);    /* break out if inside a container */
  min-height: clamp(416px, 64vh, 608px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-paper);
  text-align: center;
  background-color: #2a3a45;
  /* Default background used only when the home config has no hero image.
     When it does, the inline style on the element takes precedence. */
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.55)),
    linear-gradient(135deg, #2a3a45 0%, #557a8a 60%, #7ba1b5 100%);
  background-size: cover;
  background-position: center;
}

.home-hero__inner {
  position: relative;
  width: 100%;
  padding-block: var(--space-9);
}

.home-hero__title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, var(--type-5xl));
  color: var(--color-paper);
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-4);
}

.home-hero__subtitle {
  font-size: var(--type-lg);
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 var(--space-5);
}

/* ---------- Latest posts section ---------- */

.home-latest {
  padding-block: var(--space-8);
}

.home-latest__more {
  text-align: center;
  margin-top: var(--space-7);
}

/* ---------- Feature Banner (dark photographic section) ---------- */

.home-feature {
  background-color: var(--color-brand);
  color: var(--color-brand-ink);
  padding-block: var(--space-9);
  text-align: center;
}

/* When admin picks a banner image, the inline `background-image` on the
   element layers a dark gradient on top of the photo for text contrast.
   We switch off the solid brand colour so the photo shows through, and
   cover-crop it to fill the band at any viewport width. */
.home-feature--with-bg {
  background-color: #0f172a;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.home-feature__inner {
  max-width: 800px;
}

.home-feature__title {
  font-family: var(--font-serif);
  font-size: var(--type-3xl);
  color: var(--color-brand-ink);
  margin: 0 0 var(--space-4);
}

.home-feature__body {
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--type-lg);
  margin: 0 0 var(--space-5);
}

/* The .home-about* atoms live in about.css now (shared between the
   home page and the blog detail page so both render the same band). */

/* ---------- Featured (1 lead + 3 compact) ---------- */

.home-featured {
  padding-block: var(--space-8);
}

.home-featured__layout {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: var(--space-5);
}

.home-featured__stack {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: var(--space-3);
}

/* Compact tile body: keep the type compact so three rows on the right
   match the lead-card height without cramping. */
.home-featured__stack .card--compact .card__body {
  padding: var(--space-3) var(--space-4);
  gap: 4px;
}
.home-featured__stack .card--compact .card__title {
  font-size: var(--type-base);
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.home-featured__stack .card--compact .card__subtitle {
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

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