/* ---- Programas page-specific layout (built on the shared tokens in styles.css) ---- */
.pr-hero {
	position: relative; min-height: 60vh; display: flex; align-items: flex-end;
	background: var(--navy); color: var(--sand); overflow: hidden;
	padding: 9rem var(--gutter) clamp(3.5rem, 7vw, 6rem);
}
.pr-hero__media { position: absolute; inset: 0; z-index: 0; }
.pr-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.95); }
.pr-hero__media::after {
	content: ""; position: absolute; inset: 0;
	background:
		linear-gradient(90deg, rgba(26,36,61,.92) 0%, rgba(26,36,61,.6) 45%, rgba(26,36,61,.18) 100%),
		linear-gradient(to top, rgba(26,36,61,.7), transparent 55%);
}
.pr-hero__inner { position: relative; z-index: 2; width: 100%; max-width: var(--maxw); margin-inline: auto; }
.pr-hero h1 { font-family: var(--font-display); font-size: clamp(2.8rem, 7vw, 5.4rem); line-height: 1.02; letter-spacing: -.01em; color: #fff; margin-top: 1.3rem; max-width: 16ch; }
.pr-hero .hero-accent { color: var(--gold); }

.pr-section { padding-block: clamp(3.5rem, 8vw, 6rem); }
.pr-section--white { background: var(--white); }
.pr-section--cream { background: var(--cream); }
.pr-h2 { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.4rem); color: var(--navy); letter-spacing: -.01em; }

.pr-split { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: 1fr 1fr; align-items: start; }
@media (max-width: 860px) { .pr-split { grid-template-columns: 1fr; } }
.pr-split .pr-body p { margin-top: 1.1rem; font-size: 1.05rem; line-height: 1.7; color: var(--ink-70); text-align: justify; hyphens: auto; }
.pr-split .pr-body p:first-of-type { margin-top: 1.4rem; }
.pr-photo { overflow: hidden; border-radius: 20px; box-shadow: 0 30px 70px -40px rgba(26,36,61,.55); }
.pr-photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }
.pr-photo--kids { order: -1; }
@media (max-width: 860px) { .pr-photo--kids { order: 0; } }

/* pills */
.pr-pills { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .55rem; }
.pr-pill { display: inline-flex; align-items: center; border: 1px solid rgba(206,138,57,.4); background: rgba(206,138,57,.1); color: var(--earth); border-radius: 999px; padding: .4rem .95rem; font-size: .85rem; font-weight: 600; }
.pr-pill--sm { color: var(--navy); font-size: .78rem; padding: .35rem .8rem; }
.pr-subtitle { margin-top: 1.4rem; font-size: .92rem; font-weight: 600; color: var(--earth); letter-spacing: .01em; }
.mod-details { margin-top: 1.3rem; font-size: .85rem; font-weight: 600; color: var(--earth); line-height: 1.55; letter-spacing: .01em; }

/* ---- Areas ladder (replaces the MCER table) ---- */
.areas-eyebrow { color: var(--earth); }
.areas-intro { margin-top: 1rem; max-width: 60ch; margin-inline: auto; text-align: center; font-size: 1.05rem; line-height: 1.6; color: var(--ink-70); }
.areas-intro em { font-style: italic; }
.areas-intro strong { color: var(--gold); font-weight: 700; }
.area-seg { margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: .65rem; }
.area-chip { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; border-radius: 999px; border: 1.5px solid rgba(26,36,61,.14); background: #fff; color: var(--navy); padding: .58rem 1rem; font-size: .92rem; font-weight: 600; font-family: inherit; transition: .18s ease; }
.area-chip:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 10px 22px -14px rgba(26,36,61,.4); }
.area-chip[aria-pressed="true"] { background: linear-gradient(135deg, var(--gold), #b3742a); color: #fff; border-color: transparent; box-shadow: 0 12px 26px -12px rgba(206,138,57,.7); }
.area-chip .chip-ico { font-size: 1.18rem; line-height: 1; }
.area-chip .chip-badge { border-radius: 999px; background: rgba(206,138,57,.2); padding: .14rem .42rem; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--earth); }
.area-chip[aria-pressed="true"] .chip-badge { background: rgba(255,255,255,.16); color: var(--sand); }
.ladder { margin-top: 2.4rem; list-style: none; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.rung { position: relative; display: flex; gap: 1rem; align-items: flex-start; border-radius: 16px; border: 1px solid var(--ink-12); background: #fff; padding: 1.15rem 1.25rem; transition: transform .2s ease, box-shadow .2s, border-color .2s; }
.rung:hover { transform: translateX(4px); border-color: rgba(206,138,57,.4); box-shadow: 0 14px 30px -22px rgba(26,36,61,.55); }
.rung-badge { flex: none; width: 50px; height: 50px; border-radius: 13px; display: grid; place-items: center; font-family: var(--font-display); font-size: 1.2rem; background: var(--navy); color: #fff; box-shadow: 0 8px 18px -10px rgba(26,36,61,.55); transition: transform .2s ease; }
.rung:hover .rung-badge { transform: scale(1.06); }
.rung-text { margin: 0; font-size: .98rem; line-height: 1.5; color: rgba(26,36,61,.86); }
/* escalating badge colors — the climb from "I know some English" up to professional */
.rung[data-level="A1"] .rung-badge { background: #97A0AD; }
.rung[data-level="A2"] .rung-badge { background: #6F7889; }
.rung[data-level="B1"] .rung-badge { background: #3F6B86; }
.rung[data-level="C1"] .rung-badge { background: #2A3A5C; }
.rung[data-level="C1"], .rung[data-level="C2"] { background: linear-gradient(120deg, rgba(26,36,61,.045), #fff); }
/* B2 — the professional line, the visual hero of the ladder */
.rung--b2 { border-color: var(--gold); background: linear-gradient(120deg, rgba(206,138,57,.16), rgba(206,138,57,.05)); box-shadow: 0 16px 36px -20px rgba(206,138,57,.55); transform: scale(1.015); }
.rung--b2:hover { transform: scale(1.015) translateX(4px); }
.rung--b2 .rung-badge { background: linear-gradient(135deg, var(--gold), #b3742a); color: #fff; box-shadow: 0 10px 22px -8px rgba(206,138,57,.75); }
.rung-line { margin: 0 0 .35rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--earth); }
.areas-note { margin-top: 1.5rem; font-size: .92rem; color: var(--ink-55); }

/* modality cards */
.pr-mods { margin-top: clamp(2rem, 4vw, 3rem); display: grid; gap: 1.3rem; grid-template-columns: repeat(2, 1fr); }
.pr-mods--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .pr-mods, .pr-mods--3 { grid-template-columns: 1fr; } }
.mod-card { overflow: hidden; border-radius: 18px; background: var(--white); border: 1px solid var(--ink-12); box-shadow: 0 20px 50px -36px rgba(26,36,61,.5); }
.pr-section--cream .mod-card { box-shadow: 0 20px 50px -34px rgba(26,36,61,.42); }
.mod-card .bar { height: 5px; }
.mod-card .bar--gold { background: var(--gold); }
.mod-card .bar--blue { background: var(--blue); }
.mod-card .bar--olive { background: var(--olive); }
.mod-card .mod-body { padding: clamp(1.6rem, 3vw, 2.2rem); }
.mod-card h3 { font-family: var(--font-display); font-size: clamp(1.4rem, 2.6vw, 1.85rem); color: var(--navy); }
.mod-card p { margin-top: .8rem; font-size: .98rem; line-height: 1.55; color: var(--ink-70); }

/* CEFR table */
.pr-table-intro { margin-top: 1rem; max-width: 44ch; font-size: 1.05rem; color: var(--ink-70); }
.pr-table-wrap { margin-top: clamp(2rem, 4vw, 3rem); overflow: hidden; border-radius: 18px; border: 1px solid var(--ink-12); overflow-x: auto; }
table.pr-table { width: 100%; border-collapse: collapse; font-size: .98rem; min-width: 540px; }
.pr-table thead { background: var(--navy); color: #fff; }
.pr-table th { text-align: left; font-weight: 600; padding: 1rem 1.4rem; font-size: .9rem; letter-spacing: .02em; }
.pr-table td { padding: 1rem 1.4rem; border-top: 1px solid var(--ink-12); color: var(--ink-70); vertical-align: top; }
.pr-table tbody tr { background: var(--white); transition: background .25s; }
.pr-table tbody tr:hover { background: var(--cream); }
.pr-table td.lvl { font-family: var(--font-display); font-size: 1.15rem; color: var(--navy); width: 64px; }
.pr-table td.mcer { color: var(--blue); font-weight: 600; white-space: nowrap; }

/* Diploma banner */
.pr-diploma { background: var(--navy); color: var(--sand); padding-block: clamp(3rem, 6vw, 4.5rem); }
.pr-diploma .wrap { max-width: 880px; }
.pr-diploma .row { display: flex; flex-wrap: wrap; align-items: center; gap: 1.8rem; }
.pr-diploma .ico { flex: none; width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--navy); }
.pr-diploma .ico svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pr-diploma h3 { font-family: var(--font-display); font-size: clamp(1.6rem, 3.4vw, 2.4rem); color: #fff; }
.pr-diploma p { margin-top: .8rem; color: rgba(254,233,196,.82); font-size: 1.05rem; line-height: 1.6; max-width: 60ch; }