/* ==========================================================================
   Xiva Prezident maktabi — umumiy uslublar
   Tartib: 1 baza · 2 a11y · 3 layout · 4 tipografika · 5 tugmalar ·
           6 placeholder · 7 header · 8 sahifa bloklari · 9 futer · 10 animatsiya
   ========================================================================== */

/* --- 1. BAZA ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  /* Bitta oʻzgaruvchi butun rem shkalani boshqaradi; foiz — brauzer
     sozlamasini (foydalanuvchi shrift kattaligini) saqlab qoladi. */
  font-size: calc(100% * var(--font-scale));
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;           /* xavfsizlik chorasi; sticky ni buzmaydi */
  scroll-behavior: smooth;
  scroll-padding-top: 8.5rem;   /* sticky header balandligi (utility + topbar) */
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--w-read);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  text-wrap: pretty;
}

img, svg, video, figure { max-width: 100%; }
img, video { height: auto; display: block; }
svg { flex: none; }

a { color: inherit; }
a:hover { text-decoration-thickness: 2px; }

ul, ol { padding: 0; list-style: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }

hr { border: 0; border-top: 1px solid var(--border); }

/* Komponent klasslari (.card{display:flex} kabi) UA ning [hidden] qoidasidan
   ustun turadi — shuning uchun global majburiy yashirish qoidasi kerak. */
[hidden] { display: none !important; }

::selection { background: var(--accent); color: var(--accent-fg); }

/* --- 2. A11Y ------------------------------------------------------------ */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
.on-band :focus-visible { outline-color: var(--focus-on-band); }

.skip-link {
  position: fixed;
  top: var(--sp-2);
  left: var(--sp-2);
  z-index: 200;
  transform: translateY(-200%);
  background: var(--accent);
  color: var(--accent-fg);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-sm);
  font-weight: var(--w-announce);
  text-decoration: none;
}
.skip-link:focus { transform: translateY(0); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* --- 3. LAYOUT ---------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2rem);
}
.wrap-narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--sp-8); }
.section--tight { padding-block: var(--sp-7); }
.section--alt { background: var(--bg-alt); border-block: 1px solid var(--border-soft); }

/* Barcha grid min() bilan — 1.5x shriftda ham gorizontal scroll bermaydi */
.grid { display: grid; gap: var(--sp-5); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.grid--subjects { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: var(--sp-4); }

.split {
  display: grid;
  gap: clamp(var(--sp-5), 4vw, var(--sp-7));
  align-items: center;
}
@media (min-width: 60rem) {
  .split { grid-template-columns: 1.05fr 0.95fr; }
  .split--media-first > :first-child { order: 2; }
}

/* --- 4. TIPOGRAFIKA ----------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--w-announce);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-h);
  color: var(--fg);
  text-wrap: balance;
  overflow-wrap: break-word;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); }

.display { font-size: var(--fs-display); letter-spacing: var(--ls-display); hyphens: auto; }
.lead { font-size: var(--fs-lead); color: var(--fg-muted); max-width: 46ch; }
.small { font-size: var(--fs-small); }
.muted { color: var(--fg-muted); }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-caption);
  font-weight: var(--w-emph);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--accent-text);
}
.eyebrow::before {
  content: "";
  inline-size: 1.75rem;
  block-size: 3px;
  background: var(--accent-line);
  border-radius: 2px;
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-5);
  align-items: end;
  justify-content: space-between;
  margin-block-end: var(--sp-6);
}
.section-head > div { min-width: min(100%, 20rem); }
.section-head h2 { margin-block-start: var(--sp-3); }

/* --- 5. TUGMALAR VA CHIPLAR --------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: var(--fs-ui);
  font-weight: var(--w-announce);
  letter-spacing: var(--ls-ui);
  text-decoration: none;
  text-align: center;
  transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--accent-fg); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-brand { background: var(--brand); color: var(--brand-fg); }
.btn-brand:hover { background: var(--brand-strong); }
.btn-outline { border-color: var(--border-strong); color: var(--fg); background: var(--surface); }
.btn-outline:hover { border-color: var(--brand); background: var(--brand-surface); }
.btn-quiet { color: var(--fg-muted); }
.btn-quiet:hover { color: var(--fg); background: var(--surface-2); }
.btn-lg { min-height: 3rem; padding-inline: var(--sp-6); font-size: var(--fs-body); }
.btn-sm { min-height: 2.25rem; padding-inline: var(--sp-4); font-size: var(--fs-small); }
.btn-block { width: 100%; }

.icon-btn {
  display: inline-grid;
  place-items: center;
  min-width: var(--tap);
  min-height: var(--tap);
  border-radius: var(--radius-sm);
  color: inherit;
  transition: background-color .15s ease;
}
.icon-btn:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.icon { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.icon--sm { width: 1em; height: 1em; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 2.25rem;
  padding: var(--sp-1) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--fg-muted);
  font-size: var(--fs-small);
  font-weight: var(--w-emph);
  text-decoration: none;
}
.chip:hover { border-color: var(--brand); color: var(--fg); }
.chip[aria-pressed="true"], .chip.is-active {
  background: var(--brand); border-color: var(--brand); color: var(--brand-fg);
}

.tag {
  display: inline-block;
  padding: 2px var(--sp-3);
  border-radius: var(--radius-xs);
  background: var(--brand-surface);
  color: var(--brand);
  font-size: var(--fs-caption);
  font-weight: var(--w-emph);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

/* --- 6. PLACEHOLDER (rasm / video) -------------------------------------- */
.ph {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: var(--ph-ratio, 16 / 9);
  min-height: 4rem;
  padding: var(--sp-4);
  background: var(--ph-bg);
  border: 1px dashed var(--ph-border);
  border-radius: var(--radius-md);
  color: var(--ph-fg);
  overflow: hidden;
}
.ph::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg, var(--ph-stripe) 0 1px, transparent 1px 11px);
  pointer-events: none;
}
.ph-body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  text-align: center;
  max-width: 24ch;
}
.ph-label { font-size: var(--fs-small); font-weight: var(--w-emph); line-height: var(--lh-snug); }
.ph-ratio {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.04em;
  color: var(--fg-muted);   /* kichik matn — 4.5:1 dan past boʻlmasligi uchun */
}
.ph--video .ph-play {
  display: grid;
  place-items: center;
  width: 3.5rem; height: 3.5rem;
  border-radius: 50%;
  background: var(--brand);
  color: var(--brand-fg);
  margin-block-end: var(--sp-2);
}
.ph--square { --ph-ratio: 1 / 1; }
.ph--photo { --ph-ratio: 4 / 3; }
.ph--wide { --ph-ratio: 21 / 9; }
.ph--logo { --ph-ratio: 3 / 1; }

/* «Matn joy egallovchi» — inline placeholder */
.ph-inline {
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--fg-muted);
  background: var(--surface-2);
  border-bottom: 1px dashed var(--border-strong);
  padding: 0 0.35em;
  border-radius: 2px;
  white-space: nowrap;
}

/* --- 7. HEADER ---------------------------------------------------------- */
/* Til / tema / matn kattaligi boshqaruvlari doimo koʻrinib turishi shart —
   shuning uchun utility polosasi bilan birga butun header sticky. */
.site-header { position: sticky; top: 0; z-index: 60; background: var(--surface); }

/* Past balandlikdagi ekranlarda (yoki 1.5x shriftda gorizontal telefonda)
   sticky header kontentni bosib qolmasligi uchun oddiy oqimga qaytadi. */
@media (max-height: 34rem) {
  .site-header { position: relative; }
  .topbar { position: relative; }
}

/* 7a. Utility polosasi (koʻk band) */
.utility {
  background: var(--band-bg);
  color: var(--band-fg);
  font-size: var(--fs-small);
  border-block-end: 1px solid var(--band-border);
}
.utility-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-5);
  padding-block: var(--sp-2);
}
.utility-contacts { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }
.utility-contacts li { display: flex; align-items: center; gap: var(--sp-2); }
.utility-contacts a { text-decoration: none; }
.utility-contacts a:hover { text-decoration: underline; }
.utility-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); margin-inline-start: auto; }
.socials { display: flex; gap: var(--sp-1); }
.socials .icon-btn { min-width: 2.25rem; min-height: 2.25rem; }

.ctl-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.ctl-sep { width: 1px; align-self: stretch; background: var(--band-border); }

/* Til tanlagich */
.lang { position: relative; }
.lang-btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 2.25rem; padding-inline: var(--sp-3);
  border: 1px solid var(--band-border); border-radius: var(--radius-sm);
  color: inherit; font-size: var(--fs-small); font-weight: var(--w-emph);
}
.lang-btn:hover { background: var(--band-hover); }
.lang-code { font-family: var(--font-mono); letter-spacing: 0.06em; }
.lang-menu {
  position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 6px);
  min-width: 12rem; padding: var(--sp-2);
  background: var(--surface); color: var(--fg);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 80;
}
.lang-menu[hidden] { display: none; }
.lang-menu li + li { margin-block-start: 2px; }
.lang-opt {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  width: 100%; min-height: var(--tap); padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm); font-size: var(--fs-ui); text-align: start;
}
.lang-opt:hover { background: var(--surface-2); }
.lang-opt[aria-checked="true"] { background: var(--brand-surface); color: var(--brand); font-weight: var(--w-announce); }
.lang-opt .lang-code { color: var(--fg-faint); font-size: var(--fs-caption); }

/* Tema segmenti */
.seg {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--band-border);
  border-radius: var(--radius-sm);
}
.seg button {
  display: grid; place-items: center;
  min-width: 2rem; min-height: 2rem;
  border-radius: var(--radius-xs);
  color: inherit;
}
.seg button:hover { background: var(--band-hover); }
.seg button[aria-checked="true"] { background: var(--band-fg-strong); color: var(--band-bg); }

/* Shrift kattaligi A− A A+ */
.fontsize { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--band-border); border-radius: var(--radius-sm); padding: 2px; }
.fontsize button {
  min-width: 2rem; min-height: 2rem;
  border-radius: var(--radius-xs);
  color: inherit; font-weight: var(--w-announce); line-height: 1;
}
.fontsize button:hover:not([disabled]) { background: var(--band-hover); }
.fontsize button[disabled] { opacity: .4; cursor: default; }
.fs-dec { font-size: 0.8125rem; }
.fs-reset { font-size: 0.9375rem; }
.fs-inc { font-size: 1.0625rem; }

/* 7b. Sticky topbar */
.topbar {
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-block-end: 1px solid var(--border);
}
.topbar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-5);
  padding-block: var(--sp-3);
}

.brand { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; color: var(--emblem-fg); }
.brand-emblem { width: 2.75rem; height: 2.75rem; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-name {
  font-family: var(--font-display);
  font-size: var(--fs-ui);
  font-weight: var(--w-announce);
  color: var(--fg);
  letter-spacing: var(--ls-h);
}
.brand-sub { font-size: var(--fs-caption); color: var(--fg-muted); letter-spacing: 0.02em; }

.mainnav { flex: 1 1 auto; min-width: 0; }
.mainnav ul {
  display: flex;
  gap: var(--sp-1);
  overflow-x: auto;            /* tor ekranda gorizontal chiziq — sahifa emas */
  scrollbar-width: thin;
  padding-block: 2px;
}
.mainnav a {
  display: inline-flex; align-items: center;
  min-height: var(--tap);
  padding-inline: var(--sp-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-ui);
  font-weight: var(--w-emph);
  color: var(--fg-muted);
  text-decoration: none;
  white-space: nowrap;
}
.mainnav a:hover { color: var(--fg); background: var(--surface-2); }
.mainnav a[aria-current] {
  color: var(--fg);
  box-shadow: inset 0 -3px 0 var(--accent-line);
  border-radius: var(--radius-xs);
}
.topbar-actions { display: flex; align-items: center; gap: var(--sp-2); margin-inline-start: auto; }

/* Qidiruv */
.search-row { border-block-end: 1px solid var(--border); background: var(--surface-2); }
.search-row[hidden] { display: none; }
.search-form { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding-block: var(--sp-3); }
.field {
  flex: 1 1 14rem;
  min-width: 0;
  min-height: var(--tap);
  padding: var(--sp-2) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--fs-ui);
}
.field::placeholder { color: var(--fg-muted); }
.field:focus-visible { border-color: var(--focus); }

/* --- 8. SAHIFA BLOKLARI ------------------------------------------------- */

/* Hero */
.hero {
  position: relative;
  padding-block: clamp(var(--sp-6), 5vw, var(--sp-8));
  background: var(--bg-alt);
  border-block-end: 1px solid var(--border-soft);
  overflow: hidden;
}
/* Ichan-Qalʼa koshin panjarasi — yagona bezak detali, 0.055 shaffoflik */
.hero::before {
  content: "";
  position: absolute;
  inset-block-start: -20%;
  inset-inline-end: -10%;
  width: min(48rem, 70%);
  aspect-ratio: 1;
  background-image:
    linear-gradient(45deg, var(--lattice-ink) 25%, transparent 25% 75%, var(--lattice-ink) 75%),
    linear-gradient(-45deg, var(--lattice-ink) 25%, transparent 25% 75%, var(--lattice-ink) 75%);
  background-size: 3.5rem 3.5rem;
  /* mask — rang emas, faqat alfa kanali; token talab qilinmaydi */
  mask-image: radial-gradient(circle at 70% 30%, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(circle at 70% 30%, #000, transparent 70%);
  pointer-events: none;
}
.hero > .wrap { position: relative; }
.hero-copy > * + * { margin-block-start: var(--sp-4); }
.hero-copy .display { margin-block-start: var(--sp-3); }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-block-start: var(--sp-5); }
.hero-facts {
  display: flex; flex-wrap: wrap; gap: var(--sp-5);
  margin-block-start: var(--sp-6);
  padding-block-start: var(--sp-5);
  border-block-start: 1px solid var(--border);
}
.hero-facts div { min-width: min(100%, 8rem); }
.hero-facts dt { font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--fg-muted); }
.hero-facts dd { margin: 0; font-family: var(--font-display); font-size: var(--fs-h4); font-weight: var(--w-announce); }

/* Kartalar */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.card--link { text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.card--link:hover { border-color: var(--brand-border); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card-icon {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: var(--radius-md);
  background: var(--brand-surface);
  color: var(--brand);
}
.card-icon .icon { width: 1.5rem; height: 1.5rem; }

/* Yangilik kartalari */
.news-card { padding: 0; overflow: hidden; }
.news-card .ph { border: 0; border-radius: 0; border-block-end: 1px solid var(--border); }
/* Обложке задан кадр 16:9, как у заглушки рядом. Без него вертикальные портреты
   с их родными пропорциями растягивали карточку втрое, и ряд шёл вразнобой.
   Кадрируем чуть выше середины — на портретах лицо в верхней половине. */
.news-card-cover {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center 35%;
  border-block-end: 1px solid var(--border);
}
.news-card-body { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); }
.news-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4);
  font-size: var(--fs-caption); color: var(--fg-muted);
}
.news-meta span { display: inline-flex; align-items: center; gap: var(--sp-1); }
.news-card h3 { font-size: var(--fs-h4); }
.news-card:hover h3 { text-decoration: underline; text-underline-offset: 3px; }

/* Fanlar va toʻgaraklar */
.subject {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: var(--tap);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--fs-ui);
  font-weight: var(--w-emph);
  text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease;
}
.subject:hover { border-color: var(--brand-border); background: var(--brand-surface); }
.subject .icon { width: 1.4rem; height: 1.4rem; color: var(--brand); }
.subject span { min-width: 0; overflow-wrap: break-word; }

/* Bitiruvchilar */
.grad { padding: 0; overflow: hidden; text-align: start; }
.grad .ph { border: 0; border-radius: 0; }
.grad-body { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-4); }
.grad-name { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: var(--w-announce); }
.grad-uni { font-size: var(--fs-small); color: var(--fg-muted); }
.grad-year { font-size: var(--fs-caption); color: var(--fg-muted); font-family: var(--font-mono); }

/* Akkreditatsiya polosasi */
.accred { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); align-items: center; }
.accred-item { display: flex; flex-direction: column; gap: var(--sp-3); text-align: center; }
.accred-item .ph { --ph-ratio: 3 / 1; }
.accred-name { font-size: var(--fs-small); font-weight: var(--w-emph); }
.accred-note { font-size: var(--fs-caption); color: var(--fg-muted); }

/* Galereya */
.gallery { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.gallery .ph { border-radius: var(--radius-md); --ph-ratio: 4 / 3; }
/* Ustun/qator span ishlatilmaydi: auto-fit grid da span tor ekranda
   implicit ustun yaratib gorizontal scroll berardi. */
.gallery-tall { --ph-ratio: 4 / 3; }

/* Настоящие снимки в галерее.
   Плейсхолдеры макета задавали высоту через --ph-ratio, у обычной ссылки
   с картинкой такой высоты нет — блок схлопывался в ноль и секция выглядела пустой. */
.gallery > a {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
}
.gallery > a.gallery-tall { aspect-ratio: 3 / 4; }
.gallery > a img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gallery > a:hover img { transform: scale(1.03); }
.gallery > a img { transition: transform .3s ease; }
@media (prefers-reduced-motion: reduce) { .gallery > a img { transition: none; } }

/* Maʼlumot roʻyxati (maktab haqida) */
.factlist { display: grid; gap: var(--sp-3); margin-block-start: var(--sp-5); }
.factlist li { display: flex; gap: var(--sp-3); align-items: start; }
.factlist .icon { color: var(--accent-text); margin-block-start: 0.25rem; }

/* Breadcrumb */
.crumbs { display: flex; flex-wrap: wrap; gap: var(--sp-2); font-size: var(--fs-small); color: var(--fg-muted); padding-block: var(--sp-4); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs li + li::before { content: "/"; margin-inline-end: var(--sp-2); color: var(--fg-muted); }
.crumbs li { display: inline-flex; gap: var(--sp-2); }

/* Sahifa sarlavhasi */
.page-head { background: var(--bg-alt); border-block-end: 1px solid var(--border); padding-block: var(--sp-6); }
.page-head h1 { margin-block-start: var(--sp-3); max-width: 22ch; }

/* --- 9. FUTER ----------------------------------------------------------- */
.site-footer { background: var(--band-bg); color: var(--band-fg); margin-block-start: var(--sp-8); }
.footer-main { display: grid; gap: var(--sp-6); padding-block: var(--sp-7); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.footer-brand { display: flex; flex-direction: column; gap: var(--sp-4); }
.footer-brand .brand-emblem { width: 4rem; height: 4rem; }
.footer-brand .brand-name, .footer-brand .brand-sub { color: var(--band-fg-strong); }
.footer-col h3 { font-size: var(--fs-ui); color: var(--band-fg-strong); margin-block-end: var(--sp-3); letter-spacing: var(--ls-caps); text-transform: uppercase; font-family: var(--font-body); font-weight: var(--w-announce); }
.footer-col li + li { margin-block-start: var(--sp-2); }
.footer-col a { font-size: var(--fs-small); text-decoration: none; display: inline-flex; align-items: center; min-height: 1.75rem; }
.footer-col a:hover { text-decoration: underline; color: var(--band-fg-strong); }
.footer-contact li { display: flex; gap: var(--sp-2); align-items: start; font-size: var(--fs-small); margin-block-start: var(--sp-2); }
.footer-map { margin-block-start: var(--sp-4); }
.footer-map .ph { --ph-bg: var(--band-ph-bg); --ph-border: var(--band-border); --ph-fg: var(--band-fg); --ph-stripe: var(--band-ph-stripe); }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5);
  align-items: center; justify-content: space-between;
  padding-block: var(--sp-4);
  border-block-start: 1px solid var(--band-border);
  font-size: var(--fs-caption);
}
.footer-bottom .socials .icon-btn { min-width: 2.25rem; min-height: 2.25rem; }
.gov-links { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
.gov-links a { text-decoration: none; }
.gov-links a:hover { text-decoration: underline; }
.updated { font-family: var(--font-mono); letter-spacing: 0.02em; }

/* --- 10. ANIMATSIYA ----------------------------------------------------- */
/* Muhim qoida: kontent HECH QACHON animatsiya ortida qolib ketmaydi.
   Shuning uchun bu yerda scroll-kuzatuvchi ham, doimiy `opacity: 0`
   holati ham yoʻq. Faqat `animation-fill-mode: backwards` bilan kirish
   animatsiyasi ishlatiladi: from-holat faqat kechikish davomida amal
   qiladi, animatsiya tugagach element oʻzining oddiy (koʻrinadigan)
   holatiga qaytadi. Skript ishlamasa ham matn joyida turadi. */
@keyframes reveal-in {
  from { opacity: 0; transform: translateY(12px); }
}
@media (prefers-reduced-motion: no-preference) {
  .reveal { animation: reveal-in 520ms cubic-bezier(.2, .6, .2, 1) backwards; }
  .reveal:nth-child(2) { animation-delay: 70ms; }
  .reveal:nth-child(3) { animation-delay: 140ms; }
  .reveal:nth-child(4) { animation-delay: 210ms; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Toast (kabinetdagi saqlash/eksport tasdigʻi) */
.toast {
  position: fixed;
  inset-block-end: var(--sp-5);
  inset-inline-start: 50%;
  translate: -50% 0;
  z-index: 150;
  display: flex; align-items: center; gap: var(--sp-3);
  max-width: min(90vw, 28rem);
  padding: var(--sp-3) var(--sp-5);
  background: var(--fg);
  color: var(--bg);
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  box-shadow: var(--shadow-lg);
}
.toast[hidden] { display: none; }

/* ==========================================================================
   Текстовые страницы: «О школе», «Приём», «Обучение», «Наша гордость».
   В макете таких страниц не было — там были только главная, новости и кабинет.
   ========================================================================== */
.prose { max-width: 68ch; }
.prose > * + * { margin-block-start: var(--sp-4); }
.prose h2 {
  font-family: var(--font-display);
  font-size: var(--fs-3);
  line-height: 1.25;
  margin-block-start: var(--sp-8);
  padding-block-start: var(--sp-5);
  border-block-start: 1px solid var(--border);
}
.prose h2:first-child { margin-block-start: 0; padding-block-start: 0; border: 0; }
.prose h3 { font-size: var(--fs-2); margin-block-start: var(--sp-6); }
.prose p { color: var(--fg); }
.prose .lead {
  font-size: var(--fs-2);
  line-height: 1.5;
  color: var(--fg-strong);
}
.prose ul, .prose ol { padding-inline-start: var(--sp-5); display: grid; gap: var(--sp-2); }
.prose li { color: var(--fg); }
.prose li::marker { color: var(--accent-text); }
.prose strong { color: var(--fg-strong); font-weight: 600; }
.prose a { color: var(--accent-text); }
.prose .btn { display: inline-flex; }
.prose .muted { color: var(--fg-muted); font-size: var(--fs-small); }

/* Снимки внутри текстовых страниц */
.page-figure { margin-block: var(--sp-6); }
.page-figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  display: block;
  background: var(--bg-subtle);
}
.page-figure figcaption {
  margin-block-start: var(--sp-2);
  font-size: var(--fs-small);
  color: var(--fg-muted);
}


/* Снимок в верхнем блоке вместо видео-плейсхолдера */
.hero-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
  display: block;
  background: var(--bg-subtle);
}

/* Снимок в блоке «О школе» */
.about-photo { margin: 0; }
.about-photo img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  display: block;
  background: var(--bg-subtle);
}
.about-photo figcaption {
  margin-block-start: var(--sp-2);
  font-size: var(--fs-small);
  color: var(--fg-muted);
}

/* Ролик в верхнем блоке.
   preload="none" в разметке — до нажатия скачивается только постер.
   На этом хостинге (19–140 КБ/с) это разница между мгновенной страницей
   и минутой ожидания. */
.hero-video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  display: block;
  background: var(--bg-subtle);
  object-fit: cover;
}

/* Карта в подвале — своя картинка вместо внешнего виджета */
.footer-map-link { display: block; }
.footer-map-link img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  display: block;
  background: var(--bg-subtle);
}
.footer-map-link:hover img { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Постраничная навигация ─────────────────────────────────────────────
   Своя вёрстка: стандартный шаблон Laravel рассчитан на Tailwind, которого
   в проекте нет, и без него выводил оба блока разом и без стилей.
   Номера прячутся на узком экране, стрелки остаются всегда.            */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.pager-step {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 2.25rem;
  padding-inline: var(--sp-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--fg);
  font-size: var(--fs-small);
  font-weight: var(--w-announce);
  text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease;
}
.pager-step:hover { border-color: var(--brand); background: var(--brand-surface); }
.pager-step.is-off { opacity: .4; pointer-events: none; }
.pager-back { transform: scaleX(-1); }

.pager-nums {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pager-num {
  display: inline-grid;
  place-items: center;
  min-width: 2.25rem;
  min-height: 2.25rem;
  padding-inline: var(--sp-2);
  border-radius: var(--radius-sm);
  color: var(--fg-muted);
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.pager-num:hover { background: var(--surface-2); color: var(--fg); }
.pager-num.is-now {
  background: var(--brand);
  color: var(--brand-fg);
  font-weight: var(--w-announce);
}
.pager-gap { display: inline-grid; place-items: center; min-width: 1.5rem; color: var(--fg-muted); }

/* Счётчик «2 / 64» — замена номерам там, где они не помещаются. */
.pager-count {
  display: none;
  color: var(--fg-muted);
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 40rem) {
  .pager-nums { display: none; }
  .pager-count { display: inline; }
  .pager-word { display: none; }
  .pager-step { padding-inline: var(--sp-3); }
}