/* ==========================================================================
   Nexiitt Result — assets/views.css
   Per-page layouts. Every page lives inside the same glass window, so these
   rules only describe what changes inside the content column.
   ========================================================================== */

/* ------------------------------------------------------------ page header -- */

/* Compact sibling of the home hero, used by every non-home page. */
.page-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  padding: 26px 28px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 23px;
  background:
    radial-gradient(circle at 85% 0%, rgba(194, 65, 12, 0.18), transparent 34%),
    radial-gradient(circle at 0% 100%, rgba(109, 77, 201, 0.13), transparent 36%),
    rgba(68, 58, 49, 0.05);
}

.page-hero .hero-copy { justify-content: center; }

.page-hero h1 { max-width: 760px; }

.page-hero .hero-description { max-width: 640px; }

.page-hero-icon {
  display: grid;
  width: 76px;
  height: 76px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 22px;
  background: rgba(68, 58, 49, 0.05);
  opacity: 0.9;
}

.page-hero-icon .icon { width: 34px; height: 34px; stroke-width: 1.5; }

.page-hero.jobs { color: var(--mint); }

.page-hero.results { color: var(--blue); }

.page-hero.admit { color: var(--yellow-ink); }

.page-hero.answer { color: var(--orange-ink); }

.page-hero.syllabus { color: var(--purple-ink); }

.page-hero.admissions { color: #b03c5e; }

.page-hero .eyebrow, .page-hero h1, .page-hero .hero-description, .page-hero .meta-pill { color: inherit; }

.page-hero h1 { color: var(--text); }

.page-hero .eyebrow { color: currentColor; }

.page-hero .hero-description { color: var(--muted-light); }

.page-hero .meta-pill { color: var(--muted-light); }

.page-hero .meta-pill .icon { color: currentColor; }

/* A hairline row of quick numbers under a page header. */
.stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin: 16px 0 0; }

.stat-tile {
  padding: 14px 15px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(68, 58, 49, 0.035);
}

.stat-tile dt { margin-bottom: 6px; color: var(--muted); font-family: var(--font-num); font-size: 8px; letter-spacing: 0.08em; text-transform: uppercase; }

.stat-tile dd { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -0.04em; }

.stat-tile dd.mint { color: var(--mint); }

.stat-tile dd.blue { color: var(--blue); }

.stat-tile dd.yellow { color: var(--yellow-ink); }

.stat-tile dd.purple { color: var(--purple-ink); }

/* ------------------------------------------------------------- listing -- */

.view-stack { margin-top: 18px; }

.view-stack.first { margin-top: 0; }

.listing-note { display: flex; align-items: center; gap: 8px; margin-top: 13px; color: var(--muted); font-family: var(--font-num); font-size: 8px; letter-spacing: 0.05em; text-transform: uppercase; }

.listing-note .icon { color: var(--mint); }

.load-more { display: flex; justify-content: center; padding: 15px 19px 19px; }

/* ---------------------------------------------------------------- detail -- */

.detail-grid { display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(280px, 0.58fr); gap: 18px; align-items: start; }

.prose { color: var(--muted-light); font-size: 11px; line-height: 1.8; }

.prose p { margin: 0 0 12px; }

.prose p:last-child { margin: 0; }

.prose strong { color: var(--text); }

.prose ul { margin: 0 0 12px; }

.prose li { position: relative; padding-left: 15px; margin-bottom: 7px; }

.prose li::before { position: absolute; top: 8px; left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--mint); content: ""; }

.prose a { color: var(--mint); }

.sub-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 19px 19px 0;
  margin: 0;
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
}

.sub-head .icon { color: var(--mint); }

.sub-head-count { margin-left: auto; color: var(--muted); font-family: var(--font-num); font-size: 9px; font-weight: 400; }

.tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }

.tag {
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted-light);
  background: rgba(68, 58, 49, 0.04);
  font-family: var(--font-num);
  font-size: 8px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.tag.mint { border-color: rgba(194, 65, 12, 0.3); color: var(--mint); background: rgba(194, 65, 12, 0.08); }

.source-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

.source-row { display: flex; align-items: center; gap: 10px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 13px; background: rgba(68, 58, 49, 0.035); transition: 0.2s ease; }

.source-row:hover { border-color: var(--line-strong); background: rgba(68, 58, 49, 0.07); }

.source-row .icon { color: var(--mint); flex: 0 0 auto; }

.source-row span { overflow: hidden; min-width: 0; font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }

.source-row .go { margin-left: auto; color: var(--muted); flex: 0 0 auto; }

/* ------------------------------------------------------------ saved view -- */

.saved-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 0.34fr); gap: 18px; align-items: start; }

/* ---------------------------------------------------------------- status -- */

.state-card { display: flex; flex-direction: column; align-items: center; gap: 11px; padding: 46px 24px; text-align: center; }

.state-card .glyph {
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 20px;
  color: var(--mint);
  background: rgba(194, 65, 12, 0.08);
}

.state-card h2 { margin: 0; font-size: 15px; font-weight: 800; }

.state-card p { max-width: 380px; color: var(--muted); font-size: 11px; line-height: 1.7; }

.state-card .row { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 4px; }

.err-code {
  margin: 0 0 6px;
  color: var(--mint);
  font-family: var(--font-num);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 960px) {
  .detail-grid, .saved-grid { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .page-hero { grid-template-columns: 1fr; padding: 21px; }

  .page-hero-icon { width: 56px; height: 56px; border-radius: 17px; }

  .page-hero-icon .icon { width: 26px; height: 26px; }

  .page-hero h1 { font-size: 27px; }

  .source-grid { grid-template-columns: 1fr; }}

@media (max-width: 420px) {
  .stat-row { gap: 7px; }

  .stat-tile { padding: 11px 12px; }

  .stat-tile dd { font-size: 16px; }}