/* ==========================================================================
   pages/herojourneys.css — Topics hub (“Hero Journeys across Culture”) ONLY
   Owns:
   - Intro body typography spacing
   - Category tiles grid layout + spacing
   Does NOT:
   - Define global card system (section-card / card-*)
   ========================================================================== */

.topics{
  padding-bottom: 0px;
}

/* Intro block inner content */
.topics-intro-body{
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.topics-framework{
  margin: 6px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
}

.topics-framework li{
  color: rgba(170,180,195,.92);
  line-height: 1.5;
}

/* ==========================================================================

   Categories Section (surface padding + grid)
   NOTE: container visuals come from .section-card.card--surface in card.css
   We only add spacing/padding/layout here.

   ========================================================================== */

.topics-cats{
  padding: 26px 0 0;
}

/* This class is on the same node as .section-card.card--surface */
.topics-cats-card{
  padding: clamp(18px, 2.2vw, 24px);
  overflow: visible; /* guard against accidental clipping by legacy rules */
}

.topics-cats-title{
  margin: 0 0 8px;
}

.topics-cats-sub{
  margin: 0 0 18px;
  max-width: 70ch;
  color: rgba(170,180,195,.9);
}

/* Tile grid layout */
.topics-cats-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 18px);
  align-items: start;
}

/* 3 → 2 */
@media (max-width: 1080px){
  .topics-cats-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 2 → 1 */
@media (max-width: 640px){
  .topics-cats-grid{
    grid-template-columns: 1fr;
  }
}