/*
Theme Name: KazGeo
Theme URI: https://kazgeo.kz
Author: KazGeo
Description: Custom theme for Kazakh Geographical Society (KazGeo)
Version: 1.0
Text Domain: kazgeo
*/

:root {
  --navy: #0d1b2a;
  --ink: #10233f;
  --blue: #1e74e0;
  --blue-dark: #0b1f3a;
  --teal: #0894a5;
  --gold: #c9973e;
  /* The exact blue from the KazGeo logo's circular background, sampled
     from assets/img/logo.png (#00B7F6 was the dominant pixel colour).
     Used for the brand-accent touches the logo itself carries — primary
     buttons, the hero's "Больше." accent word, the ticker bar, carousel
     nav circles — kept separate from --teal (footer wave/background
     texture) and --blue (still used elsewhere) since only these specific
     elements were asked to match the logo, not a global recolour. */
  --sky: #00b7f6;
  --sky-dark: #0092c7;
  --gray-bg: #f4f6f8;
  --white: #ffffff;
  --cream: #f9f2e7;
  --parchment-bg: #ecd6ae;
  --muted: #5b6472;
  --font-display: 'Unbounded', 'Manrope', sans-serif;
  --font-serif: 'PT Serif', Georgia, serif;
}

/* Kazakh-only Cyrillic letters (Ә Ғ Қ Ң Ө Ұ Ү Һ І) render broken in several
   of the site's fonts — not just Unbounded (previously the only one fixed
   here), but also bold Manrope (the base body font: e.g. "Ң" draws the "Н"
   at full weight but its descender tail in a thin, unrelated style), PT
   Serif, and Caveat, all of which simply lack real glyphs for these letters.
   Rubik used to be the family routed through here — it drew these letters
   correctly, but the client found it too bold/heavy. Inter also fully
   supports Kazakh (its cyrillic/cyrillic-ext subsets cover all of these
   letters) at a lighter, more neutral weight, so Kazakh pages route every
   text style through it instead of patching each broken font individually. */
html[lang="kk"] {
  --font-display: 'Inter', 'Manrope', sans-serif;
  --font-serif: 'Inter', 'Manrope', sans-serif;
}
html[lang="kk"] body {
  font-family: 'Inter', 'Manrope', 'Arial', sans-serif;
}
html[lang="kk"] .hero-tagline,
html[lang="kk"] .hero-explore-label span,
html[lang="kk"] .hero-caption,
html[lang="kk"] .globe-marker__label {
  font-family: var(--font-display);
  font-style: normal;
}

/* The html[lang="kk"] swap above only covers pages whose whole language is
   Kazakh — but these same letters also show up inside ru/en content (a
   Kazakh title or proper noun quoted on a Russian page, e.g. "24 сағат
   табиғат құшағында"), where Manrope/Unbounded/PT Serif/Caveat are still
   in use and still draw them broken. Rather than swap the whole page's
   typography there too, borrow just these glyphs from Rubik's
   cyrillic-ext file (same file already used above) for each of the four
   buggy families, restricted to only the broken code points via
   unicode-range — every other character keeps using the real font. */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubik/v31/iJWKBXyIfDnIV7nMrXyi0A.woff2) format('woff2');
  unicode-range: U+0406, U+0456, U+0492-0493, U+049A-049B, U+04A2-04A3, U+04AE-04B1, U+04BA-04BB, U+04D8-04D9, U+04E8-04E9;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubik/v31/iJWKBXyIfDnIV7nMrXyi0A.woff2) format('woff2');
  unicode-range: U+0406, U+0456, U+0492-0493, U+049A-049B, U+04A2-04A3, U+04AE-04B1, U+04BA-04BB, U+04D8-04D9, U+04E8-04E9;
}
@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubik/v31/iJWKBXyIfDnIV7nMrXyi0A.woff2) format('woff2');
  unicode-range: U+0406, U+0456, U+0492-0493, U+049A-049B, U+04A2-04A3, U+04AE-04B1, U+04BA-04BB, U+04D8-04D9, U+04E8-04E9;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubik/v31/iJWKBXyIfDnIV7nMrXyi0A.woff2) format('woff2');
  unicode-range: U+0406, U+0456, U+0492-0493, U+049A-049B, U+04A2-04A3, U+04AE-04B1, U+04BA-04BB, U+04D8-04D9, U+04E8-04E9;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  margin: 0;
  font-family: 'Manrope', 'Arial', sans-serif;
  color: var(--ink);
  /* Seamless procedural paper-grain texture (feTurbulence), tiling infinitely
     behind everything. The illustrated parchment artwork itself lives on
     .site-bg-fixed (see below), not here — background-attachment:fixed on
     body/html is unreliable once html has any non-visible overflow (ours has
     overflow-x:hidden), which makes fixed backgrounds scroll with the page
     in some browsers instead of staying pinned to the viewport. A dedicated
     position:fixed div sidesteps that quirk entirely. */
  background-color: var(--parchment-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='matrix' values='0 0 0 0 0.75 0 0 0 0 0.62 0 0 0 0 0.42 0.28 0.28 0.28 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Fixed backdrop: pinned to the browser window, stretched to full width,
   sits behind every section (z-index:-1) so it reads as a constant backdrop
   no matter how far the page scrolls. The front page's own opaque full-bleed
   hero photo naturally covers it for the hero's height, so it only becomes
   visible once the hero has scrolled past — inner pages have no such hero,
   so it shows right from the top. */
.site-bg-fixed {
  position: fixed;
  inset: 0;
  z-index: -1;
  /* background-image is set inline in header.php with a filemtime cache-buster */
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
  pointer-events: none;
}
/* The artwork would mostly be cropped out of a narrow viewport and adds
   weight for little benefit there, so hide it below ~900px — the tiling
   grain texture on body keeps showing regardless. */
@media (max-width: 900px) {
  .site-bg-fixed { display: none; }
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }

.container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ===== Header ===== */
/* position:static on purpose — the header used to switch to position:fixed
   once scrolled, pinning it to the top of the viewport. That's explicitly
   not wanted any more: the header just scrolls away with the rest of the
   page like normal content, with one constant appearance the whole time
   it's visible (no more scroll-triggered padding/background snap, which
   is what made it look like it "broke" right as scrolling started). */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 16px;
  width: 100%;
  gap: 24px;
  position: static;
  z-index: 50;
  background: transparent;
}
/* On the front page only: the header floats over the hero photo instead of
   sitting above it in normal flow. position:absolute (not fixed) so it
   scrolls away with the hero — it never pins to the viewport, matching the
   rest of the site. */
body.home .site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
body.home .site-header .logo-text__eyebrow,
body.home .site-header .logo-text__main,
body.home .site-header .logo-text__founded,
body.home .site-header .main-nav a,
body.home .site-header .lang-switch,
body.home .site-header .header-search-toggle {
  text-shadow: 0 1px 6px rgba(249, 242, 231, 0.9), 0 1px 3px rgba(249, 242, 231, 0.95);
}

.site-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.site-logo img { width: 48px; height: 48px; object-fit: contain; }
.site-logo .logo-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.logo-text__eyebrow,
.logo-text__founded {
  display: block;
  font-weight: 500;
  font-size: 10px;
  font-style: normal;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.logo-text__main {
  display: block;
  font-weight: 800;
  font-size: 14px;
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.main-nav { display: flex; gap: 32px; }
.main-nav a {
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  white-space: nowrap;
}
.main-nav a:hover { color: var(--blue); }

.header-right { display: flex; align-items: center; gap: 20px; flex-shrink: 0; position: relative; }
.lang-switch { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; white-space: nowrap; }
.lang-switch a,
.lang-switch span { display: inline-flex; opacity: 0.45; filter: grayscale(60%); transition: opacity 0.15s ease, filter 0.15s ease; }
.lang-switch a:hover { opacity: 0.8; filter: grayscale(0%); }
.lang-switch span.is-current { opacity: 1; filter: grayscale(0%); }

.header-search-toggle {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--ink);
  flex-shrink: 0;
}
.header-search-toggle svg { width: 20px; height: 20px; }

/* Hidden on desktop — .main-nav is a plain inline row there. Only shown
   (see the 900px media query) once .main-nav switches to a hidden dropdown
   that needs something to open it. */
.mobile-nav-toggle {
  display: none;
  width: 36px; height: 36px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  flex-shrink: 0;
  padding: 0;
}
.mobile-nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 1px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
body.home .mobile-nav-toggle span { background: var(--ink); }
.mobile-nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.mobile-nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.header-search-form {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: var(--white);
  border: 1px solid #e2e5e9;
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 10px 30px rgba(16,35,63,0.12);
  display: none;
  z-index: 20;
}
.header-search-form.is-open { display: block; }
.header-search-form input {
  border: none;
  outline: none;
  font-size: 14px;
  padding: 8px 10px;
  width: 220px;
  font-family: inherit;
}
.btn-dark { background: var(--navy); color: #fff; }
.btn-dark:hover { background: var(--ink); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
  padding: 12px 22px;
  border-radius: 999px;
  border: none;
  white-space: nowrap;
}
.btn-primary { background: var(--sky); color: #fff; }
.btn-primary:hover { background: var(--sky-dark); }
/* Multiple .btn links written straight into page content (e.g. two CTAs in
   one <p>, as on the Приветствие page) have no flex-gap wrapper around them
   the way templated CTA rows (.hero-ctas, .cta-bar) do — they were touching
   edge-to-edge whether they wrapped onto separate lines or sat side by
   side. Scoped to prose content so it doesn't stack on top of those
   containers' own gap. */
.obshchestvo-content .btn,
.legal-page__content .btn { margin: 4px 10px 4px 0; }
.btn-gold { background: var(--gold); color: #fff; }
.btn-gold:hover { background: #b3853a; }
.btn-white { background: #fff; color: var(--ink); }
.btn-outline { border: 2px solid var(--ink); color: var(--ink); }

/* ===== Hero ===== */
.hero {
  position: relative;
  width: 100%;
  /* Sized to the photo's own proportions (2000x646, close to 1600x500) so
     the whole site reads as more compact — was a flat 620px before,
     regardless of width, which made the hero much taller than it needed
     to be on most screens. */
  aspect-ratio: 1600 / 500;
  min-height: 545px;
  padding: 12px 20px 50px 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 30px;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}
/* The header floats over the hero on the homepage (see .site-header rules
   above), so its content needs to start below the header's own height
   instead of being vertically centred through it. */
body.home .hero {
  align-items: start;
  padding-top: 110px;
  min-height: 700px;
}
@media (max-width: 900px) {
  /* Was 90px — with globe labels now shown on mobile too, a label anchored
     near the globe's own top edge could still stick up into the header's
     row (it can wrap to two rows and run ~104px tall on narrow phones),
     landing behind the transparent header's flag icons/nav button. Extra
     clearance here keeps the whole labelled globe below the header. */
  body.home .hero { padding-top: 130px; min-height: 0; }
}
/* Temporary state while the homepage is stripped down: no hero-copy, so
   just centre the globe instead of leaving an empty grid column. */
.hero--globe-only {
  display: flex;
  justify-content: center;
  background: none;
}
.hero--globe-only .hero-visual { width: 100%; max-width: 900px; }

.hero-copy, .hero-visual { position: relative; z-index: 1; }
/* No card background — text sits directly on the hero photo. A text-shadow
   keeps it legible over the busier parts of the image without covering the
   photo behind it with an opaque rectangle. */
.hero-copy {
  padding: 22px 36px 22px 40px;
  text-shadow: 0 2px 16px rgba(249, 242, 231, 0.85), 0 1px 3px rgba(249, 242, 231, 0.9);
}
.hero-copy .btn { text-shadow: none; }
/* min-width:0 on both grid items is load-bearing: the globe canvas gets an
   explicit pixel width from globe.js's own resize() (reading clientWidth),
   and a `1fr` grid track refuses to shrink below its item's content size
   unless told otherwise — if that JS-set canvas width is ever momentarily
   wider than the real viewport (a timing/measurement race on first paint),
   the whole .hero grid would "blow out" to match it, which is what was
   causing the long-standing unexplained horizontal overflow on mobile. */
.hero-copy { min-width: 0; }
.hero-visual {
  width: 100%;
  max-width: 720px;
  min-width: 0;
  height: 100%;
  align-self: stretch;
  padding: 14px 10px 0 0;
  /* Shifted left (rather than resized) so the globe reads closer to the
     hero's center and the jeep baked into the background photo peeks out
     from behind its right edge — a translate keeps the canvas's own
     clientWidth untouched, since globe.js's marker label placement uses
     fixed pixel dx/dy offsets tuned against that exact width. */
  transform: translateX(-70px);
}
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 3.8vw, 52px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.hero-title .accent { color: var(--sky); }
.hero-sub {
  font-size: 17px;
  color: var(--muted);
  max-width: 420px;
  margin: 0 0 16px;
}
.hero-ctas { display: flex; align-items: center; gap: 24px; margin-bottom: 18px; flex-wrap: wrap; }
.link-arrow { font-weight: 700; font-size: 14px; color: var(--ink); border-bottom: 2px solid var(--ink); padding-bottom: 2px; }

.scroll-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted);
}
/* Small grey text against a busy photo has much lower contrast than the
   bold navy title, and the shadow inherited from .hero-copy wasn't strong
   enough for it specifically — it disappeared over the lighter parts of
   the image. Reinforced separately here rather than raising it globally
   and making the title's shadow look heavy-handed. */
.hero-eras, .scroll-hint {
  text-shadow: 0 1px 3px rgba(249, 242, 231, 0.95), 0 0 10px rgba(249, 242, 231, 0.95), 0 0 2px rgba(249, 242, 231, 1);
}

.hero-visual { position: relative; min-height: 300px; }
/* Fills whatever height .hero actually ends up being (see aspect-ratio
   above) — globe.js reads this element's real clientHeight on resize, so
   the 3D canvas always matches rather than a flat 460px regardless of the
   hero's own size. */
#globeViz { width: 100%; max-width: 100%; height: 100%; overflow: hidden; position: relative; z-index: 1; }
#globeViz canvas { max-width: 100%; }
.hero-eras {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--muted);
  line-height: 1.4;
  margin-bottom: 10px;
}
.hero-tagline {
  position: absolute;
  left: -30px;
  bottom: 30px;
  font-family: 'Caveat', cursive;
  font-size: 22px;
  color: var(--ink);
  transform: rotate(-3deg);
}
.hero-explore-label {
  position: absolute;
  top: -10px;
  right: 10px;
  text-align: right;
}
.hero-explore-label span {
  display: block;
  font-family: 'Caveat', cursive;
  font-size: 20px;
  transform: rotate(3deg);
}
/* Marks the real KazGeo South Pole expedition (2016) on the Antarctica
   illustration baked into the hero photo. left/top are set in px by
   assets/js/hero-pole-note.js, which re-measures the hero's current
   background-size:cover crop on every resize — a fixed CSS % position can't
   track a `cover`-cropped background point because the crop math isn't
   linear with viewport width. Map-pin icon with the label stacked directly
   below it, centred — no leader line needed at this size/spacing. */
.hero-pole-note {
  position: absolute;
  z-index: 2;
  width: 0;
  height: 0;
}
.hero-pole-note__pin {
  position: absolute;
  left: -13px;
  top: -32px;
  width: 26px;
  height: 32px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
}
.hero-pole-note__label {
  position: absolute;
  left: 0;
  top: 8px;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  line-height: 1.35;
  color: #fff;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7), 0 0 6px rgba(0, 0, 0, 0.6);
}
.hero-pole-note__label:hover { text-decoration: underline; }
/* Scaled down rather than hidden — this one specific marker (unlike the
   17-destination globe overlay below) isn't a clutter risk, so there's no
   reason it should vanish on mobile along with everything else that used to
   get blanket-hidden at this width. */
@media (max-width: 900px) {
  .hero-pole-note__pin { left: -10px; top: -26px; width: 20px; height: 26px; }
  .hero-pole-note__label { font-size: 10px; top: 6px; }
}
/* The handwritten caption near the convoy — present in the mockup, missed
   when the hero text was first rebuilt as real HTML. Plain white blended
   into the lighter snow/ice patches even with a shadow; warm cream reads
   better against both the ice and the darker truck/rock areas, with a solid
   dark shadow doing the contrast work instead of a soft blur. */
.hero-caption {
  position: absolute;
  right: 4%;
  bottom: 9%;
  z-index: 2;
  font-family: 'Caveat', cursive;
  font-size: 22px;
  font-weight: 600;
  color: var(--cream);
  text-align: right;
  line-height: 1.3;
  text-shadow: 0 1px 0 rgba(13, 27, 42, 0.8), 1px 0 0 rgba(13, 27, 42, 0.8), 0 2px 6px rgba(13, 27, 42, 0.7);
}
@media (max-width: 900px) {
  .hero-caption { display: none; }
}
.hero-side-list {
  position: absolute;
  right: -30px;
  top: 40%;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--ink);
  line-height: 1.8;
  text-align: left;
}

.circle-btn {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--gold);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 18px; flex-shrink: 0;
}

/* ===== Kazakh national ornament decorations ===== */
.kz-ornament {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 130px;
  height: 96%;
  max-width: none;
  pointer-events: none;
  opacity: 0.95;
  z-index: 0;
}
.kz-ornament--left { left: 12px; }
.kz-ornament--right { right: 12px; transform: scaleX(-1); }

.kz-flourish {
  width: auto;
  height: 100%;
  max-width: none;
  flex-shrink: 0;
  align-self: stretch;
  opacity: 0.95;
  background: var(--sky);
  position: relative;
  z-index: 2;
}
.kz-flourish--left { margin-right: 8px; box-shadow: 8px 0 0 0 var(--sky); }
.kz-flourish--right {
  position: absolute;
  right: 0;
  top: 0;
  transform: scaleX(-1);
  box-shadow: -8px 0 0 0 var(--sky);
  z-index: 3;
}

.kz-mountains {
  position: absolute;
  right: 0;
  top: 10%;
  width: 42%;
  max-width: 480px;
  height: auto;
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 900px) {
  .kz-ornament, .kz-flourish, .kz-mountains { display: none; }
}

/* ===== Globe HTML markers (labels + leader lines) ===== */
/* Dot + leader line + label are all visible at once, like the original
   hand-drawn reference (callout bubble on a line off each point) — an
   in-between hover-only version was tried and reverted; the declutter()
   loop in globe.js is what actually keeps 16+ simultaneous labels from
   overlapping, nudging them apart every frame instead of hiding them. */
.globe-marker { position: relative; width: 0; height: 0; transition: opacity 0.25s ease; }
.globe-marker__dot {
  position: absolute;
  left: -7px;
  top: -7px;
  width: 14px;
  height: 14px;
  padding: 4px;
  box-sizing: content-box;
  border-radius: 50%;
  cursor: pointer;
}
.globe-marker__dot::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 151, 62, 0.28);
  transition: transform 0.15s ease;
}
.globe-marker.is-hovered .globe-marker__dot::before { transform: scale(1.25); }
.globe-marker__line {
  position: absolute;
  left: 0;
  top: 0;
  height: 1.5px;
  background: rgba(16, 35, 63, 0.55);
  transform-origin: 0 0;
  pointer-events: none;
}
.globe-marker__label {
  position: absolute;
  pointer-events: auto;
  font-family: 'Caveat', cursive;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.9);
  padding: 3px 10px;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(16, 35, 63, 0.15);
}
.globe-marker__label:hover { background: #fff; }
/* kk place names run noticeably longer than their ru/en equivalents (e.g.
   "Проекты-Экспедиции по Казахстану" vs the translated kk string), so they
   overlap their neighbours far more often even before a marker is anywhere
   near the globe's rim — shrinking the label text is the direct fix. */
html[lang="kk"] .globe-marker__label {
  font-size: 15px;
}

/* Labels used to be hidden outright below 900px (a smaller-font-only pass
   was tried first and still overlapped, back when the mobile globe was a
   flat 340px). Requested back to match desktop's always-on labels — what
   actually fixes the overlap this time is giving the sphere itself more
   room (#globeViz grows to 460px here, same as globe.js's own default
   height) so declutter()'s per-frame spacing in globe.js has room to
   separate points, plus a smaller label footprint so more of them fit. */
@media (max-width: 900px) {
  .globe-marker__label {
    font-size: 12px;
    padding: 2px 7px;
  }
  html[lang="kk"] .globe-marker__label {
    font-size: 11px;
  }
}

/* ===== Ticker ===== */
.ticker-bar {
  background: var(--sky);
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  height: 48px;
  padding: 0;
  position: relative;
  display: flex;
  align-items: center;
}
.ticker-track {
  display: inline-flex;
  gap: 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  animation: ticker 22s linear infinite;
  padding-left: 24px;
}
.ticker-right-cluster {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--teal);
  padding-left: 24px;
  z-index: 3;
}
.ticker-note {
  font-size: 9px;
  font-weight: 800;
  line-height: 1.3;
  text-align: right;
  padding-right: 20px;
}
@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ===== Section generic ===== */
.section { padding: 64px 40px; max-width: 1600px; margin: 0 auto; position: relative; overflow: hidden; }
.section-head, .section > .card-grid { position: relative; z-index: 1; }
.eyebrow {
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 14px;
  display: block;
}
.section-head {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  align-items: end;
  margin-bottom: 50px;
}
.section-head h2 { font-family: var(--font-serif); font-size: clamp(26px, 2.8vw, 38px); font-weight: 700; margin: 0; line-height: 1.15; }
.section-head p { color: var(--muted); font-size: 16px; margin: 0; }

/* ===== Legal document pages (privacy policy, terms of use) ===== */
.legal-page { padding: 90px 40px 80px; }
.legal-page__inner { max-width: 820px; margin: 0 auto; }
.legal-page__inner h1 { font-family: var(--font-serif); font-size: clamp(28px, 3.4vw, 42px); font-weight: 700; margin: 8px 0 34px; line-height: 1.2; }
.legal-page__content { font-size: 16px; line-height: 1.75; color: var(--ink); }
.legal-page__content h2 { font-family: var(--font-display); font-size: 19px; font-weight: 700; margin: 38px 0 14px; color: var(--navy); }
.legal-page__content p { margin: 0 0 16px; }
.legal-page__content p em { color: var(--muted); font-style: normal; font-size: 14px; }
.legal-page__content ul { margin: 0 0 16px; padding-left: 22px; }
.legal-page__content li { margin-bottom: 8px; }
.legal-page__content a { color: var(--teal); }

.sitemap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px 30px;
  margin-top: 20px;
}
.sitemap-col h4 {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 14px;
}
.sitemap-col { display: flex; flex-direction: column; }
.sitemap-col a { color: var(--ink); text-decoration: none; font-size: 15px; padding: 6px 0; border-bottom: 1px solid rgba(16,35,63,0.08); }
.sitemap-col a:hover { color: var(--teal); }
@media (max-width: 700px) {
  .sitemap-grid { grid-template-columns: 1fr 1fr; }
}

/* ===== Story blocks (alternating photo/text inside expedition/project article bodies) ===== */
/* Cover photo + title come from the template (has_post_thumbnail() banner,
   the_title()); these blocks are for the body copy itself, so a long article
   reads as a chequerboard of photo/text pairs instead of one unbroken column
   of paragraphs with no images at all. */
.story-block {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  margin: 44px 0;
}
.story-block--img-right { flex-direction: row-reverse; }
.story-photo {
  flex: 1 1 44%;
  min-width: 0;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4/3;
}
.story-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Two-up variant: drops into a .story-block in place of a single .story-photo
   when there are enough spare photos from a folder to fill the slot with a
   pair instead of one image with a lot of dead sky/ground in it. */
.story-photo-duo { flex: 1 1 44%; min-width: 0; display: flex; gap: 10px; }
.story-photo-duo .story-photo { flex: 1 1 50%; aspect-ratio: 3/4; }
/* Stack variant: several photo rows (single or duo) piled vertically down
   the photo column instead of one static-height image — used when the text
   column next to it runs much taller than a single photo, which otherwise
   left a band of bare parchment above/below the photo (align-items:center
   splitting the gap evenly on both sides). Stacking more of the folder's
   spare photos to roughly match the text height fills that band instead of
   leaving it empty. */
.story-photo-stack {
  flex: 1 1 44%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.story-photo-stack > .story-photo,
.story-photo-stack > .story-photo-duo {
  flex: none;
  width: 100%;
}
.story-photo-stack > .story-photo { aspect-ratio: 4/3; }
.story-text { flex: 1 1 56%; min-width: 0; }
.story-text h3 { margin-top: 0; }
.story-text > :last-child { margin-bottom: 0; }
/* Plain paragraphs/headings outside a .story-block (the lead paragraph before
   the first photo pair, typically) stay at a comfortable reading width even
   though the article container itself is wide enough for the photo pairs. */
.story-content > p, .story-content > ul, .story-content > h2, .story-content > h3 {
  max-width: 760px;
}
@media (max-width: 700px) {
  .story-block, .story-block--img-right { flex-direction: column; }
  .story-block { gap: 18px; margin: 32px 0; }
  .story-photo { flex-basis: auto; width: 100%; }
  /* Stacks the pair itself vertically here too — side by side left each
     photo about half the screen width, forced into a 3:4 crop that cut off
     much more of the shot than the same photo gets on desktop, where each
     half is far wider. Full width, one above the other, crops far less. */
  .story-photo-duo { flex-basis: auto; width: 100%; flex-direction: column; }
  .story-photo-duo .story-photo { aspect-ratio: 4/3; }
  .story-photo-stack { flex-basis: auto; width: 100%; }
}

/* ===== Общество overview (hero-adjacent summary block) ===== */
/* No background photo here on purpose — the section sits directly on the
   site-wide fixed parchment backdrop, and a second photo/texture behind it
   competed visually with that backdrop instead of blending into it. */
/* max-width:1220px + margin:auto live on the section itself (not on an inner
   wrapper) so this centers exactly the way .feature-block's section does —
   both end up with the same padding-box math at any viewport width. Used to
   be max-width:none with only the inner .obshestvo-overview-grid centered to
   1220px; at widths where the outer padding box was already narrower than
   1220px that inner centering was a no-op, so this block's text sat flush at
   the section's own 40px padding while the feature carousels below it (whose
   1220px max-width lives on the section, adding its own centering margin on
   top of the same 40px padding) sat ~22px further right — the "Общество"
   heading not lining up with "Проекты"/"Медиа" below it that was reported. */
.obshestvo-banner {
  max-width: 1220px;
  margin: 0 auto;
  padding: 64px 40px;
}
.obshestvo-overview-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 50px;
  align-items: start;
}
.obshestvo-overview-grid h2 {
  font-family: var(--font-serif);
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 700;
  line-height: 1.15;
  margin: 8px 0 18px;
}
.obshestvo-overview-grid > div:first-child > p {
  color: var(--muted);
  font-size: 16px;
  max-width: 480px;
  margin: 0 0 26px;
}
.obshestvo-bottom-row {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.obshestvo-stats {
  display: flex;
  align-items: center;
  gap: 20px;
}
.obshestvo-stats > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 20px;
  border-left: 1px solid rgba(16, 35, 63, 0.18);
}
.obshestvo-stats > div:first-child { padding-left: 0; border-left: none; }
.obshestvo-stats strong { font-family: var(--font-display); font-size: 24px; color: var(--ink); }
.obshestvo-stats span { font-size: 12px; color: var(--muted); white-space: nowrap; }
.obshestvo-quote {
  position: relative;
  min-height: 330px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.obshestvo-hiker-img {
  width: auto;
  max-width: 100%;
  max-height: 330px;
  margin: 0 auto;
  object-fit: contain;
  /* Nudged right so the hiker's right edge lines up with the jeep photo's
     right edge in the Экспедиции carousel card below it. */
  transform: translateX(115px);
}
.obshestvo-quote blockquote {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(19px, 2vw, 26px);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
}
/* Inter (the kk --font-serif) at the same 700 weight as PT Serif (ru/en)
   reads noticeably heavier/blockier — sans grotesks lack the serif's thin
   hairlines that make 700 look lighter than it numerically is. Dialed back
   to 600 here, on the one loaded italic weight, so this quote doesn't look
   bolder on Kazakh pages than its ru/en equivalent. */
html[lang="kk"] .obshestvo-quote blockquote {
  font-weight: 600;
}
@media (max-width: 860px) {
  /* The +115px nudge lines the hiker up with a photo further down the
     page, but on a narrow mobile column it just shoved him partway off
     the right edge of his own box, cropping him — removed here. */
  .obshestvo-hiker-img { transform: none; }
  .obshestvo-overview-grid { grid-template-columns: 1fr; }
  /* min-width:0 is load-bearing here: a grid/flex item won't shrink below its
     content's min-content size by default, and .obshestvo-stats' three
     nowrap-text stat blocks were wide enough to blow the single mobile
     column out past the viewport (clipped by .section's overflow:hidden
     rather than scrolling, which read as text just vanishing off-screen). */
  .obshestvo-overview-grid > div { min-width: 0; }
  .obshestvo-bottom-row { flex-direction: column; align-items: flex-start; gap: 20px; }
  .obshestvo-stats { flex-wrap: wrap; row-gap: 12px; }
  .obshestvo-quote { justify-content: flex-start; }
  .obshestvo-quote blockquote { text-align: left; }
}

/* ===== Feature carousels (Экспедиции / Проекты / Исследования / Медиа / Культура и спорт) ===== */
.feature-block {
  /* Narrower than the site's usual 1600px .section width — with a small
     fixed-max-width photo in an equal-width column, 1600px left a big dead
     gap between the text and the photo on wide screens. */
  max-width: 1220px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}
/* Equal-width tracks on purpose: the photo's own max-width below controls
   its visual size, so it no longer matters which grid track it auto-places
   into with `order` — that used to size photo-left carousels differently
   from photo-right ones when the tracks themselves were asymmetric. */
.feature-block--photo-right .feature-text { order: 1; }
.feature-block--photo-right .feature-photo { order: 2; }
.feature-block--photo-left .feature-photo { order: 1; }
.feature-block--photo-left .feature-text { order: 2; }
.feature-text { position: relative; }
.feature-watermark {
  position: absolute;
  right: -10px;
  bottom: -20px;
  width: 340px;
  height: 340px;
  max-width: 68%;
  object-fit: contain;
  object-position: bottom right;
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}
.feature-text .eyebrow, .feature-text h2, .feature-text > p, .feature-nav, .feature-more {
  position: relative;
  z-index: 1;
}
.feature-text .eyebrow { display: block; margin-bottom: 10px; }
.feature-text h2 {
  font-family: var(--font-serif);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  line-height: 1.18;
  margin: 0 0 14px;
}
.feature-text > p { color: var(--muted); font-size: 16px; max-width: 380px; margin: 0 0 24px; }
.feature-nav { display: flex; gap: 12px; margin-bottom: 20px; }
/* Both teal (matching the footer) instead of gold/navy, with a bit more
   visual weight — shadow on the filled one, a hover fill on the outlined
   one — so a plain circle+arrow doesn't look too flat. */
.feature-nav .circle-btn {
  background: var(--sky);
  box-shadow: 0 4px 10px rgba(0, 183, 246, 0.35);
  transition: background 0.15s ease, transform 0.15s ease;
}
.feature-nav .circle-btn:hover { background: var(--sky-dark); transform: translateY(-1px); }
.feature-nav .circle-btn--outline {
  background: transparent;
  border: 2px solid var(--sky);
  color: var(--sky);
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.feature-nav .circle-btn--outline:hover { background: var(--sky); color: #fff; transform: translateY(-1px); }
.feature-more { display: inline-block; }
@media (max-width: 860px) {
  .feature-watermark { display: none; }
}

.feature-photo {
  position: relative;
  width: 100%;
  max-width: 480px;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 16/11;
  background: var(--gray-bg);
}
/* Hug the outer edge of the row (away from the text) instead of stretching
   across the whole equal-width column — keeps the carousel compact and
   proportionate to the text side rather than dominating the block. */
.feature-block--photo-left .feature-photo { margin-left: 0; margin-right: auto; }
.feature-block--photo-right .feature-photo { margin-left: auto; margin-right: 0; }
.feature-slide {
  position: absolute;
  inset: 0;
  display: none;
  color: #fff;
}
.feature-slide.is-active { display: block; }
.feature-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.feature-slide::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(13,27,42,0.75) 0%, rgba(13,27,42,0) 55%);
  z-index: 1;
}
.feature-slide__caption {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 20px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.feature-slide__caption strong { font-family: var(--font-display); font-size: 20px; font-style: normal; }
.feature-slide__title-mobile { display: none; }
.feature-slide__caption em { font-style: normal; font-size: 13px; opacity: 0.85; }
.feature-slide--empty { background: var(--gray-bg); display: flex; align-items: center; justify-content: center; }
.feature-slide--empty .feature-slide__caption { position: static; color: var(--muted); text-align: center; }
.feature-dots {
  position: absolute;
  right: 20px;
  bottom: 18px;
  z-index: 2;
  display: flex;
  gap: 6px;
}
.feature-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.4); cursor: pointer; }
.feature-dot.is-active { background: #fff; }

@media (max-width: 860px) {
  .feature-block, .feature-block--photo-left, .feature-block--photo-right { grid-template-columns: 1fr; }
  .feature-block--photo-right .feature-text,
  .feature-block--photo-right .feature-photo,
  .feature-block--photo-left .feature-text,
  .feature-block--photo-left .feature-photo { order: initial; }
  /* A long post title (several run to a full descriptive sentence) filled
     the whole slide and pushed the excerpt line out of the visible card on
     narrow screens. Clamped to 2 lines with an ellipsis as a general
     safety net — specific posts can still get a short, hand-picked title
     via the mobile-title meta field below instead of relying on this. */
  .feature-slide__caption strong {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .has-mobile-title .feature-slide__title-full { display: none; }
  .feature-slide__title-mobile { display: block; }
}

/* ===== Directions cards ===== */
.card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.direction-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 4/3;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 26px;
}
.direction-card img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
}
.direction-card::after {
  content: "";
  position: absolute; inset: 0;
  /* Was transparent until 30% then only reaching 0.88 at the very bottom —
     fine over a dark photo, but a bright/foggy one (e.g. an overcast summit
     shot) still showed through enough to wash out the white heading text.
     Darker floor + an earlier, fully-opaque base under the text fixes that
     regardless of how light the source photo is. */
  background: linear-gradient(180deg, rgba(6,14,26,0) 15%, rgba(6,14,26,0.75) 55%, rgba(6,14,26,0.97) 100%);
  z-index: 1;
}
.direction-card > * { position: relative; z-index: 2; }
.direction-tag {
  align-self: flex-start;
  background: var(--sky);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: auto;
  text-transform: uppercase;
}
.direction-tag.alt { background: #2a9d8f; }
.direction-card h3 { font-size: 28px; font-weight: 800; margin: 14px 0 4px; text-shadow: 0 1px 4px rgba(0,0,0,0.5); }
/* flex:1 here used to make this paragraph fill all the leftover vertical
   space in the card's flex column — which, combined with the parent's
   justify-content:flex-end, defeated the bottom-anchoring entirely: a
   flex-grown child consumes the free space itself, so there's none left
   for flex-end to push the group down with. A longer excerpt (more wrapped
   lines) shoved the tag+title up toward the card's top, into the part of
   the ::after gradient that's still transparent — over a bright photo
   (sky, snow) that made the white title unreadable, which is what was
   reported. Dropping flex:1 lets the tag+title+excerpt sit at their
   natural height, so justify-content:flex-end genuinely bottom-anchors
   the whole group inside the gradient's dark zone; the line-clamp is a
   safety cap so a long excerpt can't grow the group tall enough to push
   the title back up regardless. */
.direction-card p {
  margin: 0;
  font-size: 14px;
  opacity: 0.85;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.direction-card .row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }

.exp-card { transition: box-shadow 0.3s ease, transform 0.3s ease; scroll-margin-top: 100px; }
.exp-highlight { box-shadow: 0 0 0 4px var(--gold); transform: scale(1.02); }

/* ===== Quote / stone section ===== */
.quote-section {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  margin: 0 40px 0;
  max-width: 1600px;
  margin-left: auto; margin-right: auto;
  padding: 90px 60px;
  color: #fff;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  align-items: center;
  background: linear-gradient(120deg, #0b1420 0%, #1c2b3d 60%, #223247 100%);
}
.quote-section h2 { font-family: var(--font-display); font-size: clamp(26px, 3vw, 40px); font-weight: 700; margin: 0 0 20px; line-height: 1.15; }
.quote-section p { max-width: 420px; opacity: 0.85; margin: 0 0 22px; }
.quote-visual { display: flex; align-items: center; justify-content: center; position: relative; }
.quote-visual svg { width: 220px; height: auto; }
.quote-side {
  position: absolute;
  right: -10px;
  bottom: -60px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-align: right;
  line-height: 1.7;
}
.quote-side::before {
  content: "";
  display: block;
  width: 40px; height: 2px; background: rgba(255,255,255,0.4);
  margin-left: auto; margin-bottom: 10px;
}

/* ===== Media section ===== */
.media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.media-card img { border-radius: 16px; aspect-ratio: 4/3; object-fit: cover; margin-bottom: 16px; }
.media-card h3 { font-size: 18px; font-weight: 800; margin: 0 0 6px; }
.media-card p { font-size: 14px; color: var(--muted); margin: 0; }

/* ===== CTA bar ===== */
.cta-bar {
  position: relative;
  background-color: var(--navy);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  /* Full-bleed and flush against the footer on purpose — the CTA photo and
     the footer's teal texture are meant to read as one continuous scene,
     not a floating rounded card with page background showing around it.
     aspect-ratio keeps the box at the source photo's own proportions
     (2172x724) so `cover` only has to crop a little at the sides instead
     of stretching/squishing the figure vertically. */
  aspect-ratio: 2172 / 724;
  min-height: 320px;
  border-radius: 0;
  margin: 0;
  max-width: none;
  padding: 60px max(90px, calc(50% - 740px)) 60px max(60px, calc(50% - 740px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  overflow: hidden;
}
.cta-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--navy) 0%, var(--navy) 35%, rgba(13,27,42,0) 75%);
  z-index: 0;
}
/* Soft fade at the very bottom into the footer's own teal, so the join
   between the two background photos doesn't read as a hard seam. */
.cta-bar::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 90px;
  background: linear-gradient(0deg, #0894a5 0%, rgba(8,148,165,0) 100%);
  opacity: 0.5;
  z-index: 0;
}
.cta-bar .cta-copy, .cta-bar .cta-side { position: relative; z-index: 1; }
.cta-ornament { z-index: 1; }
.cta-copy { max-width: 560px; }
.cta-bar h2 {
  font-family: var(--font-serif);
  color: #fff;
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 700;
  margin: 0 0 14px;
  line-height: 1.15;
}
.cta-bar .cta-copy p { color: rgba(255,255,255,0.85); font-size: 16px; margin: 0 0 26px; }
.cta-ctas { display: flex; gap: 16px; flex-wrap: wrap; }
.btn-outline-white { background: transparent; border: 2px solid #fff; color: #fff; }
.cta-ornament { position: absolute; right: 74px; top: 0; height: 100%; width: auto; opacity: 0.9; }
.cta-side {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: right;
  color: #fff;
  line-height: 1.4;
  /* Was vertically centered with .cta-copy, which put it over the bright
     sky/mountain part of the new banner photo (see cta-bg.jpg) with no dark
     gradient behind it there (the ::before darkening gradient fades out by
     75% width, well left of where this sits) — nearly invisible. Anchored
     to the bottom of the box instead, over the darker rock/misty-mountain
     band the hiker is standing on. The shadow is extra insurance: exact
     pixel tone under the text still varies by viewport width. */
  align-self: flex-end;
  margin-bottom: 60px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7), 0 0 8px rgba(0, 0, 0, 0.5);
}

/* ===== Общество (sidebar tabs) ===== */
/* min-width:0 on both grid items: without it a non-wrapping descendant (the
   team carousel's thumbnail strip, in practice) forces this 1fr track wider
   than the grid itself, and .section's overflow:hidden then silently clips
   whatever spills past it — not just on narrow/mobile widths, at ANY width
   the thumbnail strip's content doesn't fit at. */
.obshchestvo-layout { display: grid; grid-template-columns: 240px 1fr; gap: 50px; }
.obshchestvo-nav { display: flex; flex-direction: column; gap: 4px; border-right: 1px solid #eaecef; padding-right: 20px; min-width: 0; }
.obshchestvo-nav a { padding: 10px 12px; border-radius: 8px; font-weight: 700; font-size: 14px; color: var(--muted); }
.obshchestvo-nav a:hover { background: var(--gray-bg); color: var(--ink); }
.obshchestvo-nav a.active { background: var(--sky); color: #fff; }
.obshchestvo-content { font-size: 16px; line-height: 1.75; color: var(--ink); max-width: 720px; min-width: 0; }
.obshchestvo-content h3 { font-size: 20px; font-weight: 800; margin: 28px 0 10px; }
.obshchestvo-content ul { list-style: disc; padding-left: 20px; margin: 0 0 18px; }
.obshchestvo-content ul li { margin-bottom: 6px; }
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.team-card { text-align: left; }
.team-card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 14px; margin-bottom: 12px; }
.team-card h4 { margin: 0 0 4px; font-size: 16px; font-weight: 800; }
.team-card p { margin: 0; font-size: 13px; color: var(--muted); }
.contact-block { background: var(--gray-bg); border-radius: 16px; padding: 26px 30px; font-size: 15px; line-height: 1.8; }
.contact-whatsapp { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 700; }
/* The <img> carries width="22" height="22" HTML attributes, but at this
   block's 15px text that still reads oversized/circle-badge-like next to
   the plain-text Address/E-mail rows above and below it — sized down to
   sit closer to the text's own line-height instead. */
.contact-whatsapp img { width: 16px; height: 16px; border-radius: 50%; }
.contact-whatsapp:hover { color: #25D366; }
/* Same story as .obshestvo-quote blockquote: Inter (the kk body font) at
   700 reads heavier than Manrope/PT Serif (ru/en) at the same weight, so
   this link's number looked noticeably bolder on the kk contacts page. */
html[lang="kk"] .contact-whatsapp { font-weight: 600; }

/* ===== Feedback / "Обратная связь" page (page-feedback.php) ===== */
.feedback-lead { font-size: 17px; line-height: 1.7; max-width: 720px; }
.feedback-topics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin: 24px 0 40px;
}
.feedback-topic { background: var(--gray-bg); border-radius: 14px; padding: 20px 22px; }
.feedback-topic h4 { margin: 0 0 6px; font-size: 15px; font-weight: 800; }
.feedback-topic p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.6; }
.feedback-form { max-width: 640px; margin-top: 12px; }
.feedback-form .form-row { margin-bottom: 18px; }
.feedback-form label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.feedback-form input[type="text"],
.feedback-form input[type="email"],
.feedback-form input[type="tel"],
.feedback-form select,
.feedback-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #d8dde3;
  border-radius: 10px;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  background: #fff;
}
.feedback-form input:focus,
.feedback-form select:focus,
.feedback-form textarea:focus {
  outline: none;
  border-color: var(--gold);
}
.feedback-form textarea { resize: vertical; min-height: 130px; }
.feedback-form .form-hint { font-size: 13px; color: var(--muted); margin: 6px 0 0; }
.feedback-form .form-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--muted); margin-bottom: 24px; }
.feedback-form .form-consent input { margin-top: 3px; }
.feedback-form .form-consent a { color: var(--ink); text-decoration: underline; }
.feedback-success { background: #eaf6ee; border: 1px solid #bfe3c9; color: #1e6b34; border-radius: 14px; padding: 20px 24px; margin-bottom: 28px; font-weight: 700; }
.feedback-error { background: #fdecec; border: 1px solid #f3bcbc; color: #a3231f; border-radius: 14px; padding: 20px 24px; margin-bottom: 28px; font-weight: 700; }
.feedback-social { margin-top: 48px; padding-top: 32px; border-top: 1px solid #eaecef; }
.feedback-social-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; font-weight: 700; color: var(--ink); }
.feedback-social-link img { border-radius: 8px; }
@media (max-width: 700px) {
  .feedback-topics { grid-template-columns: 1fr; }
}

/* ===== Team member profile (single-team_member.php) ===== */
.team-breadcrumb { font-size: 13px; color: var(--muted); margin: 0 0 6px; }
.team-breadcrumb a { color: var(--muted); }
.team-profile { display: flex; gap: 50px; align-items: flex-start; margin-bottom: 40px; }
.team-profile-photo { flex: 1 1 38%; min-width: 0; border-radius: 20px; overflow: hidden; border: 1px solid #e4d9c4; }
.team-profile-photo img { width: 100%; height: auto; display: block; }
.team-profile-info { flex: 1 1 62%; min-width: 0; }
.team-profile-info h1 { font-family: var(--font-display); font-size: clamp(30px, 4vw, 46px); font-weight: 800; margin: 0 0 10px; line-height: 1.1; }
.team-position { font-size: 17px; font-weight: 800; color: var(--gold); margin: 0 0 6px; }
.team-tags { font-size: 14px; color: var(--muted); margin: 0 0 22px; }
.team-quote { font-family: var(--font-serif); font-style: italic; font-size: 22px; line-height: 1.4; color: var(--ink); border-left: 3px solid var(--gold); padding-left: 20px; margin: 0; }
.team-bio { max-width: 760px; margin-bottom: 40px; }
.team-bio h2, .team-related h2 { font-size: 24px; font-weight: 800; margin: 0 0 18px; }
.team-related { margin-bottom: 20px; }
.card-grid-3 { grid-template-columns: repeat(3, 1fr); }
.team-pager { display: flex; justify-content: space-between; align-items: center; margin-top: 40px; padding-top: 24px; border-top: 1px solid #eaecef; }

@media (max-width: 700px) {
  .team-profile { flex-direction: column; gap: 24px; }
  .card-grid-3 { grid-template-columns: 1fr; }
  .team-pager { flex-direction: column; gap: 14px; align-items: flex-start; }
}

/* ===== Team carousel (page-team.php, the "Команда" listing page) ===== */
/* Sits inside .obshchestvo-content (the Общество sidebar layout), whose
   max-width:720px is sized for plain text — too narrow for the carousel. */
.obshchestvo-content--team { max-width: none; }
.team-slide { display: none; grid-template-columns: 1fr 320px; gap: 40px; align-items: center; }
.team-slide.is-active { display: grid; }
.team-spotlight { display: flex; gap: 26px; align-items: center; background: var(--cream); border: 1px solid #e4d9c4; border-radius: 20px; padding: 24px; color: inherit; min-width: 0; }
.team-spotlight-photo { flex: 0 0 200px; border-radius: 14px; overflow: hidden; aspect-ratio: 1/1; }
/* object-position:top — these are full-body portrait photos cropped into a
   square/circle; a center crop cuts into the top of the head while leaving
   spare chest/torso room at the bottom. Anchoring to the top keeps the head
   whole and crops the excess from the bottom instead. */
.team-spotlight-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.team-spotlight-info { flex: 1 1 auto; min-width: 0; position: relative; }
.team-spotlight-info h3 { font-size: 26px; font-weight: 800; margin: 0 0 8px; }
.team-slide-quote { font-family: var(--font-serif); font-style: italic; font-size: 19px; line-height: 1.45; margin: 0; color: var(--ink); }
.team-thumbs-row { display: flex; align-items: center; gap: 24px; margin-top: 40px; }
.team-nav-arrow { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: 1px solid #e4d9c4; background: var(--white); font-size: 20px; cursor: pointer; color: var(--ink); }
.team-nav-arrow:hover { background: var(--gray-bg); }
/* A 4-column, 2-row photo grid rather than a single scrolling row — with 8
   members and larger avatars, everyone is visible at once instead of
   needing to scroll to find someone. */
.team-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 32px;
  row-gap: 28px;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 680px;
  margin: 0 auto;
  padding: 4px 2px;
}
.team-thumb { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; background: none; border: none; cursor: pointer; opacity: 0.55; font-family: inherit; text-align: center; }
.team-thumb.is-active { opacity: 1; }
.team-thumb img { width: 72px; height: 72px; flex: none; border-radius: 50%; object-fit: cover; object-position: center top; border: 3px solid transparent; }
.team-thumb.is-active img { border-color: var(--gold); }
.team-thumb span { font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--ink); }
@media (max-width: 700px) {
  .team-thumbs { grid-template-columns: repeat(2, 1fr); column-gap: 28px; row-gap: 22px; max-width: 300px; }
  .team-thumb img { width: 60px; height: 60px; }
}

/* This carousel sits inside the Общество sidebar layout, which already
   spends 240px + a 50px gap on the nav before the carousel gets any room —
   so it runs out of space for a 200px photo + readable text + a fixed
   320px quote column well before the site's usual ~900px breakpoint hits.
   Stacking the quote under the card here avoids squeezing the name/position
   text down to an unreadable sliver at ordinary laptop widths. */
@media (max-width: 1200px) {
  .team-slide { grid-template-columns: 1fr; text-align: center; }
  .team-spotlight { flex-direction: column; text-align: center; }
}

@media (max-width: 900px) {
  .obshchestvo-layout { grid-template-columns: 1fr; }
  .obshchestvo-nav { flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid #eaecef; padding-right: 0; padding-bottom: 12px; }
  .team-grid { grid-template-columns: 1fr 1fr; }
}

/* ===== Press releases list ===== */
.press-list { display: flex; flex-direction: column; border-top: 1px solid #eaecef; }
.press-row {
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding: 16px 4px;
  border-bottom: 1px solid #eaecef;
}
.press-row:hover .press-row__title { color: var(--blue); }
.press-row__date { flex-shrink: 0; width: 90px; font-size: 13px; color: var(--muted); font-weight: 700; }
.press-row__title { font-size: 15px; font-weight: 600; color: var(--ink); }

.media-hub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 20px; }
.media-hub-card { background: var(--gray-bg); border-radius: 16px; padding: 30px; }
.media-hub-card h3 { font-size: 18px; font-weight: 800; margin: 0 0 16px; }
.media-partners-list { display: flex; flex-direction: column; gap: 10px; }
.media-partners-list span { font-size: 14px; font-weight: 600; color: var(--ink); padding-bottom: 8px; border-bottom: 1px solid #e2e5e9; }
.photo-gallery-list a { display: block; font-size: 14px; font-weight: 600; color: var(--ink); padding: 10px 0; border-bottom: 1px solid #e2e5e9; }
.photo-gallery-list a:hover { color: var(--blue); }
.photo-gallery-list small { display: block; font-weight: 500; color: var(--muted); font-size: 12px; margin-top: 2px; }

@media (max-width: 900px) {
  .media-hub-grid { grid-template-columns: 1fr; }
}

/* ===== Pagination ===== */
.pagination { margin-top: 40px; }
.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  background: var(--gray-bg);
}
.pagination a.page-numbers:hover { background: var(--blue); color: #fff; }
.pagination .page-numbers.current { background: var(--ink); color: #fff; }
.pagination .page-numbers.dots { background: none; color: var(--muted); }
.pagination .page-numbers.prev,
.pagination .page-numbers.next {
  background: var(--blue);
  color: #fff;
  padding: 0 18px;
}
.pagination .page-numbers.prev:hover,
.pagination .page-numbers.next:hover { background: var(--blue-dark); }

/* ===== Footer ===== */
.site-footer {
  /* background-image set inline in footer.php with a filemtime cache-buster;
     background-color is just the fallback while it loads. */
  background-color: #0b2b33;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  color: rgba(255,255,255,0.85);
}
.footer-top {
  max-width: 1600px;
  margin: 0 auto;
  padding: 60px 40px 40px;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr 1fr;
  gap: 30px;
}
.footer-col--brand { display: flex; flex-direction: column; gap: 16px; }
/* Neutralizes the generic .footer-col a rule (block, 14px/500, grey) —
   this link just wraps the logo + name/description as a home link, it
   shouldn't look or lay out like the column's other list-item links. */
.footer-brand-link {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: inherit;
  text-decoration: none;
  margin-bottom: 0;
}
.footer-col--brand img { width: 44px; height: 44px; }
.footer-brand-name { display: block; font-family: var(--font-display); color: #fff; font-size: 16px; letter-spacing: 0.04em; margin-bottom: 4px; }
.footer-col--brand p { font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.7); margin: 0 0 4px; }
.footer-tagline-small { font-size: 12px; color: rgba(255,255,255,0.55); }
.footer-social { display: flex; align-items: center; gap: 10px; }
.footer-social a {
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.footer-social img { height: 30px; width: auto; display: block; }
.footer-social a:hover { transform: translateY(-2px); opacity: 0.85; }

.footer-col h4 {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 16px;
}
/* The column headers are links now too — override the generic
   .footer-col a link style (block-level, 14px/500) so the header keeps
   reading like a heading instead of just another list item. */
.footer-col h4 a {
  display: inline;
  font: inherit;
  color: inherit;
  margin: 0;
}
.footer-col h4 a:hover { color: var(--gold); }
.footer-col a {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.75);
  margin-bottom: 10px;
}
.footer-col a:hover { color: var(--gold); }
.footer-col--contacts p { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.75); margin: 0 0 10px; }
.footer-col--contacts p a { color: rgba(255,255,255,0.9); font-weight: 600; }

.footer-bottom {
  max-width: 1600px;
  margin: 0 auto;
  padding: 20px 40px 30px;
  border-top: 1px solid rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
}
.footer-legal { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-legal a { color: rgba(255,255,255,0.6); }
.footer-legal a:hover { color: #fff; }
.footer-to-top {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--gold);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  /* .main-nav used to just vanish below this width with nothing replacing
     it — the links were still there in the DOM but completely unreachable
     on mobile. It's now a full-width dropdown opened by .mobile-nav-toggle
     (see header.js) instead of an inline row. */
  .main-nav {
    display: none;
    flex-direction: column;
    gap: 0;
    width: 100%;
    order: 10;
    background: var(--cream);
    border-radius: 12px;
    margin-top: 4px;
    padding: 6px;
    box-shadow: 0 10px 30px rgba(16,35,63,0.12);
  }
  .main-nav.is-open { display: flex; }
  .main-nav a { padding: 12px 14px; border-radius: 8px; }
  .main-nav a:hover, .main-nav a:active { background: rgba(16,35,63,0.06); }
  body.home .main-nav { text-shadow: none; }
  .mobile-nav-toggle { display: flex; }
  /* The header's right-side cluster (search + 3 language flags + button)
     plus the full logo text block together were wider than any mobile
     viewport with nothing to shrink or wrap them — the real cause of the
     site's long-standing horizontal-scroll-on-mobile symptom (masked by
     html{overflow-x:hidden} rather than fixed). Trim both sides so the row
     actually fits, with wrapping as a safety net if it still doesn't. */
  .site-header { flex-wrap: wrap; row-gap: 8px; padding: 12px 16px; }
  .site-logo img { width: 36px; height: 36px; }
  .logo-text__eyebrow, .logo-text__founded { display: none; }
  .logo-text__main { font-size: 13px; }
  .header-right { gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
  .header-search-toggle { display: none; }
  .lang-switch { font-size: 16px; gap: 4px; }
  .header-right .btn-primary { padding: 8px 14px; font-size: 12px; }
  .hero { grid-template-columns: 1fr; aspect-ratio: auto; min-height: 0; padding-left: 16px; padding-right: 16px; }
  /* Fixed height here instead of 100% — against an auto-height single-column
     grid row, a percentage height on .hero-visual/#globeViz fed back into
     globe.js's own clientHeight-based resize() and made the globe balloon
     to a huge size instead of the intended compact mobile height. */
  .hero-visual { order: -1; height: auto; min-height: 0; transform: none; }
  /* Side padding shrinks the sphere itself a bit, opening up a safe margin
     inside .hero's own overflow:hidden box for labels near the globe's
     left/right edge to sit in without being cut off mid-word — without
     this they rendered flush with .hero's clip boundary. */
  .hero-visual { padding: 0 16px; }
  /* aspect-ratio instead of a flat height — globe.js now forces the WebGL
     canvas itself to width×width (see resize()), so a container that's
     taller than it is wide just wasted space below the circle. Matching
     the container to the same 1:1 shape means the freed-up padding above
     goes straight into a visibly bigger globe instead of empty margin. */
  #globeViz { height: auto; aspect-ratio: 1 / 1; }
  .section-head { grid-template-columns: 1fr; }
  .card-grid { grid-template-columns: 1fr; }
  /* Every archive template sets a fixed aspect-ratio:4/3 inline on these
     cards (single column here, so much narrower than the desktop grid) —
     with the tag + title + excerpt stack still pinned to the bottom via
     justify-content:flex-end, a longer title/excerpt no longer fit the
     resulting shorter card and got cropped by its own overflow:hidden,
     cutting the top line of text clean off. !important is required to
     beat the inline style (a class-level rule alone can't). Letting the
     card's height follow its content instead removes the ceiling that
     was causing the crop — object-fit:cover on the photo handles any
     resulting height fine. */
  .direction-card { aspect-ratio: auto !important; min-height: 220px; }
  .media-grid { grid-template-columns: 1fr; }
  .quote-section { grid-template-columns: 1fr; padding: 50px 30px; }
  .feature-block { grid-template-columns: 1fr; }
  /* Height here is content-driven (aspect-ratio:auto), much shorter/
     narrower than the photo's own 3:1 ratio, so `cover` has to crop hard
     — center-cropping picked exactly the empty middle-distance mountains,
     missing the hiker entirely (he sits in the photo's right third). */
  .cta-bar { flex-direction: column; text-align: center; padding: 40px 30px; aspect-ratio: auto; min-height: 0; background-position: right center; }
  .cta-ornament { display: none; }
  .cta-side { text-align: center; }
  .footer-top { grid-template-columns: 1fr 1fr; text-align: left; }
  .footer-col--brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; text-align: center; }
}