/* ============================================================
   Hameed Urdu Academy — Qualifications Hub
   Page-specific styles. Shared tokens and components live in home.css.
============================================================ */

.hua-qh { overflow: hidden; background: var(--hua-white); }

/* Qualifications hero */
.hua-qh-hero {
  position: relative;
  padding: 176px 0 clamp(96px, 9vw, 144px);
  background:
    linear-gradient(90deg, rgba(8,28,58,.025) 1px, transparent 1px),
    linear-gradient(rgba(8,28,58,.025) 1px, transparent 1px),
    var(--hua-ivory);
  background-size: 72px 72px;
}
.hua-qh-hero::after {
  content: "";
  position: absolute;
  inset: auto -8% -38% 58%;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,162,39,.14), transparent 66%);
  pointer-events: none;
}
.hua-qh-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(560px, 1.08fr);
  gap: clamp(54px, 8vw, 120px);
  align-items: center;
}
.hua-qh-breadcrumb { display: flex; gap: 10px; margin-bottom: 36px; color: var(--hua-faint); font-size: 11px; }
.hua-qh-breadcrumb a:hover { color: var(--hua-navy); }
.hua-qh-hero h1 {
  margin: 0;
  max-width: 780px;
  color: var(--hua-navy);
  font-family: var(--hua-serif);
  font-size: clamp(68px, 7.1vw, 108px);
  line-height: .88;
  letter-spacing: -.052em;
  font-weight: 600;
}
.hua-qh-hero h1 em { color: var(--hua-gold); font-style: normal; }
.hua-qh-hero__lead { max-width: 620px; margin: 30px 0 0; color: var(--hua-muted); font-size: clamp(17px, 1.4vw, 20px); }
.hua-qh-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hua-qh-button-outline { border-color: var(--hua-border); background: rgba(255,255,255,.6); color: var(--hua-navy); }
.hua-qh-button-outline:hover { border-color: rgba(8,28,58,.24); background: var(--hua-white); box-shadow: var(--hua-shadow-soft); }

.hua-qh-index { overflow: hidden; border: 1px solid rgba(8,28,58,.1); border-radius: 32px; background: rgba(255,255,255,.88); box-shadow: 0 32px 100px rgba(8,28,58,.1); backdrop-filter: blur(16px); }
.hua-qh-index__top { display: flex; align-items: center; justify-content: space-between; padding: 26px 30px; border-bottom: 1px solid var(--hua-border); }
.hua-qh-index__top span { color: var(--hua-muted); font-size: 10px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; }
.hua-qh-index__top strong { color: var(--hua-gold); font-family: var(--hua-serif); font-size: 44px; line-height: 1; font-weight: 600; }
.hua-qh-index__group { display: grid; grid-template-columns: 180px 1fr; }
.hua-qh-index__group + .hua-qh-index__group { border-top: 1px solid var(--hua-border); }
.hua-qh-index__label { padding: 28px 24px; border-right: 1px solid var(--hua-border); background: var(--hua-ivory); }
.hua-qh-index__label > span { display: block; color: var(--hua-gold); font-family: var(--hua-serif); font-size: 26px; }
.hua-qh-index__label strong { display: block; margin-top: 24px; color: var(--hua-navy); font-size: 12px; line-height: 1.35; }
.hua-qh-index__label small { display: block; margin-top: 6px; color: var(--hua-faint); font-size: 10px; }
.hua-qh-index ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.hua-qh-index li { min-height: 82px; display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--hua-border); }
.hua-qh-index li:nth-last-child(-n+2) { border-bottom: 0; }
.hua-qh-index li:nth-child(odd) { border-right: 1px solid var(--hua-border); }
.hua-qh-index li > span { color: var(--hua-gold); font-family: var(--hua-serif); font-size: 22px; }
.hua-qh-index li p { margin: 0; color: var(--hua-navy); font-size: 10px; line-height: 1.45; }
.hua-qh-index__group--uk ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hua-qh-index__group--uk li { grid-template-columns: 1fr; gap: 6px; border-bottom: 0; border-right: 1px solid var(--hua-border); }
.hua-qh-index__group--uk li:last-child { border-right: 0; }

/* Route atlas */
.hua-qh-routes { background: var(--hua-white); }
.hua-qh-atlas { display: grid; grid-template-columns: 300px 1fr; gap: clamp(34px, 5vw, 76px); align-items: start; }
.hua-qh-atlas__nav { position: sticky; top: 126px; border-top: 1px solid var(--hua-border); }
.hua-qh-atlas__nav > button { width: 100%; display: grid; grid-template-columns: 38px 1fr; gap: 4px 16px; padding: 24px 0; border: 0; border-bottom: 1px solid var(--hua-border); background: transparent; text-align: left; cursor: pointer; }
.hua-qh-atlas__nav > button > span { grid-row: 1 / 3; color: var(--hua-faint); font-family: var(--hua-serif); font-size: 22px; transition: color .3s var(--hua-ease); }
.hua-qh-atlas__nav > button strong { color: var(--hua-muted); font-size: 13px; transition: color .3s var(--hua-ease); }
.hua-qh-atlas__nav > button small { color: var(--hua-faint); font-size: 10px; }
.hua-qh-atlas__nav > button.is-active > span { color: var(--hua-gold); }
.hua-qh-atlas__nav > button.is-active strong { color: var(--hua-navy); }
.hua-qh-atlas__help { margin-top: 34px; padding: 22px; border-radius: 20px; background: var(--hua-ivory); }
.hua-qh-atlas__help p { margin: 0 0 12px; color: var(--hua-muted); font-size: 11px; }
.hua-qh-atlas__help button { padding: 0; border: 0; background: transparent; color: var(--hua-navy); cursor: pointer; font-size: 11px; font-weight: 600; }
.hua-qh-atlas__help button span { display: inline-block; margin-left: 4px; transition: transform .3s var(--hua-ease); }
.hua-qh-atlas__help button:hover span { transform: translate(3px,-3px); }
.hua-qh-atlas__panels { min-width: 0; border-top: 1px solid var(--hua-navy); }
.hua-qh-route-panel { display: block; }
.hua-qh-route-panel[hidden] { display: none; }
.hua-qh-route { border-bottom: 1px solid var(--hua-border); }
.hua-qh-route summary { display: grid; grid-template-columns: 86px minmax(0,1fr) 34px; gap: 22px; align-items: center; padding: 28px 0; cursor: pointer; list-style: none; }
.hua-qh-route summary::-webkit-details-marker { display: none; }
.hua-qh-route__code { color: var(--hua-gold); font-family: var(--hua-serif); font-size: 31px; line-height: 1; }
.hua-qh-route summary h3 { margin: 0; color: var(--hua-navy); font-family: var(--hua-serif); font-size: clamp(28px, 3vw, 40px); line-height: 1; font-weight: 600; }
.hua-qh-route summary p { margin: 8px 0 0; color: var(--hua-muted); font-size: 11px; }
.hua-qh-route__toggle { position: relative; width: 30px; height: 30px; border: 1px solid var(--hua-border); border-radius: 50%; }
.hua-qh-route__toggle::before, .hua-qh-route__toggle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1px; background: var(--hua-navy); transform: translate(-50%,-50%); transition: transform .3s var(--hua-ease); }
.hua-qh-route__toggle::after { transform: translate(-50%,-50%) rotate(90deg); }
.hua-qh-route[open] .hua-qh-route__toggle::after { transform: translate(-50%,-50%) rotate(0); }
.hua-qh-route__body { padding: 0 0 34px 108px; }
.hua-qh-route__body > p { max-width: 720px; margin: 0; color: var(--hua-muted); }
.hua-qh-route__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.hua-qh-route__meta span { padding: 8px 12px; border: 1px solid var(--hua-border); border-radius: 999px; background: var(--hua-ivory); color: var(--hua-navy); font-size: 9px; }
.hua-qh-route__footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 25px; padding-top: 20px; border-top: 1px solid var(--hua-border); }
.hua-qh-route__footer small { color: var(--hua-faint); font-size: 10px; }
.hua-qh-route__footer .hua-text-link { padding: 0; border: 0; background: transparent; cursor: pointer; }

/* How to choose */
.hua-qh-choice { background: var(--hua-ivory); }
.hua-qh-choice__grid { display: grid; grid-template-columns: minmax(300px,.72fr) minmax(0,1.28fr); gap: clamp(70px, 10vw, 150px); }
.hua-qh-choice__intro { position: sticky; top: 132px; align-self: start; }
.hua-qh-choice__intro h2 { margin: 0; color: var(--hua-navy); font-family: var(--hua-serif); font-size: clamp(50px,5.5vw,78px); line-height: .96; letter-spacing: -.04em; }
.hua-qh-choice__intro > p:last-child { max-width: 470px; margin: 26px 0 0; color: var(--hua-muted); }
.hua-qh-choice__steps { margin: 0; padding: 0; border-top: 1px solid var(--hua-border); list-style: none; }
.hua-qh-choice__steps li { display: grid; grid-template-columns: 84px 1fr; gap: 24px; padding: 34px 0; border-bottom: 1px solid var(--hua-border); }
.hua-qh-choice__steps li > span { color: var(--hua-gold); font-family: var(--hua-serif); font-size: 32px; }
.hua-qh-choice__steps h3 { margin: 0; color: var(--hua-navy); font-family: var(--hua-serif); font-size: 34px; line-height: 1; }
.hua-qh-choice__steps p { max-width: 620px; margin: 12px 0 0; color: var(--hua-muted); }

/* Preparation system */
.hua-qh-preparation { padding: clamp(100px, 11vw, 170px) 0; color: var(--hua-white); background: linear-gradient(135deg, #06152c, var(--hua-navy)); }
.hua-qh-preparation__grid { display: grid; grid-template-columns: minmax(320px,.88fr) minmax(0,1.12fr); gap: clamp(70px,10vw,150px); align-items: start; }
.hua-qh-preparation__headline h2 { margin: 0; max-width: 630px; font-family: var(--hua-serif); font-size: clamp(55px,6vw,86px); line-height: .92; letter-spacing: -.04em; }
.hua-qh-preparation__list { margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.18); list-style: none; }
.hua-qh-preparation__list li { display: grid; grid-template-columns: 62px 1fr; gap: 22px; padding: 26px 0; border-bottom: 1px solid rgba(255,255,255,.18); }
.hua-qh-preparation__list li > span { color: var(--hua-gold-light); font-family: var(--hua-serif); font-size: 27px; }
.hua-qh-preparation__list h3 { margin: 0; font-family: var(--hua-serif); font-size: 30px; line-height: 1; }
.hua-qh-preparation__list p { max-width: 620px; margin: 9px 0 0; color: rgba(255,255,255,.64); font-size: 12px; }

/* FAQ and CTA */
.hua-qh-faq { background: var(--hua-white); }
.hua-qh-cta { position: relative; overflow: hidden; color: var(--hua-white); background: #06152c; }
.hua-qh-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 78% 48%, rgba(201,162,39,.19), transparent 28%), linear-gradient(90deg, transparent 0 62%, rgba(255,255,255,.03) 62%); }
.hua-qh-cta__grid { position: relative; min-height: 650px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center; }
.hua-qh-cta__copy { padding: 110px 0; }
.hua-qh-cta__copy h2 { margin: 0; max-width: 760px; font-family: var(--hua-serif); font-size: clamp(58px,6vw,88px); line-height: .92; letter-spacing: -.045em; }
.hua-qh-cta__copy > p:not(.hua-eyebrow) { max-width: 650px; margin: 26px 0 0; color: rgba(255,255,255,.68); }
.hua-qh-cta__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hua-qh-cta__visual { position: relative; align-self: end; min-height: 620px; }
.hua-qh-cta__halo { position: absolute; left: 5%; bottom: 8%; width: 520px; height: 520px; border: 1px solid rgba(201,162,39,.16); border-radius: 50%; background: radial-gradient(circle, rgba(201,162,39,.18), transparent 68%); }
.hua-qh-cta__visual img { position: absolute; z-index: 1; right: 0; bottom: 0; width: min(470px,38vw); max-height: 610px; object-fit: contain; filter: drop-shadow(0 28px 34px rgba(0,0,0,.3)); }
.hua-qh-cta__note { position: absolute; z-index: 2; right: 0; bottom: 44px; width: 230px; padding: 19px; border: 1px solid rgba(255,255,255,.18); border-radius: 18px; background: rgba(8,28,58,.55); backdrop-filter: blur(16px); }
.hua-qh-cta__note strong { display: block; color: var(--hua-gold-light); font-family: var(--hua-serif); font-size: 24px; line-height: 1; }
.hua-qh-cta__note span { display: block; margin-top: 7px; color: rgba(255,255,255,.65); font-size: 10px; line-height: 1.5; }

/* Responsive */
@media (max-width: 1120px) {
  .hua-qh-hero__grid { grid-template-columns: 1fr; }
  .hua-qh-index { max-width: 860px; }
  .hua-qh-atlas { grid-template-columns: 240px 1fr; }
  .hua-qh-choice__grid, .hua-qh-preparation__grid { gap: 70px; }
  .hua-qh-cta__grid { grid-template-columns: 1fr .78fr; }
}

@media (max-width: 900px) {
  .hua-qh-hero { padding-top: 142px; }
  .hua-qh-atlas { grid-template-columns: 1fr; }
  .hua-qh-atlas__nav { position: static; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 24px; }
  .hua-qh-atlas__help { grid-column: 1/-1; }
  .hua-qh-choice__grid, .hua-qh-preparation__grid { grid-template-columns: 1fr; }
  .hua-qh-choice__intro { position: static; }
  .hua-qh-cta__grid { min-height: auto; grid-template-columns: 1fr; }
  .hua-qh-cta__copy { padding: 100px 0 0; }
  .hua-qh-cta__visual { min-height: 520px; }
  .hua-qh-cta__visual img { width: min(470px,62vw); }
}

@media (max-width: 680px) {
  .hua-qh-hero { padding: 128px 0 76px; }
  .hua-qh-hero h1 { font-size: clamp(54px,15vw,76px); }
  .hua-qh-hero__actions, .hua-qh-cta__actions { flex-direction: column; align-items: stretch; }
  .hua-qh-index__group { grid-template-columns: 1fr; }
  .hua-qh-index__label { border-right: 0; border-bottom: 1px solid var(--hua-border); }
  .hua-qh-index__label strong { margin-top: 12px; }
  .hua-qh-index ol, .hua-qh-index__group--uk ol { grid-template-columns: 1fr; }
  .hua-qh-index li, .hua-qh-index__group--uk li { border-right: 0 !important; border-bottom: 1px solid var(--hua-border) !important; }
  .hua-qh-index li:last-child, .hua-qh-index__group--uk li:last-child { border-bottom: 0 !important; }
  .hua-qh-atlas__nav { grid-template-columns: 1fr; }
  .hua-qh-atlas__help { grid-column: auto; }
  .hua-qh-route summary { grid-template-columns: 62px minmax(0,1fr) 30px; gap: 14px; padding: 24px 0; }
  .hua-qh-route__code { font-size: 25px; }
  .hua-qh-route summary h3 { font-size: 28px; }
  .hua-qh-route summary p { display: none; }
  .hua-qh-route__body { padding-left: 76px; }
  .hua-qh-route__footer { align-items: flex-start; flex-direction: column; }
  .hua-qh-choice__steps li { grid-template-columns: 56px 1fr; gap: 16px; }
  .hua-qh-choice__steps h3 { font-size: 29px; }
  .hua-qh-preparation__list li { grid-template-columns: 46px 1fr; }
  .hua-qh-cta__copy { padding-top: 88px; }
  .hua-qh-cta__visual { min-height: 430px; }
  .hua-qh-cta__visual img { width: min(390px,88vw); right: 50%; transform: translateX(50%); }
  .hua-qh-cta__note { right: 0; bottom: 28px; width: 200px; }
}