/* =========================================================
   ASBM University — Academics / Programme Finder & Comparison
   ========================================================= */

/* ---------- Hero ---------- */
.pf-hero { padding: 48px 0 72px; color: #fff; background: radial-gradient(circle at 90% 10%, rgba(245, 179, 36, .1), transparent 40%), var(--navy-900); }
.pf-hero-img { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16 / 10; box-shadow: var(--shadow-lg); }
.pf-hero-img img { width: 100%; height: 100%; object-fit: cover; animation: pageHeroZoom 18s ease-in-out infinite alternate; }

/* ---------- Steps ---------- */
.pf-step { display: none; }
.pf-step.is-active { display: block; animation: pfIn .45s var(--ease); }
@keyframes pfIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.pf-step-head { display: flex; gap: 14px; align-items: center; margin-bottom: 22px; }
.pf-step-no { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--navy-800); color: #fff; font-weight: 700; font-size: .9rem; flex: 0 0 34px; }
.pf-step-head small { display: block; font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pf-step-head h2 { font-family: var(--font-serif); font-weight: 600; font-size: clamp(1.3rem, 2.2vw, 1.6rem); margin: 0; }

.pf-options-areas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pf-area {
    text-align: left; background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius); padding: 18px;
    display: flex; flex-direction: column; gap: 4px; transition: all .3s var(--ease);
}
.pf-area:hover { border-color: var(--navy-700); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.pf-area.is-selected { border-color: var(--navy-700); background: var(--navy-100); box-shadow: 0 0 0 3px rgba(22, 58, 122, .1); }
.pf-area-icon { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--navy-100); color: var(--navy-700); margin-bottom: 10px; transition: all .3s; }
.pf-area.is-selected .pf-area-icon { background: var(--navy-800); color: var(--gold); }
.pf-area strong { font-family: var(--font-serif); font-weight: 600; font-size: 1.02rem; color: var(--navy-900); }
.pf-area small { font-size: .76rem; color: var(--muted); }

.pf-options-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.pf-chip { border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: 10px 20px; font-weight: 600; font-size: .9rem; color: var(--navy-800); transition: all .25s var(--ease); }
.pf-chip:hover { border-color: var(--navy-700); }
.pf-chip.is-selected { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }

.pf-controls { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 26px 0 22px; }
.pf-dots { display: flex; gap: 6px; }
.pf-dots span { width: 10px; height: 4px; border-radius: 4px; background: var(--line); transition: all .35s var(--ease); }
.pf-dots span.is-on { width: 26px; background: var(--navy-800); }

.pf-previews { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.pf-preview { text-align: left; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; background: var(--soft); opacity: .75; transition: all .3s var(--ease); }
.pf-preview:hover { opacity: 1; border-color: var(--navy-700); }
.pf-preview.is-done { opacity: 1; background: #fff; }
.pf-preview small { display: block; font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pf-preview strong { display: block; font-family: var(--font-serif); font-weight: 600; color: var(--navy-900); margin: 2px 0 10px; }
.pf-minis { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-mini { font-size: .72rem; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 3px 10px; color: var(--muted); }
.pf-mini.is-selected { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }

/* ---------- Comparison ---------- */
.pf-compare { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
.pf-col { padding: 22px; border-radius: var(--radius); animation: pfIn .5s var(--ease) both; animation-delay: calc(var(--i) * .08s); }
.pf-col.is-best { background: var(--navy-900); color: #fff; box-shadow: var(--shadow-lg); }
.pf-col-tag { display: block; font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.pf-col.is-best .pf-col-tag { color: var(--gold); }
.pf-col h3 { font-family: var(--font-serif); font-weight: 600; font-size: 1.25rem; margin-bottom: 10px; }
.pf-col.is-best h3 { color: #fff; }
.pf-row { padding: 10px 0; border-bottom: 1px solid var(--line); }
.pf-col.is-best .pf-row { border-color: rgba(255, 255, 255, .12); }
.pf-row small { display: block; font-size: .7rem; color: var(--muted); }
.pf-col.is-best .pf-row small { color: rgba(255, 255, 255, .55); }
.pf-row strong { font-size: .86rem; font-weight: 600; }
.pf-na { font-weight: 400; font-style: italic; color: var(--muted); }
.pf-col.is-best .pf-na { color: rgba(255, 255, 255, .5); }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 991.98px) {
    .pf-options-areas { grid-template-columns: repeat(2, 1fr); }
    .pf-compare { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -12px; padding: 0 12px 10px; scrollbar-width: none; }
    .pf-compare::-webkit-scrollbar { display: none; }
    .pf-col { flex: 0 0 min(320px, 85%); scroll-snap-align: start; border: 1px solid var(--line); }
    .pf-col.is-best { border-color: var(--navy-900); }
}
@media (max-width: 575.98px) {
    .pf-hero { padding: 36px 0 52px; }
    .pf-options-areas { grid-template-columns: 1fr; }
    .pf-area { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 12px; }
    .pf-area-icon { margin: 0; }
    .pf-area strong { flex: 1; }
    .pf-area small { flex-basis: 100%; padding-left: 46px; }
    .pf-previews { grid-template-columns: 1fr; }
    .pf-controls { flex-direction: column-reverse; align-items: stretch; }
    .pf-controls .d-flex .btn { flex: 1; }
    .pf-dots { justify-content: center; }
}