/* ==========================================================================
   Mythogin — pages/main.css
   Home / hub-level compositions and sections (NOT primitives).

   RULES:
   - NO images load via CSS.
   - card.css owns ALL card media + <img> behavior.
   - This file only composes sections (HF Featured, Pillars, Curtain, etc.)
   ========================================================================== */


/* ==========================================================================
   HOME FEATURE (hf- namespace) — collision-proof
   NOTE: Your featured asset is 3:2 (1.5 AR).
   We hard-lock 3:2 using padding ratio (most override-resistant).
   ========================================================================== */

.hf{ margin-top: 18px; }

.hf-card{
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 6px);
  background: linear-gradient(180deg, rgba(17,21,27,.96), rgba(15,19,25,.96));
  box-shadow: var(--shadow);
  padding: var(--pad);
}

.hf-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.hf-title{
  margin:0;
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  font-size: 22px;
  letter-spacing: .01em;
}

.hf-chip{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(215,188,161,.35);
  background: rgba(215,188,161,.10);
  color: rgba(215,188,161,.95);
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  white-space: nowrap;
}

.hf-body{
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 18px;
  align-items: start;
}

/* ---- 3:2 media frame (ratio lock) ---- */
.hf-media{
  position: relative;
  display: block;
  width: 100%;
  max-width: 520px;

  /* guard against stray height rules */
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  justify-self: start;
  align-self: start;

  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  overflow: hidden;

  /* prevent baseline/layout oddities */
  line-height: 0;

  /* lens vibe without CSS images */
  background:
    radial-gradient(520px 260px at 20% 20%, rgba(215,188,161,.22), transparent 60%),
    radial-gradient(520px 260px at 90% 10%, rgba(161,187,215,.16), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0));
}

/* the ratio box */
.hf-media::before{
  content:"";
  display:block;
  padding-top: 66.6667%; /* 3:2 = 2/3 */
}

/* the actual image fills the ratio box */
.hf-img{
  position: absolute !important;
  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;
  max-width: none !important;

  display:block;

  object-fit: cover;
  object-position: 50% 35%;

  transform: none !important;
}

/* subtle sheen */
.hf-media::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index: 3;
  background-image: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,0));
  opacity:.10;
  mix-blend-mode: overlay;
}

.hf-copy{
  display:grid;
  gap: 14px;
  align-content:start;
  grid-template-rows: auto 1fr auto;
  min-height: 100%;
}

.hf-name{
  margin: 0;
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  font-size: 26px;
  line-height: 1.15;
}

.hf-name-main{ display:block; font-weight: 600; }

.hf-name-sub{
  display:block;
  margin-top: 4px;
  font-size: 0.82em;
  letter-spacing: .04em;
  color: rgba(215,188,161,.85);
  font-style: italic;
}

.hf-desc{
  margin:0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
  max-width: 92ch;
}

.hf-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap: 12px;
  margin-top: 14px;
}

.hf-chip--audio{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;

  /* match audio-chip surface */
  border: 1px solid rgba(215,188,161,.35);
  background: rgba(215,188,161,.10);
  color: #FFB13A;

  max-width: 100%;

  /* match chip typography */
  font-size: 11px;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.hf-audio-label{
  white-space: nowrap;
  white-space: nowrap;
    color: var(--audio);
}

.hf-audio-link{
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: rgba(232,237,245,.92);

  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: none;
  text-decoration: none;
}

.hf-audio-link:hover{
  border-color: rgba(215,188,161,.45);
  background: rgba(215,188,161,.10);
}

.hf-divider{
  margin: clamp(18px, 2.8vw, 26px) 0;
  border-top: 1px solid var(--line);
}
.hf-divider::after{ content:none; }

.hf-discover .section-title{
  margin: 0 0 12px;
  font-size: 22px;
}

.hf-discover .section-sub{
  margin: 0 0 18px;
  max-width: 120ch;
}

.section-sub--split span{ display:block; }


/* ==========================================================================
   PILLARS (homepage composition only)
   ========================================================================== */

.pillars-wrap{
  margin-top: 22px;
  padding-bottom: clamp(18px, 3vw, 28px);
}

.pillars{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 0;
}

.pillar{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(17,21,27,.96), rgba(15,19,25,.96));
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  overflow: hidden;
  min-height: 240px;
  transition: transform .18s ease, border-color .18s ease;
  text-decoration: none;
  color: inherit;
}

.pillar:hover{
  transform: translateY(-3px);
  border-color: rgba(161,187,215,.35);
}

.pillar-img{
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.pillar-photo{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.pillar-img::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index: 2;
  background:
    radial-gradient(420px 180px at 20% 25%, rgba(215,188,161,.10), transparent 60%),
    radial-gradient(420px 180px at 90% 10%, rgba(161,187,215,.08), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
}

.pillar-img::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index: 3;
  background-image: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,0));
  opacity:.10;
  mix-blend-mode: overlay;
}

.pillar-body{
  padding: 16px 16px 18px;
  display:grid;
  gap: 10px;
}

.meta{
  display:flex;
  align-items:center;
  gap: 10px;
  color: rgba(232,237,245,.85);
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.meta span{
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  background: rgba(255,255,255,.03);
}

.pillar-title{
  margin:0;
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: .01em;
}

.pillar-text{
  margin:0;
  color: var(--muted);
  font-size: 14px;
}


/* ==========================================================================
   CURTAIN (homepage composition only)
   ========================================================================== */

.curtain-wrap{
  margin-top: 28px;
  padding-bottom: clamp(18px, 3vw, 28px);
}

.curtain-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 18px;
}

.curtain-pillar{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(17,21,27,.96), rgba(15,19,25,.96));
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  display: grid;
  grid-template-rows: auto 1fr;
}

.curtain-pillar:hover{
  transform: translateY(-3px);
  border-color: rgba(161,187,215,.35);
  box-shadow: 0 16px 34px rgba(0,0,0,.35);
}

.curtain-img{
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.curtain-photo{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.curtain-img::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index: 2;
  background:
    radial-gradient(340px 170px at 18% 30%, rgba(215,188,161,.14), transparent 60%),
    radial-gradient(340px 170px at 82% 10%, rgba(161,187,215,.12), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
}

.curtain-img::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index: 3;
  background-image: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,0));
  opacity:.12;
  mix-blend-mode: overlay;
}

.curtain-body{
  padding: 16px 16px 18px;
  display:grid;
  gap: 10px;
  align-content: start;
}

.curtain-kicker{
  display:inline-flex;
  align-items:center;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(232,237,245,.85);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.curtain-title{
  margin:0;
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: .01em;
}

.curtain-text{
  margin:0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
  max-width: 80ch;
}


/* Intro list emphasis: make the labels bold + white */
.topics-intro .section-text ol,
.topics-intro .section-text li{
  color: rgba(232,237,245,.92);
}

.topics-intro .section-text li strong{
  color: rgba(255,255,255,.98);
  font-weight: 700;
}

.topics-intro .section-text ol li::marker {
  font-weight: 700;
  color: rgba(255,255,255,.98);
}
/* ==========================================================================
   Responsive stitching (homepage)
   ========================================================================== */

@media (max-width: 760px){
  .curtain-grid{ grid-template-columns: 1fr; }
  .pillars{ grid-template-columns: 1fr; }
  .hf-body{ grid-template-columns: 1fr; }

  .hf-media{
    max-width: none;
    justify-self: stretch;
  }
}

@media (max-width: 560px){
  .hf-actions{ margin-top: 10px; }
}