/* ==========================================================================
   Adhyayan School — Components
   Each component keeps its responsive (width >= 768px / width > 1024px) and
   reduced-motion overrides directly under its base rules.

   Contents
      1. Icons & buttons (icon, btn, link-arrow, external-link mark, icon-button, share links, store-badge)
      2. Forms
      3. Feedback (alerts, toasts, empty state)
      4. Loading (skeletons, media frames)
      5. Text & tags (lead, eyebrow, motto, badge, chips, highlight list, prose)
      6. Cards (base + pillar, testimonial, profile, partner, post card, post meta)
      7. Lists & sequences (name list, steps, contact details)
      8. Heroes (home hero + video, inner-page hero + brand pattern, breadcrumb)
      9. In-page navigation (subnav, filter tabs, pagination, previous/next)
     10. Banners (CTA banner, stats, app & brochure)
     11. Media (partner marquee & logo wall, gallery, academic media, video, table)
     12. Overlays (modals, lightbox, accordions)
     13. Page-specific layouts (About, story & job detail)
   ========================================================================== */

/* ==========================================================================
   1. Icons & buttons
   ========================================================================== */

/* ---------- Icons ----------
   Inline: <svg class="icon" aria-hidden="true"><use href="/assets/images/icons.svg#name"/></svg>
   Pseudo-element icons are painted with currentColor through the --icon-* mask tokens. */

.icon {
  flex-shrink: 0;
  width: 1.125em;
  height: 1.125em;
}

/* Icon chip: duotone feature icon in a rounded sand tile. --icon-accent paints the sprite's offset disc. */
.icon-chip {
  --icon-accent: rgb(239 65 35 / 0.4);

  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  align-self: flex-start;
  width: 3.25rem;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  background-color: var(--color-sand);
  color: var(--color-primary);
  transition: background-color var(--transition-base);
}

.icon-chip .icon {
  width: 1.625rem;
  height: 1.625rem;
}

/* On navy surfaces */
.icon-chip--on-dark {
  --icon-accent: rgb(239 65 35 / 0.55);

  background-color: rgb(255 255 255 / 0.08);
  color: var(--color-white);
}

/* On sand surfaces the chip flips to white so it stays visible */
.cta-banner--light .icon-chip {
  background-color: var(--color-white);
}

/* Inside cards: white on grey cards, sand on white cards (cream sections) */
:is(.card, .value-tile) .icon-chip:not(.icon-chip--on-dark) {
  background-color: var(--color-surface-inset);
}

.link-arrow::after,
.btn--arrow::after,
.accordion__summary::after {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  background-color: currentColor;
  mask: var(--mask-icon) center / contain no-repeat;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 3rem;
  padding: var(--space-3) var(--space-8);
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base),
    box-shadow var(--transition-base), transform var(--transition-base);
}

@media (prefers-reduced-motion: no-preference) {
  .btn:not(:disabled, [aria-disabled='true']):hover {
    transform: translateY(-2px);
  }
}

/* Brand CTA — deepened logo red-orange keeps white text at WCAG AA */
.btn--cta {
  background-color: var(--color-secondary-dark);
  color: var(--color-white);
  box-shadow: var(--shadow-cta);
}

.btn--cta:hover {
  background-color: var(--color-secondary-darker);
  color: var(--color-white);
}

.btn--secondary {
  background-color: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn--secondary:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.btn--light {
  background-color: transparent;
  border-color: var(--color-white);
  color: var(--color-white);
}

.btn--light:hover {
  background-color: var(--color-white);
  color: var(--color-primary);
}

.btn--block {
  width: 100%;
}

.btn:disabled,
.btn[aria-disabled='true'] {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Loading state: spinner + swapped label (label text set by forms.js from data-loading-text) */
.btn.is-loading::before {
  content: '';
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--radius-circle);
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Button row that follows body copy inside a .stack */
.button-row--spaced {
  padding-top: var(--space-4);
}

/* ---------- Text link with arrow ---------- */

.link-arrow {
  font-weight: 600;
  text-decoration: none;
}

.link-arrow:hover {
  text-decoration: underline;
}

.announcement__link.link-arrow,
.announcement__link.link-arrow:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.link-arrow::after,
.btn--arrow::after {
  --mask-icon: var(--icon-arrow-right);
  width: 1em;
  height: 1em;
  transition: transform var(--transition-base);
}

.link-arrow::after {
  margin-left: 0.35em;
  vertical-align: -0.125em;
}

.link-arrow:hover::after,
.btn--arrow:hover::after {
  transform: translateX(0.2em);
}

/* ---------- External-link mark (links that open another site in a new tab) ---------- */

:is(.topbar__link, .submenu__link, .drawer__link, .site-footer__list a)[target='_blank']::after,
main :is(p, li) > a[target='_blank']:not(.btn, .link-arrow)::after {
  content: '';
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  margin-left: 0.3em;
  vertical-align: 0;
  background-color: currentColor;
  mask: var(--icon-external) center / contain no-repeat;
  opacity: 0.75;
}

/* ---------- Icon button ---------- */

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--border-radius);
  color: inherit;
}

.icon-button:hover {
  background-color: var(--color-bg-light);
}

.icon-button svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* ---------- Share links (story page; open the network's share dialog in a new tab) ---------- */

.share-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.share-links__label {
  margin-right: var(--space-1);
  font-weight: 600;
  color: var(--color-primary);
}

.share-links a {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-circle);
  background-color: var(--color-sand);
  color: var(--color-primary);
  transition: background-color var(--transition-base), color var(--transition-base);
}

.share-links a:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.share-links svg {
  width: 1.125rem;
  height: 1.125rem;
}

/* ---------- App store badges ---------- */

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-size);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  background-color: var(--color-primary);
  color: var(--color-white);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--transition-base);
}

.store-badge:hover {
  background-color: var(--color-primary-dark);
  color: var(--color-white);
}

.store-badge svg {
  width: 1.25rem;
  height: 1.25rem;
}

.section--primary .store-badge {
  background-color: var(--color-white);
  color: var(--color-primary);
}

.section--primary .store-badge:hover {
  background-color: var(--color-bg-light);
  color: var(--color-primary);
}

.store-badge[aria-disabled='true'] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ==========================================================================
   2. Forms
   ========================================================================== */

.form {
  display: grid;
  gap: var(--space-5);
}

.form__row {
  display: grid;
  gap: var(--space-5);
}

@media (width >= 768px) {
  .form__row--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.form-field {
  display: grid;
  gap: var(--space-2);
}

.form-label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-dark);
}

.required-mark {
  color: var(--color-error);
}

.form-note {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

.form-control {
  width: 100%;
  min-height: 3.25rem;
  padding: var(--space-3) var(--space-5);
  background-color: var(--color-white);
  border: 1px solid #908069;  /* Warm border, 3.4:1 on --color-surface-card (3.9:1 on white) for WCAG 1.4.11 */
  border-radius: var(--border-radius);
  color: var(--color-text-dark);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.form-control::placeholder {
  color: var(--color-text-light);
}

.form-control:focus-visible {
  outline: none;
  border-color: var(--color-focus-field);
  box-shadow: var(--focus-ring-field);
}

textarea.form-control {
  min-height: 8rem;
  resize: vertical;
}

/* Arrow stroke is --color-primary (#14254A), inlined because data-URI SVGs can't read custom properties */
select.form-control {
  appearance: none;
  padding-right: var(--space-10);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314254A' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 1.25rem;
}

/* Error state: invalid field highlighted in red */
.form-control[aria-invalid='true'] {
  border-color: var(--color-error);
  background-color: var(--color-error-bg);
}

.form-control[aria-invalid='true']:focus-visible {
  box-shadow: var(--focus-ring-error);
}

/* ==========================================================================
   3. Feedback
   ========================================================================== */

/* ---------- Alert banners (form error / success) ---------- */

.alert {
  padding: var(--space-4) var(--space-5);
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  border-radius: var(--border-radius);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.alert--error {
  background-color: var(--color-error-bg);
  color: var(--color-error);
}

.alert--success {
  background-color: var(--color-success-bg);
  color: var(--color-success);
}

/* ---------- Toasts (popover="manual" region, managed by main.js) ---------- */

.toast-region {
  position: fixed;
  inset: auto var(--space-4) var(--space-4) auto;
  width: min(24rem, calc(100% - 2 * var(--space-4)));
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  overflow: visible;
}

.toast-region:not(:popover-open) {
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  background-color: var(--color-white);
  box-shadow: var(--shadow-elevated);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.toast + .toast {
  margin-top: var(--space-3);
}

.toast--error {
  border-color: color-mix(in srgb, var(--color-error) 30%, transparent);
  background-color: var(--color-error-bg);
  color: var(--color-error);
}

.toast__message {
  flex: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .toast {
    animation: toast-in var(--transition-base);
  }

  @keyframes toast-in {
    from { opacity: 0; transform: translateY(0.5rem); }
  }
}

/* ---------- Empty state (dynamic regions with no data) ---------- */

.empty-state {
  grid-column: 1 / -1;
  padding: var(--space-10) var(--space-6);
  border: 1px dashed var(--color-border);
  border-radius: var(--border-radius);
  background-color: var(--color-bg-light);
  color: var(--color-text-light);
  text-align: center;
  font-weight: 500;
}

/* ==========================================================================
   4. Loading
   ========================================================================== */

/* Shared shimmer for skeleton placeholders and images that are still loading */
.skeleton,
.media-frame.is-loading {
  background: linear-gradient(90deg, var(--color-skeleton) 25%, var(--color-skeleton-shine) 50%, var(--color-skeleton) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

.skeleton {
  display: block;
  border-radius: var(--border-radius);
}

.skeleton--media { aspect-ratio: 16 / 10; }
.skeleton--title { height: 1.5rem; width: 70%; }
.skeleton--text { height: 0.875rem; width: 100%; }
.skeleton--text-short { height: 0.875rem; width: 55%; }

.skeleton-card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-card);
  border: 1px solid var(--color-border);
}

/* Matches the two-column team cards (Leadership) */
.skeleton-card--profile {
  min-height: 15rem;
  align-content: center;
}

/* ---------- Media frames: image loading & fallback (main.js) ---------- */

.media-frame {
  position: relative;
  background-color: var(--color-primary-tint);
}

.media-frame img {
  transition: opacity var(--transition-base);
}

.media-frame.is-loading img {
  opacity: 0;
}

/* ==========================================================================
   5. Text & tags
   ========================================================================== */

.lead {
  font-size: var(--font-size-lg);
  color: var(--color-text-light);
}

.section--primary .lead,
.page-hero .lead,
.hero .lead {
  color: var(--color-on-dark-muted);
}

.eyebrow {
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-secondary-darker);
}

/* Closing tagline (About › Philosophy) */
.badge {
  display: inline-block;
  align-self: flex-start;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background-color: var(--color-sand);
  color: var(--color-primary);
  font-size: var(--font-size-xs);
  font-weight: 600;
}

/* ---------- Prose: WordPress post body (the_content()) on the story & job detail pages ----------
   Styles everything the block editor (and the classic editor) outputs, using WordPress's own
   class names, so editors' content needs no extra classes. Reference page: /experience/content-style-guide.
   Covered: paragraphs (drop cap, alignment, sizes), h2–h6, inline formatting, lists, quote, pullquote,
   image (captions, alignments incl. wide/full), gallery, table (+ stripes), code, preformatted, verse,
   separator (default/wide/dots), buttons (fill/outline), embeds (16:9), video, audio, file, details,
   columns, media & text, group/cover backgrounds, footnotes, classic .wp-caption. */

.prose {
  max-width: var(--measure-article);
  font-size: 1.125rem;  /* 18px: a slightly larger article size keeps the narrower measure comfortable */
  overflow-wrap: break-word;
}

.prose::after {  /* contain floated (alignleft/alignright) images */
  content: '';
  display: block;
  clear: both;
}

.prose > * + * {
  margin-top: var(--space-5);
}

/* Headings */
.prose :is(h2, h3, h4, h5, h6) {
  color: var(--color-primary);
}

.prose > :is(h2, h3, h4, h5, h6) {
  margin-top: var(--space-10);
}

.prose > :is(h2, h3, h4, h5, h6) + :not(h2, h3, h4, h5, h6) {
  margin-top: var(--space-3);
}

/* Consecutive headings of the next level down stay close */
.prose > :is(h2, h3, h4, h5) + :is(h3, h4, h5, h6) {
  margin-top: var(--space-4);
}

.prose > :is(h3, h4, h5, h6) + h2 {
  margin-top: var(--space-10);
}

.prose h2 { font-size: var(--font-size-2xl); }
.prose h3 { font-size: var(--font-size-xl); }
.prose h4 { font-size: var(--font-size-lg); }
.prose h5 { font-size: var(--font-size-base); }
.prose h6 { font-size: var(--font-size-sm); letter-spacing: 0.06em; text-transform: uppercase; }

/* Paragraph options */
.prose .has-text-align-center { text-align: center; }
.prose .has-text-align-right { text-align: right; }
.prose .has-small-font-size { font-size: var(--font-size-sm); }
.prose .has-medium-font-size { font-size: var(--font-size-lg); }
.prose .has-large-font-size { font-size: var(--font-size-xl); line-height: 1.4; }
.prose .has-x-large-font-size { font-size: var(--font-size-2xl); line-height: 1.3; }

.prose .has-drop-cap::first-letter {
  float: left;
  margin: 0.08em var(--space-2) 0 0;
  font-family: var(--font-heading);
  font-size: 4.2em;
  font-weight: 800;
  line-height: 0.8;
  color: var(--color-secondary-dark);
}

/* Inline formatting */
.prose a {
  color: var(--color-secondary-dark);
  text-underline-offset: 0.2em;
}

.prose a:hover {
  color: var(--color-secondary-darker);
}

.prose :is(strong, b) { font-weight: 700; color: var(--color-text-dark); }

.prose mark {
  padding: 0 0.2em;
  border-radius: 0.2em;
  background-color: #FCE7C8;  /* warm highlight (sand family) */
  color: inherit;
}

.prose :not(pre) > code,
.prose kbd {
  padding: 0.1em 0.35em;
  border-radius: 0.3em;
  background-color: var(--color-sand);
  font-family: var(--font-mono);
  font-size: 0.875em;
}

.prose kbd {
  box-shadow: inset 0 -1px 0 var(--color-border);
}

.prose :is(sub, sup) { font-size: 0.75em; }

/* Lists */
.prose :is(ul, ol) {
  padding-left: var(--space-6);
}

.prose li + li,
.prose li > :is(ul, ol) {
  margin-top: var(--space-2);
}

.prose li::marker {
  color: var(--color-secondary-dark);
}

/* Quote + pullquote */
.prose blockquote {
  padding-left: var(--space-6);
  border-left: 3px solid var(--color-secondary);
  font-family: var(--font-heading);
  font-size: var(--font-size-xl);
  line-height: 1.35;
  color: var(--color-primary);
}

.prose blockquote > * + * {
  margin-top: var(--space-3);
}

.prose blockquote cite,
.prose .wp-block-pullquote cite {
  display: block;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-style: normal;
  font-weight: 600;
  color: var(--color-text-light);
}

.prose blockquote cite::before,
.prose .wp-block-pullquote cite::before {
  content: '— ';
}

.prose .wp-block-pullquote {
  padding: var(--space-10) var(--space-8);
  border-radius: var(--radius-lg);
  background-color: var(--color-bg-light);
  text-align: center;
}

.prose .wp-block-pullquote blockquote {
  padding: 0;
  border: 0;
  font-size: var(--font-size-2xl);
  line-height: 1.3;
}

.prose .wp-block-pullquote cite {
  margin-top: var(--space-4);
}

/* Images, figures, alignments */
.prose :is(img, video, iframe) {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.prose figure img,
.prose figure video {
  display: block;
  width: 100%;
}

.prose figcaption,
.prose .wp-caption-text {
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

.prose .wp-element-caption.has-text-align-center,
.prose .aligncenter figcaption {
  text-align: center;
}

/* Centred, wide and full blocks (and headings) start below any floated image */
.prose > :is(.aligncenter, .alignwide, .alignfull, h2, h3) {
  clear: both;
}

.prose .aligncenter {
  margin-inline: auto;
}

.prose .aligncenter img {
  margin-inline: auto;
}

.prose .alignleft,
.prose .alignright {
  max-width: 45%;
  margin-top: var(--space-1);
  margin-bottom: var(--space-4);
}

.prose .alignleft { float: left; margin-right: var(--space-6); }
.prose .alignright { float: right; margin-left: var(--space-6); }

/* Wider than the reading column: wide = up to 64rem, full = the whole container */
.prose .alignwide,
.prose .alignfull {
  max-width: none;
}

@media (width > 1024px) {
  .prose .alignwide {
    margin-inline: calc(50% - min(50vw - var(--container-padding), 32rem));
  }

  .prose .alignfull {
    margin-inline: calc(50% - min(50vw - var(--container-padding), (var(--container-max-width) / 2) - var(--container-padding)));
  }
}

.prose .is-style-rounded img {
  border-radius: var(--radius-circle);
}

.prose .wp-caption {
  max-width: 100%;
}

/* Gallery */
.prose .wp-block-gallery {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(var(--gallery-columns, 3), minmax(0, 1fr));
}

.prose .wp-block-gallery.columns-2 { --gallery-columns: 2; }
.prose .wp-block-gallery.columns-4 { --gallery-columns: 4; }

.prose .wp-block-gallery > .wp-block-image {
  margin: 0;
}

.prose .wp-block-gallery img {
  aspect-ratio: 1;
  object-fit: cover;
}

.prose .wp-block-gallery > figcaption {
  grid-column: 1 / -1;
  text-align: center;
}

/* Table */
.prose .wp-block-table {
  overflow-x: auto;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.prose :is(th, td) {
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  text-align: start;
  vertical-align: top;
}

.prose thead th {
  border-bottom: 2px solid var(--color-primary);
  color: var(--color-primary);
  font-weight: 700;
}

.prose tfoot td {
  font-weight: 600;
}

.prose .is-style-stripes tbody tr:nth-child(odd) {
  background-color: var(--color-bg-light);
}

.prose .is-style-stripes :is(tbody, tfoot) :is(th, td) {
  border-bottom: 0;
}

/* Code, preformatted, verse */
.prose pre {
  overflow-x: auto;
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  line-height: 1.6;
}

.prose .wp-block-code {
  background-color: var(--color-primary-dark);
  color: #E8EBF2;  /* --color-primary-tint */
  font-family: var(--font-mono);
}

.prose .wp-block-code code {
  font-family: inherit;
}

.prose .wp-block-preformatted {
  background-color: var(--color-bg-light);
  font-family: var(--font-mono);
}

.prose .wp-block-verse {
  padding: 0 0 0 var(--space-6);
  border-left: 3px solid var(--color-sand);
  background: none;
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  white-space: pre-wrap;
}

/* Separator */
.prose hr,
.prose .wp-block-separator {
  width: 6rem;
  margin-inline: auto;
  border: 0;
  border-top: 2px solid var(--color-border);
}

.prose .wp-block-separator.is-style-wide {
  width: 100%;
  border-top-width: 1px;
}

.prose .wp-block-separator.is-style-dots {
  width: auto;
  border: 0;
  text-align: center;
  line-height: 1;
}

.prose .wp-block-separator.is-style-dots::before {
  content: '···';
  font-size: var(--font-size-2xl);
  letter-spacing: 1em;
  color: var(--color-secondary);
}

/* Buttons (same look as .btn) */
.prose .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.prose .wp-block-buttons.is-content-justification-center { justify-content: center; }

.prose .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: var(--space-3) var(--space-8);
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  background-color: var(--color-secondary-dark);
  box-shadow: var(--shadow-cta);
  color: var(--color-white);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: background-color var(--transition-base);
}

.prose .wp-block-button__link:hover {
  background-color: var(--color-secondary-darker);
  color: var(--color-white);
}

.prose .is-style-outline .wp-block-button__link {
  border-color: var(--color-primary);
  background-color: transparent;
  box-shadow: none;
  color: var(--color-primary);
}

.prose .is-style-outline .wp-block-button__link:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* Embeds (YouTube, Vimeo…), video, audio */
.prose .wp-block-embed__wrapper {
  position: relative;
}

.prose .wp-embed-aspect-16-9 .wp-block-embed__wrapper { aspect-ratio: 16 / 9; }
.prose .wp-embed-aspect-4-3 .wp-block-embed__wrapper { aspect-ratio: 4 / 3; }

.prose .wp-block-embed__wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.prose audio {
  width: 100%;
}

/* File download */
.prose .wp-block-file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-light);
}

.prose .wp-block-file > a:first-child {
  color: var(--color-primary);
  font-weight: 600;
}

.prose .wp-block-file__button {
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  background-color: var(--color-primary);
  color: var(--color-white);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-decoration: none;
}

.prose .wp-block-file__button:hover {
  background-color: var(--color-primary-light);
  color: var(--color-white);
}

/* Details (disclosure) */
.prose .wp-block-details {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-light);
}

.prose .wp-block-details summary {
  cursor: pointer;
  color: var(--color-primary);
  font-weight: 600;
}

.prose .wp-block-details[open] summary {
  margin-bottom: var(--space-3);
}

/* Columns, media & text, group */
.prose .wp-block-columns {
  display: grid;
  gap: var(--space-6);
}

@media (width >= 768px) {
  .prose .wp-block-columns {
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
  }

  .prose .wp-block-media-text {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .prose .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {
    order: 2;
  }
}

.prose .wp-block-column > * + *,
.prose .wp-block-group > * + *,
.prose .wp-block-media-text__content > * + * {
  margin-top: var(--space-4);
}

.prose .wp-block-media-text {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

.prose .wp-block-media-text__media img {
  border-radius: var(--radius-md);
}

.prose .wp-block-group.has-background {
  padding: var(--space-8);
  border-radius: var(--radius-lg);
}

.prose .has-background { background-color: var(--color-bg-light); }

/* Accordion (core/accordion, WordPress 6.9+): the same look as the site FAQ (.accordion).
   Front-end toggling is WordPress's Interactivity API; the prototype stand-in is initEditorBlocks() in main.js. */
.prose .wp-block-accordion {
  border-top: 1px solid var(--color-border);
}

.prose .wp-block-accordion-item {
  border-bottom: 1px solid var(--color-border);
}

.prose .wp-block-accordion-heading {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--font-size-lg);
  letter-spacing: 0;
}

.prose .wp-block-accordion-heading__toggle {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-5) 0;
  border: 0;
  background: none;
  color: var(--color-primary);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.prose .wp-block-accordion-heading__toggle-title {
  flex: 1;
}

/* WordPress prints a literal "+"; it's swapped for the site's plus icon (same as the FAQ) */
.prose .wp-block-accordion-heading__toggle-icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  font-size: 0;
  background-color: var(--color-secondary-dark);
  mask: var(--icon-plus) center / contain no-repeat;
  transition: transform var(--transition-base);
}

.prose .wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
  transform: rotate(45deg);
}

.prose .wp-block-accordion-panel {
  padding-bottom: var(--space-5);
}

.prose .wp-block-accordion-panel[hidden] {
  padding: 0;
}

.prose .wp-block-accordion-panel > * + * {
  margin-top: var(--space-3);
}

/* Tabs (core/tabs, WordPress 7.0): pill tabs like the Experience filters; the active tab is navy */
.prose .wp-block-tab-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.prose .wp-block-tab-list [role='tab'] {
  padding: var(--space-3) var(--space-6);
  border: 0;
  border-radius: var(--radius-pill);
  background-color: var(--color-sand);
  color: var(--color-primary);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--transition-base), color var(--transition-base);
}

.prose .wp-block-tab-list [role='tab']:hover {
  background-color: #EADFD1;  /* --color-sand, one step deeper (as .filter-tab) */
}

.prose .wp-block-tab-list [role='tab'][aria-selected='true'] {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.prose .wp-block-tab-panel[hidden] {
  display: none;
}

.prose .wp-block-tab-panel > * + * {
  margin-top: var(--space-4);
}

/* Math (core/math, WordPress 6.9+): native MathML, centred; long formulas scroll sideways */
.prose .wp-block-math {
  overflow-x: auto;
  overflow-y: hidden;
  padding-block: var(--space-2);
  font-size: var(--font-size-xl);
  color: var(--color-primary);
}

/* Icon (core/icon, WordPress 7.0): an inline SVG from WordPress's icon library, orange by default */
.prose .wp-block-icon {
  line-height: 0;
  color: var(--color-secondary-dark);
}

.prose .wp-block-icon.aligncenter {
  display: flex;
  justify-content: center;
}

.prose :where(.wp-block-icon) svg {
  width: 3rem;
  height: auto;
  fill: currentColor;
}

/* Audio */
.prose .wp-block-audio audio {
  display: block;
  width: 100%;
}

/* Cover: image (or video) behind text, with a navy overlay whose strength comes from the editor's dim setting */
.prose .wp-block-cover {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 22rem;
  padding: var(--space-10) var(--space-8);
  overflow: hidden;
  border-radius: var(--radius-lg);
  color: var(--color-white);
}

.prose .wp-block-cover :is(.wp-block-cover__image-background, .wp-block-cover__video-background) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  border-radius: 0;
  object-fit: cover;
}

.prose .wp-block-cover__background {
  position: absolute;
  inset: 0;
  background-color: var(--color-primary-dark);
  opacity: 0.5;
}

.prose .wp-block-cover__background.has-background-dim-0 { opacity: 0; }
.prose .wp-block-cover__background.has-background-dim-10 { opacity: 0.1; }
.prose .wp-block-cover__background.has-background-dim-20 { opacity: 0.2; }
.prose .wp-block-cover__background.has-background-dim-30 { opacity: 0.3; }
.prose .wp-block-cover__background.has-background-dim-40 { opacity: 0.4; }
.prose .wp-block-cover__background.has-background-dim-50 { opacity: 0.5; }
.prose .wp-block-cover__background.has-background-dim-60 { opacity: 0.6; }
.prose .wp-block-cover__background.has-background-dim-70 { opacity: 0.7; }
.prose .wp-block-cover__background.has-background-dim-80 { opacity: 0.8; }
.prose .wp-block-cover__background.has-background-dim-90 { opacity: 0.9; }
.prose .wp-block-cover__background.has-background-dim-100 { opacity: 1; }

.prose .wp-block-cover__inner-container {
  position: relative;
  width: 100%;
}

.prose .wp-block-cover__inner-container > * + * {
  margin-top: var(--space-4);
}

.prose .wp-block-cover :is(h2, h3, h4, p, a) {
  color: var(--color-white);
}

/* Spacer: its height is inline; it replaces the normal gap rather than adding to it */
.prose > .wp-block-spacer,
.prose > .wp-block-spacer + * {
  margin-top: 0;
}

/* Footnotes */
.prose .wp-block-footnotes {
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

.prose .fn a,
.prose sup a {
  text-decoration: none;
  font-weight: 600;
}

/* ---------- Highlight list (bold lead-in + description, dot bullets) ---------- */

.highlight-list {
  display: grid;
  gap: var(--space-3);
  list-style: none;
  padding: 0;
}

.highlight-list li {
  position: relative;
  padding-left: 1.75em;
}

/* Orange check mark (same stroke family as the sprite) */
.highlight-list li::before {
  content: '';
  position: absolute;
  top: 0.3em;
  left: 0;
  width: 1.1em;
  height: 1.1em;
  background-color: var(--color-secondary-dark);
  mask: var(--icon-check) center / contain no-repeat;
}

.highlight-list strong {
  color: var(--color-primary);
}

/* ==========================================================================
   6. Cards
   Variants below override base .card properties, so they must follow it.
   ========================================================================== */

/* Warm-grey surface with a hairline border (no shadow); media sits inset with its own rounded corners (--card-inset from the card edge) */
.card {
  --card-pad: var(--space-6);
  --card-inset: var(--space-3);

  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--card-pad);
  background-color: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: background-color 250ms ease, border-color 250ms ease, transform var(--transition-slow);
}

.card__media {
  margin: calc(var(--card-inset) - var(--card-pad)) calc(var(--card-inset) - var(--card-pad)) var(--space-2);
  aspect-ratio: 16 / 9;  /* Shorter on phones, where cards are full width */
  overflow: hidden;
  border-radius: var(--radius-md);
  background-color: var(--color-sand);
}

@media (width >= 768px) {
  .card__media {
    aspect-ratio: 4 / 3;
  }
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

/* Cards that lead somewhere darken (and lift, motion allowed) on hover */
.card:has(.link-arrow, .card__link):hover {
  background-color: var(--color-surface-card-hover);
}

@media (prefers-reduced-motion: no-preference) {
  .card:has(.link-arrow, .card__link):hover {
    transform: translateY(-4px);
  }

  .card:has(.link-arrow, .card__link):hover .card__media img {
    transform: scale(1.04);
  }
}

/* Whole-card link (story & job cards → detail page): the title link's hit area stretches
   over the card; other controls in the card (e.g. "Apply Now") sit above it. */
.card:has(.card__link) {
  position: relative;
}

.card__link {
  color: inherit;
  text-decoration: none;
}

.card__link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.card__link:focus-visible {
  outline: none;
}

.card:has(.card__link:focus-visible) {
  outline: 3px solid var(--color-secondary);  /* same ring as :focus-visible (main.css) */
  outline-offset: 2px;
}

.card:has(.card__link) :is(a, button):not(.card__link) {
  position: relative;
  z-index: 1;
}

.card__title {
  font-size: var(--font-size-xl);
  line-height: 1.15;
}

.card__subtitle {
  margin-top: calc(var(--space-2) * -1);
  font-style: italic;
  font-weight: 600;
  color: var(--color-secondary-darker);
}

.card__meta {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

/* Trailing CTA pinned to the card bottom (Home highlights) */
/* ---------- Pillar card — pillars, facilities, reasons, campuses ---------- */

.pillar-card .link-arrow {
  margin-top: auto;
}

.pillar-card .card__media img {
  object-position: center 30%;
}

/* ---------- Feature accordion (Home › Academics) ----------
   Apple-style panel: accordion list on the left, the open item's photo on the right. */

.feature-accordion {
  display: grid;
  gap: var(--space-10);
  padding: var(--space-8);
  border-radius: var(--radius-xl);
  background-color: var(--color-bg-light);
}

.feature-accordion__item + .feature-accordion__item {
  border-top: 1px solid var(--color-border);
}

.feature-accordion__heading {
  font-size: var(--font-size-2xl);
}

.feature-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  width: 100%;
  padding: var(--space-6) 0;
  background: none;
  border: 0;
  color: var(--color-primary);
  font: inherit;
  text-align: start;
}

.feature-accordion__trigger svg {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--color-text-light);
  transition: transform var(--transition-slow), color var(--transition-base);
}

.feature-accordion__trigger:hover svg {
  color: var(--color-primary);
}

.feature-accordion__item.is-open .feature-accordion__trigger svg {
  transform: rotate(180deg);
}

/* Height animates via grid rows; closed copy is hidden from the tab order and screen readers */
.feature-accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  opacity: 0;
  transition: grid-template-rows var(--transition-slow), opacity var(--transition-base), visibility 0s linear 700ms;
}

.feature-accordion__item.is-open .feature-accordion__panel {
  grid-template-rows: 1fr;
  visibility: visible;
  opacity: 1;
  transition: grid-template-rows var(--transition-slow), opacity 500ms var(--ease-out) 150ms, visibility 0s;
}

.feature-accordion__inner {
  min-height: 0;
  overflow: hidden;
}

.feature-accordion__inner > * {
  max-width: 28rem;
}

.feature-accordion__inner p:not(.eyebrow) {
  line-height: 1.5;
}

.feature-accordion__inner > * + * {
  margin-top: var(--space-3);
}

.feature-accordion__inner .link-arrow {
  display: inline-block;
  margin-block: var(--space-2) var(--space-8);
}

/* Photos stack; the active one fades in */
.feature-accordion__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background-color: var(--color-sand);
}

.feature-accordion__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity var(--transition-slow), transform 1.2s var(--ease-out);
}

.feature-accordion__image.is-active {
  opacity: 1;
  transform: none;
}

@media (width > 1024px) {
  .feature-accordion {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
    gap: var(--space-16);
    padding: var(--space-16);
  }

  .feature-accordion__media {
    aspect-ratio: 5 / 4;
  }
}

/* ---------- Location card (Contact › Visit Us): one row per location, details beside its own map ---------- */

.location-list {
  display: grid;
  gap: var(--space-6);
}

.location-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.location-card__link {
  margin-top: auto;
}

/* Preschool Locations: each wing's own logo (with its name) heads the card in place of the icon chip */
.location-card__logo {
  width: 240px;
}

/* Same label/value style on the Contact desk cards */
.location-card .contact-list dd,
.desk-card .contact-list dd {
  margin-top: 0;
  font-weight: 400;
}

/* Map sits inset from the card edge, like .card__media */
.location-card__map {
  margin: calc(var(--card-inset) - var(--card-pad));
  margin-top: var(--space-2);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-md);
  background-color: var(--color-sand);
}

.location-card__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (width >= 1024px) {
  .location-card {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-10);
  }

  .location-card__map {
    margin: calc(var(--card-inset) - var(--card-pad));
    margin-left: 0;
    aspect-ratio: auto;
    min-height: 18rem;
  }
}

/* ---------- Testimonial (Adhyayan Diaries) ---------- */

.testimonial {
  position: relative;
  margin: 0;
  padding: var(--space-6);
  background-color: var(--color-surface-card);
  border: 1px solid var(--color-border);
}

@media (width >= 768px) {
  .testimonial {
    padding: var(--space-8);
  }
}

/* Quote mark sits centred on the eyebrow row, clear of the quote below it */
.testimonial::before {
  content: '';
  position: absolute;
  top: var(--space-6);
  right: var(--space-8);
  width: 3.5rem;
  height: 3.5rem;
  background-color: rgb(239 65 35 / 0.14);  /* --color-secondary, soft */
  mask: var(--icon-quote) center / contain no-repeat;
}

/* Three cards across on Home and long diaries on /testimonials: body-large type, not display size */
.testimonial__quote {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-lg);
  line-height: 1.6;
  color: var(--color-primary);
}

.testimonial__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0;
  background: none;
  border: none;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-secondary);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.testimonial__toggle:hover {
  color: var(--color-secondary-dark);
}

.testimonial__author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-2);
  font-weight: 600;
  color: var(--color-primary);
}

/* Photo (or the person icon when it fails to load) */
.testimonial__photo,
.testimonial__author > svg {
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  object-fit: cover;
  background-color: var(--color-surface-inset);
}

.testimonial__author > svg {
  padding: var(--space-3);
  color: var(--color-text-light);
}

/* /testimonials: balanced columns, so short and long diaries pack without gaps */
.testimonial-list {
  columns: 3 20rem;
  column-gap: var(--space-6);
}

.testimonial-list > * {
  break-inside: avoid;
  margin-bottom: var(--space-6);
}

/* ---------- Team card (Leadership): photo left, details right, two cards per row ---------- */

.team-card {
  --card-pad: var(--space-6);

  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--space-6);
  align-items: start;
  padding: var(--card-inset);
  padding-right: var(--card-pad);
}

.team-card__photo {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-md);
  background-color: var(--color-surface-inset);  /* Behind the initials or the fallback icon */
  color: var(--color-primary);
}

/* No photo: the member's initials */
.team-card__initials {
  font-family: var(--font-heading);
  font-size: var(--font-size-3xl);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.team-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

/* Fallback icon when there is no photo */
.team-card__photo svg {
  width: 40%;
  height: auto;
  aspect-ratio: 1;
}

.team-card__body {
  padding-block: var(--space-4);
}

.team-card__name {
  font-size: var(--font-size-xl);
  line-height: 1.15;
}

.team-card__role {
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-secondary-darker);  /* 5.5:1 on --color-surface-card */
}

.team-card__details {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.team-card__meta {
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--color-text-light);
}

.team-card__meta + .team-card__meta {
  margin-top: var(--space-2);
}

.team-card__label {
  font-weight: 600;
  color: var(--color-text-dark);
}

/* Tablet: one card per row (two side-by-side cards leave the text column too narrow) */
@media (768px <= width <= 1024px) {
  .team-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .team-card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }
}

/* Phones: small photo beside the name and title; the details run full width underneath */
@media (width < 640px) {
  .team-card {
    grid-template-columns: 6rem minmax(0, 1fr);
    column-gap: var(--space-4);
    row-gap: 0;
    align-items: center;
    padding: var(--space-4);
  }

  .team-card__photo {
    grid-row: 1 / span 2;
  }

  .team-card__body {
    display: contents;
  }

  .team-card__name {
    grid-column: 2;
    align-self: end;
    font-size: var(--font-size-lg);
  }

  .team-card__role {
    grid-column: 2;
    align-self: start;
  }

  .team-card__details {
    grid-column: 1 / -1;
  }
}

/* ---------- Board card (Leadership › Board of Directors) ----------
   Photo, name and board role only: each director's full profile is in the Leadership Team above. */
.board-card {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: var(--space-4);
  align-items: center;
  padding: var(--card-inset);
  padding-right: var(--space-6);
}

.board-card__photo .team-card__initials {
  font-size: var(--font-size-xl);
}

.board-card__name {
  font-size: var(--font-size-lg);
  line-height: 1.2;
}

.board-card .team-card__role {
  margin-top: var(--space-1);
}

/* ---------- Partner card (Global Partnerships) ---------- */

/* Alliances: one wide card per partner, stacked. Intro on the left, Key Highlights in a sand panel on the right */
.partner-stack {
  display: grid;
  gap: var(--space-8);
}

.partner-card {
  --card-pad: var(--space-8);
}

.partner-card__intro,
.partner-card__highlights {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.partner-card__highlights {
  padding: var(--space-6);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-inset);
}

@media (width >= 1024px) {
  .partner-card {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--space-10);
    align-items: start;
  }
}

.partner-card__label {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-primary);
}

/* ---------- Post card (Adhyayan Experience listing): vertical card, image on top ---------- */

.post-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.post-card__excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  color: var(--color-text-light);
}

.post-card__more {
  margin-top: auto;
  padding-top: var(--space-2);
  color: var(--color-secondary-darker);  /* 5.5:1 on --color-surface-card */
}

/* Page 1 of the Experience listing: the newest story spans two columns with a wide photo,
   so nine stories still fill three rows (2 + 1, 3, 3) */
@media (width >= 768px) {
  .post-list[data-feature-first] > .post-card:first-child {
    grid-column: span 2;
  }

  .post-list[data-feature-first] > .post-card:first-child .card__media {
    aspect-ratio: 16 / 9;
  }

  .post-list[data-feature-first] > .post-card:first-child .card__title {
    font-size: var(--font-size-2xl);
  }

  .post-list[data-feature-first] > .post-card:first-child .post-card__excerpt {
    -webkit-line-clamp: 2;
  }
}

/* ---------- Post meta (date · categories · author): listing cards, story title ---------- */

.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  list-style: none;
  padding: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

.post-meta li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.post-meta .icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.post-meta a {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}

.post-meta a:hover {
  color: var(--color-secondary-darker);
  text-decoration: underline;
}

.post-meta--on-dark {
  color: var(--color-on-dark-muted);
}

.post-meta--on-dark a:hover {
  color: var(--color-white);
}


/* ==========================================================================
   7. Lists & sequences
   ========================================================================== */

/* ---------- Steps (Admission Process) ---------- */

.steps {
  display: grid;
  gap: var(--space-4);
  list-style: none;
  padding: 0;
  counter-reset: step;
}

.step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-card);
  border: 1px solid var(--color-border);
  counter-increment: step;
}

.step::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-circle);
  background-color: var(--color-secondary-dark);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 800;
}

.step__title {
  font-size: var(--font-size-lg);
}

.step__text {
  margin-top: var(--space-1);
  color: var(--color-text-light);
}

/* ---------- Contact details ---------- */

.contact-list {
  display: grid;
  gap: var(--space-4);
}

.contact-list dt {
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-light);
}

.contact-list dd {
  margin: var(--space-1) 0 0;
  font-weight: 500;
}

/* Contact details with a leading icon; values align under the label text */
.contact-list--icons dt {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.contact-list--icons dt .icon {
  width: 1rem;
  height: 1rem;
  color: var(--color-secondary-dark);
}

.contact-list--icons dd {
  padding-left: calc(1rem + var(--space-2));
}

/* Contact desk value (phone / email in the Contact desk cards) */
/* Contact details placed under the heading in an editorial split's lead column */
.lead-contact {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

/* Home enquiry: animated A Bot waves under the contact details (animation lives inside the SVG) */
.lead-mascot {
  display: block;
  width: 10.5rem;
  height: auto;
  margin-top: var(--space-4);
}

/* ==========================================================================
   8. Heroes
   ========================================================================== */

/* ---------- Home hero (looping background video + overlay) ---------- */

/* Copy sits on the bottom edge: oversized title + lead on the left, stacked actions on the right */
.hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: min(80svh, 44rem);
  padding-block: calc(var(--site-header-offset, 0px) + var(--space-16)) var(--space-24);
  overflow: hidden;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 60%, var(--color-primary-light) 100%);
  color: var(--color-white);
}

.hero__media {
  position: absolute;
  inset: 0;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Overlay: --color-primary-dark at decreasing opacity keeps copy legible over the video */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(12 24 48 / 0.92) 0%, rgb(12 24 48 / 0.75) 50%, rgb(12 24 48 / 0.45) 100%),
    linear-gradient(0deg, rgb(12 24 48 / 0.55) 0%, rgb(12 24 48 / 0) 35%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-8);
}

.hero__content {
  max-width: 60rem;
}

.hero__content > * + * {
  margin-top: var(--space-5);
}

.hero__content > .lead {
  padding-top: var(--space-4);
}

.hero__title {
  color: var(--color-white);
  font-size: clamp(2.75rem, 1.25rem + 4.25vw, 5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  max-width: 11em;
  text-wrap: balance;
}

/* Logo red-orange: ≥ 3:1 on the overlay, fine at this display size */
.hero__highlight {
  color: var(--color-secondary);
}

/* Hand-drawn squiggle under a one-line display phrase (hero highlight, motto).
   Same --shape-squiggle as the section titles, scaled to the font size */
.hero__highlight,
.motto-banner__text {
  position: relative;
  display: inline-block;
}

.hero__highlight::after,
.motto-banner__text::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 0.06em);
  height: 0.2em;
  background-color: var(--color-secondary);
  mask: var(--shape-squiggle) left center / auto 100% no-repeat;
}

/* Keep the phrase whole (no lone "Innovate"); phones may still wrap it */
@media (width >= 768px) {
  .hero__highlight {
    white-space: nowrap;
  }
}

/* ---------- Inner-page hero banner ---------- */

/*
 * Brand circuit pattern: seamless, non-overlapping 1536×768 tile in the style of
 * Provided Assets/Pattern.svg (white traces @ 7%), regenerated with tools/circuit-pattern.mjs.
 * Used only here. The offset starts short banners on a bus bundle rather than an empty band.
 */
/* Top padding also clears the transparent header that sits over it */
.page-hero {
  padding-block: calc(var(--site-header-offset, 0px) + var(--space-16)) var(--space-24);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  background-color: var(--color-primary);
  background-image:
    radial-gradient(36rem 24rem at 92% 110%, rgb(239 65 35 / 0.22), rgb(0 0 0 / 44%) 70%),
    url('../images/pattern-light.svg'),
    linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  background-size: auto, 1536px auto, auto;
  background-position: 0 0, -200px -100px, 0 0;
  background-repeat: no-repeat, repeat, no-repeat;
  color: var(--color-white);
}

.page-hero__title {
  color: var(--color-white);
}

/* Utility pages (forms, downloads, calendars, job and legal pages): a shorter banner
   so the page's own content starts above the fold. Section landing pages keep the full hero. */
.page-hero--compact {
  padding-block: calc(var(--site-header-offset, 0px) + var(--space-10)) var(--space-16);
}

.page-hero--compact .page-hero__title {
  font-size: var(--font-size-3xl);
}

.page-hero__inner > * {
  max-width: 52rem;
}

.page-hero__inner > * + * {
  margin-top: var(--space-4);
}

.page-hero__link {
  color: var(--color-white);
  font-weight: 600;
  text-decoration: underline;
}

.page-hero__link:hover {
  color: var(--color-bg-light);
}

/* ---------- Story detail header: title + meta left, featured image right ---------- */

.page-hero__split {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

.page-hero--article .page-hero__inner > .page-hero__split {
  max-width: none;
}

.page-hero__text {
  max-width: 52rem;  /* same measure as other page-hero titles */
}

.page-hero__text > * + * {
  margin-top: var(--space-5);
}

@media (width > 1024px) {
  /* Only split when there is an image to show */
  .page-hero__split:has(.article-media) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-12);
  }
}

.page-hero--article .article-media {
  aspect-ratio: 16 / 10;
  box-shadow: 0 1.5rem 3rem -1rem rgb(6 12 26 / 0.6);
}

/* ---------- Breadcrumb (inside .page-hero) ---------- */

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  font-size: var(--font-size-xs);
  letter-spacing: 0.01em;
  color: rgb(255 255 255 / 0.6); /* inactive crumbs dimmed so the current page stands out */
}

.breadcrumb li {
  display: flex;
  align-items: center;
}

.breadcrumb ol > li + li::before {
  content: '/';
  margin-right: var(--space-2);
  opacity: 0.5;
}

/* Simple text links, kept quiet (small, muted, regular weight) so they don't compete with the title.
   Vertical padding keeps a ≥ 24px tap target; hover brightens and underlines.
   Each crumb is capped at about 28 characters and ends in an ellipsis (long story / job titles). */
.breadcrumb :is(a, span) {
  display: inline-block;
  max-width: 24ch;  /* ≈ 28 characters of mixed text (1ch = width of "0") */
  padding-block: 0.3125rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

.breadcrumb a {
  color: inherit;
  font-weight: 400;
  text-decoration: none;
  text-underline-offset: 0.2em;
  transition: color 150ms ease;
}

.breadcrumb a:hover {
  color: var(--color-white);
  text-decoration: underline;
}

.breadcrumb [aria-current='page'] {
  color: rgb(255 255 255 / 0.9);
  font-weight: 500;
}

/* Collapsed levels: trails longer than 3 levels keep the first, second-last and last;
   the levels between fold into a "…" button that opens a panel styled like the header sub-menus (main.js collapseBreadcrumb) */
.breadcrumb__more {
  position: relative;
}

.breadcrumb__more-toggle {
  margin-inline: calc(-1 * var(--space-1)); /* the fill reaches past the dots without widening the gaps */
  padding: 0.3125rem var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  letter-spacing: 0.1em;
  line-height: inherit;
  transition: color 150ms ease, background-color 150ms ease;
}

.breadcrumb__more-toggle:hover,
.breadcrumb__more-toggle[aria-expanded='true'] {
  background-color: rgb(255 255 255 / 0.12);
  color: var(--color-white);
}

.breadcrumb .breadcrumb__menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: calc(-1 * var(--space-2));
  z-index: 2;
  display: grid;
  gap: 2px;
  width: max-content;
  padding: var(--space-2);
  list-style: none;
  border-radius: var(--radius-menu);
  background-color: var(--color-white);
  box-shadow: var(--shadow-menu);
}

.breadcrumb .breadcrumb__menu[hidden] {
  display: none;
}

.breadcrumb .breadcrumb__menu a {
  display: block;
  max-width: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-menu-item);
  color: var(--color-text-dark);
  font-size: var(--font-size-sm);
  font-weight: 500;
  text-decoration: none;
}

.breadcrumb .breadcrumb__menu a:is(:hover, :focus-visible) {
  background-color: var(--color-bg-light);
  color: var(--color-text-dark);
  text-decoration: none;
}

/* ==========================================================================
   9. In-page navigation
   ========================================================================== */

/* ---------- Academics sub-navigation ---------- */

.subnav {
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-white);
}

/* Pills like the header nav and filter tabs: sand on hover, navy for the current page.
   Negative margin lines the first pill's text up with the container edge */
.subnav__list {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  margin-left: calc(-1 * var(--space-3));
  padding: 0;
  list-style: none;
  scrollbar-width: none;
}

.subnav__link {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);  /* Same size as the header nav */
  font-weight: 600;
  color: var(--color-text-light);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 150ms ease, color 150ms ease;
}

.subnav__link:hover {
  background-color: var(--color-sand);
  color: var(--color-primary);
}

.subnav__link[aria-current='page'] {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* ---------- Filter tabs (Experience categories) ---------- */

.filter-tabs {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: var(--space-2);
  list-style: none;
  padding-left: 0;
  scrollbar-width: thin;
}

.filter-tab {
  flex-shrink: 0;
  padding: var(--space-3) var(--space-6);
  border: 0;
  border-radius: var(--radius-pill);
  background-color: var(--color-sand);
  color: var(--color-primary);
  font-weight: 600;
  font-size: var(--font-size-sm);
  white-space: nowrap;
  transition: background-color var(--transition-base), color var(--transition-base);
}

.filter-tab:hover {
  background-color: #EADFD1;  /* --color-sand, one step deeper */
}

.filter-tab[aria-pressed='true'] {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* Story count beside each tab's name (for the current search) */
.filter-tab__count {
  display: inline-block;
  min-width: 1.75em;
  margin-left: var(--space-1);
  padding: 0.1em 0.5em;
  border-radius: var(--radius-pill);
  background-color: rgb(20 37 74 / 0.08);
  font-size: 0.8em;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.filter-tab[aria-pressed='true'] .filter-tab__count {
  background-color: rgb(255 255 255 / 0.18);
}

.filter-tab__count:empty {
  display: none;
}

.filter-tab.is-empty:not([aria-pressed='true']) {
  color: var(--color-text-light);
}

/* ---------- Experience toolbar: category tabs + search ---------- */

/* Search on top, then one row of tabs (it scrolls sideways if the school adds more categories) */
.story-filters {
  display: grid;
  gap: var(--space-4);
}

.story-search {
  display: flex;
  position: relative;
  width: min(100%, 24rem);
}

.story-search .form-field {
  flex: 1;
}

.story-search .form-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.story-search__input {
  min-height: 2.75rem;  /* Same height as the tabs */
  padding-block: var(--space-2);
  padding-right: 3rem;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
}

.story-search__input::-webkit-search-cancel-button {
  cursor: pointer;
}

.story-search__button {
  position: absolute;
  top: 50%;
  right: var(--space-1);
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: var(--color-white);
  transform: translateY(-50%);
  transition: background-color var(--transition-base);
}

.story-search__button:hover {
  background-color: var(--color-secondary-darker);
}

.story-search__button svg {
  width: 1rem;
  height: 1rem;
}


/* ---------- Pagination (Experience listing; shown even for one page, Previous/Next disabled at the ends) ---------- */

.pagination__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
}

.pagination__item {
  display: inline-grid;
  place-items: center;
  min-width: 2.75rem;
  height: 2.75rem;
  padding-inline: var(--space-3);
  border-radius: var(--radius-pill);
  background-color: var(--color-sand);
  color: var(--color-primary);
  font-weight: 600;
  font-size: var(--font-size-sm);
  text-decoration: none;
  transition: background-color var(--transition-base), color var(--transition-base);
}

.pagination__item:hover {
  background-color: #EADFD1;  /* --color-sand, one step deeper (as .filter-tab) */
}

.pagination__item[aria-current='page'] {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* Previous / Next with nowhere to go */
.pagination__item[aria-disabled='true'] {
  background-color: transparent;
  box-shadow: inset 0 0 0 1px var(--color-border);
  color: var(--color-text-light);
  cursor: default;
}

.pagination__item[aria-disabled='true']:hover {
  background-color: transparent;
}

.pagination__item--step {
  padding-inline: var(--space-5);
}

.pagination__gap {
  padding-inline: var(--space-1);
  color: var(--color-text-light);
}

/* ---------- Previous / next story (story page; WP: get_previous_post() / get_next_post()) ---------- */

.post-nav {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}

@media (width >= 768px) {
  .post-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.post-nav__link {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-light);
  color: var(--color-primary);
  text-decoration: none;
  transition: background-color var(--transition-base);
}

.post-nav__link:hover {
  background-color: var(--color-sand);
}

.post-nav__link--next {
  grid-column: -2;
  text-align: end;
}

.post-nav__label {
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-secondary-darker); /* The standard red is 4.4:1 on the cream card; this passes (4.5:1 needed at this size) */
}

.post-nav__title {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.25;
}

/* ==========================================================================
   10. Banners
   ========================================================================== */

/* ---------- CTA banner ---------- */

.cta-banner {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-12) var(--space-10);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(30rem 20rem at 100% 0%, rgb(239 65 35 / 0.18), transparent 70%),
    var(--color-primary);
  color: var(--color-white);
}

.cta-banner :is(h2, h3, p) {
  color: var(--color-white);
}

.cta-banner--light {
  background: var(--color-sand);
  color: var(--color-text-dark);
}

.cta-banner--light :is(h2, h3) {
  color: var(--color-primary);
}

.cta-banner--light p {
  color: var(--color-text-dark);
}

@media (width > 1024px) {
  .cta-banner--row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

/* ---------- Stats (Home, navy section) ---------- */

/* Open layout: big numerals separated by hairlines, no tiles */
.stats {
  display: grid;
  gap: var(--space-12) var(--space-8);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  padding: 0;
}

@media (width > 1024px) {
  .stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.stat {
  padding-left: var(--space-6);
  border-left: 1px solid var(--color-on-dark-border);
}

.stat__number {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(3rem, 2rem + 3vw, 4.75rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--color-secondary);
}

.stat__label {
  display: block;
  max-width: 18rem;
  margin-top: var(--space-3);
  color: var(--color-on-dark-muted);
}

/* ---------- App & Brochure banner (Home, white section between two cream ones) ---------- */

.app-brochure__grid {
  display: grid;
  gap: var(--space-10);
  grid-template-columns: minmax(0, 1fr);
}

.app-brochure__box {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  text-align: center;
}

.app-brochure__box p {
  max-width: 26rem;
  color: var(--color-text-light);
}

.app-brochure__title {
  font-size: var(--font-size-2xl);
}

@media (width > 1024px) {
  .app-brochure__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
  }

  .app-brochure__box {
    padding-inline: var(--space-10);
  }

  .app-brochure__box + .app-brochure__box {
    border-left: 1px solid var(--color-border);
  }
}

/* ==========================================================================
   11. Media
   ========================================================================== */

/* ---------- Partner logos: marquee (Home) and logo wall (Partnerships) ---------- */

.marquee {
  overflow: hidden;
  /* Room for the card shadows, which overflow:hidden would otherwise slice off; the negative margin keeps the layout */
  padding-block: var(--space-8);
  margin-block: calc(-1 * var(--space-8));
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track {
  display: flex;
  gap: var(--space-4);
  width: max-content;
}

.marquee__list {
  display: flex;
  gap: var(--space-4);
  list-style: none;
  padding: 0;
}

/* Scrolling and dragging are driven by home.js › initMarquee */
@media (prefers-reduced-motion: no-preference) {
  .marquee {
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
  }

  .marquee.is-dragging {
    cursor: grabbing;
  }

  .marquee img {
    -webkit-user-drag: none;
  }

  .marquee__track {
    will-change: transform;
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee {
    mask-image: none;
  }

  .marquee__track,
  .marquee__list {
    flex-wrap: wrap;
    width: auto;
    justify-content: center;
  }

  .marquee__list[aria-hidden='true'] {
    display: none;
  }
}

/* Reduced motion on phones: the static logos sit two per row instead of one tall column */
@media (prefers-reduced-motion: reduce) and (width < 768px) {
  .marquee__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .marquee__list .partner-logo {
    width: 100%;
    height: auto;
    aspect-ratio: 11 / 6;
  }
}

.partner-logo,
.partner-grid {
  --partner-logo-width: 13.75rem;
  --partner-logo-height: 7.5rem;
}

/* Partnerships wall: larger tiles than the Home marquee */
.partner-grid,
.partner-grid .partner-logo {
  --partner-logo-width: 16.5rem;
  --partner-logo-height: 9rem;
}

.partner-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--partner-logo-width);
  height: var(--partner-logo-height);
  border-radius: var(--radius-md);
  background-color: var(--color-white);  /* Stays white: the logo artboards are white */
  border: 1px solid var(--color-border);
  overflow: hidden;
}

/* Logos ship on white 550×300 artboards with built-in padding */
.partner-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Trim some of that padding on the wall so the marks read larger (the tile clips the white edge) */
.partner-grid .partner-logo img {
  scale: 1.12;
}

/* Logo wall: four logos per row (4 + 3 layout, as in the content brief) */
.partner-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  max-width: calc(4 * var(--partner-logo-width) + 3 * var(--space-4));
  margin-inline: auto;
  list-style: none;
  padding: 0;
}

/* ---------- Gallery (story detail page) ---------- */

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

/* Story page: the reading column is narrower, so three tiles per row */
@media (width > 1024px) {
  .gallery-grid.gallery-grid--article {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (width > 1024px) {
  .gallery-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-6);
  }
}

/* Button that opens the lightbox */
.gallery-item {
  display: grid;
  gap: var(--space-2);
  width: 100%;
  text-decoration: none;
  padding: 0;
  border: 0;
  background: none;
  text-align: start;
  color: var(--color-text-dark);
}

.gallery-item .media-frame {
  aspect-ratio: 1;
  border-radius: var(--border-radius);
  overflow: hidden;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base);
}

.gallery-item:hover img {
  transform: scale(1.04);
}

/* ---------- Article media (story detail: featured image in the page header) ---------- */

.article-media {
  aspect-ratio: 16 / 9;
  max-height: 40rem;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background-color: var(--color-sand);
}

.article-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Academics intro media ---------- */

.academic-media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--border-radius);
}

.academic-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Error pages (404 in the site chrome; 500 / 503 standalone) ---------- */

.error-hero__code {
  font-family: var(--font-heading);
  font-size: clamp(5rem, 3rem + 9vw, 9rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--color-secondary);
}

/* 500 / 503: no header, so the navy panel fills the screen and the content sits in the middle */
.error-hero--full {
  display: grid;
  align-items: center;
  min-height: 100svh;
  padding-block: var(--space-16);
  border-radius: 0;
}

.error-hero__brand {
  display: inline-block;
  margin-bottom: var(--space-6);
}

.error-hero__brand img {
  display: block;
  width: auto;
  height: 3rem;
}

.error-hero__contact {
  font-size: var(--font-size-sm);
  color: var(--color-on-dark-muted);
}

.error-hero__contact a {
  color: var(--color-white);
  font-weight: 600;
}

.error-hero__contact a:hover {
  color: var(--color-secondary-light);
}

/* ---------- Job rows (Careers) ---------- */

/* One row per opening: title and details left, "View Details" right; the title link covers the row */
.job-list {
  display: grid;
  gap: var(--space-4);
}

.job-row {
  display: flex;
  flex-direction: row;  /* .card stacks its children */
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-8);
  padding: var(--space-6) var(--space-8);
}

.job-row__main {
  flex: 1 1 20rem;
  display: grid;
  gap: var(--space-3);
}

.job-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.job-row__meta li {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface-inset);
  color: var(--color-text-dark);
  font-size: var(--font-size-sm);
}

.job-row__more {
  color: var(--color-secondary-darker);  /* 5.5:1 on --color-surface-card */
  white-space: nowrap;
}

/* ---------- PDF inline embed (academic calendar) ---------- */

.pdf-embed {
  display: block;
  width: 100%;
  height: 80vh;
  min-height: 36rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-card);
}

/* ---------- Video frame (story video modal) ---------- */

.video-frame {
  aspect-ratio: 16 / 9;
  background-color: var(--color-primary-dark);
}

.video-frame :is(iframe, video) {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- Comparison table (Partner With Us) ---------- */

.table-scroll {
  overflow-x: auto;
  border-radius: var(--radius-md);
  background-color: var(--color-surface-card);
  border: 1px solid var(--color-border);
}

.compare-table {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.compare-table th,
.compare-table td {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  text-align: start;
  vertical-align: top;
}

.compare-table thead th {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.compare-table tbody th {
  color: var(--color-primary);
  white-space: nowrap;
}

.compare-table td:last-child {
  background-color: var(--color-primary-tint);
  font-weight: 500;
}

.compare-table tbody tr:last-child :is(th, td) {
  border-bottom: 0;
}

/* Phones: each row becomes a stacked card so the Adhyayan column is never scrolled out of view */
@media (width < 768px) {
  .table-scroll {
    overflow: visible;
    background: none;
    box-shadow: none;
  }

  .compare-table {
    min-width: 0;
  }

  .compare-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .compare-table :is(tbody, tr, th, td) {
    display: block;
  }

  .compare-table tbody {
    display: grid;
    gap: var(--space-4);
  }

  .compare-table tbody tr {
    overflow: hidden;
    border-radius: var(--radius-md);
    background-color: var(--color-surface-card);
    border: 1px solid var(--color-border);
  }

  .compare-table tbody th {
    background-color: var(--color-primary);
    color: var(--color-white);
    white-space: normal;
  }

  .compare-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: var(--space-1);
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-light);
  }

  .compare-table tbody tr:last-child :is(th, td),
  .compare-table td:last-child {
    border-bottom: 0;
  }
}

/* ==========================================================================
   12. Overlays
   ========================================================================== */

/* ---------- Modals (native <dialog>, opened with showModal()) ---------- */

.modal {
  width: min(40rem, calc(100% - 2 * var(--space-4)));
  max-height: calc(100svh - 2 * var(--space-4));
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-elevated);
  color: var(--color-text-dark);
}

.modal::backdrop {
  background-color: var(--color-scrim);
}

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.modal__title {
  font-size: var(--font-size-xl);
}

.modal__body {
  padding: var(--space-6);
}

/* Dark media variant (lightbox, story video) */
.modal--media {
  width: min(64rem, calc(100% - 2 * var(--space-4)));
  background-color: var(--color-primary-dark);
}

.modal--media .modal__header {
  border-bottom-color: var(--color-on-dark-border);
  color: var(--color-white);
}

.modal--media .modal__title {
  color: var(--color-white);
}

.modal--media .icon-button:hover {
  background-color: var(--color-on-dark-hover);
}

/* Story video: borderless header floating over the scrim, frame sized to the film and to the screen height */
.modal--video {
  --video-ratio: 16 / 9;
  width: min(72rem, calc(100% - 2 * var(--space-6)), calc((100svh - 9rem) * var(--video-ratio)));
  overflow: visible;
  background: none;
  box-shadow: none;
}

.modal--video::backdrop {
  background-color: rgb(12 24 48 / 0.85); /* --color-primary-dark @ 85% */
  backdrop-filter: blur(6px);
}

.modal--video .modal__header {
  padding: 0 0 var(--space-4);
  border-bottom: 0;
}

.modal--video .icon-button {
  border-radius: var(--radius-circle);
  background-color: var(--color-on-dark-surface);
}

.modal--video .video-frame {
  aspect-ratio: var(--video-ratio);
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevated);
  background-color: #000;
}

.modal--video video {
  object-fit: cover;
}

@media (prefers-reduced-motion: no-preference) {
  .modal--video[open],
  .modal--video[open]::backdrop {
    transition: opacity var(--transition-base), scale 300ms var(--ease-out);
  }

  @starting-style {
    .modal--video[open] {
      opacity: 0;
      scale: 0.96;
    }

    .modal--video[open]::backdrop {
      opacity: 0;
    }
  }
}

:root:has(.modal--video[open]) {
  overflow: hidden;
}

.lightbox__figure img {
  width: 100%;
  max-height: 75svh;
  object-fit: contain;
  background-color: var(--color-primary-dark);
}

.lightbox__figure figcaption {
  padding: var(--space-4) var(--space-6);
  color: var(--color-white);
}

/* ---------- Accordions (native <details>/<summary>) ---------- */

.accordion {
  border-top: 1px solid var(--color-border);
}

.accordion__item {
  border-bottom: 1px solid var(--color-border);
}

.accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-5);
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-primary);
  cursor: pointer;
  list-style: none;
}

.accordion__summary::-webkit-details-marker {
  display: none;
}

.accordion__summary::after {
  --mask-icon: var(--icon-plus);
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-secondary-dark);
  transition: transform var(--transition-base);
}

.accordion__item[open] > .accordion__summary::after {
  transform: rotate(45deg);
}

.accordion__content {
  padding-bottom: var(--space-5);
  color: var(--color-text-dark);
}

.accordion__content > * + * {
  margin-top: var(--space-3);
}

.accordion__content ul {
  display: grid;
  gap: var(--space-2);
  padding-left: var(--space-6);
}

/* ==========================================================================
   13. Page-specific layouts
   ========================================================================== */

/* ---------- About › Core Values + Motto ---------- */

/* ---------- About › Mission & Vision: large statement cards ---------- */

.statement-card {
  gap: var(--space-5);
  padding: var(--space-10);
}

.statement-card p {
  font-family: var(--font-heading);
  font-size: var(--font-size-2xl);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-primary);
}

/* ---------- About › Core Values: numbered tiles ---------- */

.value-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  padding: 0;
  list-style: none;
}

.value-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-card);
  border: 1px solid var(--color-border);
  font-family: var(--font-heading);
  font-size: var(--font-size-xl);
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-primary);
}

/* Four columns, with no empty cells whatever the count (the values are an ACF repeater):
   wide tiles absorb the remainder. 7 values → the first spans two; 6 → the first two;
   5 → the last spans the whole row. */
@media (width > 1024px) {
  .value-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .value-tile:first-child:nth-last-child(4n + 3),
  .value-tile:first-child:nth-last-child(4n + 2),
  .value-tile:first-child:nth-last-child(4n + 2) + .value-tile {
    grid-column: span 2;
  }

  .value-tile:last-child:nth-child(4n + 1) {
    grid-column: 1 / -1;
  }
}

/* ---------- About › Motto: full-width navy banner ---------- */

.motto-banner {
  text-align: center;
}

.motto-banner__label {
  color: var(--color-secondary-light);
}

/* Logo red-orange at display size (≥ 3:1 on navy for large text) */
.motto-banner__text {
  margin-top: var(--space-4);
  font-family: var(--font-heading);
  font-size: clamp(3rem, 1.5rem + 6vw, 7rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-secondary);
}

.motto-banner__tagline {
  margin-top: var(--space-12);
  font-size: var(--font-size-lg);
  color: var(--color-on-dark-muted);
}

/* ---------- Story & job detail pages ---------- */

/* Story body: one centred reading column (body, gallery, share, previous/next) */
.article {
  max-width: var(--measure-article);
  margin-inline: auto;
}


/* Job detail: sidebar card with the position facts and the Apply Now action */
.job-summary .btn {
  align-self: stretch;
}


/* ==========================================================================
   Responsive helpers
   ========================================================================== */

/* Horizontal pill rows (sub-nav, filter tabs): main.js › initScrollRows wraps each row in .scroll-row and flags
   .has-more-start / .has-more-end while pills sit off that edge. The edge fades and a round arrow scrolls the row. */
.scroll-row {
  --scroll-fade: 3.5rem;
  position: relative;
  min-width: 0;
}

.scroll-row.has-more-end > ul {
  mask-image: linear-gradient(to right, #000 calc(100% - var(--scroll-fade)), transparent);
}

.scroll-row.has-more-start > ul {
  mask-image: linear-gradient(to right, transparent, #000 var(--scroll-fade));
}

.scroll-row.has-more-start.has-more-end > ul {
  mask-image: linear-gradient(to right, transparent, #000 var(--scroll-fade), #000 calc(100% - var(--scroll-fade)), transparent);
}

.scroll-row__arrow {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-block: auto;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-white);
  color: var(--color-primary);
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
  scale: 0.8;
  transition: opacity var(--transition-base), scale var(--transition-base), background-color var(--transition-base), visibility 0s linear 200ms;
}

/* A larger tap area than the visible circle */
.scroll-row__arrow::before {
  content: '';
  position: absolute;
  inset: -0.375rem;
}

.scroll-row__arrow:hover {
  background-color: var(--color-sand);
}

.scroll-row__arrow svg {
  width: 1rem;
  height: 1rem;
}

.scroll-row__arrow--prev {
  left: 0;
}

.scroll-row__arrow--prev svg {
  rotate: 90deg;
}

.scroll-row__arrow--next {
  right: 0;
}

.scroll-row__arrow--next svg {
  rotate: -90deg;
}

.scroll-row.has-more-start > .scroll-row__arrow--prev,
.scroll-row.has-more-end > .scroll-row__arrow--next {
  visibility: visible;
  opacity: 1;
  scale: 1;
  transition-delay: 0s;
}

/* The filter tabs keep room for their scrollbar below the pills: centre the arrows on the pills */
.scroll-row:has(> .filter-tabs) > .scroll-row__arrow {
  bottom: var(--space-2);
}

/* Touch screens: lift small text links to a 44px tap target (WCAG 2.5.5) without changing their look */
@media (pointer: coarse) {
  .link-arrow {
    display: inline-flex;
    align-items: center;
    min-height: var(--control-size);
  }

  .breadcrumb :is(a, span) {
    padding-block: var(--space-3);
  }

  .site-footer__list {
    gap: 0;
  }

  .site-footer__list :is(a, .site-footer__button) {
    padding-block: var(--space-3);
  }

  .site-footer__address .site-footer__list a {
    padding-block: 0;
  }
}

/* ==========================================================================
   Micro-interactions
   Colour changes fade everywhere (150ms); movement (press, slide, expand) only when
   the visitor allows motion. Rules here only add transitions — states are defined above.
   ========================================================================== */

/* Text links and small controls fade their colour instead of snapping
   (class rules above that set their own transition still win over the bare `a`) */
a,
.topbar__link,
.site-footer__button,
.icon-button,
.accordion__summary,
.post-meta a,
.drawer__link,
.testimonial__toggle {
  transition: color 150ms ease, background-color 150ms ease, text-decoration-color 150ms ease;
}

/* "Learn More" / "Read More" style links: the underline fades in rather than popping */
.link-arrow {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.25em;
  transition: color 150ms ease, text-decoration-color 150ms ease;
}

.link-arrow:hover {
  text-decoration-color: currentColor;
}

/* Form fields: a quiet border step on hover, before the focus ring */
.form-control:hover:not(:focus-visible, :disabled) {
  border-color: var(--color-text-light);
}

@media (prefers-reduced-motion: no-preference) {
  /* Buttons settle back and dip slightly while pressed */
  .btn:not(:disabled, [aria-disabled='true']):active,
  .filter-tab:active,
  .pagination__item:not([aria-disabled='true']):active {
    transform: translateY(0) scale(0.97);
    transition-duration: 80ms;
  }

  .filter-tab,
  .pagination__item {
    transition: background-color var(--transition-base), color var(--transition-base), transform var(--transition-base);
  }

  /* Small pop-up menus shown with [hidden] (the breadcrumb's "…" levels) fade and drop in, and fade out */
  .breadcrumb .breadcrumb__menu {
    transition: opacity 200ms ease, translate 280ms var(--ease-out), display 200ms allow-discrete;
  }

  .breadcrumb .breadcrumb__menu[hidden] {
    opacity: 0;
    translate: 0 -0.375rem;
  }

  @starting-style {
    .breadcrumb .breadcrumb__menu:not([hidden]) {
      opacity: 0;
      translate: 0 -0.375rem;
    }
  }

  /* Disclosures (FAQ answers, the editor's Details block): the answer slides open and shut.
     Browsers without ::details-content or height-to-auto transitions open them instantly, as before */
  :is(.accordion__item, .prose .wp-block-details) {
    interpolate-size: allow-keywords;
  }

  :is(.accordion__item, .prose .wp-block-details)::details-content {
    block-size: 0;
    overflow: clip;
    opacity: 0;
    transition: block-size 300ms var(--ease-out), opacity 200ms ease, content-visibility 300ms allow-discrete;
  }

  :is(.accordion__item, .prose .wp-block-details)[open]::details-content {
    block-size: auto;
    opacity: 1;
  }

  /* Editor Accordion and Tabs blocks: a panel fades in as it opens */
  .prose :is(.wp-block-accordion-panel, .wp-block-tab-panel) {
    transition: opacity 250ms ease, translate 300ms var(--ease-out);
  }

  @starting-style {
    .prose :is(.wp-block-accordion-panel, .wp-block-tab-panel):not([hidden]) {
      opacity: 0;
      translate: 0 -0.25rem;
    }
  }

  /* Pop-ups (app download, job application, photo viewer) fade and rise in, like the video */
  .modal:not(.modal--video)[open] {
    transition: opacity 200ms ease, translate 280ms var(--ease-out);
  }

  .modal:not(.modal--video)[open]::backdrop {
    transition: opacity 200ms ease;
  }

  @starting-style {
    .modal:not(.modal--video)[open] {
      opacity: 0;
      translate: 0 0.75rem;
    }

    .modal:not(.modal--video)[open]::backdrop {
      opacity: 0;
    }
  }

  /* ---------- Downloads page ---------- */

.download-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  list-style: none;
  padding: 0;
}

.download-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-5);
}

.download-item__title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  margin: 0 0 var(--space-1);
}

.download-item__desc {
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
  margin: 0 0 var(--space-2);
}

.download-item__meta {
  margin: 0;
}

/* Short note under a section's list (the section's description in WordPress) */
.download-section__note {
  max-width: var(--measure);
}

/* The sections sit in one wrapper the page script fills (WordPress prints them). The first one starts close
   under the hero like any first section, and the last one carries the footer tuck (layout.css § Global footer). */
@media (width >= 768px) {
  .page-hero + .download-sections > .section:first-child {
    padding-block-start: var(--space-16);
  }
}

.site-main > .download-sections:last-child {
  border-bottom: 0;
}

.download-sections > .section:last-child {
  border-bottom: var(--radius-xl) solid transparent;
}

@media (max-width: 640px) {
  .download-item {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
  }

  .download-item > .btn {
    grid-column: 1 / -1;
  }
}

/* ---------- Preschool logo ---------- */

.preschool-logo {
  display: block;
  height: auto;
  max-width: 240px;
}

/* About Preschool: the horizontal logo with the dinosaur mascot (wider than the plain wordmark) */
.preschool-logo--mascot {
  max-width: 18rem;
}

/* Meet Our Mascot section: centered figure with constrained image */
.mascot-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
}

.mascot-figure__image {
  width: min(28rem, 100%);
  height: auto;
}

/* Admissions FAQ: answers slide open instead of snapping (browsers without ::details-content keep the instant toggle) */
  @supports selector(::details-content) {
    .accordion {
      interpolate-size: allow-keywords;
    }

    .accordion__item::details-content {
      block-size: 0;
      overflow-y: clip;
      opacity: 0;
      transition: block-size 320ms var(--ease-out), opacity 200ms ease, content-visibility 320ms allow-discrete;
    }

    .accordion__item[open]::details-content {
      block-size: auto;
      opacity: 1;
    }
  }
}