/* Shared shell for the “modern” pages (Q&A, catalogue, latest, entities, etc.)
   Uses site variables so html[data-site-theme="parchment"] applies consistently. */

:root{
  --trih-hero-overlay-from: rgba(5,6,8,0.84);
  --trih-hero-overlay-to: rgba(5,6,8,0.84);
  --trih-hero-glow-gold: rgba(244,180,26,0.18);
  --trih-hero-glow-soft: rgba(255,255,255,0.06);
  --trih-hero-fallback: linear-gradient(135deg, #0f172a, #111827);

  --trih-panel-bg: rgba(255,255,255,0.06);
  --trih-panel-border: rgba(255,255,255,0.14);
  --trih-panel-shadow: 0 12px 32px rgba(0,0,0,0.28);

  --trih-chip-bg: rgba(255,255,255,0.08);
  --trih-chip-border: rgba(255,255,255,0.16);

  --trih-card-bg: rgba(255,255,255,0.06);
  --trih-card-border: rgba(255,255,255,0.14);
  --trih-card-shadow: 0 12px 32px rgba(0,0,0,0.28);
  --trih-card-shadow-hover: 0 14px 36px rgba(0,0,0,0.32);

  --trih-empty-border: rgba(255,255,255,0.22);
}

html[data-site-theme='parchment']{
  /* Match Search Explorer parchment hero overlay */
  --trih-hero-overlay-from: rgba(253,246,227,0.56);
  --trih-hero-overlay-to: rgba(253,246,227,0.72);
  --trih-hero-glow-gold: rgba(183,149,11,0.18);
  --trih-hero-glow-soft: rgba(192,57,43,0.08);
  --trih-hero-fallback: linear-gradient(135deg, rgba(239,234,221,1), rgba(230,222,205,1));

  --trih-panel-bg: rgba(239,234,221,0.92);
  --trih-panel-border: rgba(215,207,184,0.95);
  --trih-panel-shadow: 0 10px 26px rgba(67,50,31,0.12);

  --trih-chip-bg: rgba(253,246,227,0.72);
  --trih-chip-border: rgba(215,207,184,0.95);

  --trih-card-bg: rgba(239,234,221,0.95);
  --trih-card-border: rgba(215,207,184,0.95);
  --trih-card-shadow: 0 10px 26px rgba(67,50,31,0.10);
  --trih-card-shadow-hover: 0 14px 34px rgba(67,50,31,0.14);

  --trih-empty-border: rgba(215,207,184,0.95);
}

.trih-shell{
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

.trih-hero{
  padding: 80px 8vw 36px;
  background:
    linear-gradient(var(--trih-hero-overlay-from), var(--trih-hero-overlay-to)),
    radial-gradient(120% 120% at 12% 10%, var(--trih-hero-glow-gold), transparent 48%),
    radial-gradient(120% 120% at 80% -10%, var(--trih-hero-glow-soft), transparent 45%),
    var(--hero-img, var(--trih-hero-fallback));
  background-size: cover;
  background-position: center;
}

.trih-hero h1{
  font-family: 'Playfair Display', 'Roboto Serif', serif;
  font-size: clamp(2.2rem, 3vw, 3.2rem);
  margin: 0 0 10px;
  color: var(--text);
}

.trih-hero .muted{ color: var(--text); opacity: 0.86; }
.trih-hero .lead{ color: var(--text); opacity: 0.92; }

.trih-content{ padding: 24px 8vw 64px; }

.entity-shell .trih-hero{ padding: 56px 8vw 36px; }

.trih-panel{
  background: var(--trih-panel-bg);
  border: 1px solid var(--trih-panel-border);
  border-radius: 14px;
  padding: 16px;
  box-shadow: var(--trih-panel-shadow);
}

.trih-suggestions{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.trih-chip{
  background: var(--trih-chip-bg);
  border: 1px solid var(--trih-chip-border);
  border-radius: 999px;
  padding: 6px 12px;
  color: var(--text);
  cursor: pointer;
}

.btn-gold{
  background: var(--trih-gold, #f4b41a);
  color: var(--accent-ink);
  border: 1px solid var(--trih-gold, #f4b41a);
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 800;
  text-decoration: none;
}

.btn-outline-light{
  color: var(--text);
  border: 1px solid var(--trih-panel-border);
  border-radius: 10px;
  padding: 10px 14px;
  text-decoration: none;
  background: transparent;
}
.btn-outline-light:hover{
  border-color: var(--trih-gold, #f4b41a);
  color: var(--trih-gold, #f4b41a);
}

.trih-card,
.catalog-card,
.episode-card,
.card-dark{
  background: var(--trih-card-bg);
  border: 1px solid var(--trih-card-border);
  border-radius: 14px;
  padding: 14px;
  box-shadow: var(--trih-card-shadow);
  color: var(--text);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.trih-shell .trih-card:link,
.trih-shell .catalog-card:link,
.trih-shell .episode-card:link,
.trih-shell .card-dark:link,
.trih-shell .trih-card:visited,
.trih-shell .catalog-card:visited,
.trih-shell .episode-card:visited,
.trih-shell .card-dark:visited{
  color: var(--text);
  text-decoration: none;
}

.trih-card:hover,
.catalog-card:hover,
.episode-card:hover,
.card-dark:hover{
  border-color: var(--trih-gold, #f4b41a);
  box-shadow: var(--trih-card-shadow-hover);
  color: var(--text);
  text-decoration: none;
}

.trih-shell .trih-card h3,
.trih-shell .catalog-card h3,
.trih-shell .episode-card h3,
.trih-shell .card-dark h3{
  margin: 0 0 6px;
  font-size: 1.05rem;
  line-height: 1.25;
  font-weight: 650;
  color: inherit;
}

.trih-shell .trih-card h4,
.trih-shell .catalog-card h4,
.trih-shell .episode-card h4,
.trih-shell .card-dark h4{
  margin: 0 0 6px;
  font-size: 1.0rem;
  line-height: 1.25;
  font-weight: 650;
  color: inherit;
}

.card-meta{ color: var(--muted); font-size: 0.9rem; }

/* Override era.css hard-coded paragraph colors inside cards */
.trih-shell .card-dark p,
.trih-shell .episode-card p,
.trih-shell .catalog-card p,
.trih-shell .trih-card p{
  color: var(--muted);
}

.trih-shell .card-dark .meta,
.trih-shell .episode-card .meta,
.trih-shell .catalog-card .meta,
.trih-shell .trih-card .meta{
  color: var(--muted);
}

.entity-title-row{
  display:flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.entity-author-pill{
  padding: 4px 10px;
  font-size: 0.82rem;
  opacity: 0.95;
}

.pill.entity-author-pill{
  background: rgba(244,180,26,0.16);
  border-color: rgba(244,180,26,0.35);
}
html[data-site-theme='parchment'] .pill.entity-author-pill{
  background: rgba(183,149,11,0.14);
  border-color: rgba(183,149,11,0.34);
}

.pill{
  display: inline-block;
  background: var(--trih-chip-bg);
  border: 1px solid var(--trih-chip-border);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.82rem;
  color: var(--text);
}

.pill.stats{
  background: rgba(244,180,26,0.16);
  border-color: rgba(244,180,26,0.35);
  color: var(--text);
}
html[data-site-theme='parchment'] .pill.stats{
  background: rgba(183,149,11,0.14);
  border-color: rgba(183,149,11,0.34);
}

.pill-date{
  display: inline-block;
  background: rgba(37,99,235,0.18);
  border: 1px solid rgba(37,99,235,0.35);
  border-radius: 10px;
  padding: 4px 8px;
  color: var(--text);
  font-size: 0.88rem;
  width: fit-content;
}
html[data-site-theme='parchment'] .pill-date{
  background: rgba(183,149,11,0.14);
  border-color: rgba(183,149,11,0.34);
}

.chip-series{
  display:inline-block;
  background: rgba(244,180,26,0.16);
  border: 1px solid rgba(244,180,26,0.35);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.82rem;
  color: var(--text);
  width: fit-content;
}
html[data-site-theme='parchment'] .chip-series{
  background: rgba(183,149,11,0.14);
  border-color: rgba(183,149,11,0.34);
}

.chip-number{
  display:inline-block;
  background: rgba(192,57,43,0.14);
  border: 1px solid rgba(192,57,43,0.32);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.82rem;
  color: var(--text);
  width: fit-content;
}

.empty-state{
  border: 1px dashed var(--trih-empty-border);
  border-radius: 14px;
  padding: 16px;
  color: var(--muted);
  text-align: center;
}

.trih-result-card,
.result-card{
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 12px;
  margin-top: 10px;
  color: var(--text);
}
html[data-site-theme='parchment'] .trih-result-card,
html[data-site-theme='parchment'] .result-card{
  background: rgba(239,234,221,0.95);
  border-color: rgba(215,207,184,0.95);
}
.result-card h5{ margin: 0 0 6px; color: var(--text); }
.result-card .meta{ color: var(--muted); font-size: 0.9rem; }

.spinner{ display:none; }
.visible{ display:inline-block !important; }

/* Parchment: fix Bootstrap text-light usage inside the modern shells */
html[data-site-theme='parchment'] .trih-shell .text-light{ color: var(--text) !important; }

@media(max-width: 720px){
  .trih-hero{ padding: 72px 6vw 28px; }
  .trih-content{ padding: 22px 6vw 60px; }

  .entity-shell .trih-hero{ padding: 48px 6vw 26px; }
}

/* Page-specific layout helpers */
.catalog-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap:14px; }
.episodes-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:14px; }

.catalog-shell .controls{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:10px;
}
.catalog-shell .controls select,
.catalog-shell .controls button,
.catalog-shell .controls .form-control{ min-height:44px; }

.pagination-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  margin-top:18px;
}

.entity-hero-body{ width:100%; max-width: 980px; margin: 0; text-align:left; }
.qa-card{ background: var(--trih-panel-bg); border:1px solid var(--trih-panel-border); border-radius:14px; padding:14px; }
html[data-site-theme='parchment'] .qa-card{ box-shadow: var(--trih-panel-shadow); }
.qa-card .form-control{ background: rgba(255,255,255,0.05); color: var(--text); border-color: rgba(255,255,255,0.12); }
html[data-site-theme='parchment'] .qa-card .form-control{ background: rgba(253,246,227,0.86); border-color: rgba(215,207,184,0.95); }