/* ============================================================
   Page-specific layouts
   ============================================================ */

/* Generic prose pages (policies, about pages) */
.prose {
  max-width: var(--content-prose);
}

.prose p, .prose ul, .prose ol, .prose blockquote, .prose figure, .prose dl, .prose table {
  max-width: 100%;
}

.prose h2 + p, .prose h3 + p { margin-top: 0; }

/* Two-column page (sidebar nav + content) */
.with-sidebar {
  display: grid;
  grid-template-columns: 16rem 1fr;
  gap: var(--sp-12);
}

@media (max-width: 880px) {
  .with-sidebar { grid-template-columns: 1fr; }
}

.sidebar-nav {
  position: sticky;
  top: 7rem;
  align-self: start;
  font-family: var(--ff-sans);
  font-size: var(--fs-100);
}

.sidebar-nav h2 {
  font-family: var(--ff-sans);
  font-size: var(--fs-50);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--c-text-muted);
  margin: 0 0 var(--sp-3);
}

.sidebar-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid var(--c-rule);
}

.sidebar-nav li { margin: 0; }

.sidebar-nav a {
  display: block;
  padding: var(--sp-2) var(--sp-4);
  color: var(--c-text);
  text-decoration: none;
  border-left: 2px solid transparent;
  margin-left: -2px;
}

.sidebar-nav a:hover, .sidebar-nav a:focus-visible {
  background: var(--kp-tussar);
  border-left-color: var(--kp-aal);
  color: var(--kp-aal);
  text-decoration: none;
}

.sidebar-nav a[aria-current="page"] {
  font-weight: 700;
  border-left-color: var(--kp-aal);
  color: var(--kp-aal);
  background: var(--kp-tussar);
}

/* Programme card */
.programme-card {
  border: 1px solid var(--c-rule);
  border-top: 3px solid var(--kp-turmeric);
  padding: var(--sp-5);
  background: var(--c-bg);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.programme-card h3 {
  font-size: var(--fs-300);
  margin: 0;
}

.programme-card .programme-meta {
  font-family: var(--ff-sans);
  font-size: var(--fs-50);
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Department pill grid */
.pill-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.pill-grid a {
  display: inline-flex;
  padding: var(--sp-2) var(--sp-4);
  background: var(--kp-tussar);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-family: var(--ff-sans);
  font-weight: 600;
  font-size: var(--fs-100);
  color: var(--c-text);
}

.pill-grid a:hover, .pill-grid a:focus-visible {
  background: var(--kp-aal);
  border-color: var(--kp-aal);
  color: var(--kp-paper);
}

/* District section (affiliated colleges page) */
.district-section {
  margin-bottom: var(--sp-12);
}

.district-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4);
  border-bottom: 2px solid var(--kp-aal);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-6);
}

.district-section__head h2 {
  margin: 0;
}

.district-section__count {
  font-family: var(--ff-sans);
  font-size: var(--fs-100);
  color: var(--c-text-muted);
}

.college-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: var(--sp-4);
}

.college-list li {
  border: 1px solid var(--c-rule);
  padding: var(--sp-4);
  border-radius: var(--radius-md);
  background: var(--kp-tussar-soft);
}

.college-list h3 {
  font-size: var(--fs-200);
  margin: 0 0 var(--sp-2);
}

.college-list .meta {
  font-family: var(--ff-sans);
  font-size: var(--fs-50);
  color: var(--c-text-muted);
}

/* Tender / countdown list */
.tender-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--c-rule);
}

.tender-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--c-rule);
}

.tender-list h3 {
  font-size: var(--fs-300);
  margin: 0 0 var(--sp-2);
}

.tender-list .deadline {
  font-family: var(--ff-sans);
  font-size: var(--fs-100);
  background: var(--kp-aal-tint);
  color: var(--kp-aal-deep);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-pill);
  font-weight: 700;
}

.tender-list .countdown {
  font-family: var(--ff-mono);
  font-size: var(--fs-200);
  color: var(--kp-aal);
  font-weight: 700;
}

/* On mobile the 1fr/auto grid pushes the deadline badge to the
   right edge, leaving the countdown line in a compressed column
   below. Stack the columns and left-align the badge so the title,
   metadata, deadline pill, and countdown read as one vertical flow. */
@media (max-width: 720px) {
  .tender-list li {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }
  .tender-list .deadline { justify-self: start; }
}

/* Vision-mission columns */
.vmd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--sp-8);
  margin: var(--sp-8) 0;
}

.vmd-grid section {
  padding: var(--sp-6);
  background: var(--kp-tussar-soft);
  border-top: 3px solid var(--kp-aal);
}

.vmd-grid h3 {
  font-family: var(--ff-display);
  font-size: var(--fs-400);
  margin: 0 0 var(--sp-3);
  color: var(--kp-aal-deep);
}

/* Big motto block (about + home) */
.motto-block {
  text-align: center;
  padding: var(--sp-16) var(--sp-6);
  background: var(--kp-ebony);
  color: var(--kp-tussar);
  position: relative;
  overflow: hidden;
}

.motto-block::before, .motto-block::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 6rem;
  height: 6rem;
  transform: translateY(-50%);
  background-image: url("../img/motifs/medallion.svg");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.15;
  color: var(--kp-turmeric);
}

.motto-block::before { left: 4rem; }
.motto-block::after { right: 4rem; }

.motto-block .sanskrit {
  font-family: var(--ff-display);
  font-size: var(--fs-700);
  line-height: 1.2;
  font-weight: 600;
  color: var(--kp-turmeric);
  margin: 0 0 var(--sp-4);
}

.motto-block .translation {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: var(--fs-400);
  color: var(--kp-tussar);
  margin: 0 0 var(--sp-2);
}

.motto-block .source {
  font-family: var(--ff-sans);
  font-size: var(--fs-50);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--kp-turmeric);
  margin: 0;
}

/* Two-up call-out (bottom of home / about) */
.cta-band {
  padding: var(--sp-12) 0;
  background: linear-gradient(135deg, var(--kp-aal) 0%, var(--kp-aal-deep) 100%);
  color: var(--kp-tussar);
  text-align: center;
}

.cta-band h2 {
  color: var(--kp-tussar);
  font-size: var(--fs-700);
  margin: 0 0 var(--sp-4);
}

.cta-band p {
  color: var(--kp-tussar);
  margin: 0 auto var(--sp-6);
  max-width: 36rem;
  font-size: var(--fs-300);
  opacity: 0.95;
}

.cta-band .btn {
  background: var(--kp-turmeric);
  color: var(--kp-ebony);
  border-color: var(--kp-turmeric);
}

.cta-band .btn:hover, .cta-band .btn:focus-visible {
  background: var(--kp-tussar);
  color: var(--kp-ebony);
  border-color: var(--kp-tussar);
}

/* News item article (long-form) */
.article {
  max-width: var(--content-prose);
}

.article__meta {
  font-family: var(--ff-sans);
  font-size: var(--fs-100);
  color: var(--c-text-muted);
  margin-bottom: var(--sp-3);
}

/* Definition list — disclosures */
.disclosure-dl dt {
  font-family: var(--ff-sans);
  font-weight: 700;
  margin-top: var(--sp-4);
  color: var(--kp-aal-deep);
}

.disclosure-dl dd {
  margin: 0 0 var(--sp-2) 0;
  padding-left: 0;
}

/* Photo grid (campus life) */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--sp-3);
}

.photo-grid figure {
  margin: 0;
}

.photo-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

/* Search results */
.search-result {
  border-bottom: 1px solid var(--c-rule);
  padding: var(--sp-4) 0;
}

.search-result h3 {
  font-size: var(--fs-300);
  margin: 0 0 var(--sp-1);
}

.search-result .url {
  font-family: var(--ff-mono);
  font-size: var(--fs-50);
  color: var(--c-text-muted);
}

/* 404 */
.error-page {
  text-align: center;
  padding: var(--sp-24) var(--sp-4);
}

.error-page__code {
  font-family: var(--ff-display);
  font-size: 4.5rem;
  font-weight: 600;
  color: var(--kp-aal);
  opacity: 0.55;
  line-height: 1;
  margin: 0 0 var(--sp-3) 0;
  letter-spacing: 0.02em;
}

/* Linguist-review note (long-form Odia translations) */
.linguist-note {
  font-size: var(--fs-50);
  color: var(--c-text-muted);
  font-style: italic;
  border-left: 2px solid var(--kp-rule-strong);
  padding-left: var(--sp-3);
  margin: var(--sp-4) 0;
  font-family: var(--ff-or), var(--ff-sans);
}

/* Sticky in-page nav (long pages — privacy, accessibility statement) */
.toc-box {
  background: var(--kp-tussar);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-md);
  padding: var(--sp-4) var(--sp-5);
  margin: var(--sp-4) 0 var(--sp-8);
}

.toc-box h2 {
  font-family: var(--ff-sans);
  font-size: var(--fs-50);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  margin: 0 0 var(--sp-2);
  color: var(--c-text-muted);
}

.toc-box ol {
  margin: 0;
  padding-left: var(--sp-5);
  font-size: var(--fs-100);
}

.toc-box ol ol { margin-top: var(--sp-2); }

/* ============================================================
   Mobile typography overrides for component-level styles. Lives
   here (after components.css in load order) so it wins the cascade.
   The base.css mobile pass tightens h1/h2/h3/p; this layer
   tightens the hero typography specifically.
   ============================================================ */
@media (max-width: 720px) {
  .hero h1 {
    font-size: clamp(1.875rem, 7.5vw, 2.25rem);
    line-height: 1.1;
    margin-bottom: var(--sp-4);
  }
  .hero__motto { font-size: var(--fs-300); margin-bottom: var(--sp-4); }
  .hero__motto-translation { font-size: var(--fs-100); }
  .hero__lede { font-size: var(--fs-200); line-height: 1.55; margin-bottom: var(--sp-5); }
  .hero__eyebrow { font-size: var(--fs-50); letter-spacing: 0.08em; }
  .hero__stats dt { font-size: var(--fs-50); }
  .hero__stats dd { font-size: var(--fs-500); }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 1.625rem; line-height: 1.12; }
  .hero__lede { font-size: var(--fs-100); }
}