/* pages.css — home, blog, article detail, simple pages (layout: layout.css) */

/* ── Home: page rhythm ───────────────────────────────────── */

.home-page {
  --home-space-section: clamp(2rem, 3vw, 2.5rem);
  --mosaic-gap: 6px;
  min-width: 0;
  overflow-x: clip;
}

/* Band colors and the brand header/light footer come from the shared
   "banded" pattern in layout.css (home opts in via body_class). */

.main:has(.home-page) {
  min-height: 0;
}

@media (max-width: 1199px) {
  .home-page {
    --home-space-section: 2.25rem;
  }
}

@media (max-width: 767px) {
  .home-page {
    --media-section-space-y: 1.5rem;
  }
}

@media (max-width: 479px) {
  .home-page {
    --media-section-space-y: 1.25rem;
  }
}

/* ── Image Mosaic ────────────────────────────────────────── */

.image-mosaic {
  padding: var(--home-space-section, 2.5rem) 0;
  background-color: var(--color-bg);
  --mosaic-unit-height: clamp(10rem, 18vw, 15rem);
}

.image-mosaic .container {
  min-width: 0;
}

.image-mosaic__grid {
  display: flex;
  gap: var(--mosaic-gap);
  width: 100%;
  min-width: 0;
  background-color: var(--color-bg);
}

.image-mosaic__group {
  display: flex;
  flex: 1;
  gap: var(--mosaic-gap);
  min-width: 0;
  height: var(--mosaic-unit-height);
}

.image-mosaic__stack {
  display: flex;
  flex: 0.65;
  flex-direction: column;
  gap: var(--mosaic-gap);
  min-width: 0;
  height: 100%;
  min-height: 0;
}

.image-mosaic__item {
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border-radius: 0;
  background-color: var(--color-surface-muted);
}

@media (min-width: 768px) {
  .image-mosaic__group:first-child > .image-mosaic__item--large {
    border-top-left-radius: var(--radius-sm);
    border-bottom-left-radius: var(--radius-sm);
  }

  .image-mosaic__group:last-child
    .image-mosaic__stack
    > .image-mosaic__item--small:first-child {
    border-top-right-radius: var(--radius-sm);
  }

  .image-mosaic__group:last-child
    .image-mosaic__stack
    > .image-mosaic__item--small:last-child {
    border-bottom-right-radius: var(--radius-sm);
  }
}

.image-mosaic__item--large {
  flex: 1.35;
  height: 100%;
}

.image-mosaic__item--small {
  flex: 1;
  width: 100%;
  min-height: 0;
}

.image-mosaic__image {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center;
}

.image-mosaic__caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  padding: 0.625rem 0.75rem;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-inverted-text);
  background-color: var(--color-overlay);
}

/* Mobile: mosaic becomes a one-photo-at-a-time scroll-snap slider */

@media (max-width: 767px) {
  .image-mosaic {
    --mosaic-unit-height: clamp(14rem, 60vw, 20rem);
  }

  .image-mosaic__grid {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .image-mosaic__grid::-webkit-scrollbar {
    display: none;
  }

  .image-mosaic__group,
  .image-mosaic__stack {
    display: contents;
  }

  .image-mosaic__item {
    flex: 0 0 100%;
    height: var(--mosaic-unit-height);
    border-radius: var(--radius-sm);
    scroll-snap-align: start;
  }
}

/* ── Home: promo section (Media) ─────────────────────────── */

/* Light band with light-theme colors, regardless of the site theme */

.home-media {
  padding: calc(var(--home-space-section, 2.5rem) * 1.5) 0;
  background-color: var(--home-band-bg);
}

.home-media .container {
  min-width: 0;
}

.home-promo__content {
  max-width: 44rem;
}

.home-promo__title {
  margin: 0 0 1rem;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: #203472;
}

.home-promo__lead {
  margin: 0 0 0.75rem;
  font-size: clamp(var(--text-lg), 1.8vw, var(--text-xl));
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
  color: #1a1a1a;
}

.home-promo__text {
  margin: 0;
  max-width: 56ch;
  color: #4b5563;
}

/* Publications cards: light band with palette card colors (no pure white) */

.home-page .media-section--theme-band {
  border-top: 0;
  background-color: var(--home-band-bg);

  /* Re-theme cards for the light band (dark theme is forced site-wide) */
  --color-surface: #f8fafc;
  --color-surface-muted: #e8f0fe;
  --color-border: #e2e8f0;
  --color-text: #1a1a1a;
  --color-text-muted: #4b5563;
}

.home-page .media-card {
  box-shadow:
    0 4px 14px rgba(15, 23, 42, 0.08),
    0 1px 4px rgba(15, 23, 42, 0.05);
  transition:
    box-shadow var(--transition-base),
    border-color var(--transition-fast);
}

.home-page .media-card:has(.media-card__link:hover),
.home-page .media-card:has(.media-card__link:focus-visible) {
  border-color: #203472;
  box-shadow:
    0 10px 26px rgba(15, 23, 42, 0.12),
    0 2px 8px rgba(15, 23, 42, 0.07);
}

/* ── Home: brand hero ────────────────────────────────────── */

.home-page .page-hero {
  --page-hero-space-top: clamp(3rem, 6vw, 5rem);
  --page-hero-space-bottom: clamp(3rem, 6vw, 5rem);
  background-color: var(--color-brand);
}

.home-page .page-hero__title {
  font-size: clamp(3rem, 5vw, 4.5rem);
}

.home-page .page-hero__subtitle {
  margin-bottom: 1.25rem;
  font-size: clamp(1.375rem, 2.5vw, 1.75rem);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.home-page .page-hero__description {
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
  font-size: clamp(var(--text-lg), 1.5vw, var(--text-xl));
}

.home-page .page-hero__actions .button {
  min-height: 3.25rem;
  padding: 0.875rem 2rem;
  font-size: var(--text-base);
}

@media (max-width: 767px) {
  .home-page .page-hero__title {
    font-size: clamp(2.5rem, 11vw, 3.5rem);
  }
}