/* ==========================================================================
   GRAUMANN MASTER BENTO GRID SYSTEM — 2026
   ==========================================================================
   Sleek, modular, high-contrast Bento Grid system inspired by German
   engineering aesthetics and Shell's clean industrial layout architecture.

   Principles:
   - Structured 12-column grid with versatile spans (12, 8, 7, 6, 5, 4, 3)
   - Distinct rounded cards (border-radius: 20px) with crisp 1px borders
   - Dedicated visual slots/frames for photography with proportional aspect ratios
   - Generous, comfortable internal card padding and scannable typography rhythm
   - Interactive hover elevation (subtle lift + border highlight, 0 blur slop)
   - 100% responsive: fluid on desktop, 2-col on tablet, clean stack on mobile
   ========================================================================== */

:root {
  --bento-r: 20px;
  --bento-r-media: 14px;
  --bento-gap: clamp(16px, 1.8vw, 24px);
  --bento-pad: clamp(22px, 2.4vw, 36px);
  --bento-pad-compact: clamp(16px, 1.8vw, 24px);
  
  --bento-bg-white: #FFFFFF;
  --bento-bg-canvas: #F4F8FC;
  --bento-bg-canvas-2: #EAF0F7;
  --bento-bg-navy: #01244C;
  --bento-bg-navy-dark: #001328;
  
  --bento-border: #DCE5F0;
  --bento-border-canvas: #D0DFEE;
  --bento-border-hover: #0B63A8;
  --bento-border-dark: rgba(255, 255, 255, 0.12);
  --bento-border-dark-hover: rgba(143, 196, 238, 0.35);

  --bento-text-title: #01244C;
  --bento-text-body: #475569;
  --bento-text-muted: #64748B;
  --bento-text-accent: #0B63A8;
  
  --bento-transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                      border-color 0.22s ease,
                      box-shadow 0.22s ease;
}

/* ==========================================================================
   §1 · GRID CONTAINER & SPANS
   ========================================================================== */
.bento,
.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--bento-gap);
  width: 100%;
}

.bento-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--bento-gap);
  width: 100%;
}

/* 12-column spans */
.col-12, .s12 { grid-column: span 12; }
.col-10, .s10 { grid-column: span 10; }
.col-9,  .s9  { grid-column: span 9; }
.col-8,  .s8  { grid-column: span 8; }
.col-7,  .s7  { grid-column: span 7; }
.col-6,  .s6  { grid-column: span 6; }
.col-5,  .s5  { grid-column: span 5; }
.col-4,  .s4  { grid-column: span 4; }
.col-3,  .s3  { grid-column: span 3; }
.col-2,  .s2  { grid-column: span 2; }

.row-span-2, .r2 { grid-row: span 2; }
.row-span-3, .r3 { grid-row: span 3; }

/* ==========================================================================
   §2 · BENTO CARD MODULES
   ========================================================================== */
.bento-card,
.bp,
.bp-bento {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  width: 100%;
  padding: var(--bento-pad);
  border-radius: var(--bento-r);
  background: var(--bento-bg-white);
  border: 1px solid var(--bento-border);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  text-decoration: none;
  color: inherit;
  transition: var(--bento-transition);
}

.bento-card > *,
.bp > * {
  margin-top: 0;
}

/* Hover elevation: subtle engineered lift */
.bento-card:hover,
.bp:hover,
.bp-bento:hover {
  border-color: var(--bento-border-hover);
  transform: translateY(-2px);
}

/* Card Variations */
.bento-card--canvas,
.bp--canvas {
  background: var(--bento-bg-canvas);
  border-color: var(--bento-border-canvas);
}

.bento-card--canvas2 {
  background: var(--bento-bg-canvas-2);
  border-color: var(--bento-border-canvas);
}

.bento-card--white,
.bp--oq {
  background: var(--bento-bg-white);
  border-color: var(--bento-border);
}

.bento-card--navy,
.bp--navy {
  background: var(--bento-bg-navy);
  border-color: var(--bento-border-dark);
  color: #FFFFFF;
}

.bento-card--navy:hover,
.bp--navy:hover {
  border-color: var(--bento-border-dark-hover);
}

.bento-card--navy h1, .bento-card--navy h2, .bento-card--navy h3, .bento-card--navy h4,
.bp--navy h1, .bp--navy h2, .bp--navy h3, .bp--navy h4 {
  color: #FFFFFF !important;
}

.bento-card--navy p, .bento-card--navy li,
.bp--navy p, .bp--navy li {
  color: rgba(255, 255, 255, 0.82) !important;
}

.bento-card--navy .bento-desc,
.bp--navy .bp__p {
  color: rgba(255, 255, 255, 0.80) !important;
}

.bento-card--navy .bento-action,
.bp--navy .ha {
  color: #8FC4EE !important;
}
.bento-card--navy .bento-action:hover,
.bp--navy .ha:hover {
  color: #FFFFFF !important;
}

/* Dark Section Inner Cards (e.g. BOSH-07, BOSH-11) */
.bento-card--quyuq-ich,
.bp--quyuq-ich {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  color: #FFFFFF;
}
.bento-card--quyuq-ich:hover,
.bp--quyuq-ich:hover {
  border-color: rgba(143, 196, 238, 0.45);
  background: rgba(255, 255, 255, 0.08);
}
.bento-card--quyuq-ich h3, .bento-card--quyuq-ich h4,
.bp--quyuq-ich h3, .bp--quyuq-ich h4 {
  color: #FFFFFF !important;
}
.bento-card--quyuq-ich p,
.bp--quyuq-ich p {
  color: rgba(255, 255, 255, 0.82) !important;
}

/* Highlighted Accent Card */
.bento-card--highlight {
  border: 1.5px solid #0B63A8;
}

/* Compact padding variation */
.bento-card--compact {
  padding: var(--bento-pad-compact);
}

/* Horizontal Card layout */
.bento-card--horizontal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: var(--bento-gap);
  align-items: center;
}

/* ==========================================================================
   §3 · DEDICATED IMAGE FRAMES / VISUAL SLOTS («rasmlar uchun joy»)
   ========================================================================== */
figure {
  margin: 0;
}

.bento-media,
.bento-slot {
  position: relative;
  width: 100%;
  border-radius: var(--bento-r-media);
  overflow: hidden;
  background: var(--bento-bg-canvas-2);
  margin: 0 0 20px 0;
  box-sizing: border-box;
  isolation: isolate;
  flex: none;
}

.bento-media > img,
.bento-media__img,
.bento-slot > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.bento-card:hover .bento-media > img,
.bento-card:hover .bento-slot > img,
.bp:hover .bento-media > img {
  transform: scale(1.035);
}

/* Aspect ratio modifiers */
.bento-media--16x9  { aspect-ratio: 16 / 9; }
.bento-media--16x10 { aspect-ratio: 16 / 10; }
.bento-media--4x3   { aspect-ratio: 4 / 3; }
.bento-media--3x2   { aspect-ratio: 3 / 2; }
.bento-media--1x1   { aspect-ratio: 1 / 1; }
.bento-media--21x9  { aspect-ratio: 21 / 9; }
.bento-media--4x5   { aspect-ratio: 4 / 5; }

/* Product bottle render frames (pure white background, uncropped contain) */
.bento-media--contain > img,
.bento-media--oq > img {
  object-fit: contain;
}
.bento-media--oq {
  background: #FFFFFF;
}

/* Media Frame Technical Placeholder (Engineered Blueprint Frame) */
.bento-media--placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-color: #EAF2F9;
  border: 1px dashed #B8D2EA;
  color: #4C779F;
  text-align: center;
  padding: 24px;
}

.bento-media__spec {
  font-family: 'JetBrains Mono', monospace, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0B63A8;
  background: #DCECF9;
  padding: 4px 10px;
  border-radius: 6px;
}

/* ==========================================================================
   §4 · INTERNAL CARD TYPOGRAPHY & SPACING RHYTHM
   ========================================================================== */

/* Eyebrow badge / tag */
.bento-badge,
.bento-tag,
.bento-n,
.bp__yorliq,
.bp__n {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0B63A8;
  background: #E9F3FC;
  padding: 4px 10px;
  border-radius: 6px;
  margin-bottom: 12px;
  line-height: 1.2;
}

.bento-card--navy .bento-badge,
.bento-card--navy .bento-tag,
.bento-card--navy .bento-n,
.bp--navy .bp__yorliq,
.bp--navy .bp__n {
  color: #8FC4EE;
  background: rgba(143, 196, 238, 0.14);
}

/* Card Heading */
.bento-title,
.bento-karta__h,
.bp__h {
  font-size: clamp(19px, 1.7vw, 24px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--bento-text-title);
  margin: 0 0 10px 0;
  letter-spacing: -0.02em;
}

.bento-title--lg {
  font-size: clamp(24px, 2.2vw, 32px);
}

/* Card Description */
.bento-desc,
.bento-karta__p,
.bp__p {
  font-size: clamp(14px, 1.05vw, 15px);
  line-height: 1.6;
  color: var(--bento-text-body);
  margin: 0 0 18px 0;
  max-width: 54ch;
}

/* Big Key Proof Number */
.bento-stat-val,
.bp__raqam {
  font-size: clamp(38px, 4vw, 56px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--bento-text-title);
  font-variant-numeric: tabular-nums;
  margin-bottom: 8px;
}

.bento-stat-val .unit,
.bp__raqam .plyus {
  font-size: 0.45em;
  letter-spacing: -0.01em;
  color: var(--bento-text-accent);
  vertical-align: super;
}

.bento-stat-label,
.bp__n {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--bento-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Feature checklist / pills inside cards */
.bento-pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  width: 100%;
}

.bento-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--bento-bg-canvas);
  border: 1px solid var(--bento-border);
  font-size: 13px;
  font-weight: 600;
  color: var(--bento-text-title);
}

/* Card Action / Footer Link (always pushed to bottom) */
.bento-action,
.bento-karta__past,
.bp__past {
  margin-top: auto;
  padding-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--bento-text-accent);
  text-decoration: none;
  transition: gap 0.2s ease, color 0.2s ease;
}

.bento-action .ik,
.bp__past .ik {
  width: 15px;
  height: 15px;
  transition: transform 0.2s ease;
}

.bento-action:hover,
.bento-card:hover .bento-action,
.bp:hover .bp__past {
  color: var(--bento-text-title);
  gap: 12px;
}

.bento-action:hover .ik,
.bento-card:hover .bento-action .ik {
  transform: translateX(4px);
}

/* ==========================================================================
   §5 · SECTION RHYTHM & BLOCK PADDING
   ========================================================================== */
.bento-sec {
  padding-block: clamp(72px, 7vw, 110px);
  position: relative;
}

.bento-sec--canvas {
  background: var(--bento-bg-canvas);
}

.bento-sec--white {
  background: var(--bento-bg-white);
}

.bento-sec--navy {
  background: var(--bento-bg-navy);
  color: #FFFFFF;
}

.bento-sec-header {
  margin-bottom: clamp(28px, 3.2vw, 44px);
  max-width: 720px;
}

.bento-sec-header--split {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 20px;
  max-width: 100%;
}

.bento-sec-title {
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--bento-text-title);
  margin: 12px 0 12px 0;
  text-wrap: balance;
}

.bento-sec--navy .bento-sec-title {
  color: #FFFFFF;
}

.bento-sec-lead {
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.6;
  color: var(--bento-text-muted);
  margin: 0;
  max-width: 60ch;
}

.bento-sec--navy .bento-sec-lead {
  color: rgba(255, 255, 255, 0.78);
}

/* ==========================================================================
   §6 · RESPONSIVE ADAPTATIONS
   ========================================================================== */
@media (max-width: 1024px) {
  .col-8, .s8,
  .col-7, .s7,
  .col-5, .s5 {
    grid-column: span 6;
  }
  .col-4, .s4,
  .col-3, .s3 {
    grid-column: span 6;
  }
  .bento-card--horizontal {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  :root {
    --bento-gap: 16px;
    --bento-pad: 20px;
  }
  .bento,
  .bento-grid,
  .bento-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .bento > *,
  .bento-grid > *,
  .bento-row > *,
  .col-12, .col-10, .col-9, .col-8, .col-7, .col-6, .col-5, .col-4, .col-3, .col-2,
  .s12, .s10, .s9, .s8, .s7, .s6, .s5, .s4, .s3, .s2 {
    grid-column: span 1 !important;
  }
  .row-span-2, .row-span-3, .r2, .r3 {
    grid-row: auto !important;
  }
}

/* ==========================================================================
   §7 · UNIVERSAL TRUST STRIP (.tasma) AS BENTO CARDS
   ========================================================================== */
.tasma {
  background: var(--bento-bg-canvas, #F4F8FC);
  padding-block: clamp(48px, 5vw, 72px) !important;
  border-top: 1px solid var(--bento-border, #DCE5F0);
}

.tasma__grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: var(--bento-gap, 24px) !important;
}

.tasma__k {
  background: #FFFFFF !important;
  border: 1px solid var(--bento-border, #DCE5F0) !important;
  border-radius: var(--bento-r, 20px) !important;
  padding: clamp(24px, 2.4vw, 32px) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  transition: var(--bento-transition) !important;
  border-left: 1px solid var(--bento-border, #DCE5F0) !important;
}

.tasma__k:hover {
  transform: translateY(-3px) !important;
  border-color: #B0C8E0 !important;
}

.tasma__k h3 {
  color: var(--bento-text-title, #01244C) !important;
  font-size: clamp(18px, 1.4vw, 20px) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

.tasma__k .tana-k {
  color: var(--bento-text-body, #475569) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

@media (max-width: 900px) {
  .tasma__grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}