/* ==========================================================================
   pages/recommendations.css — Recommendations page (MIGRATED)
   - Uses mg-container + mg-bleed (full-bleed section cards)
   - Indents headings/paragraphs via mg-bleed__inner (like Philosophy/Industry)
   - Keeps shared TOC behavior from components/drawer.css
   - UPDATED: catalogue separation + improved palette + Section/Genre title styling
   - UPDATED: Italianno display font for page H2s + medium titles (Books/TV/Film...)
   ========================================================================== */

/* ======================================================================
   DISPLAY FONT — Italianno
   Put Italianno.ttf in /mythogin/fonts/Italianno.ttf
   This file is /mythogin/css/pages/recommendations.css, so ../../fonts/...
   ====================================================================== */
@font-face{
  font-family: "Italianno";
  src: url("../../fonts/Italianno.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.recs{
  padding-bottom: 34px;

  /* local knobs (scoped) */
  --recs-gap: 16px;
  --recs-soft: rgba(255,255,255,.03);
  --recs-soft2: rgba(255,255,255,.02);
  --recs-border: rgba(255,255,255,.10);
  --recs-border2: rgba(255,255,255,.08);
  --recs-accent: rgba(215,188,161,.38);
  --recs-accent-bg: rgba(215,188,161,.10);

  /* Top Picks chart sizing */
  --recs-chart-col: 220px;
  --recs-chart-gap: 88px;
  --recs-chart-gap-tight: 14px;

  /* Type image row sizing (LANDSCAPE) */
  --recs-type-media-ar: 16 / 9;
  --recs-type-media-maxh: none;

  /* sticky offset */
  --recs-sticky-top: calc(var(--nav-h, 72px) + 18px);
}

/* Prevent anchored jumps from hiding under sticky topbar */
.recs :target{
  scroll-margin-top: calc(var(--nav-h, 72px) + 18px);
}

/* ==========================================================================
   RECS — BLEED CONTRACT (match .container > .bleed-pad behavior)
   Fixes: intro is full-bleed (bleed-pad) but chart/catalogue were inset.
   Apply identical “pad cancel” to .recs-bleed wrappers.
   ========================================================================== */

.container > .recs-bleed{
  width: calc(100% + (var(--pad) * 2));
  margin-left: calc(var(--pad) * -1);
  margin-right: calc(var(--pad) * -1);
  max-width: none;
  box-sizing: border-box;
}

/* ==========================================================================
   FULL-BLEED SECTION CARD SURFACES (like Industry/Philosophy)
   - Applied to blocks that are wrapped by: mg-container > mg-bleed
   ========================================================================== */

.recs-chart-surface,
.recs-catalogue-surface,
.recs-surface{
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 8px);
  background: linear-gradient(180deg, rgba(17,21,27,.92), rgba(15,19,25,.92));
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* ==========================================================================
   INTRO (indented inside mg-bleed__inner)
   ========================================================================== */

.recs-intro{
  padding-top: 14px;
  padding-bottom: 26px;
}

.recs-intro--catalogue{
  padding-top: 10px;
  padding-bottom: 18px;
}

.recs-intro-lead{
  margin: 0 0 8px;
  font-size: 17px;
  color: rgba(232,237,245,.95);
  max-width: 72ch;
}

.recs-intro-sub{
  margin: 0;
  color: rgba(170,180,195,.95);
  font-size: 13px;
  max-width: 85ch;
}

/* ==========================================================================
   PAGE H2s (Introduction / Top Picks / Complete Catalogue)
   We style via the existing page classes:
   - .recs-chart-title (Top Picks)
   - .recs-lists-title (Complete Catalogue)
   - Intro "Introduction" should be an h2 in markup; it uses .section-title but
     you explicitly said section-title is H3 and must remain as-is.
     So: do NOT restyle .section-title here.
   If you want the Intro h2 to match these, give it class="recs-h2".
   ========================================================================== */

.recs-h2,
.recs-chart-title,
.recs-lists-title{
  font-family: "Italianno", ui-serif, Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: 48px;
  letter-spacing: .08em;
  line-height: 1.02;
  color: rgba(248,250,252,.98);

  text-shadow:
    0 1px 0 rgba(0,0,0,.35),
    0 0 22px rgba(194,164,99,.14);

  transform: translateY(1px);
}

/* Keep the chart head spacing intact */
.recs-chart-head{
  margin: 0 0 16px;
  display: grid;
  gap: 6px;
}

.recs-chart-sub{
  margin: 0;
  color: rgba(170,180,195,.95);
  max-width: 86ch;
}

/* ==========================================================================
   SUMMARY CHART (full-bleed card surface)
   ========================================================================== */

.recs-grid-section{
  padding-top: 24px;
  padding-bottom: 24px;
}

.recs-chart-surface{
  padding: 18px 0 18px;
}

/* DEFAULT (mobile-first): 2 rows, no scrolling */
.recs-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;

  overflow: visible;
  padding-bottom: 0;
}

/* Column cards */
.recs-grid > .recs-chart-card{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  background: rgba(255,255,255,.02);
  box-shadow: var(--shadow);
  padding: 14px;
  min-width: 0;
}

/* Type image row — FORCE LANDSCAPE */
.recs-chart-type-media{
  width: 100%;
  aspect-ratio: var(--recs-type-media-ar);
  height: auto;
  max-height: none;
  overflow: hidden;

  border-radius: calc(var(--radius-sm, 10px));
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
  margin-bottom: 10px;
}

.recs-chart-type-media img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 45%;
  transform: scale(1.02);
}

/* Center each title */
.recs-chart-card-title{
  margin: 0 0 12px;
  font-size: 15px;
  letter-spacing: .02em;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);

  text-align: center;

  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.15;
}

/* Chart inner blocks */
.recs-chart-block{
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.recs-chart-block-title{
  margin: 0;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(232,237,245,.88);
  text-align: center;
}

.recs-chart-mount{
  display: grid;
  gap: 6px;
}

/* ==========================================================================
   CATALOGUE + TOC RAIL (full-bleed card surface)
   ========================================================================== */

.recs-body{
  padding-bottom: 72px;
}

.recs-catalogue-surface{
  padding: 18px 0 22px;
}

/* 1-col default */
.recs-catalogue-layout{
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: start;
  width: 100%;
}

.recs-catalogue-main,
.recs-catalogue-aside{
  min-width: 0;
}

/* Lists head */
.recs-lists{
  padding-top: 6px;
  padding-bottom: 10px;
}

.recs-lists-head{
  margin: 0 0 14px;
  display: grid;
  gap: 8px;
}

.recs-lists-title{
  margin: 0;
  letter-spacing: .01em;
}

.recs-lists-sub{
  margin: 0;
  color: rgba(170,180,195,.95);
  max-width: 82ch;
}

.recs-controls{
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.recs-pill{
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: rgba(232,237,245,.92);
  text-decoration: none;
  font-size: 12px;
  transition: transform .12s ease, border-color .15s ease, background .15s ease;
}

.recs-pill:hover{
  transform: translateY(-1px);
  border-color: var(--recs-accent);
  background: var(--recs-accent-bg);
}

.recs-pill:focus-visible{
  outline: 2px solid rgba(215,188,161,.55);
  outline-offset: 2px;
}

/* ==========================================================================
   Major medium accordion
   ========================================================================== */

.recs-medium{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  background: rgba(255,255,255,.02);
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-top: 14px;
}

.recs-medium-summary{
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 16px 18px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.recs-medium-summary::-webkit-details-marker{ display:none; }

/* KEEP MEDIUM TITLE AS REQUESTED (only font-face changed to Italianno) */
.recs-medium-title{
  font-family: "Italianno", ui-serif, Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: 24px;
  letter-spacing: .02em;
  line-height: 1.05;

  color: rgba(232,237,245,.95);

  text-shadow:
    0 1px 0 rgba(0,0,0,.35),
    0 0 22px rgba(194,164,99,.14);

  transform: translateY(1px);
}

/* caret */
.recs-medium-summary::after{
  content: "";
  width: 10px;
  height: 10px;

  border-right: 2px solid rgba(194,164,99,.55);
  border-bottom: 2px solid rgba(194,164,99,.55);

  transform: rotate(45deg);
  transition: transform .18s ease, border-color .18s ease;

  margin-left: 8px;
  flex: 0 0 auto;
}

.recs-medium[open] .recs-medium-summary::after{
  transform: rotate(-135deg);
  border-right-color: rgba(194,164,99,.75);
  border-bottom-color: rgba(194,164,99,.75);
}

.recs-medium[open]{
  background: rgba(255,255,255,.03);
}

.recs-medium-body{
  padding: 14px 16px 16px;
  display: grid;
  gap: 14px;
}

/* Subindex */
.recs-subindex{
  display: grid;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.02);
}

.recs-subindex-row{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.recs-subindex-label{
  color: rgba(170,180,195,.95);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-right: 4px;
}

.recs-subindex-link{
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: rgba(232,237,245,.9);
  text-decoration: none;
  font-size: 12px;
  transition: transform .12s ease, border-color .15s ease, background .15s ease;
}

.recs-subindex-link:hover{
  transform: translateY(-1px);
  border-color: var(--recs-accent);
  background: var(--recs-accent-bg);
}

.recs-subindex-link:focus-visible{
  outline: 2px solid rgba(215,188,161,.55);
  outline-offset: 2px;
}

/* ==========================================================================
   GENRE TITLES (COMEDY / DRAMA / SCI-FI...) — styled + palette accent
   ========================================================================== */

.recs-type-group{
  margin-top: 38px;
}

.recs-type-group:first-child{
  margin-top: 12px;
}

.recs-type-title{
  margin: 0 0 18px;
  padding: 12px 0 12px;

  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;

  color: rgba(194,164,99,.92);

  border-bottom: 1px solid rgba(255,255,255,.10);
  position: relative;
}

.recs-type-title::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 140px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(158,123,63,.85),
    rgba(194,164,99,.55),
    rgba(255,255,255,0)
  );
  pointer-events: none;
}

/* ==========================================================================
   Recommendations — sort dropdown
   ========================================================================== */
.recs-select{
  padding: 7px 12px;
  border-radius: 999px;

  border: 1px solid rgba(255,255,255,.14);
  background: rgba(18,22,30,.95);
  color: rgba(232,237,245,.95);

  font-size: 12px;
  appearance: none;
}

.recs-select option{
  background: #12161e;
  color: #e8edf5;
}

.recs-select:focus{
  outline: none;
  border-color: rgba(215,188,161,.55);
  box-shadow: 0 0 0 3px rgba(215,188,161,.10);
}

/* ==========================================================================
   Catalogue item separation (divider + subtle surface)
   ========================================================================== */

.recs-item{
  position: relative;

  padding: 14px 12px;
  margin: 0 -12px;
  border-top: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;

  transition: background .15s ease, border-color .15s ease;
}

.recs-type-group > .recs-item:first-of-type{
  border-top: none;
  padding-top: 10px;
}

.recs-item:hover{
  background: rgba(255,255,255,.03);
  border-top-color: rgba(255,255,255,.10);
}

/* Links row spacing */
.recs-item-links{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;

  margin-top: 8px;
  margin-bottom: 6px;
}

/* ==========================================================================
   COLORS (your improved palette)
   ========================================================================== */

.recs-item-title{
  color: #F1D79A;
  transition: color .15s ease;
}

.recs-item:hover .recs-item-title{
  color: #e0c98a;
}

/* Hero-Journey pill */
a.recs-item-hj,
a.recs-item-hj:visited{
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 5px 10px;
  border-radius: 999px;

  background: rgba(10,12,16,.55);
  border: 1px solid rgba(158,123,63,.52);

  color: #c9bfae !important;

  font-weight: 650;
  font-size: 12px;
  letter-spacing: .02em;
  text-decoration: none;

  transition:
    transform .12s ease,
    background .15s ease,
    border-color .15s ease,
    color .15s ease;
}

a.recs-item-hj:hover{
  transform: translateY(-1px);
  background: rgba(10,12,16,.72);
  border-color: rgba(194,164,99,.70);
  color: #C2A463 !important;
}

a.recs-item-hj:focus-visible{
  outline: 2px solid rgba(194,164,99,.55);
  outline-offset: 2px;
}

a.recs-item-hj .hj-caret{
  opacity: .9;
  font-weight: 800;
}

/* External catalogue links (IMDb / Wikipedia) */
a.recs-item-link,
a.recs-item-link:visited{
  color: #b8c2cf;
  text-decoration: none;
  font-weight: 500;
}

a.recs-item-link:hover,
a.recs-item-link:focus-visible{
  color: #dbe3ee;
  text-decoration: underline;
}

/* ======================================================================
   RECS PAGE — FORCE GLOBAL CONTAINER CONTRACT
   ====================================================================== */
body.recs-page .container{
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
  box-sizing: border-box;
}

body.recs-page .container--topbar{
  max-width: var(--max);
  padding-inline: var(--pad);
}

/* ======================================================================
   MEDIA RULES (ALL at bottom, as requested)
   ====================================================================== */

/* Mobile: never bleed (prevents horizontal scroll) */
@media (max-width: 640px){
  .container > .recs-bleed{
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
  }
}

/* Very small: 2 columns (3 rows), still no scrolling */
@media (max-width: 520px){
  .recs-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .recs-grid > .recs-chart-card{
    padding: 12px;
  }

  .recs-medium-title{
    font-size: 22px;
  }

  .recs-medium-summary{
    padding: 14px 16px;
  }
}

/* Tablet-ish: allow 3 columns (2 rows) */
@media (min-width: 760px){
  .recs-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
}

/* WIDESCREEN: show all columns at once (6-up) */
@media (min-width: 1200px){
  .recs-grid{
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--recs-chart-gap-tight);
  }

  .recs-grid > .recs-chart-card{
    padding: 14px;
  }

  .recs-chart-card-title{ font-size: 15px; }
}

@media (min-width: 1480px){
  .recs-grid{ gap: 16px; }
  .recs-grid > .recs-chart-card{ padding: 16px; }
}

/* MOBILE: hide TOC rail + any drawer toggle living inside it */
@media (max-width: 639px){
  .recs-catalogue-aside{
    display: none !important;
  }

  .recs .toc-toggle,
  .recs .toc-panel{
    display: none !important;
  }

  body.recs-page:not(.toc-open) .recs-catalogue-layout{
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
  }
}

/* Desktop/tablet: rail beside catalogue */
@media (min-width: 640px){
  .recs-catalogue-layout{
    grid-template-columns: minmax(0, 1fr) 320px;
    column-gap: clamp(26px, 3vw, 44px);
    row-gap: 28px;
  }

  body.recs-page:not(.toc-open) .recs-catalogue-layout{
    grid-template-columns: minmax(0, 1fr) 52px;
    column-gap: clamp(22px, 2.6vw, 36px);
    row-gap: 22px;
  }

  .recs-catalogue-aside{
    position: sticky;
    top: var(--recs-sticky-top);
    align-self: start;
  }

  body.recs-page .recs-catalogue-aside .toc-panel{
    top: var(--recs-sticky-top);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .recs-pill,
  .recs-subindex-link{
    transition: none !important;
  }
  .recs-medium-summary::after{
    transition: none !important;
  }
  .recs-item,
  a.recs-item-hj{
    transition: none !important;
  }
}