/**
 * Homepage v2.0 - Sections by content type
 * @description Section headings, block card layouts, season
 *              calendar (month groups + partner row), catalog preview (12 works + chips).
 *              Only rendered when inked.home.sections_v2 = 1; inert otherwise.
 * @task INK-HOME-SECTIONS
 * @date 2026-10-02
 */

/* ==========================================================================
   Season calendar — month groups, partner row first
   ========================================================================== */

.season-month + .season-month {
  margin-top: 1.5rem;
}

.season-month__title {
  margin: 0 0 0.75rem;
  font-family: var(--font-ui);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
}

.season-month--partner .card--event {
  outline: 1px solid var(--color-brand-accent);
  outline-offset: -1px;
  border-radius: var(--radius-lg);
}

/* Month / year / country links under the calendar — same pills as the catalog chips. */
.season-links {
  margin-top: 1.25rem;
}

.badge--status[data-status="partner"] {
  color: var(--color-brand-accent);
  background: rgba(232, 197, 71, 0.12);
  border-color: rgba(232, 197, 71, 0.25);
}

/* ==========================================================================
   Catalog preview — chips + 12-work grid
   ========================================================================== */

.catalog-chips {
  margin-bottom: 1.25rem;
}

/* <768px: horizontal carousel, card ≈75% of the screen, next card's edge visible,
   CSS scroll-snap only (no JS). ≥768px: grid, 4 then 6 columns. */
.catalog-preview-grid {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.25rem;
}

.catalog-preview-grid::-webkit-scrollbar { display: none; }

.cat-card {
  margin: 0;
  min-width: 0;
  flex: 0 0 75%;
  scroll-snap-align: start;
}

@media (min-width: 768px) {
  .catalog-preview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: visible;
    padding-bottom: 0;
  }
  .cat-card { flex: none; }
}

@media (min-width: 1024px) {
  .catalog-preview-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.cat-card__img {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-bg-card);
}

.cat-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-normal, 0.3s) ease;
}

.cat-card__img:hover img {
  transform: scale(1.04);
}

.cat-card__style {
  position: absolute;
  left: 0.4rem;
  bottom: 0.4rem;
  max-width: calc(100% - 0.8rem);
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-full);
  background: var(--color-overlay-scrim-strong, rgba(0, 0, 0, 0.6));
  color: #fff;
  font-family: var(--font-ui);
  font-size: var(--font-size-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cat-card__artist {
  margin-top: 0.35rem;
  font-family: var(--font-ui);
  font-size: var(--font-size-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cat-card__artist a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.cat-card__artist a:hover {
  color: var(--color-text);
}

/* ==========================================================================
   Section headings (Founder 03.10): caps section name + hairline to the right
   edge, serif phrase below, "All →" on the right.
   ========================================================================== */

.hmast {
  margin: var(--space-10, 2.5rem) 0 1.5rem;
}

.hmast__rubric {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.hmast__label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-brand-accent);
  white-space: nowrap;
}

.hmast__rule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--color-border);
}

.hmast__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.75rem;
}

.hmast__title {
  min-width: 0;
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--font-weight-normal);
  font-size: var(--text-3xl);
  line-height: 1.1;
  color: var(--color-text);
}

@media (min-width: 768px) {
  .hmast__title { font-size: var(--text-4xl); }
}

.hmast__more {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-link);
  text-decoration: none;
  white-space: nowrap;
}

.hmast__more:hover {
  color: var(--color-link-hover);
}

/* ==========================================================================
   Card layouts in the article blocks — same home.card.v2 cards, only size and
   placement change. Pinned uses .featured-grid itself (Editor's Picks, grid.css);
   the others reuse its proportions (narrow 1fr, wide .featured-span-2 = 3fr, 16:9).
   ========================================================================== */

.hp-lay {
  display: grid;
  gap: 1.25rem;
}

.hp-lay--lead   { grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)); }
.hp-lay--second { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) repeat(3, minmax(0, 1fr)); }
.hp-lay--quad   { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.hp-lay__rest { display: contents; }

/* Narrow cards stretch to the row the 16:9 wide card sets (as .featured-grid). */
.hp-lay--lead .card--overlay,
.hp-lay--second .card--overlay {
  height: 100%;
  aspect-ratio: unset;
}

.hp-lay--lead .card--overlay a,
.hp-lay--second .card--overlay a {
  height: 100%;
}

.hp-lay .featured-span-2 .card--overlay a {
  aspect-ratio: 16 / 9;
  height: auto;
}

/* Tablet: 2 columns, the wide card takes the full row (as .featured-grid). */
@media (min-width: 768px) and (max-width: 1023px) {
  .hp-lay--lead,
  .hp-lay--second { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-lay--lead .card--overlay,
  .hp-lay--second .card--overlay { aspect-ratio: 4 / 3; height: auto; }
  .hp-lay--quad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Mobile <768px */
@media (max-width: 767px) {
  /* Interviews: the lead card full width, the other three as a snap carousel. */
  .hp-lay--lead { display: block; }
  .hp-lay--lead > .featured-span-2 { margin-bottom: 0.75rem; }
  .hp-lay--lead > .featured-span-2 .card--overlay { aspect-ratio: 4 / 3; height: auto; }
  .hp-lay--lead > .featured-span-2 .card--overlay a { aspect-ratio: auto; height: 100%; }

  /* Interviews (rest) + Artists: carousel, ~72vw cards, the next one peeks. */
  .hp-lay__rest,
  .hp-lay--second {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.25rem;
  }
  .hp-lay__rest::-webkit-scrollbar,
  .hp-lay--second::-webkit-scrollbar { display: none; }
  .hp-lay__rest > *,
  .hp-lay--second > * {
    flex: 0 0 72vw;
    scroll-snap-align: start;
  }
  .hp-lay__rest .card--overlay,
  .hp-lay--second .card--overlay { aspect-ratio: 3 / 4; height: auto; }
  .hp-lay--second .featured-span-2 .card--overlay a { aspect-ratio: auto; height: 100%; }

  /* Knowledge: 2×2. */
  .hp-lay--quad { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .hp-lay__rest,
  .hp-lay--second { scroll-snap-type: none; }
}