/*
 * Education (programs) page — ported unchanged from site.legacy.css.
 * Loaded only on this page via inc/enqueue/styles.php's page-slug
 * matching (page-programs.php -> programs.css).
 *
 * .program-grid's base declaration is the FINAL cascade value: a 12-column
 * track where the first two pathway cards span 6 columns (image + full
 * copy) and the remaining cards span 3 columns (compact, thumb hidden via
 * nth-child(n+3)) — ported as "one flagship pair, then compact pathways"
 * per the original's own comment. The earlier, superseded repeat(3, 1fr)
 * declaration is intentionally not ported (dead once this rule applies).
 * `details.program-card-compact` rules are also intentionally skipped:
 * the current markup uses plain <article class="program-card has-image">,
 * never a <details> accordion variant.
 */

.section-white:has(.program-grid) {
    background-color: var(--navy);
    background-image: linear-gradient(145deg, #081d33, #0b2944 72%, #123a48);
}
.section-white:has(.program-grid) h2 { color: var(--white); }
.section-white:has(.program-grid) .lead { color: rgba(255,255,255,.72); }
.section-white:has(.program-grid) .eyebrow { color: #c4e6d8; }
.section-white:has(.program-grid) .program-card h3 { color: var(--navy); }

.program-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
.program-card { display: flex; min-height: 360px; flex-direction: column; padding: 32px; border: 1px solid var(--stone); border-radius: 24px; background: var(--white); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.program-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-sm); }
.program-card .icon { width: 28px; height: 28px; color: var(--forest); }
.program-card h3 { margin: 38px 0 16px; }
.program-card p { color: var(--slate); }
.program-card .program-time { margin-top: auto; padding-top: 24px; color: var(--navy); font-size: .82rem; font-weight: 900; }
.program-card.has-image { min-height: 520px; padding: 0; overflow: hidden; }
.program-card.has-image .card-thumb {
    width: 100%;
    aspect-ratio: 1.55;
    object-fit: cover;
    transition: transform .75s var(--ease);
    border: 8px solid var(--green);
    /* Same reasoning as institution-card.has-thumb .card-thumb in
       global/sections.css — border is on the image itself, so it needs
       its own matching top-corner radius (24px, matching .program-card's
       own radius) or it shows square corners inside the rounded card. */
    border-radius: 24px 24px 0 0;
}
/* Toned down from 1.045 — with the border directly on this image, a
   stronger zoom pushes the bordered edge past its box on hover. */
.program-card:hover .card-thumb { transform: scale(1.015); }
.program-card-body { display: flex; flex: 1; flex-direction: column; padding: 26px; }
.program-card.has-image .icon-badge { margin-top: -49px; position: relative; }
.program-card.has-image h3 { margin: 22px 0 13px; }
.program-card.has-image .card-link { margin-top: 14px; }

.program-grid .program-card { grid-column: span 3; }
.program-grid .program-card:nth-child(-n+2) { grid-column: span 6; }
.program-grid .program-card:nth-child(-n+2) .card-thumb { max-height: 240px; aspect-ratio: 2.2; }
.program-grid .program-card:nth-child(-n+2) .program-card-body { padding: 24px 28px 28px; }
.program-grid .program-card:nth-child(n+3) { min-height: 270px; padding: 24px; }
.program-grid .program-card:nth-child(n+3) .card-thumb { display: none; }
.program-grid .program-card:nth-child(n+3) .program-card-body { padding: 0; }
.program-grid .program-card:nth-child(n+3) .icon-badge { margin-top: 0; }
.program-grid .program-card:nth-child(n+3) h3 { margin-top: 24px; }

.enquiry-shell { display: grid; grid-template-columns: .78fr 1.22fr; overflow: hidden; border-radius: 30px; background: white; box-shadow: var(--shadow-lg); }
.enquiry-intro { padding: clamp(34px,5vw,60px); background: var(--forest); color: rgba(255,255,255,.8); }
.enquiry-intro h2 { color: white; }
.enquiry-intro p { margin-top: 20px; }
.enquiry-intro .eyebrow { color: #c4e6d8; }
.enquiry-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: clamp(30px,5vw,58px); }
.form-field { display: grid; gap: 7px; }
.form-field.full { grid-column: 1/-1; }
.form-field label { color: var(--navy); font-size: .82rem; font-weight: 800; }
.form-field input, .form-field select, .form-field textarea { width: 100%; padding: 13px 15px; border: 1px solid var(--stone); border-radius: 13px; background: #fbfcfb; color: var(--charcoal); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: 3px solid rgba(45,111,159,.16); border-color: var(--blue); }
.form-consent { grid-column: 1/-1; display: flex; gap: 10px; color: var(--slate); font-size: .78rem; }
.form-consent input { margin-top: 5px; }
.form-honeypot { position: absolute !important; left: -9999px !important; }
.form-notice { grid-column: 1/-1; padding: 14px 16px; border-radius: 12px; background: var(--sage); color: var(--forest); font-size: .85rem; }

/* --- Scale-down pass, same as the other converted pages ---
   Only heading size/spacing/FAQ layout — nothing here touches
   .enquiry-form, .form-field or any part of the enquiry form itself
   (that form's security handling was hardened separately; this pass is
   purely visual). */
.page-hero h1 {
    font-size: clamp(2.25rem, 3.4vw, 3.4rem);
}

.section-head h2,
.enquiry-intro h2,
.cta-inner h2,
.faq-intro h2 {
    font-size: clamp(1.75rem, 2.6vw, 2.5rem);
}

.section-head .lead {
    margin-top: 18px;
}

/* Pathway card icons — same green-badge/white-icon treatment used
   across the institution pages. */
.program-card .icon-badge {
    background: var(--forest);
    color: white;
}

.learning-step .icon-wrap { display: grid; width: 46px; height: 46px; margin-bottom: 20px; place-items: center; border-radius: 12px; background: var(--forest); }
.learning-step .icon { width: 22px; height: 22px; color: white; }

@media (max-width: 820px) {
    .program-grid { grid-template-columns: 1fr 1fr; }
    .program-grid .program-card,
    .program-grid .program-card:nth-child(-n+2) { grid-column: span 1; }
    .enquiry-shell { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .program-grid { grid-template-columns: 1fr; }
    .program-grid .program-card:nth-child(-n+2) { min-height: 420px; }
    .program-grid .program-card:nth-child(-n+2) .card-thumb { max-height: 190px; }
    .program-grid .program-card:nth-child(n+3) { min-height: 230px; }
    .enquiry-form { grid-template-columns: 1fr; }
    .form-field.full, .form-consent { grid-column: auto; }
}

@media (max-width: 600px) {
    .program-grid .program-card:nth-child(-n+2) { min-height: 360px; }
    .program-grid .program-card:nth-child(-n+2) .card-thumb { max-height: 155px; }
    .program-grid .program-card:nth-child(n+3) { min-height: 0; padding: 20px; }
    .program-grid .program-card:nth-child(n+3) h3 { margin-top: 17px; }
    .program-grid .program-card:nth-child(n+3) .program-time { padding-top: 16px; }
}