/* ─── Bek Lab — shared stylesheet ────────────────────────────────── */

/* Base */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { font-size: 16px; }
body { background: #FAFAF8; color: #0D0D0D; -webkit-font-smoothing: antialiased; }

/* ── B&W image treatment ─────────────────────────────────────────── */
.bw     img { filter: grayscale(100%) contrast(1.12) brightness(1.4); }
.bw:hover img { filter: grayscale(100%) contrast(1.18) brightness(1.45); }
.zoom   img { transition: transform .45s ease; }
.zoom:hover img { transform: scale(1.04); }

/* ── Category kicker — orange, all-caps ─────────────────────────── */
.kicker {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: #FF6B35;
  line-height: 1;
  display: block;
}

/* ── Metadata row ────────────────────────────────────────────────── */
.meta {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #666666;
  line-height: 1;
}

/* ── Read / chevron link ─────────────────────────────────────────── */
.read-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #FF6B35;
  text-decoration: none;
  transition: gap .15s ease;
  white-space: nowrap;
}
.read-link:hover { gap: 10px; }

/* ── Article grid — responsive breakpoints ───────────────────────── */
@media (max-width: 1023px) {
  #editorial-grid { grid-template-columns: 1fr !important; }
  #sec-stack       { border-left: none !important; }
  #sec-stack > div { flex: none !important; }
  .sec-thumb       { aspect-ratio: 16/9 !important; }
  #hero-img        { aspect-ratio: 16/9 !important; }
  #hero-text       { flex: none !important; }
}

/* ── Secondary card h3 hover ─────────────────────────────────────── */
#sec-stack > div:hover h3 {
  text-decoration: underline;
  text-decoration-color: #0D0D0D;
  text-underline-offset: 4px;
}

/* ── Desktop nav tab ─────────────────────────────────────────────── */
.nav-tab {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
  padding: 0 16px;
  border-bottom: 2px solid transparent;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  line-height: 1;
  transition: color .2s, border-color .2s;
}
.nav-tab:hover        { color: rgba(255,255,255,.88); border-bottom-color: rgba(255,255,255,0.08); }
.nav-tab.active       { color: #fff; border-bottom-color: #FF6B35; font-weight: 700; }
.nav-tab--soon        { color: rgba(255,255,255,0.16) !important; cursor: default; pointer-events: none; border-bottom-color: transparent !important; }

/* ── Mobile nav link ─────────────────────────────────────────────── */
.m-link {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.38);
  padding: 15px 24px;
  border-left: 2px solid transparent;
  text-decoration: none;
  transition: color .2s, border-color .2s;
}
.m-link:hover        { color: rgba(255,255,255,.88); }
.m-link.active       { color: #fff; border-left-color: #FF6B35; font-weight: 700; }
.m-link--soon        { color: rgba(255,255,255,0.14) !important; cursor: default; pointer-events: none; border-left-color: transparent !important; }

/* ── Hamburger — hide on desktop ─────────────────────────────────── */
@media (min-width: 1024px) { #mob-btn { display: none !important; } }

/* ── Language switcher buttons ───────────────────────────────────── */
.lang-btn {
  font-family: 'Inter', sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 5px;
  color: rgba(255,255,255,0.28);
  transition: color .18s;
  line-height: 1;
  outline: none;
}
.lang-btn:hover        { color: rgba(255,255,255,0.72); }
.lang-btn.lang-active  { color: rgba(255,255,255,0.85); border-bottom: 1px solid #FF6B35; padding-bottom: 3px; }

/* ─── Sidebar layout ────────────────────────────────────────────── */

/* Fixed left column */
#sidebar {
  position: fixed;
  left: 0; top: 0;
  width: 240px;
  height: 100vh;
  background: #0D0D0D;
  border-right: 1px solid rgba(255,255,255,0.07);
  display: flex;
  flex-direction: column;
  z-index: 50;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
#sidebar::-webkit-scrollbar { display: none; }

/* Logo block */
.sb-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: 18px 18px 16px;
  text-decoration: none;
  position: relative;
}
.sb-lab-sub {
  position: absolute;
  left: 73px;
  top: 14px;
  font-family: 'Plus Jakarta Sans', Inter, sans-serif;
  font-weight: 700;
  font-size: 10.5px;
  color: #FF6B35;
  line-height: 1;
  white-space: nowrap;
}

/* Nav links */
.sb-nav {
  padding: 12px 0 8px;
  flex-shrink: 0;
}
.sb-link {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.42);
  padding: 9px 18px 9px 20px;
  border-left: 2px solid transparent;
  margin-left: -1px;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.sb-link:hover { color: rgba(255,255,255,0.82); }
.sb-link.active { color: #fff; border-left-color: #FF6B35; font-weight: 700; }
.sb-link--soon { color: rgba(255,255,255,0.19) !important; cursor: default; pointer-events: none; }
.sb-divider { height: 1px; background: rgba(255,255,255,0.07); margin: 5px 18px; }

/* Spacer */
.sb-spacer { flex: 1; min-height: 16px; }

/* Bottom section */
.sb-foot {
  flex-shrink: 0;
  padding: 14px 18px 20px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.sb-langs { display: flex; align-items: center; margin-bottom: 12px; }
.sb-dot {
  color: rgba(255,255,255,0.14);
  font-size: 10px;
  line-height: 1;
  pointer-events: none;
  padding: 0 1px;
}
.sb-parent {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.22);
  text-decoration: none;
  line-height: 1;
  margin-bottom: 10px;
  transition: color .15s;
}
.sb-parent:hover { color: rgba(255,255,255,0.55); }
.sb-legal { display: flex; gap: 8px; flex-wrap: wrap; }
.sb-legal a {
  font-family: 'Inter', sans-serif;
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.18);
  text-decoration: none;
  line-height: 1;
  transition: color .15s;
}
.sb-legal a:hover { color: rgba(255,255,255,0.5); }

/* ── Page body — offset right of sidebar ─────────────────────────── */
#page-body { margin-left: 240px; display: flex; flex-direction: column; min-height: 100vh; }
#page-body > main { flex: 1; }

/* ── Mobile top header (hidden on desktop) ───────────────────────── */
#mob-header {
  display: none;
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(to bottom,#0d0d0d 0%,#0d0d0d 55%,#2d2d2d 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.07),0 2px 6px rgba(0,0,0,0.28);
  height: 54px;
  padding: 0 20px;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

/* ── Sidebar overlay (mobile) ────────────────────────────────────── */
#sb-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 45;
}
#sb-overlay.active { display: block; }

/* ── Responsive: collapse sidebar on tablet/mobile ───────────────── */
@media (max-width: 1023px) {
  #sidebar    { transform: translateX(-100%); transition: transform .26s ease; z-index: 50; }
  #sidebar.open { transform: translateX(0); }
  #page-body  { margin-left: 0; }
  #mob-header { display: flex; }
}

/* ═══════════════════════════════════════════════════════════════════
   UZ TEST LAYOUT — scoped to body.uz-test (/lab/uz/index.html only)
   Do not promote these classes to EN/RU until approved.
   ═══════════════════════════════════════════════════════════════════ */

/* Wider sidebar */
body.uz-test #sidebar   { width: 240px; }
body.uz-test #page-body { margin-left: 240px; }

/* Sidebar nav — improved contrast + slightly larger */
body.uz-test .sb-link       { font-size: 11px; color: rgba(255,255,255,0.60); }
body.uz-test .sb-link:hover { color: rgba(255,255,255,0.88); }
body.uz-test .sb-link.active { color: #fff; }
body.uz-test .sb-link--soon { color: rgba(255,255,255,0.28) !important; }

/* Cancel margin on mobile */
@media (max-width: 1023px) {
  body.uz-test #page-body { margin-left: 0; }
}

/* ── Main content wrapper ───────────────────────────────────────── */
body.uz-test .uz-main {
  max-width: 1040px;
  margin: 0 auto;
  padding: 18px 20px 0;
}

/* ── Article grid outer border ──────────────────────────────────── */
body.uz-test .uz-grid-wrapper {
  border: 1.5px solid #D4D0C8;
}

/* ── Two-column editorial grid ──────────────────────────────────── */
body.uz-test .uz-editorial {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 320px);
  border-bottom: 1.5px solid #D4D0C8;
  align-items: start; /* columns independent height */
}

/* ── Hero column ────────────────────────────────────────────────── */
body.uz-test .uz-hero {
  display: flex;
  flex-direction: column;
  border-right: 1.5px solid #D4D0C8;
}
body.uz-test .uz-hero-img {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  width: 100%;
  text-decoration: none;
  flex-shrink: 0;
}
body.uz-test .uz-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body.uz-test .uz-hero-body {
  display: flex;
  flex-direction: column;
  padding: 14px 20px 16px;
  border-top: 1.5px solid #D4D0C8;
  /* content-height only — no flex:1 stretch */
}
body.uz-test .uz-hero-title {
  font-family: 'Plus Jakarta Sans', Inter, sans-serif;
  font-weight: 800;
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  line-height: 1.18;
  letter-spacing: -0.025em;
  margin: 6px 0 0;
  color: #0D0D0D;
}
body.uz-test .uz-hero-title a {
  text-decoration: none;
  color: inherit;
  display: block;
}
body.uz-test .uz-hero-title a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
body.uz-test .uz-hero-divider {
  height: 1px;
  background: #D4D0C8;
  margin: 10px 0;
  flex-shrink: 0;
}
body.uz-test .uz-hero-excerpt {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.72;
  color: #333333;
  margin: 0;
}
body.uz-test .uz-hero-pub {
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  line-height: 1.4;
  color: #777777;
  letter-spacing: 0.07em;
  margin: 6px 0 0;
}
body.uz-test .uz-hero-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
  margin-top: 12px;
  border-top: 1px solid #D4D0C8;
}
body.uz-test .uz-hero-meta .read-link { margin-left: auto; }

/* ── Secondary story stack ──────────────────────────────────────── */
body.uz-test .uz-sec-stack {
  display: flex;
  flex-direction: column;
}

/* ── Article card ───────────────────────────────────────────────── */
body.uz-test .uz-card {
  display: flex;
  flex-direction: column;
  border-bottom: 1.5px solid #D4D0C8;
}
body.uz-test .uz-card:last-child { border-bottom: none; }
body.uz-test .uz-card-img {
  display: block;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  flex-shrink: 0;
  text-decoration: none;
}
body.uz-test .uz-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body.uz-test .uz-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 10px 14px 12px;
}
body.uz-test .uz-card-title a {
  text-decoration: none;
  color: inherit;
  display: block;
}
body.uz-test .uz-card-title a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.uz-test .uz-card-title {
  font-family: 'Plus Jakarta Sans', Inter, sans-serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: #0D0D0D;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 5px 0 0;
}
body.uz-test .uz-card:hover .uz-card-title {
  text-decoration: underline;
  text-decoration-color: #0D0D0D;
  text-underline-offset: 3px;
}
body.uz-test .uz-card-meta {
  margin-top: auto;
  padding-top: 9px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Coming-soon card image placeholder */
body.uz-test .uz-card-placeholder {
  aspect-ratio: 21 / 9;
  background: #EDEAE4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ── Up-next strip ──────────────────────────────────────────────── */
body.uz-test .uz-upnext {
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 14px;
  min-height: 36px;
}

/* ── Laboratoriyada section ─────────────────────────────────────── */
body.uz-test .uz-lab-section { margin-top: 44px; }
body.uz-test .uz-lab-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 13px;
  border-bottom: 1.5px solid #C8C4BA;
}
body.uz-test .uz-lab-rows {
  border: 1.5px solid #C8C4BA;
  border-top: none;
}
body.uz-test .uz-lab-row {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  gap: 16px;
  border-bottom: 1px solid #D4D0C8;
}
body.uz-test .uz-lab-row:last-child { border-bottom: none; }

/* ── Responsive: tablet / mobile ───────────────────────────────── */
@media (max-width: 1023px) {
  body.uz-test .uz-editorial {
    grid-template-columns: 1fr;
  }
  body.uz-test .uz-hero {
    border-right: none;
    border-bottom: 1.5px solid #D4D0C8;
  }
  body.uz-test .uz-hero-img { aspect-ratio: 16 / 9; }
  body.uz-test .uz-card-img { aspect-ratio: 16 / 9; }
}

/* ── Bek chevron icon — UZ forward-action arrows ── */
body.uz-test .bek-chev {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: -0.5px;
  flex-shrink: 0;
  transform: scaleX(-1);
}