/* CITPhilosophy — ENJOY. EXPLORE. EXCEL.
 *
 * Scoped to .cit-philosophy. Nothing here restyles global headings, links or
 * buttons. Sizing follows ko-density.css tokens rather than fixed pixels so the
 * component sits at the same reading density as the sections around it.
 *
 * Visual target: softly illuminated interior lettering. A restrained diffused
 * glow sits behind the words; the words themselves are solid, so contrast never
 * depends on the halo.
 */

.cit-philosophy {
  --citp-navy: #0D1B3F;
  --citp-ink: #F7F5EF;              /* warm white lettering */
  /* .38 keeps the separators at 3.2:1 on the navy. They are decorative, so
     WCAG 1.4.11 does not require it, but clearing the non-text threshold costs
     nothing and the columns read better on a dim screen. */
  --citp-rule: rgba(247, 245, 239, .38);
  --citp-muted: rgba(247, 245, 239, .82);
  background: var(--citp-navy);
  color: var(--citp-ink);
  padding: calc(var(--ko-block-y, 20px) * 1.6) 0;
}

.cit-philosophy__wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}

.cit-philosophy .cit-philosophy__heading {
  color: var(--citp-ink);
  font-size: var(--ko-fs-h2, 20px);
  line-height: var(--ko-lh-h2, 1.3);
  font-weight: 800;
  margin: 0 0 8px;
  word-break: keep-all;
}

.cit-philosophy .cit-philosophy__lead {
  color: var(--citp-muted);
  font-size: var(--ko-fs-lead, 16px);
  line-height: 1.65;
  margin: 0 0 var(--ko-gap-lg, 16px);
  word-break: keep-all;
  max-width: 62ch;
}

/* The three words ------------------------------------------------------- */

.cit-philosophy .cit-philosophy__word {
  display: block;
  font-size: clamp(20px, 4.4vw, 30px);
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--citp-ink);
  /* Decorative only. The solid colour above carries the contrast. */
  text-shadow: 0 0 18px rgba(247, 245, 239, .34), 0 0 44px rgba(160, 170, 255, .18);
}

.cit-philosophy__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--ko-gap, 12px);
  grid-template-columns: 1fr;
}

.cit-philosophy__item {
  padding: var(--ko-card-p, 16px) 0;
  border-top: 1px solid var(--citp-rule);
}

.cit-philosophy .cit-philosophy__label {
  display: block;
  margin-top: 6px;
  font-size: var(--ko-fs-ui, 14px);
  line-height: var(--ko-lh-ui, 1.45);
  color: var(--citp-muted);
  word-break: keep-all;
}

/* Story and applied variants -------------------------------------------- */

.cit-philosophy__stages {
  display: grid;
  gap: var(--ko-gap-lg, 16px);
  grid-template-columns: 1fr;
  margin: var(--ko-gap-lg, 16px) 0 0;
}

.cit-philosophy__stage {
  padding: var(--ko-card-p, 16px) 0 0;
  border-top: 1px solid var(--citp-rule);
}

.cit-philosophy .cit-philosophy__stage-heading {
  font-size: var(--ko-fs-h3, 16px);
  line-height: var(--ko-lh-h3, 1.4);
  font-weight: 700;
  color: var(--citp-ink);
  margin: 8px 0 6px;
  word-break: keep-all;
}

.cit-philosophy .cit-philosophy__body,
.cit-philosophy .cit-philosophy__closing,
.cit-philosophy .cit-philosophy__boundary {
  font-size: var(--ko-fs-body, 15px);
  line-height: var(--ko-lh-body, 1.6);
  color: var(--citp-muted);
  margin: 0;
  word-break: keep-all;
}

.cit-philosophy .cit-philosophy__closing {
  margin-top: var(--ko-gap-lg, 16px);
  padding-top: var(--ko-gap, 12px);
  border-top: 1px solid var(--citp-rule);
  max-width: 72ch;
}

.cit-philosophy .cit-philosophy__boundary {
  margin-top: var(--ko-gap, 12px);
  font-size: var(--ko-fs-small, 12px);
  color: rgba(247, 245, 239, .72);
}

.cit-philosophy__cta {
  margin: var(--ko-gap-lg, 16px) 0 0;
  font-size: var(--ko-fs-ui, 14px);
}

.cit-philosophy .cit-philosophy__cta a {
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
  color: var(--citp-ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.cit-philosophy .cit-philosophy__cta a:hover,
.cit-philosophy .cit-philosophy__cta a:focus-visible {
  color: #fff;
}

.cit-philosophy .cit-philosophy__cta a:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* Wider viewports -------------------------------------------------------- */

@media (min-width: 768px) {
  .cit-philosophy {
    padding: calc(var(--ko-section-y, 16px) * 2.4) 0;
  }
  .cit-philosophy__grid,
  .cit-philosophy__stages {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ko-gap-lg, 16px);
  }
  .cit-philosophy__item,
  .cit-philosophy__stage {
    padding: var(--ko-card-p, 16px) var(--ko-gap, 12px) 0 0;
  }
  .cit-philosophy .cit-philosophy__closing {
    grid-column: 1 / -1;
  }
}

/* Motion: the halo may fade in once. Text is readable before it runs and
   without JavaScript, so this never gates content visibility. */
@media (prefers-reduced-motion: no-preference) {
  .cit-philosophy .cit-philosophy__word {
    animation: citp-glow 1.2s ease-out 1;
  }
}

@keyframes citp-glow {
  from { text-shadow: 0 0 0 rgba(247, 245, 239, 0), 0 0 0 rgba(160, 170, 255, 0); }
}