/**
 * Apply Panel — parts/elements/apply-panel.php.
 *
 * Loads after css/style.css (functions.php declares theme-styles as a
 * dependency), so nothing here needs !important.
 *
 * Sizes are rem against the 10px root — style.css:702 sets
 * html { font-size: 62.5% }, so 1rem is 10px here, matching every other
 * rem value in style.css. The --space-* custom properties are already
 * declared in px and are safe to use directly. Same convention as
 * css/blocks/pillar-timeline.css and css/blocks/program-overview.css.
 */

.block-apply-panel {
  margin: var(--space-16) 0;
}

@media (max-width: 767px) {
  .block-apply-panel {
    margin: var(--space-12) 0;
  }
}

/* ---- intro row --------------------------------------------------------- */

.ap__intro {
  margin: 0 0 var(--space-10);
}

.ap__heading {
  font-size: 4.4rem;
  line-height: var(--leading-tight);
  color: var(--nu-cool-black);
  margin: 0 0 var(--space-4);
}

.ap__lead {
  font-size: 1.7rem;
  line-height: var(--leading-relaxed);
  color: var(--color-grey-700);
}

/* !important defeats any inline text-align saved on a child <p> from the ACF
   WYSIWYG editor — this copy (e.g. the admissions email sentence) should
   always read left-to-right like the rest of the page, never centered. */
.ap__lead,
.ap__lead p {
  text-align: left !important;
}

.ap__lead p {
  margin: 0 0 var(--space-4);
}

.ap__lead p:last-child {
  margin-bottom: 0;
}

/* Long unbroken strings (e.g. the admissions mailto link) clip on narrow
   viewports without this — see apply-panel.php $ap_intro. */
.ap__lead a,
.ap__footnote a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 767px) {
  .ap__heading {
    font-size: 3.2rem;
  }
}

/* ---- cards row (>= 992px: 3 columns with vertical hairlines) ----------- */

.ap__cards {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--space-8);
  align-items: start;
  margin: 0;
  padding: var(--space-8) 0 0;
  list-style: none;
}

/* One continuous rule on the list itself, not a border-top per item — a
   per-item border breaks at every column gap. Same technique as
   .plt__list::before in pillar-timeline.css. */
.ap__cards::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--color-grey-300);
}

.ap__card {
  margin: 0;
  padding: 0;
}

/* style.css gives every li a counter pseudo-element for numbered body
   copy — not wanted here. Overrides on specificity. */
.ap__card::before {
  content: none;
}

.ap__card + .ap__card {
  border-left: 1px solid var(--color-grey-300);
  padding-left: var(--space-8);
}

/* Inline SVG (images/icons/apply-*.svg), not the icon font — this theme has
   no document/cost glyph, and these draw with stroke="currentColor" so they
   pick up the red here, the same line-icon style as images/icons/location.svg
   and check-circle.svg elsewhere in the theme. */
.ap__icon {
  display: block;
  color: var(--color-brand-red);
  margin: 0 0 var(--space-6);
}

.ap__icon svg {
  display: block;
  width: 2.4rem;
  height: 2.4rem;
}

.ap__card-title {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  color: var(--color-grey-900);
  margin: 0 0 var(--space-3);
}

.ap__card-desc {
  font-size: 1.6rem;
  font-weight: var(--weight-light);
  line-height: var(--leading-relaxed);
  color: var(--color-grey-700);
  margin: 0 0 var(--space-4);
}

/* Uppercase red arrow CTA — the .c-eyebrow letterform treatment
   (design-system.css:208) on top of the existing .c-btn-tertiary color
   and .c-btn-icon hover nudge (style.css:1784-1823). */
.ap__cta {
  font-size: 1.4rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---- footnote band ------------------------------------------------------ */

.ap__footnote {
  background-color: var(--color-grey-100);
  padding: var(--space-6);
  margin: var(--space-10) 0 0;
  font-size: 1.5rem;
  line-height: var(--leading-relaxed);
  color: var(--color-grey-700);
}

.ap__footnote p {
  margin: 0;
}

.ap__footnote a {
  color: var(--color-brand-red);
  text-decoration: underline;
}

/* ---- 992-1199px: still 3 columns, tighter ------------------------------ */

@media (max-width: 1199px) {
  .ap__cards {
    column-gap: var(--space-6);
  }

  .ap__card + .ap__card {
    padding-left: var(--space-6);
  }

  .ap__card-title {
    font-size: 2rem;
  }
}

/* ---- <= 991px: single column, horizontal hairlines --------------------- */

@media (max-width: 991px) {
  .ap__cards {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    row-gap: var(--space-10);
  }

  .ap__card + .ap__card {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--color-grey-300);
    padding-top: var(--space-8);
  }
}

@media (max-width: 767px) {
  .ap__cards {
    row-gap: var(--space-8);
  }

  .ap__card-title {
    font-size: 1.9rem;
  }
}

@media (max-width: 575px) {
  .ap__footnote {
    padding: var(--space-4);
  }
}