/* ============================================================
   EduTrust.lk — extra page components
   Programs · Study Abroad · Local Education · Resources · About
   ============================================================ */

/* ---------- PROGRAMS ---------- */
.prog-list{display:flex;flex-direction:column;gap:16px}
.prog{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 22px;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s,border-color .2s}
.prog:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:transparent}
.prog .field-ic{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;color:#fff;flex:none}
.prog .field-ic svg{width:25px;height:25px}
.prog .pname{font-family:var(--font-display);font-weight:700;font-size:17px;line-height:1.2}
.prog .puni{font-size:13.5px;color:var(--slate);display:flex;align-items:center;gap:6px;margin-top:4px}
.prog .puni svg{width:14px;height:14px;color:var(--teal)}
.prog .pmeta{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.prog .pmeta .chip{display:inline-flex;align-items:center;gap:5px}
.prog .pmeta .chip svg{width:13px;height:13px}
.prog .pright{text-align:right;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.prog .ptuition{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--navy)}
.prog .ptuition small{display:block;font-size:11px;color:var(--slate);font-weight:500}
@media (max-width:680px){
  .prog{grid-template-columns:auto 1fr;gap:14px}
  .prog .pright{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center;border-top:1px solid var(--light);padding-top:14px}
}

/* ---------- STUDY ABROAD DESTINATIONS ---------- */
.dest-hero-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.dest-big{position:relative;border-radius:18px;overflow:hidden;min-height:300px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;box-shadow:var(--shadow-sm);transition:transform .22s,box-shadow .22s}
.dest-big:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.dest-big .bg{position:absolute;inset:0}
.dest-big::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,23,42,.12),rgba(15,23,42,.82))}
.dest-big .flag{position:absolute;top:16px;left:16px;z-index:2;width:44px;height:44px;border-radius:12px;background:#fff;display:grid;place-items:center;font-size:24px;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.dest-big .body{position:relative;z-index:2;padding:20px}
.dest-big h3{color:#fff;font-size:22px}
.dest-big .sub{font-size:13.5px;opacity:.9;margin:4px 0 14px}
.dest-big .stats{display:flex;gap:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.22)}
.dest-big .stats div{font-size:12px;opacity:.85}
.dest-big .stats b{display:block;font-family:var(--font-display);font-size:16px;opacity:1}
@media (max-width:880px){.dest-hero-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.dest-hero-grid{grid-template-columns:1fr}}

/* country quick-facts strip */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.fact{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;text-align:center}
.fact .ic{width:50px;height:50px;border-radius:14px;background:var(--teal-50);color:var(--teal);display:grid;place-items:center;margin:0 auto 12px}
.fact .ic svg{width:24px;height:24px}
.fact b{font-family:var(--font-display);font-size:20px;display:block}
.fact span{font-size:13px;color:var(--slate)}
@media (max-width:680px){.facts{grid-template-columns:1fr 1fr}}

/* ---------- RESOURCES / ARTICLES ---------- */
.res-featured{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;margin-bottom:34px}
.art-lg{position:relative;border-radius:20px;overflow:hidden;min-height:360px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;box-shadow:var(--shadow)}
.art-lg .bg{position:absolute;inset:0}
.art-lg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,23,42,.1),rgba(15,23,42,.85))}
.art-lg .body{position:relative;z-index:2;padding:30px}
.art-lg h2{color:#fff;font-size:28px;max-width:90%}
.art-lg .excerpt{opacity:.9;margin-top:10px;max-width:85%}
.art-side{display:flex;flex-direction:column;gap:16px}
.art-row{display:grid;grid-template-columns:104px 1fr;gap:14px;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s}
.art-row:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.art-row .thumb{background-size:cover}
.art-row .rb{padding:14px 14px 14px 0}
.art-row h4{font-size:15px;line-height:1.3;margin-bottom:6px}
.art-row .meta{font-size:12px;color:var(--slate)}

.cat-pill{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.18);backdrop-filter:blur(4px);margin-bottom:12px}
.cat-pill.solid{background:var(--teal-50);color:var(--teal-700)}

.art-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.art-card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column}
.art-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.art-card .cover{height:160px;background-size:cover;background-position:center;position:relative}
.art-card .cover .cat-pill{position:absolute;left:14px;top:14px}
.art-card .cc{padding:18px 18px 20px;flex:1;display:flex;flex-direction:column}
.art-card h4{font-size:16.5px;line-height:1.3;margin-bottom:8px}
.art-card p{font-size:13.5px;color:var(--slate);margin-bottom:14px}
.art-card .meta{margin-top:auto;display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--slate)}
.art-card .meta .av{width:26px;height:26px;border-radius:50%}
@media (max-width:880px){.res-featured{grid-template-columns:1fr}.art-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.art-grid{grid-template-columns:1fr}}

/* ---------- ABOUT ---------- */
.about-story{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.about-photo{border-radius:22px;overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/3;position:relative}
.about-photo image-slot{width:100%;height:100%}
.about-photo .badge{position:absolute;right:-14px;bottom:-14px;background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:16px 20px;display:flex;align-items:center;gap:12px}
.about-photo .badge .ic{width:42px;height:42px;border-radius:12px;background:var(--orange);color:#fff;display:grid;place-items:center}
.about-photo .badge b{font-family:var(--font-display);font-size:20px;line-height:1}
.about-photo .badge span{font-size:12px;color:var(--slate)}

.mission-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.mission-card{padding:30px;border-radius:18px;color:#fff}
.mission-card .ic{width:54px;height:54px;border-radius:14px;background:rgba(255,255,255,.18);display:grid;place-items:center;margin-bottom:16px}
.mission-card .ic svg{width:26px;height:26px;color:#fff}
.mission-card h3{color:#fff;font-size:21px;margin-bottom:10px}
.mission-card p{opacity:.92;font-size:15px}

.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.member{text-align:center}
.member .photo{aspect-ratio:1;border-radius:18px;overflow:hidden;margin-bottom:14px;box-shadow:var(--shadow-sm);position:relative}
.member .photo image-slot{width:100%;height:100%}
.member b{font-family:var(--font-display);font-size:16px;display:block}
.member span{font-size:13px;color:var(--teal);font-weight:600}
.member .socials{display:flex;gap:8px;justify-content:center;margin-top:10px}
.member .socials a{width:30px;height:30px;border-radius:8px;background:var(--light);display:grid;place-items:center;color:var(--slate)}
.member .socials a:hover{background:var(--teal);color:#fff}
.member .socials svg{width:14px;height:14px}
@media (max-width:880px){.about-story,.mission-grid{grid-template-columns:1fr}.team-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.team-grid{grid-template-columns:1fr 1fr}}

/* section intro on dark/teal */
.value-band{background:linear-gradient(120deg,var(--teal-700),var(--teal));border-radius:24px;padding:40px;color:#fff}
.value-band .eyebrow{color:#bdf3ef}
.value-band .h-sec{color:#fff}