﻿/* ==========================================================================
   IIMAD Design System — Page Components (modern layouts)
   Loaded after ds-utilities.css. Built only from ds-tokens custom properties.
   Adds: hero, key figures, section headings, feature rows, CTA band,
   modernised page heading + cards. Brand ethos kept: flat, sharp corners,
   earthy palette, restrained motion.
   ========================================================================== */

/* ── Shared section rhythm ──────────────────────────────────────────────── */
.iimad-section        { padding-block: var(--space-16); }
.iimad-section--tight { padding-block: var(--space-10); }
.iimad-section--xs    { padding-block: var(--space-3); }
.iimad-section--close-top { padding-block-start: var(--space-4) !important; }
.iimad-section--muted { background: var(--surface-muted); }
.iimad-section--brand { background: var(--color-primary); color: var(--text-inverse); }

.iimad-shell {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding-md);
}

/* Two-part section heading (small label + large title) */
.iimad-eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-primary-subtle);
  margin: 0 0 var(--space-3);
}
.iimad-section--brand .iimad-eyebrow { color: var(--color-accent); }

.iimad-title {
  font-family: var(--font-sans);
  font-size: var(--text-5xl);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--text-primary);
  margin: 0 0 var(--space-4);
}
.iimad-section--brand .iimad-title { color: var(--text-inverse); }

.iimad-lead {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  line-height: var(--leading-loose);
  color: var(--text-secondary);
  max-width: 46rem;
  margin: 0;
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.iimad-hero {
  background: var(--surface-muted);
  border-bottom: 1px solid var(--border-light);
  overflow: hidden;
}
.iimad-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
  padding-block: var(--space-20);
}
.iimad-hero__eyebrow {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-primary-subtle);
  margin: 0 0 var(--space-4);
  position: relative;
  padding-left: 2.5rem;
}
.iimad-hero__eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 2rem;
  height: 2px;
  background: var(--color-accent);
}
.iimad-hero__title {
  font-family: var(--font-sans);
  font-size: var(--text-5xl);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
  color: var(--color-primary);
  margin: 0 0 var(--space-5);
}
.iimad-hero__text {
  font-size: var(--text-xl);
  line-height: var(--leading-loose);
  color: var(--text-secondary);
  max-width: 40rem;
  margin: 0 0 var(--space-8);
}
.iimad-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.iimad-hero__media {
  position: relative;
  min-height: 18rem;
  background: var(--color-primary);
  background-size: cover;
  background-position: center;
}
/* Decorative accent corner on media */
.iimad-hero__media::after {
  content: "";
  position: absolute;
  inset: auto auto -10px -10px;
  width: 64px;
  height: 64px;
  border-left: 3px solid var(--color-accent);
  border-bottom: 3px solid var(--color-accent);
}

@media print, screen and (min-width: 64em) {
  .iimad-hero__grid           { grid-template-columns: 7fr 5fr; }
  .iimad-hero--text-only .iimad-hero__grid { grid-template-columns: 1fr; max-width: 52rem; }
  .iimad-hero__title          { font-size: var(--text-6xl); }
  .iimad-hero__media          { min-height: 24rem; height: 100%; }
}

/* ── Hero split variant (home page full-bleed layout) ───────────────────── */
/*
 * Grid sits at section level (no shell wrapper) so the right column
 * stretches flush to the viewport edge. Left column mirrors shell
 * alignment via its own padding.
 */
.iimad-hero--split .iimad-hero__grid {
  gap: 0;
  padding-block: 0;
  align-items: stretch;
}

/* Left column: shell-like padding so text aligns with rest of page */
.iimad-hero__content-col {
  padding: var(--space-20) var(--space-12) var(--space-20) var(--container-padding-md);
  display: flex;
  align-items: center;
}
/* Mobile: reduce vertical padding — desktop value is too tall on small screens */
@media screen and (max-width: 63.9375em) {
  .iimad-hero__content-col {
    padding-top: var(--space-10);
    padding-bottom: var(--space-6);
  }
  .iimad-hero .iimad-stats { margin-top: var(--space-4); }
}

/* On wide viewports align left edge exactly with the shell boundary */
@media (min-width: 81.25rem) {
  .iimad-hero__content-col {
    padding-left: calc((100vw - var(--container-max)) / 2 + var(--container-padding-md));
  }
}

/* Right column: flush top/right/bottom, dark panel */
.iimad-hero--split .iimad-hero__media,
.iimad-hero--split .iimad-hero__media-slot {
  min-height: 22rem;
  /* Thin left border as a visual seam between the two panels */
  border-left: 3px solid var(--color-accent);
}

/* Stats bar below the full-bleed grid, inside its own shell */
.iimad-hero--split .iimad-shell > .iimad-stats { margin-top: 0; }

@media print, screen and (min-width: 64em) {
  .iimad-hero--split .iimad-hero__grid { grid-template-columns: 7fr 5fr; }
  .iimad-hero--split .iimad-hero__media,
  .iimad-hero--split .iimad-hero__media-slot { min-height: 28rem; height: 100%; }
}

/* ── Key figures (stats) ────────────────────────────────────────────────── */
.iimad-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border-light);
  border: 1px solid var(--border-light);
  margin-top: var(--space-10);
}
.iimad-stat {
  background: var(--surface-page);
  padding: var(--space-6);
  text-align: center;
}
.iimad-hero .iimad-stats { margin-top: var(--space-12); }
.iimad-stat__value {
  font-family: var(--font-serif);
  font-size: var(--text-5xl);
  font-weight: var(--weight-light);
  color: var(--color-primary);
  line-height: 1;
  margin: 0 0 var(--space-2);
}
.iimad-stat__label {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-tertiary);
  margin: 0;
}
@media print, screen and (min-width: 40em) {
  .iimad-stats { grid-template-columns: repeat(4, 1fr); }
  .iimad-stats--3 { grid-template-columns: repeat(3, 1fr); }
}

/* ── Feature rows (About content sections) ──────────────────────────────── */
.iimad-feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6) var(--space-12);
  padding-block: var(--space-10);
  border-top: 1px solid var(--border-light);
}
.iimad-feature:first-of-type { border-top: 0; }
.iimad-feature__head .iimad-feature__title {
  font-family: var(--font-sans);
  font-size: var(--text-4xl);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-tight);
  color: var(--color-primary);
  margin: 0;
}
.iimad-feature__index {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-accent-dark);
  margin: 0 0 var(--space-3);
}
.iimad-feature__body {
  font-size: var(--text-lg);
  line-height: var(--leading-loose);
  color: var(--text-secondary);
}
.iimad-feature__body p { font-size: inherit; color: inherit; }
.iimad-feature__body p:last-child { margin-bottom: 0; }
@media print, screen and (min-width: 64em) {
  .iimad-feature { grid-template-columns: 4fr 8fr; }
}

/* ── Call-to-action band ────────────────────────────────────────────────── */
.iimad-cta {
  background: var(--color-primary);
  color: var(--text-inverse);
}
.iimad-cta__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
  padding-block: var(--space-12);
}
.iimad-cta__title {
  font-family: var(--font-serif);
  font-size: var(--text-4xl);
  font-weight: var(--weight-light);
  color: var(--text-inverse);
  margin: 0 0 var(--space-3);
}
.iimad-cta__text {
  color: rgba(254, 254, 254, 0.8);
  font-size: var(--text-lg);
  line-height: var(--leading-loose);
  margin: 0;
}
.iimad-cta .button,
.iimad-cta .btn-accent {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-primary) !important;
}
.iimad-cta .button:hover,
.iimad-cta .btn-accent:hover {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  color: var(--color-white) !important;
}
@media print, screen and (min-width: 64em) {
  .iimad-cta__inner { grid-template-columns: 1fr auto; gap: var(--space-12); }
}

/* ── Modernised page heading banner (inner pages / archives) ────────────── */
.cm-heading {
  background: var(--surface-muted);
  border-bottom: 1px solid var(--border-light);
}
.cm-heading__wrap {
  padding-block: var(--space-12) var(--space-8);
  position: relative;
}
.cm-heading__title {
  position: relative;
  padding-left: var(--space-5);
}
.cm-heading__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  bottom: 0.15em;
  width: 4px;
  background: var(--color-accent);
}

/* Archive section headings (Upcoming / Past events etc.) */
.cm-content > .grid-container h2:not(.cm-titles):not(.card-title) {
  font-family: var(--font-sans);
  font-size: var(--text-4xl);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-tight);
  color: var(--color-primary);
  margin-bottom: var(--space-6);
}

/* ── Card: restrained modern hover (kept flat by default) ───────────────── */
.card {
  transition: border-color var(--duration-normal) var(--ease-default),
              box-shadow var(--duration-slow) var(--ease-default);
}
.card:hover {
  border-color: var(--color-primary-subtle);
  box-shadow: var(--shadow-sm);
}
/* Don't add hover affordance to non-interactive detail/overlay cards */
.card-detail__content,
.card-overlay:hover { box-shadow: none; }

/* Publication placeholder figure when no thumbnail */
.iimad-card__placeholder {
  height: 9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-gray-100), var(--color-gray-300));
}
.iimad-card__placeholder span {
  font-family: var(--font-serif);
  font-size: var(--text-4xl);
  font-weight: var(--weight-light);
  color: var(--color-gray-500);
  letter-spacing: var(--tracking-wide);
}

/* ── Home: events list item refinement ─────────────────────────────────── */
.iimad-eventlist { display: flex; flex-direction: column; gap: var(--space-4); }
.iimad-eventlist .card { display: block; }

/* ── Home: leader card sizing ──────────────────────────────────────────── */
.cm-content .card-overlay figure { transition: none; }

/* ── Section header (eyebrow + title) ───────────────────────────────────── */
.iimad-secthead { margin-bottom: var(--space-10); max-width: 46rem; }

/* ── About: statement band (full-width, reduced height) ─────────────────── */
.iimad-statement {
  background: var(--color-primary);
  color: var(--text-inverse);
  padding-block: var(--space-5);
}
.iimad-statement__text {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: var(--weight-light);
  line-height: var(--leading-normal);
  color: var(--text-inverse);
  text-align: center;
  max-width: 60rem;
  margin: 0 auto;
  padding-block: var(--space-2);
}
.iimad-statement__text::before {
  content: "\201C";
  display: block;
  text-align: center;
  font-family: var(--font-serif);
  font-size: 2rem;
  line-height: 1;
  color: var(--color-accent);
  margin-bottom: var(--space-1);
  opacity: 0.9;
}
@media print, screen and (min-width: 64em) {
  .iimad-statement__text { font-size: var(--text-2xl); }
}

/* ── About: purpose card grid (from `contents`) ─────────────────────────── */
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gutter);
}
.about-card {
  position: relative;
  background: var(--surface-card);
  border: 1px solid var(--border-light);
  padding: var(--space-8);
  transition: border-color var(--duration-normal) var(--ease-default),
              box-shadow var(--duration-slow) var(--ease-default);
}
.about-card:hover { border-color: var(--color-primary-subtle); box-shadow: var(--shadow-sm); }
.about-card__index {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-weight: var(--weight-light);
  color: var(--color-accent-dark);
  line-height: 1;
  margin-bottom: var(--space-4);
}
.about-card__title {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: var(--weight-regular);
  color: var(--color-primary);
  margin: 0 0 var(--space-3);
}
.about-card__body {
  font-size: var(--text-lg);
  line-height: var(--leading-loose);
  color: var(--text-secondary);
}
.about-card__body p { font-size: inherit; color: inherit; }
.about-card__body p:last-child { margin-bottom: 0; }
@media print, screen and (min-width: 48em) {
  .about-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── About: "how we work" pillars ───────────────────────────────────────── */
.about-pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gutter);
}
.about-pillar {
  background: var(--surface-card);
  border: 1px solid var(--border-light);
  border-top: 3px solid var(--color-accent);
  padding: var(--space-6);
}
.about-pillar__title {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  color: var(--color-primary);
  margin: 0 0 var(--space-3);
}
.about-pillar__text {
  font-size: var(--text-base);
  line-height: var(--leading-loose);
  color: var(--text-secondary);
  margin: 0;
}
@media print, screen and (min-width: 40em) {
  .about-pillars { grid-template-columns: repeat(2, 1fr); }
}
@media print, screen and (min-width: 64em) {
  .about-pillars { grid-template-columns: repeat(3, 1fr); }
  .about-pillars--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ── Data Dashboards: cards ─────────────────────────────────────────────── */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gutter);
}
@media print, screen and (min-width: 48em) {
  .dashboard-grid { grid-template-columns: repeat(2, 1fr); }
}
.dashboard-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--border-light);
  overflow: hidden;
  transition: border-color var(--duration-normal) var(--ease-default),
              box-shadow var(--duration-slow) var(--ease-default);
}
.dashboard-card:hover { border-color: var(--color-primary-subtle); box-shadow: var(--shadow-sm); }
.dashboard-card__media {
  display: block;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: var(--surface-muted);
  border-bottom: 1px solid var(--border-light);
}
.dashboard-card__body { padding: var(--space-6); display: flex; flex-direction: column; flex: 1; }
.dashboard-card__title {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: var(--weight-regular);
  color: var(--color-primary);
  margin: 0 0 var(--space-3);
}
.dashboard-card__desc {
  font-size: var(--text-base);
  line-height: var(--leading-loose);
  color: var(--text-secondary);
  margin: 0 0 var(--space-5);
}
.dashboard-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: auto; }

/* ── Embedded dashboard (iframe) ────────────────────────────────────────── */
.iimad-embed {
  border: 1px solid var(--border-light);
  background: var(--surface-page);
}
.iimad-embed iframe { display: block; width: 100%; border: 0; }

/* ── Citation block ─────────────────────────────────────────────────────── */
.iimad-cite { max-width: 54rem; }
.iimad-cite__label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-primary-subtle);
  margin-bottom: var(--space-2);
}
.iimad-cite__text {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  line-height: var(--leading-loose);
  color: var(--text-secondary);
  margin: 0;
}

/* ── Single person page ─────────────────────────────────────────────────── */
.iimad-person-hero {
  background: var(--surface-muted);
  border-bottom: 1px solid var(--border-light);
  padding-block: var(--space-12);
}
.iimad-person-hero__inner {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
}
.iimad-person-hero__avatar {
  width: 120px;
  height: 120px;
  border-radius: var(--radius-full);
  background-size: cover;
  background-position: center top;
  background-color: var(--color-primary);
  border: 3px solid var(--color-accent);
  flex: 0 0 auto;
}
.iimad-person-hero__avatar--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-weight: var(--weight-light);
  color: var(--color-white);
}
.iimad-person-hero__meta { flex: 1; min-width: 0; }
.iimad-person-hero__name {
  font-family: var(--font-sans);
  font-size: var(--text-4xl);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-tight);
  color: var(--color-primary);
  margin: 0 0 var(--space-2);
  line-height: 1.1;
}
.iimad-person-hero__role {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-accent-dark);
  margin: 0 0 var(--space-4);
}
.iimad-person-hero__email {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--color-primary);
  font-weight: var(--weight-medium);
  text-decoration: none;
  border-bottom: 1px solid var(--color-accent);
  padding-bottom: 1px;
  transition: color var(--duration-normal) var(--ease-default);
}
.iimad-person-hero__email:hover { color: var(--color-primary-hover); }

.iimad-person-bio {
  max-width: 52rem;
}
.iimad-person-bio p {
  font-size: var(--text-lg);
  line-height: var(--leading-loose);
  color: var(--text-secondary);
}
.iimad-person-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-primary-subtle);
  text-decoration: none;
  transition: color var(--duration-normal) var(--ease-default);
}
.iimad-person-back:hover { color: var(--color-primary); }

@media print, screen and (min-width: 40em) {
  .iimad-person-hero__avatar { width: 160px; height: 160px; }
  .iimad-person-hero__name { font-size: var(--text-5xl); }
}

/* ── Publications archive — uniform card tiles ──────────────────────────── */
.pub-archive-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.pub-card__media {
  display: block;
  height: 180px;
  overflow: hidden;
  margin: 0;
  flex: 0 0 auto;
}
.pub-card__thumb {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-color: var(--color-primary);
}
.pub-card__placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(145deg, #2E180B 0%, #3d2010 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pub-card__placeholder span {
  font-family: var(--font-serif);
  font-size: var(--text-4xl);
  font-weight: var(--weight-light);
  color: var(--color-accent);
  opacity: 0.45;
  letter-spacing: 0.25em;
}
.pub-archive-card .card-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.pub-archive-card .card-date { margin-top: auto; }

/* ── Research: project card grid ────────────────────────────────────────── */
.research-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gutter);
}
@media print, screen and (min-width: 40em) {
  .research-grid { grid-template-columns: repeat(2, 1fr); }
}
@media print, screen and (min-width: 64em) {
  .research-grid { grid-template-columns: repeat(3, 1fr); }
}
.research-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--border-light);
  border-top: 3px solid var(--color-accent);
  padding: var(--space-6);
  transition: border-color var(--duration-normal) var(--ease-default);
}
.research-card:hover {
  border-color: var(--color-primary-subtle);
  border-top-color: var(--color-accent);
}
.iimad-section--muted .research-card { background: var(--surface-page); }
.research-card__status {
  align-self: flex-start;
  font-family: var(--font-sans);
  font-size: 0.6rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  margin-bottom: var(--space-2);
  display: inline-block;
}
.research-card__status--ongoing {
  background: rgba(255,188,80,0.15);
  color: var(--color-accent-dark);
}
.research-card__status--past {
  background: rgba(46,24,11,0.07);
  color: var(--text-secondary);
}
.research-card__tag {
  align-self: flex-start;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-primary-subtle);
  margin-bottom: var(--space-3);
}
.research-card__title {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  color: var(--color-primary);
  margin: 0 0 var(--space-3);
}
.research-card__desc {
  font-size: var(--text-base);
  line-height: var(--leading-loose);
  color: var(--text-secondary);
  margin: 0;
}
.research-card__link {
  margin-top: var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-primary);
}
.research-card__link:hover { color: var(--color-primary-hover); }
.research-card__link span { transition: transform var(--duration-normal) var(--ease-default); display: inline-block; }
.research-card__link:hover span { transform: translateX(3px); }

/* Research section heading aligned with feed/hero (serif, 4xl) */
.iimad-section--research .iimad-title {
  font-family: var(--font-serif);
  font-size: var(--text-4xl);
}

/* ── Home: leaders / testimonial quote cards ────────────────────────────── */
.iimad-leaders__head { text-align: center; margin: 0 auto var(--space-12); }
.iimad-leaders__head .iimad-eyebrow,
.iimad-leaders__head .iimad-title { margin-left: auto; margin-right: auto; }
.iimad-leaders__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gutter);
}
@media print, screen and (min-width: 64em) {
  .iimad-leaders__grid { grid-template-columns: repeat(2, 1fr); }
}
.iimad-quote {
  position: relative;
  margin: 0;
  background: var(--surface-card);
  border: 1px solid var(--border-light);
  padding: var(--space-8) var(--space-8) var(--space-6);
}
.iimad-quote::before {
  content: "\201C";
  position: absolute;
  top: 0.1em;
  left: var(--space-6);
  font-family: var(--font-serif);
  font-size: 4.5rem;
  line-height: 1;
  color: var(--color-accent);
  opacity: 0.35;
  pointer-events: none;
}
.iimad-quote__text {
  position: relative;
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: var(--weight-light);
  line-height: var(--leading-loose);
  color: var(--text-primary);
  /* reset blockquote styling inherited from base CSS */
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-6);
}
.iimad-quote__person {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-light);
}
.iimad-quote__avatar {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background-size: cover;
  background-position: center;
  background-color: var(--surface-muted);
}
.iimad-quote__avatar--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-serif);
  font-weight: var(--weight-light);
  font-size: var(--text-lg);
}
.iimad-quote__meta { display: flex; flex-direction: column; }
.iimad-quote__name {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--color-primary);
}
.iimad-quote__role {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

/* ── Home: contact section ──────────────────────────────────────────────── */
.iimad-contact__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  align-items: start;
}
@media print, screen and (min-width: 64em) {
  .iimad-contact__grid { grid-template-columns: 5fr 7fr; gap: var(--space-16); }
}
.iimad-contact__title {
  font-family: var(--font-sans);
  font-size: var(--text-5xl);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
  color: var(--color-primary);
  margin: 0 0 var(--space-5);
}
.iimad-contact__text {
  font-size: var(--text-lg);
  line-height: var(--leading-loose);
  color: var(--text-secondary);
  max-width: 32rem;
  margin: 0 0 var(--space-4);
}
.iimad-contact__text a { color: var(--color-primary); font-weight: var(--weight-medium); }
.iimad-contact__link {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  color: var(--color-accent-dark);
}
.iimad-contact__link:hover { color: var(--color-primary); }

.iimad-contact__card {
  background: var(--surface-card);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  padding: var(--space-8);
}
@media print, screen and (min-width: 40em) {
  .iimad-contact__card { padding: var(--space-10); }
}

/* Form */
.iimad-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media print, screen and (min-width: 40em) {
  .iimad-form__row { grid-template-columns: 1fr 1fr; }
}
.iimad-field { margin-bottom: var(--space-5); }
.iimad-field label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin-bottom: var(--space-2);
}
/* Clean underline inputs (name/email), bordered textarea — IIMAD palette */
.iimad-form input[type="text"],
.iimad-form input[type="email"] {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--border-default);
  border-radius: var(--radius-none);
  background: transparent;
  box-shadow: none;
  padding: var(--space-2) 0;
  font-size: var(--text-lg);
  color: var(--text-primary);
}
.iimad-form input[type="text"]:focus,
.iimad-form input[type="email"]:focus {
  border-bottom-color: var(--color-primary);
  box-shadow: 0 1px 0 0 var(--color-primary);
  outline: none;
}
.iimad-form textarea {
  width: 100%;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-none);
  background: var(--surface-card);
  box-shadow: var(--shadow-inset);
  padding: var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-loose);
  resize: vertical;
}
.iimad-form textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(46, 24, 11, 0.12);
  outline: none;
}
.iimad-form__submit { margin-top: var(--space-4); min-width: 12rem; }

/* Honeypot — visually hidden, kept in the accessibility tree off-screen */
.iimad-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Form notices */
.iimad-formnote {
  border-radius: var(--radius-none);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-6);
  font-size: var(--text-base);
  border-left: 3px solid var(--color-primary);
  background: var(--surface-muted);
  color: var(--text-primary);
}
.iimad-formnote--success { border-left-color: var(--color-success); background: var(--color-success-bg); }
.iimad-formnote--error   { border-left-color: var(--color-error);   background: var(--color-error-bg); }

/* ── Footer ────────────────────────────────────────────────────────────── */
.ft-footer__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  padding-block: var(--space-12);
}
@media print, screen and (min-width: 48em) {
  .ft-footer__body { grid-template-columns: 3fr 2fr; gap: var(--space-16); }
}

.ft-footer__contact {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  margin: var(--space-2) 0 0;
}
.ft-footer__contact a { color: var(--color-accent); }
.ft-footer__contact a:hover { color: var(--color-accent-light); }

/* Site nav column */
.ft-footer__nav-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 var(--space-5);
}
.ft-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3) var(--space-6);
}
.ft-menu li { margin: 0; }
.ft-menu a,
.ft-menu li a {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: rgba(254, 254, 254, 0.75) !important;
  text-decoration: none !important;
  transition: var(--transition-colors);
}
.ft-menu a:hover,
.ft-menu li a:hover { color: var(--color-accent) !important; }

/* Copyright bar */
.ft-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-block: var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.35);
}

/* ── Hero: news carousel slot (right column) ────────────────────────────── */
.iimad-hero__media-slot {
  position: relative;
  overflow: hidden;
  min-height: 18rem;
}
/* Make Slick track fill the slot height */
.hero-news-carousel,
.hero-news-carousel .slick-list,
.hero-news-carousel .slick-track { height: 100%; }
.hero-news-carousel .slick-slide,
.hero-news-carousel .slick-slide > div { height: 100%; }

/* Individual news slide */
.hns-slide {
  position: relative;
  height: 100%;
  min-height: 18rem;
  background-size: cover;
  background-position: center;
  background-color: var(--color-primary);
  background-image: linear-gradient(145deg, #2E180B 0%, #3d2010 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.hns-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(46,24,11,0.9) 0%, rgba(46,24,11,0) 65%);
  pointer-events: none;
}
.hns-slide__content {
  position: relative;
  z-index: 1;
  padding: var(--space-6) var(--space-6) var(--space-8);
}
.hns-slide__heading {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--text-inverse);
  margin: 0 0 var(--space-3);
}
.hns-slide__text {
  font-size: var(--text-sm);
  line-height: var(--leading-loose);
  color: rgba(254,254,254,0.8);
  margin: 0 0 var(--space-4);
}
/* Slick dots — top-right corner of the carousel */
.hero-news-carousel .slick-dots {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  display: flex !important;
  gap: var(--space-2);
  padding: 0;
  margin: 0;
  list-style: none;
  z-index: 2;
}
.hero-news-carousel .slick-dots li { margin: 0; }
.hero-news-carousel .slick-dots li button {
  display: block;
  width: 8px;
  height: 8px;
  background: rgba(255,188,80,0.4);
  border: 0;
  border-radius: 50%;
  padding: 0;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  transition: background var(--duration-normal) var(--ease-default);
}
.hero-news-carousel .slick-dots li.slick-active button { background: var(--color-accent); }

/* ── Research carousel — gutter and Slick overrides ────────────────────── */
.research-carousel { margin: 0 -10px; }
.research-carousel .slick-slide {
  padding: 0 10px;
  box-sizing: border-box;
  height: auto;
}
.research-carousel .slick-track { display: flex; }
.research-carousel .slick-slide > div,
.research-carousel .slick-slide .research-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* ── Custom carousel nav buttons (used by research carousel) ────────────── */
.iimad-secthead--flex {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
  max-width: none;
}
.iimad-carousel-nav {
  display: flex;
  gap: var(--space-2);
  flex: 0 0 auto;
  align-self: center;
  margin-top: var(--space-4);
}
.iimad-carousel-prev,
.iimad-carousel-next {
  width: 40px;
  height: 40px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  color: var(--color-primary);
  font-size: var(--text-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--duration-normal) var(--ease-default),
              border-color var(--duration-normal) var(--ease-default),
              color var(--duration-normal) var(--ease-default);
}
.iimad-carousel-prev:hover,
.iimad-carousel-next:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-primary);
}
/* Slick disables buttons when at edges — mute them */
.iimad-carousel-prev.slick-disabled,
.iimad-carousel-next.slick-disabled { opacity: 0.35; cursor: default; }

/* ── Section footer CTA link ────────────────────────────────────────────── */
.iimad-section__cta { margin-top: var(--space-8); }

/* ── CSS Tab switcher (Publications / Events) — no JS ───────────────────── */
.content-tabs__radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.content-tabs__nav {
  display: flex;
  border-bottom: 2px solid var(--border-light);
  margin-bottom: var(--space-6);
  gap: 0;
}
.content-tabs__label {
  display: inline-block;
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text-tertiary);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: color var(--duration-normal) var(--ease-default),
              border-color var(--duration-normal) var(--ease-default);
  user-select: none;
}
.content-tabs__label:hover { color: var(--color-primary); }

/* Active tab states via checked sibling */
#ctab-pubs:checked   ~ .content-tabs__nav label[for="ctab-pubs"],
#ctab-events:checked ~ .content-tabs__nav label[for="ctab-events"] {
  color: var(--color-primary);
  border-bottom-color: var(--color-accent);
}

/* Panel visibility */
.content-tabs__panel { display: none; }
#ctab-pubs:checked   ~ .content-tabs__panel--pubs   { display: block; }
#ctab-events:checked ~ .content-tabs__panel--events  { display: block; }

.content-tabs__footer { margin-top: var(--space-6); }

/* ── Publications/Events category label in card body (desktop-only) ──────── */
.pub-gcard__cat-text {
  display: none;
}
.ev-gcard__date {
  display: none;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin: 0;
}

/* ── Desktop: Publications + Events side-by-side split ───────────────────── */
.pubev-panel-heading {
  display: none;
  font-family: var(--font-sans);
  font-size: var(--text-5xl);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--text-primary);
  margin: 0 0 var(--space-6);
}

@media print, screen and (min-width: 64em) {
  /* Show panel headings, hide tab nav */
  .pubev-panel-heading { display: block; }
  .content-tabs__nav { display: none; }

  /* Both panels always visible in a 2fr + 1fr grid */
  .content-tabs {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-10);
    align-items: start;
  }
  .content-tabs__panel { display: block !important; }

  /* Events: single column stack in right panel */
  .content-tabs__panel--events .ev-grid {
    grid-template-columns: 1fr;
  }

  /* Show category label in pub body */
  .pub-gcard__cat-text {
    display: block;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent-dark);
    margin: 0;
  }

  /* Show date in event body */
  .ev-gcard__date { display: block; }

  /* Slightly tighten card padding on the narrower events column */
  .content-tabs__panel--events .ev-gcard__body {
    padding: var(--space-4);
  }

  /* Footer alignment: pubs centred, events right-aligned */
  .content-tabs__panel--pubs .content-tabs__footer { text-align: center; }
  .content-tabs__panel--events .content-tabs__footer { text-align: right; }
}

/* ── Home: Publications — featured card + digest list ───────────────────── */
.pub-featured {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--border-light);
  overflow: hidden;
  transition: border-color var(--duration-normal) var(--ease-default),
              box-shadow var(--duration-slow) var(--ease-default);
}
.pub-featured:hover { border-color: var(--color-primary-subtle); box-shadow: var(--shadow-sm); }
@media print, screen and (min-width: 48em) {
  .pub-featured { grid-template-columns: 260px 1fr; }
}
.pub-featured__media {
  background: var(--color-primary);
  background-size: cover;
  background-position: center;
  min-height: 12rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pub-featured__letter-mark {
  font-family: var(--font-serif);
  font-size: var(--text-4xl);
  font-weight: var(--weight-light);
  color: var(--color-accent);
  opacity: 0.5;
  letter-spacing: var(--tracking-wide);
}
.pub-featured__body {
  padding: var(--space-6) var(--space-8);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pub-featured__meta {
  font-size: var(--text-sm);
  color: var(--color-accent-dark);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin: 0 0 var(--space-3);
}
.pub-featured__title {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-primary);
  margin: 0 0 var(--space-3);
}
.pub-featured__title a { color: inherit; text-decoration: none; }
.pub-featured__title a:hover { color: var(--color-primary-hover); }
.pub-featured__excerpt {
  font-size: var(--text-base);
  line-height: var(--leading-loose);
  color: var(--text-secondary);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Digest list */
.pub-list {
  border: 1px solid var(--border-light);
  border-top: 0;
}
.pub-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border-light);
  transition: background var(--duration-normal) var(--ease-default);
}
.pub-item:hover { background: var(--surface-muted); }
.pub-item__title {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-primary);
  line-height: var(--leading-normal);
  margin: 0;
}
.pub-item__title a { color: inherit; text-decoration: none; }
.pub-item__title a:hover { color: var(--color-primary-hover); }
.pub-item__meta {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin: 0;
}
.pub-item__sep { margin-inline: var(--space-2); }
.pub-item__tag {
  color: var(--color-accent-dark);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-weight: var(--weight-medium);
}
@media print, screen and (min-width: 48em) {
  .pub-item { flex-direction: row; align-items: center; gap: var(--space-6); }
  .pub-item__title { flex: 1; }
  .pub-item__meta { flex: 0 0 auto; white-space: nowrap; }
}

/* ── Home: Events — date-block card strip ───────────────────────────────── */
.ev-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gutter);
}
@media print, screen and (min-width: 40em) {
  .ev-strip { grid-template-columns: repeat(2, 1fr); }
}
@media print, screen and (min-width: 64em) {
  .ev-strip { grid-template-columns: repeat(4, 1fr); }
}
.ev-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-light);
  overflow: hidden;
  text-decoration: none;
  transition: border-color var(--duration-normal) var(--ease-default),
              box-shadow var(--duration-slow) var(--ease-default);
}
.ev-card:hover { border-color: var(--color-primary-subtle); box-shadow: var(--shadow-sm); }
.ev-card__header {
  background: var(--color-primary);
  padding: var(--space-5) var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 5rem;
}
.ev-date-block { text-align: center; line-height: 1; }
.ev-date-block__mon {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-accent);
  margin-bottom: var(--space-1);
}
.ev-date-block__day {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--text-4xl);
  font-weight: var(--weight-light);
  color: var(--text-inverse);
  line-height: 1;
}
.ev-card__body {
  padding: var(--space-4) var(--space-5);
  flex: 1;
}
.ev-card__type {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-accent-dark);
  margin: 0 0 var(--space-2);
}
.ev-card__title {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-primary);
  line-height: var(--leading-normal);
  margin: 0;
}

/* ── Home: Events — compact horizontal row list ─────────────────────────── */
.ev-list { display: flex; flex-direction: column; }
.ev-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  border-bottom: 1px solid var(--border-light);
  text-decoration: none;
  transition: background var(--duration-normal) var(--ease-default);
}
.ev-row:first-child { border-top: 1px solid var(--border-light); }
.ev-row:hover { background: var(--surface-muted); }
.ev-row__date {
  flex: 0 0 3.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  padding: var(--space-3);
  text-align: center;
  line-height: 1;
}
.ev-row__mon {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-accent);
  margin-bottom: 2px;
}
.ev-row__day {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: var(--weight-light);
  color: var(--text-inverse);
}
.ev-row__body {
  flex: 1;
  padding: var(--space-3) var(--space-5);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ev-row__type {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-accent-dark);
  margin: 0 0 var(--space-1);
}
.ev-row__title {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-primary);
  line-height: var(--leading-normal);
  margin: 0;
}

/* ── Home: Publications & Events — image grid cards ─────────────────────── */

/* Shared grid container */
.pub-grid,
.ev-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gutter);
}
@media print, screen and (min-width: 40em) {
  .pub-grid,
  .ev-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Publication grid card ───────────────────────────────────────── */
.pub-gcard {
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--border-light);
  overflow: hidden;
  transition: border-color var(--duration-normal) var(--ease-default),
              box-shadow var(--duration-slow) var(--ease-default);
}
.pub-gcard:hover { border-color: var(--color-primary-subtle); box-shadow: var(--shadow-sm); }

/* Media wrapper: clips the zoom, hosts absolute-positioned overlays */
.pub-gcard__media-wrap {
  display: block;
  position: relative;
  overflow: hidden;
  height: 180px;
  flex: 0 0 auto;
}
/* Zooming image div */
.pub-gcard__media {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  /* Placeholder: brand gradient */
  background-color: var(--color-primary);
  background-image: linear-gradient(145deg, #2E180B 0%, #3d2010 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 500ms var(--ease-default);
}
.pub-gcard:hover .pub-gcard__media { transform: scale(1.05); }
/* When a real thumbnail is set, the background-image inline style overrides the gradient */

/* Brand wordmark — visible on placeholder cards only */
.pub-gcard__brand-mark {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: var(--weight-light);
  letter-spacing: 0.25em;
  color: var(--color-accent);
  opacity: 0.45;
  user-select: none;
}

/* Gradient scrim — injected as a sibling div only on real-image cards so it doesn't zoom */
.pub-gcard__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(46,24,11,0.82) 0%, rgba(46,24,11,0) 55%);
  pointer-events: none;
}

/* Category label — absolute over the scrim, always legible */
.pub-gcard__cat {
  position: absolute;
  bottom: var(--space-3);
  left: var(--space-4);
  right: var(--space-4);
  font-family: var(--font-sans);
  font-size: 0.64rem;
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* On placeholder cards there is no scrim div; the gradient bg provides contrast */
.pub-gcard:not(.pub-gcard--has-thumb) .pub-gcard__cat { color: var(--color-accent); opacity: 0.75; }

/* Card text body */
.pub-gcard__body {
  flex: 1;
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.pub-gcard__title {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  color: var(--color-primary);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pub-gcard__title a { color: inherit; text-decoration: none; }
.pub-gcard__title a:hover { color: var(--color-accent-dark); }
.pub-gcard__date {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin: 0;
}

/* ── Event grid card ─────────────────────────────────────────────── */
.ev-gcard {
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--border-light);
  overflow: hidden;
  transition: border-color var(--duration-normal) var(--ease-default),
              box-shadow var(--duration-slow) var(--ease-default);
}
.ev-gcard:hover { border-color: var(--color-primary-subtle); box-shadow: var(--shadow-sm); }

.ev-gcard__media-wrap {
  display: block;
  position: relative;
  overflow: hidden;
  height: 180px;
  flex: 0 0 auto;
}
.ev-gcard__media {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-color: var(--color-primary);
  background-image: linear-gradient(145deg, #2E180B 0%, #3d2010 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 500ms var(--ease-default);
}
.ev-gcard:hover .ev-gcard__media { transform: scale(1.05); }

.ev-gcard__brand-mark {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: var(--weight-light);
  letter-spacing: 0.25em;
  color: var(--color-accent);
  opacity: 0.45;
  user-select: none;
}

.ev-gcard__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(46,24,11,0.78) 0%, rgba(46,24,11,0.1) 60%);
  pointer-events: none;
}

/* Date block — top-left corner, always opaque brand colour */
.ev-gcard__datebox {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--color-primary);
  padding: var(--space-3) var(--space-4);
  text-align: center;
  line-height: 1;
  /* Gold border makes it legible even on same-colour placeholder bg */
  border-right: 1px solid rgba(255,188,80,0.3);
  border-bottom: 1px solid rgba(255,188,80,0.3);
}
.ev-gcard__datebox-mon {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-accent);
  margin-bottom: var(--space-1);
}
.ev-gcard__datebox-day {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: var(--weight-light);
  color: var(--text-inverse);
  line-height: 1;
}

.ev-gcard__body {
  flex: 1;
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.ev-gcard__type {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-accent-dark);
  margin: 0;
}
.ev-gcard__title {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  color: var(--color-primary);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ev-gcard__title a { color: inherit; text-decoration: none; }
.ev-gcard__title a:hover { color: var(--color-accent-dark); }

/* ── Home: Pull-quote band ──────────────────────────────────────────────── */
/* app.css + ds-overrides both set margin-bottom:5rem on .hm-quote — zero it */
.iimad-section--brand .hm-quote { margin-bottom: 0 !important; }
.iimad-section--brand .hm-quote p {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: var(--weight-light);
  color: var(--text-inverse);
  line-height: var(--leading-normal);
  margin: 0;
  max-width: 42rem;
  margin-inline: auto;
}
.iimad-section--brand .hm-quote cite {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-accent);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-style: normal;
}

/* ── Home: Our Partners — dark marquee ticker ────────────────────────────── */
.iimad-partners-ticker {
  background: var(--color-primary);
  padding-block: var(--space-8);
  overflow: hidden;
}
.iimad-partners-ticker__label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-6);
}
.iimad-partners-ticker__label::before,
.iimad-partners-ticker__label::after {
  content: '';
  flex: 1;
  max-width: 80px;
  height: 1px;
  background: rgba(255,188,80,0.35);
}
/* Fade edges so items appear to scroll into/out of frame */
.iimad-ticker-viewport {
  position: relative;
  overflow: hidden;
}
.iimad-ticker-viewport::before,
.iimad-ticker-viewport::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.iimad-ticker-viewport::before {
  left: 0;
  background: linear-gradient(to right, var(--color-primary), transparent);
}
.iimad-ticker-viewport::after {
  right: 0;
  background: linear-gradient(to left, var(--color-primary), transparent);
}
/* The scrolling track — items are duplicated in HTML for seamless looping */
.iimad-ticker-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 0;
  animation: iimad-ticker-scroll 28s linear infinite;
}
.iimad-ticker-track:hover { animation-play-state: paused; }
@keyframes iimad-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.iimad-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-6);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.3s ease;
  cursor: default;
}
a.iimad-ticker__item { cursor: pointer; }
.iimad-ticker__item:hover { color: var(--color-accent); }
/* Dot separator between items */
.iimad-ticker__item::after {
  content: '·';
  color: rgba(255,188,80,0.3);
  font-size: 1.2em;
  line-height: 1;
  margin-left: var(--space-3);
}
.iimad-ticker__item:last-child::after { display: none; }
/* Logo within ticker item */
.iimad-ticker__logo {
  max-height: 28px;
  max-width: 80px;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1) opacity(0.45);
  transition: filter 0.3s ease;
}
.iimad-ticker__item:hover .iimad-ticker__logo {
  filter: brightness(0) invert(1) opacity(0.9) sepia(1) saturate(2) hue-rotate(10deg);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Hero — Map variant  (Prompts 1 · 2 · 4)
   Only adds new rules; does not touch any existing hero CSS.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Prompt 4: grid wiring ───────────────────────────────────────────────── */
/* Mobile/tablet: content-col has its own padding, so zero out the grid's padding */
.iimad-hero--map .iimad-hero__grid {
  gap: var(--space-12);
  padding-block: 0;
}
/* Desktop only: 2-col, flush layout (map fills full column height) */
@media print, screen and (min-width: 64em) {
  .iimad-hero--map .iimad-hero__grid {
    gap: 0;
    padding-block: 0;
    align-items: stretch;
    grid-template-columns: 7fr 5fr;
  }
}
/* On very wide viewports align left column text with the shell boundary */
@media (min-width: 81.25rem) {
  .iimad-hero--map .iimad-hero__content-col {
    padding-left: calc((100vw - var(--container-max)) / 2 + var(--container-padding-md));
  }
}

/* When map is toggled off: content-col's own padding takes over — reset grid padding */
.iimad-hero:not(.iimad-hero--map) .iimad-hero__grid {
  padding-block: 0;
}

/* ── Prompt 1: map column — desktop-only ─────────────────────────────────── */
.iimad-hero__map-col {
  display: none; /* hidden on mobile/tablet regardless of ACF toggle */
}
@media print, screen and (min-width: 64em) {
  .iimad-hero--map .iimad-hero__map-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--surface-page);
    border-top: none;
    border-left: none;
    padding: var(--space-8) var(--space-6);
    min-height: 32rem;
  }
}

/* Map wrapper — centred, capped width */
.india-map-wrap {
  max-width: 340px;
  width: 100%;
}

/* ── Prompt 2: India SVG map ─────────────────────────────────────────────── */
.india-map-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
.state-fill {
  stroke: var(--color-primary-subtle);
  stroke-width: 0.6px;
  stroke-linejoin: round;
}
.outline {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 1.2px;
  stroke-linejoin: round;
  stroke-linecap: round;
}
/* Pulse animation: ring expands from r=5 to r=18 (scale ×3.6) and fades */
@keyframes pulse-ring {
  0%   { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(3.6); opacity: 0; }
}
.city-dot__ring {
  fill: var(--color-accent);
  transform-box: fill-box;
  transform-origin: center;
  animation: pulse-ring 2.5s ease-out infinite;
}
.city-dot__center {
  fill: var(--color-accent);
  stroke: var(--color-primary);
  stroke-width: 1px;
}
/* Stagger delays for 24 MoU institution dots (0.3s apart → stays within 2.5s animation cycle) */
.city-dot:nth-child(1)  .city-dot__ring { animation-delay: 0.0s; }
.city-dot:nth-child(2)  .city-dot__ring { animation-delay: 0.3s; }
.city-dot:nth-child(3)  .city-dot__ring { animation-delay: 0.6s; }
.city-dot:nth-child(4)  .city-dot__ring { animation-delay: 0.9s; }
.city-dot:nth-child(5)  .city-dot__ring { animation-delay: 1.2s; }
.city-dot:nth-child(6)  .city-dot__ring { animation-delay: 1.5s; }
.city-dot:nth-child(7)  .city-dot__ring { animation-delay: 1.8s; }
.city-dot:nth-child(8)  .city-dot__ring { animation-delay: 2.1s; }
.city-dot:nth-child(9)  .city-dot__ring { animation-delay: 0.1s; }
.city-dot:nth-child(10) .city-dot__ring { animation-delay: 0.4s; }
.city-dot:nth-child(11) .city-dot__ring { animation-delay: 0.7s; }
.city-dot:nth-child(12) .city-dot__ring { animation-delay: 1.0s; }
.city-dot:nth-child(13) .city-dot__ring { animation-delay: 1.3s; }
.city-dot:nth-child(14) .city-dot__ring { animation-delay: 1.6s; }
.city-dot:nth-child(15) .city-dot__ring { animation-delay: 1.9s; }
.city-dot:nth-child(16) .city-dot__ring { animation-delay: 2.2s; }
.city-dot:nth-child(17) .city-dot__ring { animation-delay: 0.2s; }
.city-dot:nth-child(18) .city-dot__ring { animation-delay: 0.5s; }
.city-dot:nth-child(19) .city-dot__ring { animation-delay: 0.8s; }
.city-dot:nth-child(20) .city-dot__ring { animation-delay: 1.1s; }
.city-dot:nth-child(21) .city-dot__ring { animation-delay: 1.4s; }
.city-dot:nth-child(22) .city-dot__ring { animation-delay: 1.7s; }
.city-dot:nth-child(23) .city-dot__ring { animation-delay: 2.0s; }
.city-dot:nth-child(24) .city-dot__ring { animation-delay: 2.3s; }

/* Map tagline — left-aligned to sit below India's southern tip */
.map-tagline {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 15%;
  margin-top: var(--space-3);
}
.map-tagline__count {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--text-4xl);
  font-weight: var(--weight-light);
  color: var(--color-primary);
  line-height: 1;
}
.map-tagline__label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-top: var(--space-2);
}

/* ── Hero left-column inline statistics ─────────────────────────────────── */
.hero-inline-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6) var(--space-10);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-light);
}
.hero-inline-stat__value {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-weight: var(--weight-light);
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: var(--space-1);
}
.hero-inline-stat__label {
  display: block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text-tertiary);
}


/* ── Hero Carousel ──────────────────────────────────────────────────────── */
.iimad-hero-carousel {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-6) var(--container-padding-md) var(--space-6);
}
.hero-carousel__viewport {
  position: relative;
  overflow: hidden;
}
.hero-carousel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 700ms var(--ease-default), visibility 0s linear 700ms;
  display: grid;
  grid-template-columns: 5fr 7fr;
  min-height: 27rem;
}
.hero-carousel__slide.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  transition: opacity 700ms var(--ease-default), visibility 0s;
  z-index: 1;
}
.hero-carousel__panel {
  background: var(--color-primary);
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-10) var(--space-8);
}
.hero-carousel__eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}
.hero-carousel__title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  font-weight: var(--weight-light);
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
  color: var(--color-white);
  margin-bottom: var(--space-4);
}
.hero-carousel__text {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: rgba(255,255,255,0.82);
  margin-bottom: var(--space-8);
  max-width: 28rem;
}
.hero-carousel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
/* Primary hero button: always marigold; white on hover */
.iimad-hero-carousel .hero-carousel__actions .button:not(.secondary),
.iimad-hero-carousel .hero-carousel__actions .button:not(.secondary):focus {
  background-color: var(--color-accent) !important;
  color: var(--color-primary) !important;
  border: 1px solid var(--color-accent) !important;
}
.iimad-hero-carousel .hero-carousel__actions .button:not(.secondary):hover {
  background-color: var(--color-white) !important;
  color: var(--color-primary) !important;
  border-color: var(--color-white) !important;
}
/* Secondary (ghost) hero button: white text + white border; invert on hover */
.hero-carousel__ghost.button.secondary,
.hero-carousel__ghost.button.secondary:focus {
  background-color: transparent !important;
  color: var(--color-white) !important;
  border: 1px solid var(--color-white) !important;
}
.hero-carousel__ghost.button.secondary:hover {
  background-color: var(--color-white) !important;
  color: var(--color-primary) !important;
  border-color: var(--color-white) !important;
}
.hero-carousel__img {
  position: relative;
  background: var(--surface-muted);
  overflow: hidden;
}
.hero-carousel__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Controls */
.hero-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-5);
}
.hero-carousel__indicators {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.hero-carousel__counter {
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-wide);
  color: var(--color-primary);
}
.hero-carousel__counter span { font-variant-numeric: tabular-nums; }
.hero-carousel__dots { display: flex; gap: var(--space-2); }
.hero-carousel__dot {
  width: 36px;
  height: 6px;
  border: none;
  padding: 0;
  cursor: pointer;
  background: rgba(46,24,11,0.22);
  transition: background var(--duration-normal) var(--ease-default),
              width var(--duration-normal) var(--ease-default);
}
.hero-carousel__dot:hover      { background: rgba(46,24,11,0.45); }
.hero-carousel__dot.is-active  { background: var(--color-accent); width: 46px; }
.hero-carousel__nav { display: flex; gap: var(--space-2); }
.hero-carousel__arrow {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(46,24,11,0.3);
  background: var(--color-white);
  color: var(--color-primary);
  cursor: pointer;
  transition: var(--transition-colors);
}
.hero-carousel__arrow:hover {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}
.hero-carousel__arrow svg { pointer-events: none; }

/* Mobile */
@media screen and (max-width: 47.99em) {
  .hero-carousel__slide {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .hero-carousel__img {
    order: -1;
    aspect-ratio: 16 / 10;
  }
  .hero-carousel__panel { padding: var(--space-8) var(--space-6); }
}

/* ── Home feed: Recent Publications + Events (2 columns) ─────────────────── */
.hp-feed {
  padding-block: var(--space-4) var(--space-16);
  border-bottom: 1px solid var(--border-light);
}
.hp-feed__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: var(--space-12);
}
.hp-feed__col {
  display: flex;
  flex-direction: column;
}

/* Two-part column heading: marigold-ruled uppercase label + Roboto Slab title */
.hp-colhead {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-primary);
}
.hp-colhead__eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-primary-subtle);
  margin-bottom: var(--space-3);
}
.hp-colhead__title {
  font-family: var(--font-serif);
  font-size: var(--text-4xl);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--text-primary);
  margin: 0;
}

/* "View all …" text link */
.hp-textlink {
  align-self: flex-start;
  margin-top: var(--space-6);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-primary);
}
.hp-textlink span {
  display: inline-block;
  transition: transform var(--duration-fast) var(--ease-default);
}
.hp-textlink:hover { color: var(--color-primary-hover); }
.hp-textlink:hover span { transform: translateX(4px); }

/* Publication cards — 2×2 grid, marigold top-rule, divider date */
.hp-pub-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
.hp-pub-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--border-light);
  border-top: 3px solid var(--color-accent);
  padding: var(--space-5);
  transition: border-color var(--duration-normal) var(--ease-default);
}
.hp-pub-card:hover { border-color: var(--color-primary-subtle); }
.hp-pub-card:hover { border-top-color: var(--color-accent); }
.hp-pub-card__cat {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-primary-subtle);
  margin-bottom: var(--space-3);
}
.hp-pub-card__title {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-4);
}
.hp-pub-card__title a { color: var(--text-primary); }
.hp-pub-card__title a:hover { color: var(--color-primary); }
.hp-pub-card__date {
  margin: auto 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-light);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* Event cards — vertical list, horizontal layout, brown date chip */
.hp-event-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.hp-event-card {
  display: flex;
  gap: var(--space-4);
  background: var(--surface-card);
  border: 1px solid var(--border-light);
  padding: var(--space-4);
  transition: border-color var(--duration-normal) var(--ease-default);
}
.hp-event-card:hover { border-color: var(--color-primary-subtle); }
.hp-event-card__chip {
  flex: 0 0 auto;
  width: 4rem;
  background: var(--color-primary);
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) 0;
}
.hp-event-card__day {
  font-family: var(--font-serif);
  font-size: var(--text-4xl);
  font-weight: var(--weight-light);
  line-height: 1;
}
.hp-event-card__mon {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-accent);
  margin-top: var(--space-1);
}
.hp-event-card__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.hp-event-card__type {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-accent-dark);
  margin-bottom: var(--space-1);
}
.hp-event-card__title {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-1);
}
.hp-event-card__title a { color: var(--text-primary); }
.hp-event-card__title a:hover { color: var(--color-primary); }
.hp-event-card__meta {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin: 0;
}

/* Responsive: stack columns, then single-column publication cards */
@media screen and (max-width: 63.99em) {
  .hp-feed__grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
}
@media screen and (max-width: 39.99em) {
  .hp-pub-grid { grid-template-columns: 1fr; }
}