/* ─────────────────────────────────────────────────────────────
   Naamkaran · catalog page
   Layout for /names/. Components come from components.css; this
   sheet only places them on the page.
   ───────────────────────────────────────────────────────────── */

.catalog-page {
  min-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  isolation: isolate;
  background: var(--night);
}

/* Long reading and browsing surfaces need a still, even backdrop. */
.catalog-page > :is(.rays, .vignette) { display: none; }

.catalog {
  position: relative;
  z-index: var(--z-page);
  width: min(1180px, 100%);
  margin: 0 auto;
  padding:
    calc(88px + env(safe-area-inset-top))
    calc(24px + env(safe-area-inset-right))
    calc(48px + env(safe-area-inset-bottom))
    calc(24px + env(safe-area-inset-left));
  display: grid;
  gap: var(--space-4);
}

/* This page scrolls, so the fixed header needs a floor to sit on. */
.catalog-page .brand {
  background: linear-gradient(180deg, var(--night-96) 0%, var(--night-82) 70%, transparent);
  backdrop-filter: blur(var(--blur-md));
  -webkit-backdrop-filter: blur(var(--blur-md));
}

/* ── hero ────────────────────────────────────────────────── */

.catalog-hero {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 14px;
  padding-top: var(--space-2);
}

.catalog-hero .nk-title--hero { font-size: clamp(30px, 4vw, 48px); }
.catalog-page :is(.nk-fine, .nk-chip-count, .nk-chip small, .nk-meta-inline, .nk-meta-item dt, .nk-fav) { color: var(--catalog-secondary); }
.catalog-page :is(.nk-fine, .nk-chip-count, .nk-chip small, .nk-meta-inline, .nk-meta-item dt) { font-size: max(12px, .75rem); }
.catalog-page .nk-input::placeholder { color: var(--catalog-secondary); }
.catalog-page .nk-name-card-foot .nk-meta-inline,
.catalog-page .nk-chip .nk-chip-count { color: var(--catalog-secondary); font-size: 12px; }
.catalog-disclosure summary { display: list-item; cursor: pointer; padding-block: 10px; }
.catalog-disclosure[open] summary { margin-bottom: 10px; }
.catalog-filters-done, .catalog-filters-header { display: none; }
.catalog-filters-footer { margin-top: var(--space-4); }
.catalog-page.filters-modal-open { overflow: hidden; }
.catalog-results-head { scroll-margin-top: calc(90px + env(safe-area-inset-top)); }
.catalog-results-head > .nk-fine { flex-basis: 100%; }
.catalog-page .nk-fav[aria-pressed="true"] { color: var(--sindoor); }

.catalog-lede {
  max-width: 560px;
  font-size: var(--text-lede);
  line-height: var(--leading-relaxed);
}

.catalog-search {
  width: min(640px, 100%);
  margin-top: 10px;
}

/* ── layout ──────────────────────────────────────────────── */

.catalog-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  grid-template-areas: ". head" "filters results";
  gap: 18px 28px;
  align-items: start;
}

.catalog-filters-bar { grid-area: bar; display: none; }

.catalog-filters {
  grid-area: filters;
  position: sticky;
  top: calc(80px + env(safe-area-inset-top));
  max-height: calc(100dvh - 96px - env(safe-area-inset-top));
  overflow-y: auto;
  scrollbar-width: thin;
}

.catalog-results {
  grid-area: results;
  display: grid;
  gap: 18px;
  min-width: 0;
}

.catalog-results-head {
  grid-area: head;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  min-height: var(--control-md);
}

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
  scroll-margin-top: calc(84px + env(safe-area-inset-top));
}

.catalog-grid > .nk-empty { grid-column: 1 / -1; }

.catalog-pager { padding-top: var(--space-2); }
.catalog-pager:empty { display: none; }

.catalog-foot {
  display: grid;
  gap: 18px;
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  text-align: center;
  padding-top: var(--space-3);
}

.catalog-foot p { max-width: 620px; margin: 0 auto; }

/* the shortlist button in the dialog fills in when pressed */
.nk-btn--shortlist[aria-pressed="true"] { color: var(--sindoor); border-color: var(--sindoor); }
.nk-btn--shortlist[aria-pressed="true"] svg path { fill: currentColor; }

/* ── responsive ──────────────────────────────────────────── */

@media (max-width: 900px) {
  .catalog-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "bar" "head" "filters" "results";
    gap: var(--space-4);
  }

  .catalog-filters-bar { display: flex; justify-content: flex-end; }

  .filters-toggle[aria-expanded="true"] { border-color: var(--gold); color: var(--gold-2); }
  .filters-toggle-count:not(:empty)::before { content: "· "; }

  .catalog-filters { display: none; }

  .catalog-filter-dialog {
    margin: auto;
    width: min(560px, calc(100vw - 32px));
    max-width: none;
    height: min(760px, calc(100dvh - 48px));
    max-height: none;
    padding: 0;
    border: var(--line-subtle);
    border-radius: var(--radius-lg);
    background: var(--night-2);
    color: var(--ivory);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
  }
  .catalog-filter-dialog::backdrop { background: var(--scrim); }
  .catalog-filter-dialog .catalog-filters {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    position: static;
    height: 100%;
    max-height: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--night-2);
    overflow: hidden;
  }
  .catalog-filters-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    border-bottom: var(--line-subtle);
  }
  .catalog-filters-header h2 {
    font-family: var(--display);
    font-size: var(--text-3xl);
    font-weight: 400;
    color: var(--gold-2);
  }
  .catalog-filters-content {
    overflow-y: auto;
    overscroll-behavior: contain;
    align-content: start;
    padding: var(--space-4);
    scrollbar-width: thin;
  }
  .catalog-filters-footer {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-3) var(--space-4);
    padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
    background: var(--night-2);
    border-top: var(--line-subtle);
  }
  .catalog-filters-done { display: inline-flex; flex: 1; }
  .catalog-page :is(.nk-btn, .nk-chip, .nk-letter, .nk-page, .nk-fav, .nk-field-clear, .nk-select, .brand-nav a, .brand-home) { min-width: 44px; min-height: 44px; }
  .catalog-page .nk-letters { grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); }
  .catalog-page .nk-pagination { flex-wrap: wrap; }
  .catalog-page .nk-input { font-size: 16px; }
  .catalog-page .brand-nav a { display: inline-flex; align-items: center; }
}

@media (max-width: 760px) {
  .catalog {
    padding:
      calc(72px + env(safe-area-inset-top))
      calc(14px + env(safe-area-inset-right))
      calc(40px + env(safe-area-inset-bottom))
      calc(14px + env(safe-area-inset-left));
    gap: 26px;
  }
  .catalog-hero { padding-top: var(--space-3); }
  .catalog-grid { grid-template-columns: 1fr; gap: var(--space-3); }
  .nk-name-card { padding: 14px; }
  .nk-dialog-body { padding: 22px 18px; }
}

/* Static pages use the same catalog cards and typography as the enhanced view. */
.guide-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); }
.guide-links a, .guide-links [aria-current="page"] { padding-block: var(--space-2); }
.guide { gap: var(--space-6); }
.guide-copy { width: min(100%, 720px); margin-inline: auto; display: grid; gap: var(--space-4); line-height: var(--leading-relaxed); }
.guide-copy audio { display: block; width: min(100%, 380px); }
.guide h2 { margin-bottom: var(--space-3); font-family: var(--display); font-weight: 400; }
.guide .catalog-grid { margin-top: var(--space-4); }
.catalog-about { padding-top: var(--space-5); }
.catalog-about h2, .browse h2 { margin-bottom: var(--space-3); font-family: var(--display); font-weight: 400; }
.browse { padding-top: var(--space-5); gap: var(--space-5); }
.browse-group { display: grid; gap: var(--space-2); }
.browse-group .nk-eyebrow { margin: 0; }
.browse-group .guide-links { justify-content: flex-start; gap: var(--space-2) var(--space-4); }
.browse-group [aria-current="page"] { color: var(--catalog-secondary); }
.nk-name-card a { color: inherit; text-underline-offset: 0.2em; }
.nk-name-card > a { color: var(--gold-2); }
.catalog-page:not(.catalog-ready) .catalog-filters-bar,
.catalog-page:not(.catalog-ready) .catalog-hint { display: none; }
.nk-page[aria-disabled="true"] { opacity: 0.4; }
@media (max-width: 600px) {
  .guide .catalog-hero { padding-top: var(--space-2); }
  .guide-links { gap: var(--space-3); }
}

.nk-name-card--static { grid-template-columns: minmax(0, 1fr); cursor: default; }
.nk-name-card--static .nk-name-card-head { padding-right: 0; }
.nk-name-card--static .nk-name-card-meaning { grid-column: 1; display: block; }
.nk-name-card > .nk-btn { grid-column: 1 / -1; justify-self: start; }

/* Name guides: a generous title, useful listening tools, then a quiet reading column. */
.name-guide { gap: var(--space-7); }
.name-breadcrumb { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; font-size: var(--text-base); color: var(--catalog-secondary); }
.name-breadcrumb a { padding-block: var(--space-2); }
.name-overview, .name-reading { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: var(--space-7); align-items: start; }
.name-overview { padding-bottom: var(--space-7); border-bottom: 1px solid var(--gold-20); align-items: center; }
.name-hero.catalog-hero { justify-items: start; text-align: left; gap: var(--space-4); padding: 0; }
.name-hero .nk-title--hero { font-size: var(--display-intro); line-height: var(--leading-snug); color: var(--gold-2); text-shadow: none; overflow-wrap: anywhere; }
.name-hero .nk-dialog-dev { font-size: var(--dev-hero); line-height: var(--leading-relaxed); margin: 0; }
.name-hero .catalog-lede { max-width: 36ch; font-size: var(--text-3xl); line-height: var(--leading-normal); color: var(--ivory); text-wrap: pretty; }
.name-tools { display: grid; gap: var(--space-5); padding: var(--space-5) 0 var(--space-5) var(--space-6); border-left: 1px solid var(--gold-20); min-width: 0; }
.name-listen { display: grid; gap: var(--space-3); }
.name-guide .name-listen h2 { font-family: var(--body); font-size: var(--text-xl); font-weight: 600; margin: 0; }
.name-listen audio { width: 100%; min-width: 0; color-scheme: dark; }
.name-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); padding-top: var(--space-5); border-top: 1px solid var(--gold-20); align-items: center; }
.name-actions .nk-btn { white-space: normal; min-height: 44px; }
.name-actions > :is(p, a) { grid-column: 1 / -1; }
.name-actions > a { justify-self: start; font-size: var(--text-base); padding-block: var(--space-1); }
.name-guide .nk-fine { text-transform: none; letter-spacing: normal; font-size: var(--text-base); line-height: var(--leading-relaxed); }
.name-story, .name-aside { display: grid; gap: var(--space-7); min-width: 0; }
.name-guide .guide-copy { width: 100%; font-size: var(--text-xl); gap: var(--space-3); }
.name-guide h2 { font-size: var(--text-3xl); line-height: var(--leading-snug); margin: 0; }
.name-story .guide-copy > p:not(.nk-fine) { color: var(--catalog-secondary); }
.name-story .name-source { padding-top: var(--space-3); margin-top: var(--space-2); border-top: 1px solid var(--gold-20); max-width: 62ch; }
.name-aside .guide-copy { font-size: var(--text-base); }
.name-auntie { padding: var(--space-5); background: var(--ivory-04); border: 1px solid var(--gold-20); border-radius: var(--radius-lg); color: var(--ivory); }
.name-auntie-heading { display: flex; align-items: center; gap: var(--space-3); }
.name-auntie-heading img { width: var(--space-7); height: var(--space-7); flex-shrink: 0; }
.name-guide .name-auntie h2 { font-family: var(--body); font-size: var(--text-xl); color: var(--gold-2); }
.name-auntie > p { font-family: var(--display); font-size: var(--text-3xl); line-height: var(--leading-normal); text-wrap: pretty; }
.name-related { border-top: 1px solid var(--gold-20); padding-top: var(--space-7); }
.name-related > p { margin-top: var(--space-3); color: var(--catalog-secondary); font-size: var(--text-xl); }
.name-guide > .guide-copy .guide-links { justify-content: flex-start; gap: var(--space-2) var(--space-5); }
.name-guide > .browse { border-top: 1px solid var(--gold-20); padding-top: var(--space-6); }
@media (max-width: 800px) {
  .name-overview, .name-reading { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .name-guide { gap: var(--space-6); }
  .name-hero .catalog-lede { font-size: var(--text-2xl); }
  .name-tools { padding: var(--space-5) 0 0; border-left: 0; border-top: 1px solid var(--gold-20); }
  .name-actions { grid-template-columns: minmax(0, 1fr) auto; }
  .name-story, .name-aside { gap: var(--space-6); }
}

/* About is a reading surface: one aligned column, with related copy grouped. */
.about { max-width: 768px; gap: var(--space-7); }
.about > .guide-links { justify-content: flex-start; align-items: baseline; font-size: var(--text-base); }
.about .catalog-hero { justify-items: start; text-align: left; gap: var(--space-5); }
.about .nk-title--hero { color: var(--gold-2); text-shadow: none; text-wrap: balance; }
.about .catalog-lede { max-width: none; font-size: var(--text-xl); color: var(--catalog-secondary); }
.about-copy { display: grid; gap: var(--space-6); font-size: var(--text-xl); line-height: var(--leading-relaxed); }
.about-copy h2 { margin: 0 0 var(--space-3); font-family: var(--display); font-size: var(--text-3xl); font-weight: 600; line-height: var(--leading-snug); color: var(--gold-2); }
.about-copy p + p { margin-top: var(--space-3); }
.about .catalog-foot { margin-top: var(--space-2); padding-top: var(--space-5); border-top: 1px solid var(--gold-20); }
.about .catalog-foot .guide-links { justify-content: flex-start; }
@media (max-width: 600px) {
  .about { padding-inline: var(--space-5); gap: var(--space-6); }
}

@media (max-width: 600px) {
  .catalog-filter-dialog {
    margin: auto auto 0;
    width: 100%;
    height: calc(100dvh - max(16px, env(safe-area-inset-top)));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .catalog-filters-footer { flex-wrap: wrap; }
}