/* ==========================================================================
   Soft Skill Zone — Layout: containers, sections, navbar, footer, grids
   ========================================================================== */

/* ---------- Container ---------- */
.ssz-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.ssz-container-wide { max-width: 1440px; }
.ssz-container-narrow { max-width: 820px; }

/* ---------- Section ---------- */
.section { padding-block: var(--section-y); position: relative; }
.section-sm { padding-block: calc(var(--section-y) * 0.6); }
.section-alt { background: var(--bg-surface-2); }
.section-head { max-width: 720px; margin-inline: auto; text-align: center; margin-bottom: var(--sp-12); }
.section-head.start { text-align: left; margin-inline: 0; }
.section-head .eyebrow { margin-bottom: var(--sp-3); }
.section-head h2 { margin-bottom: var(--sp-4); }
.section-head p { font-size: var(--fs-md); color: var(--text-secondary); }

/* ---------- Auto grid (no media queries needed) ---------- */
.auto-grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.auto-grid-sm { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.auto-grid-lg { grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); }

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 992px) { .split { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px) { .split-6-5 { grid-template-columns: 6fr 5fr; } }

.stack   { display: flex; flex-direction: column; gap: var(--sp-4); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.ssz-navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--navbar-h);
  z-index: var(--z-navbar);
  display: flex;
  align-items: center;
  background: transparent;
  transition: background var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              backdrop-filter var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.ssz-navbar.is-scrolled {
  background: var(--glass-bg-solid);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  border-bottom-color: var(--border-subtle);
  box-shadow: var(--shadow-sm);
}
.ssz-navbar__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.ssz-brand { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }
/* Institute ka asli logo. Ye ek hi jagah badla hai — navbar (desktop aur
   mobile drawer), footer, student dashboard aur admin panel, chaaron wahi
   class istemaal karte hain, isliye markup kahin chhuna nahi pada.

   Andar "SSZ" text abhi bhi likha hai (aria-hidden ke saath) — font-size 0
   use chhupa deta hai, par agar kabhi image na khule to markup toota hua
   nahi lagta.

   Dark mode ke liye ulta version: kaala disc gehre neele background par
   gum ho jaata hai. */
.ssz-brand__mark {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: url("../images/logo/logo.png") center / contain no-repeat;
  display: grid; place-items: center;
  font-size: 0;
  flex-shrink: 0;
}
[data-theme="dark"] .ssz-brand__mark {
  background-image: url("../images/logo/logo-dark.png");
}
.ssz-brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.ssz-brand__name {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 1.02rem;
  color: var(--text-primary);
  letter-spacing: var(--ls-tight);
  white-space: nowrap;
}
.ssz-brand__tag {
  font-size: 0.66rem;
  color: var(--text-muted);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  white-space: nowrap;
}
@media (max-width: 400px) { .ssz-navbar .ssz-brand__text { display: none; } }

.ssz-nav { display: none; align-items: center; gap: var(--sp-1); margin-inline: auto; }
@media (min-width: 1100px) { .ssz-nav { display: flex; } }

.ssz-nav__link {
  position: relative;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  white-space: nowrap;
  transition: var(--t-fast);
}
.ssz-nav__link:hover { color: var(--text-primary); background: var(--bg-surface-2); }
.ssz-nav__link.is-active { color: var(--brand); font-weight: var(--fw-semibold); }
.ssz-nav__link.is-active::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 2px;
  transform: translateX(-50%);
  width: 18px; height: 2.5px;
  border-radius: var(--r-pill);
  background: var(--grad-brand);
}

.ssz-nav__actions { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
@media (min-width: 1100px) { .ssz-nav__actions { margin-left: 0; } }

.icon-btn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-secondary);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: var(--t-fast);
  flex-shrink: 0;
}
.icon-btn:hover {
  color: var(--brand);
  border-color: var(--brand);
  background: var(--brand-soft);
  transform: translateY(-1px);
}
.icon-btn svg { width: 19px; height: 19px; }

.ssz-burger { display: grid; }
@media (min-width: 1100px) { .ssz-burger { display: none; } }

/* ---------- Mobile drawer ---------- */
.ssz-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(340px, 88vw);
  z-index: var(--z-drawer);
  background: var(--glass-bg-solid);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border-left: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-xl);
  transform: translateX(102%);
  visibility: hidden;
  transition: transform var(--dur-base) var(--ease-out),
              visibility 0s linear var(--dur-base);
  display: flex; flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ssz-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform var(--dur-base) var(--ease-out), visibility 0s;
}
.ssz-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky; top: 0;
  background: inherit;
}
.ssz-drawer__body { padding: var(--sp-4) var(--sp-5) var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-1); }
.ssz-drawer__link {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-3);
  border-radius: var(--r-sm);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  transition: var(--t-fast);
}
.ssz-drawer__link:hover, .ssz-drawer__link.is-active {
  background: var(--brand-soft); color: var(--brand);
}
.ssz-drawer__section {
  margin-top: var(--sp-5); margin-bottom: var(--sp-2);
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--text-muted);
}
.ssz-backdrop {
  position: fixed; inset: 0;
  z-index: var(--z-backdrop);
  background: rgba(2, 6, 23, 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base);
}
.ssz-backdrop.is-open { opacity: 1; visibility: visible; }
body.is-locked { overflow: hidden; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.ssz-footer {
  background: var(--bg-surface);
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--sp-16);
  margin-top: var(--sp-16);
}
.ssz-footer__grid {
  display: grid;
  gap: var(--sp-10);
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .ssz-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px)  { .ssz-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; } }

.ssz-footer :is(h2,h6) {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp-4);
}
.ssz-footer__links { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.ssz-footer__links a { color: var(--text-secondary); font-size: var(--fs-sm); transition: var(--t-fast); }
.ssz-footer__links a:hover { color: var(--brand); transform: translateX(3px); display: inline-block; }
.ssz-footer__bottom {
  margin-top: var(--sp-12);
  padding-block: var(--sp-6);
  border-top: 1px solid var(--border-subtle);
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  align-items: center; justify-content: space-between;
  font-size: var(--fs-sm); color: var(--text-muted);
}
.social-row { display: flex; gap: var(--sp-3); }
.social-btn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--bg-surface-2);
  color: var(--text-secondary);
  transition: var(--t-base);
}
.social-btn:hover { background: var(--grad-brand); color: #fff; transform: translateY(-3px); box-shadow: var(--shadow-brand); }

/* ---------- Floating WhatsApp / back-to-top ----------

   Do dikkatein theek ki gayi hain:

   1) Ye teen gol button (chatbot, WhatsApp, upar jao) 52px chaude aur kul
      ~180px oonche hote hain, aur poore page par neeche-dayein chipke rehte
      hain. Kisi page ne inke liye jagah nahi chhodi thi — isliye admission
      form ke "Submit" button ke daayen kinare par chat ka button baith jaata
      tha. Ab body ke neeche utni jagah chhod di gayi hai.

   2) index.html me `viewport-fit=cover` likha hai, yaani page phone ke
      gesture bar ke neeche tak khinchta hai — par poore project me kahin
      `env(safe-area-inset-*)` tha hi nahi. Iska matlab: WhatsApp wala button
      Android ke gesture bar ke andar aadha ghusa rehta tha aur swipe use
      phone kha jaata tha. Ab wo bhi jud gaya.
   ---------------------------------------------------------------------- */
:root { --fab-reserve: 76px; }

/* Jagah footer par chhodi gayi hai, body par nahi — kyunki .fab-stack khud
   footer.html ke andar hai. Dashboard me footer hota hi nahi, isliye wahan
   na FAB aata hai na ye jagah lagti hai. Ek hi niyam, dono jagah sahi. */
.ssz-footer { padding-bottom: calc(var(--fab-reserve) + env(safe-area-inset-bottom, 0px)); }

.fab-stack {
  position: fixed;
  right: clamp(0.85rem, 3vw, 1.5rem);
  bottom: calc(clamp(0.85rem, 3vw, 1.5rem) + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-sticky);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.fab {
  width: 52px; height: 52px;
  border: none;
  border-radius: var(--r-pill);
  display: grid; place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  transition: var(--t-base);
}
.fab:hover { transform: translateY(-4px) scale(1.05); }
.fab--whatsapp { background: #25d366; color: #fff; }
.fab--top { background: var(--bg-surface); color: var(--text-secondary); border: 1px solid var(--border-subtle); opacity: 0; visibility: hidden; }
.fab--top.is-visible { opacity: 1; visibility: visible; }

/* Form bharte waqt ye hat jaate hain — dekhein js/components/navbar.js ka
   initFabDodge(). Bilkul gayab nahi karte (display:none se wapas aate waqt
   jhatka lagta hai); halke aur neeche khisak jaate hain, aur tap lena band
   kar dete hain taaki khaane par ungli seedhe khaane par hi lage. */
.fab-stack.is-dodging {
  opacity: .12;
  transform: translateY(14px);
  pointer-events: none;
}
.fab-stack { transition: opacity .18s ease, transform .18s ease; }

/* ---------- Page header (inner pages) ---------- */
.page-hero {
  padding-top: calc(var(--navbar-h) + var(--sp-12));
  padding-bottom: var(--sp-12);
  background: var(--bg-hero);
  border-bottom: 1px solid var(--border-subtle);
  text-align: center;
}
.breadcrumb-ssz {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-top: var(--sp-3);
}
.breadcrumb-ssz a { color: var(--text-secondary); }
.breadcrumb-ssz span { color: var(--text-muted); }
.breadcrumb-ssz > span[aria-hidden="true"] { opacity: .55; }


/* --------------------------------------------------------------------------
   Phone par navbar me kya rahega

   Pehle chhoti screen par navbar me ye the: logo, search, install, bhasha,
   theme, menu — chhe cheezein — aur "Apply Now" chhupa hua tha. Yaani jagah
   un cheezon ne le rakhi thi jo mahine me ek baar chhui jaati hain, aur jo
   roz chahiye wahi gayab tha.

   Ab ulta hai: phone par sirf logo, theme, Apply aur menu. Search aur
   bhasha drawer me chale gaye — dono wahan pehle se hain.
   -------------------------------------------------------------------------- */
.ssz-cta-apply { display: inline-flex !important; }
.ssz-cta-apply__short { display: none; }

@media (max-width: 420px) {
  /* 420px se neeche sirf "Apply" — "Apply Now" wahan toot jaata hai. */
  .ssz-cta-apply__long { display: none; }
  .ssz-cta-apply__short { display: inline; }
  .ssz-cta-apply { padding-inline: .9rem; }
  .ssz-cta-apply svg { display: none; }
}

@media (max-width: 575.98px) {
  .ssz-nav__actions [data-search-open],
  .ssz-nav__actions .lang-pick__wrap { display: none !important; }
}

.ssz-hide-xs     { display: none !important; }
.ssz-hide-mobile { display: none !important; }
@media (min-width: 576px) { .ssz-hide-xs     { display: inline-flex !important; } }
@media (min-width: 768px) { .ssz-hide-mobile { display: inline-flex !important; } }
.ssz-only-mobile { display: block; }
@media (min-width: 768px) { .ssz-only-mobile { display: none; } }

/* Pages with a coloured hero behind the navbar (e.g. course detail) need the
   navbar readable from the first frame, not only after scrolling. */
body[data-nav="solid"] .ssz-navbar {
  background: var(--glass-bg-solid);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  border-bottom-color: var(--border-subtle);
  box-shadow: var(--shadow-sm);
}