/* St. Xavier's Technical Institute — Various Affiliated Courses
   Static campus photo · light warm wash · 3 cards in one desktop view · calm, corporate motion */
.xt-af{
  --burgundy:#8B1E2D;--deep:#5E1420;--gold:#F4B942;--charcoal:#292929;--white:#FAFAFA;--line:#EADFD3;
  --p:0;
  position:relative;width:100%;min-height:100vh;display:flex;align-items:center;
  padding:clamp(28px,5vh,64px) 20px;color:var(--charcoal);
  font:400 .95rem/1.6 'Poppins','Segoe UI',Arial,sans-serif;
  clip-path:inset(0);overflow:hidden;
}
.xt-af,.xt-af *,.xt-af *::before,.xt-af *::after{box-sizing:border-box}
:where(.xt-af) :is(h2,h3,h4,p,ul,li){margin:0;padding:0}
:where(.xt-af) ul{list-style:none}
.xt-af-in{position:relative;z-index:1;width:100%;max-width:1180px;margin:0 auto}

/* ---------- static background ---------- */
.xt-af-bg{position:fixed;inset:0;z-index:0;background:url('campus.jpg') center 30%/cover no-repeat #f6e9dc}
.xt-af-bg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,250,244,.84),rgba(255,243,233,.76) 60%,rgba(139,30,45,.18))}

/* ---------- heading ---------- */
.xt-af-head{max-width:700px;margin:0 auto clamp(20px,4vh,40px);text-align:center}
.xt-af-eyebrow{display:flex;align-items:center;justify-content:center;gap:14px;
  color:var(--burgundy);font:600 .78rem/1 'Poppins',sans-serif;letter-spacing:.22em;text-transform:uppercase}
.xt-af-eyebrow::before,.xt-af-eyebrow::after{content:'';width:34px;height:2px;background:var(--gold)}
.xt-af-title{margin-top:12px;color:var(--deep);font:400 clamp(2.2rem,4.4vw,3.2rem)/1.05 'Bebas Neue','Oswald',Impact,sans-serif;letter-spacing:.03em;text-transform:uppercase}
.xt-af-sub{margin-top:10px;color:#4a3a3a}

/* ---------- cards ---------- */
.xt-af-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,26px);align-items:stretch}
.xt-af-card{display:flex;flex-direction:column;overflow:hidden;
  translate:0 calc(var(--p) * var(--par,0) * -1px);      /* very light drift while scrolling */
  background:#fff;border-radius:12px;border-bottom:4px solid var(--gold);
  box-shadow:0 8px 24px rgba(94,20,32,.14);
  transition:transform .3s ease,box-shadow .3s ease}
.xt-af-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(94,20,32,.22)}

.xt-af-ch{position:relative;overflow:hidden;padding:18px 22px 16px;color:#fff;background:var(--burgundy)}
.xt-af-num{position:absolute;right:18px;top:6px;font:400 4rem/1 'Bebas Neue',Impact,sans-serif;color:rgba(255,255,255,.12)}
.xt-af-ico{display:grid;place-items:center;width:38px;height:38px;margin-bottom:10px;border-radius:8px;background:var(--gold);color:var(--deep)}
.xt-af-kicker{margin-bottom:2px;color:var(--gold);font:500 .75rem/1.3 'Poppins',sans-serif}
.xt-af-name{font:400 1.6rem/1.1 'Bebas Neue','Oswald',Impact,sans-serif;letter-spacing:.04em;text-transform:uppercase}
.xt-af-meta{margin-top:3px;color:rgba(255,255,255,.9);font:400 .8rem/1.4 'Poppins',sans-serif}

.xt-af-cb{flex:1;padding:16px 22px 18px}
.xt-af-label{display:flex;align-items:center;justify-content:space-between;padding-bottom:8px;border-bottom:2px solid var(--gold);
  color:var(--burgundy);font:600 .75rem/1.3 'Poppins',sans-serif;letter-spacing:.1em;text-transform:uppercase}
.xt-af-count{display:grid;place-items:center;min-width:26px;height:26px;padding:0 6px;border-radius:99px;background:var(--burgundy);color:#fff;font:600 .78rem/1 'Poppins',sans-serif;letter-spacing:0}
.xt-af-group{margin-top:12px;color:var(--burgundy);font:600 .82rem/1.3 'Poppins',sans-serif}
.xt-af-label+.xt-af-list{margin-top:2px}
.xt-af-group+.xt-af-list{margin-top:0}
.xt-af-list li{position:relative;padding:8px 8px 8px 20px;border-bottom:1px solid var(--line);font-size:.86rem;line-height:1.4;
  transition:background-color .25s ease,color .25s ease}
.xt-af-list li:last-child{border-bottom:0}
.xt-af-list li::before{content:'';position:absolute;left:4px;top:calc(.7em + 8px - 4px);width:8px;height:8px;border-radius:50%;background:var(--gold)}
.xt-af-list li:hover{background:#FDF3DD;color:var(--burgundy)}

.xt-af-foot{display:flex;flex-direction:column;gap:2px;padding:12px 22px 14px;background:var(--gold);color:var(--deep)}
.xt-af-foot strong{font:400 1.15rem/1.1 'Bebas Neue','Oswald',Impact,sans-serif;letter-spacing:.04em;text-transform:uppercase}
.xt-af-foot span{font:500 .75rem/1.4 'Poppins',sans-serif}

/* ---------- entrance: simple staggered fade-up ('backwards' keeps hover transforms working afterwards) ---------- */
.xt-af--js .xt-af-rv{opacity:0}
.xt-af--js.is-in .xt-af-rv{opacity:1;animation:xt-in .8s cubic-bezier(.2,.7,.2,1) var(--d,0s) backwards}
.xt-af--js .xt-af-list li{opacity:0}
.xt-af--js.is-in .xt-af-list li{opacity:1;animation:xt-li .5s ease backwards;animation-delay:calc(var(--d,0s) + .45s + var(--i,0)*.07s)}
@keyframes xt-in{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes xt-li{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}

/* ---------- compact so all 3 cards sit in ONE desktop screen ---------- */
@media (min-width:1000px) and (max-height:820px){
  .xt-af-ch{padding:14px 20px 12px}
  .xt-af-ico{width:34px;height:34px;margin-bottom:6px}
  .xt-af-name{font-size:1.4rem}
  .xt-af-cb{padding:12px 20px 12px}
  .xt-af-list li{padding:6px 8px 6px 20px;font-size:.82rem}
  .xt-af-list li::before{top:calc(.7em + 6px - 4px)}
  .xt-af-group{margin-top:8px}
  .xt-af-sub{font-size:.88rem}
}

/* ---------- tablet / mobile ---------- */
@media (max-width:999px){
  .xt-af{min-height:0;padding:52px 16px 58px}
  .xt-af-grid{grid-template-columns:minmax(0,560px);justify-content:center}
  .xt-af-card{translate:none}
}
@media (max-width:620px){
  .xt-af{padding:44px 12px 50px}
  .xt-af-grid{grid-template-columns:minmax(0,1fr);gap:18px}
  .xt-af-name{font-size:1.5rem}
}
@media (prefers-reduced-motion:reduce){
  .xt-af *{animation:none!important;transition:none!important}
  .xt-af-card{translate:none!important}
  .xt-af--js .xt-af-rv,.xt-af--js .xt-af-list li{opacity:1}
}