/* ==========================================================================
   DR. MAHAR KASHIF RASHEED — OFFICIAL CLINICAL HEALTHCARE PORTAL
   SWISS INTERNATIONAL 12-COLUMN GRID & ADAPTIVE RESPONSIVE LAYOUT SYSTEM
   ==========================================================================
   Specification & Architecture Standards:
   - Swiss International Typographic Style (Müller-Brockmann Rationalist Grid)
   - Flutter Adaptive Layout Architecture (Constraints Down, Sizes Up, Parent Positions)
   - Strict 4px / 8px Baseline Vertical Rhythm
   - Fluid clamp() Spatial Mechanics & Zero Horizontal Overflow Shield
   - Breakpoint Hierarchy:
       * Mobile Small:  360px  (4-column)
       * Mobile Large:  640px  (4-column / 6-column fluid)
       * Tablet:        768px  (8-column)
       * Desktop Small: 1024px (12-column)
       * Desktop Large: 1280px (12-column standard)
       * Ultra-Wide 2K: 1536px (12-column wide)
   - Gutter Hierarchy:
       * Mobile:  16px
       * Tablet:  24px
       * Desktop: 32px
   - Asymmetric Bento Grid Modules & Specialized Clinical Layout Archetypes
   ========================================================================== */

/* ─── 1. DESIGN TOKENS & MATHEMATICAL SPATIAL SCALE ──────────────────────── */
:root {
  /* Breakpoint Dimensions (Reference Constants) */
  --bp-sm: 360px;
  --bp-md-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;

  /* Container Maximum Bounds */
  --container-fluid-max: 1600px;
  --container-2xl-max: 1440px;
  --container-xl-max: 1280px;
  --container-lg-max: 1024px;
  --container-md-max: 768px;
  --container-sm-max: 640px;
  --container-prose-max: 720px; /* Optimal reading measure: 65-75ch */

  /* Mathematical 8px Baseline Rhythm Tokens */
  --baseline-micro: 4px;   /* 0.5x unit */
  --baseline-1: 8px;       /* 1.0x unit */
  --baseline-1-5: 12px;    /* 1.5x unit */
  --baseline-2: 16px;      /* 2.0x unit */
  --baseline-2-5: 20px;    /* 2.5x unit */
  --baseline-3: 24px;      /* 3.0x unit */
  --baseline-4: 32px;      /* 4.0x unit */
  --baseline-5: 40px;      /* 5.0x unit */
  --baseline-6: 48px;      /* 6.0x unit */
  --baseline-7: 56px;      /* 7.0x unit */
  --baseline-8: 64px;      /* 8.0x unit */
  --baseline-10: 80px;     /* 10.0x unit */
  --baseline-12: 96px;     /* 12.0x unit */
  --baseline-16: 128px;    /* 16.0x unit */

  /* Gutter Hierarchy (Mobile 16px -> Tablet 24px -> Desktop 32px) */
  --gutter-mobile: 16px;
  --gutter-tablet: 24px;
  --gutter-desktop: 32px;
  --gutter-fluid: clamp(16px, 1.25vw + 12px, 32px);

  /* Page Horizontal Inset Padding (Fluid Margin) */
  --page-inset: clamp(16px, 3.5vw, 48px);
  --section-padding-y: clamp(48px, 6vw, 96px);
  --section-padding-y-sm: clamp(32px, 4vw, 64px);
  --section-padding-y-lg: clamp(64px, 8vw, 128px);

  /* Active Grid Geometry Defaults (Desktop 12-Column Base) */
  --grid-columns: 12;
  --grid-gutter: var(--gutter-desktop);
  --grid-row-gap: var(--gutter-desktop);
}

/* ─── 2. ZERO HORIZONTAL OVERFLOW & CONSTRAINT RESET ─────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  width: 100%;
  max-width: 100%;
  overflow-x: clip; /* Modern standards overflow containment */
}

body {
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  position: relative;
  overflow-x: clip;
}

/* Fallback for engines without overflow-x: clip support */
@supports not (overflow-x: clip) {
  html, body {
    overflow-x: hidden;
  }
}

/* Media element constraints to guarantee zero blow-out */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

iframe,
embed,
object {
  max-width: 100%;
}

/* Flutter-inspired rule: Grid and Flex items must allow shrinkage below intrinsic width */
.grid-12 > *,
.bento-container > *,
.bento-grid > *,
.responsive-split > *,
.clinic-quad > *,
.hero-split > *,
.kitchen-triad > * {
  min-width: 0;
  min-height: 0;
}

/* Text wrap safety against extreme strings / medical terminology */
p, h1, h2, h3, h4, h5, h6, span, a, li {
  overflow-wrap: break-word;
  word-break: normal;
}

/* ─── 3. ADAPTIVE CONTAINER ARCHITECTURE ─────────────────────────────────── */
/* Fluid Outer Container: scales smoothly up to 1600px with safe margins */
.container-fluid {
  width: 100%;
  max-width: var(--container-fluid-max);
  margin-inline: auto;
  padding-inline: var(--page-inset);
}

/* Swiss Centered Standard Container (1280px Desktop Anchor) */
.container {
  width: 100%;
  max-width: var(--container-xl-max);
  margin-inline: auto;
  padding-inline: var(--page-inset);
}

/* Ultra-Wide 2K Display Container (1440px) */
.container-2xl {
  width: 100%;
  max-width: var(--container-2xl-max);
  margin-inline: auto;
  padding-inline: var(--page-inset);
}

/* Medium Desktop Container (1024px) */
.container-lg {
  width: 100%;
  max-width: var(--container-lg-max);
  margin-inline: auto;
  padding-inline: var(--page-inset);
}

/* Tablet Container (768px) */
.container-md {
  width: 100%;
  max-width: var(--container-md-max);
  margin-inline: auto;
  padding-inline: var(--page-inset);
}

/* Constrained Prose / Reading Container (720px - Flutter ConstrainedBox Equivalent) */
.container-prose,
.box-constrained {
  width: 100%;
  max-width: var(--container-prose-max);
  margin-inline: auto;
  padding-inline: var(--page-inset);
}

/* Full Bleed Container: Breaks out of outer paddings to 100% viewport width */
.container-bleed {
  width: 100%;
  max-width: 100%;
  padding-inline: 0;
  margin-inline: 0;
}

/* ─── 4. STRICT 12-COLUMN SWISS GRID CORE (.grid-12) ─────────────────────── */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  row-gap: var(--grid-row-gap);
  width: 100%;
  align-items: stretch;
}

/* Gutter Modifiers */
.grid-12.gap-16 { column-gap: 16px; row-gap: 16px; }
.grid-12.gap-24 { column-gap: 24px; row-gap: 24px; }
.grid-12.gap-32 { column-gap: 32px; row-gap: 32px; }
.grid-12.gap-48 { column-gap: 48px; row-gap: 48px; }
.grid-12.gap-none { column-gap: 0; row-gap: 0; }

/* Alignment Modifiers */
.grid-12.items-start { align-items: start; }
.grid-12.items-center { align-items: center; }
.grid-12.items-end { align-items: end; }
.grid-12.items-baseline { align-items: baseline; }

/* Desktop 12-Column Spans (Default Base) */
.col-span-1  { grid-column: span 1 / span 1; }
.col-span-2  { grid-column: span 2 / span 2; }
.col-span-3  { grid-column: span 3 / span 3; }
.col-span-4  { grid-column: span 4 / span 4; }
.col-span-5  { grid-column: span 5 / span 5; }
.col-span-6  { grid-column: span 6 / span 6; }
.col-span-7  { grid-column: span 7 / span 7; }
.col-span-8  { grid-column: span 8 / span 8; }
.col-span-9  { grid-column: span 9 / span 9; }
.col-span-10 { grid-column: span 10 / span 10; }
.col-span-11 { grid-column: span 11 / span 11; }
.col-span-12 { grid-column: span 12 / span 12; }

/* Grid Starts (Explicit Column Placements) */
.col-start-1  { grid-column-start: 1; }
.col-start-2  { grid-column-start: 2; }
.col-start-3  { grid-column-start: 3; }
.col-start-4  { grid-column-start: 4; }
.col-start-5  { grid-column-start: 5; }
.col-start-6  { grid-column-start: 6; }
.col-start-7  { grid-column-start: 7; }
.col-start-8  { grid-column-start: 8; }
.col-start-9  { grid-column-start: 9; }
.col-start-10 { grid-column-start: 10; }
.col-start-11 { grid-column-start: 11; }
.col-start-12 { grid-column-start: 12; }

/* Grid Ends */
.col-end-1  { grid-column-end: 1; }
.col-end-2  { grid-column-end: 2; }
.col-end-3  { grid-column-end: 3; }
.col-end-4  { grid-column-end: 4; }
.col-end-5  { grid-column-end: 5; }
.col-end-6  { grid-column-end: 6; }
.col-end-7  { grid-column-end: 7; }
.col-end-8  { grid-column-end: 8; }
.col-end-9  { grid-column-end: 9; }
.col-end-10 { grid-column-end: 10; }
.col-end-11 { grid-column-end: 11; }
.col-end-12 { grid-column-end: 12; }
.col-end-13 { grid-column-end: 13; }

/* Row Spans */
.row-span-1 { grid-row: span 1 / span 1; }
.row-span-2 { grid-row: span 2 / span 2; }
.row-span-3 { grid-row: span 3 / span 3; }
.row-span-4 { grid-row: span 4 / span 4; }

/* ─── 5. ASYMMETRIC BENTO GRID ARCHITECTURE ──────────────────────────────── */
/* Bento Container */
.bento-container {
  width: 100%;
  max-width: var(--container-xl-max);
  margin-inline: auto;
  padding-inline: var(--page-inset);
}

/* Master Bento Grid Matrix */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(180px, auto);
  grid-auto-flow: dense;
  gap: var(--grid-gutter);
  width: 100%;
}

/* Specialized Bento Card Base */
.bento-item,
.bento-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: 20px;
  overflow: hidden;
  background: #ffffff;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

/* Bento Span Aliases (Convenience mappings for 12-col bento cells) */
.bento-grid > .span-1  { grid-column: span 3; }  /* 1/4 width card */
.bento-grid > .span-2  { grid-column: span 6; }  /* 1/2 width card */
.bento-grid > .span-3  { grid-column: span 9; }  /* 3/4 width card */
.bento-grid > .span-4  { grid-column: span 12; } /* Full width card */

/* Direct Spans (When used inside 12-col, 4-col or 3-col contexts) */
.span-1 { grid-column: span 1; }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-12 { grid-column: span 12; }

/* Row Spans for Asymmetric Bento Stacking */
.row-span-1 { grid-row: span 1; }
.row-span-2 { grid-row: span 2; }
.row-span-3 { grid-row: span 3; }

/* ─── 6. SPECIALIZED CLINICAL ARCHETYPES ─────────────────────────────────── */

/* Archetype A: HERO SPLIT (.hero-split)
   Rationalist Golden Ratio Hero Split: 7 Columns Content vs 5 Columns Showcase Visual */
.hero-split {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  align-items: center;
  gap: clamp(32px, 4vw, 64px);
  width: 100%;
}

.hero-split > .hero-primary-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.hero-split > .hero-visual-col {
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Archetype B: CLINIC QUAD (.clinic-quad)
   4-Hub Bento Layout for Lahore DHA, Jhang, Mian Channu & Global Telemedicine */
.clinic-quad {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gutter);
  width: 100%;
  align-items: stretch;
}

.clinic-quad > .clinic-cell {
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Archetype C: KITCHEN AS MEDICINE TRIAD (.kitchen-triad)
   3-Column Holistic Clinical Protocol Cards */
.kitchen-triad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gutter);
  width: 100%;
  align-items: stretch;
}

/* Archetype D: CREDENTIALS & STATS QUARTET (.stats-quartet)
   4-Pillar Stat Numbers (Years Experience, Patients, Clinics, App Users) */
.stats-quartet {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gutter);
  width: 100%;
}

/* ─── 7. FLUTTER-INSPIRED ADAPTIVE LAYOUT PRIMITIVES ─────────────────────── */

/* Responsive Split (.responsive-split):
   Row on Desktop -> Column Stack on Mobile / Tablet */
.responsive-split {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: var(--grid-gutter);
  width: 100%;
}

.responsive-split.split-50-50 > * {
  flex: 1 1 50%;
  min-width: 0;
}

.responsive-split.split-60-40 > *:first-child {
  flex: 0 0 calc(60% - (var(--grid-gutter) * 0.4));
  min-width: 0;
}
.responsive-split.split-60-40 > *:last-child {
  flex: 0 0 calc(40% - (var(--grid-gutter) * 0.6));
  min-width: 0;
}

.responsive-split.split-70-30 > *:first-child {
  flex: 0 0 calc(70% - (var(--grid-gutter) * 0.3));
  min-width: 0;
}
.responsive-split.split-70-30 > *:last-child {
  flex: 0 0 calc(30% - (var(--grid-gutter) * 0.7));
  min-width: 0;
}

/* Flutter Widget Equivalents: Expanded / Flexible / ConstrainedBox */
.expanded-child {
  flex: 1 1 0%;
  min-width: 0;
}

.flexible-child {
  flex: 0 1 auto;
  min-width: 0;
}

.tight-fit {
  flex: 1 1 auto;
}

/* Flutter SliverGridDelegateWithMaxCrossAxisExtent Equivalent:
   Auto-filling grid with optimal card boundaries without media query flicker */
.sliver-auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: var(--grid-gutter);
  width: 100%;
}

.sliver-auto-grid-lg {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
  gap: var(--grid-gutter);
  width: 100%;
}

/* ─── 8. MATHEMATICAL 8PX BASELINE VERTICAL RHYTHM ───────────────────────── */
/* Vertical Flow Utilities (Axiomatic Margins) */
.flow-8 > * + *  { margin-top: var(--baseline-1) !important; }
.flow-12 > * + * { margin-top: var(--baseline-1-5) !important; }
.flow-16 > * + * { margin-top: var(--baseline-2) !important; }
.flow-24 > * + * { margin-top: var(--baseline-3) !important; }
.flow-32 > * + * { margin-top: var(--baseline-4) !important; }
.flow-48 > * + * { margin-top: var(--baseline-6) !important; }
.flow-64 > * + * { margin-top: var(--baseline-8) !important; }

/* Baseline Section Padding */
.py-baseline-section    { padding-top: var(--section-padding-y); padding-bottom: var(--section-padding-y); }
.py-baseline-section-sm { padding-top: var(--section-padding-y-sm); padding-bottom: var(--section-padding-y-sm); }
.py-baseline-section-lg { padding-top: var(--section-padding-y-lg); padding-bottom: var(--section-padding-y-lg); }

/* Spacing Units (Padding) */
.p-8  { padding: var(--baseline-1); }
.p-16 { padding: var(--baseline-2); }
.p-24 { padding: var(--baseline-3); }
.p-32 { padding: var(--baseline-4); }
.p-48 { padding: var(--baseline-6); }

.px-8  { padding-left: var(--baseline-1); padding-right: var(--baseline-1); }
.px-16 { padding-left: var(--baseline-2); padding-right: var(--baseline-2); }
.px-24 { padding-left: var(--baseline-3); padding-right: var(--baseline-3); }
.px-32 { padding-left: var(--baseline-4); padding-right: var(--baseline-4); }
.px-48 { padding-left: var(--baseline-6); padding-right: var(--baseline-6); }

.py-8  { padding-top: var(--baseline-1); padding-bottom: var(--baseline-1); }
.py-16 { padding-top: var(--baseline-2); padding-bottom: var(--baseline-2); }
.py-24 { padding-top: var(--baseline-3); padding-bottom: var(--baseline-3); }
.py-32 { padding-top: var(--baseline-4); padding-bottom: var(--baseline-4); }
.py-48 { padding-top: var(--baseline-6); padding-bottom: var(--baseline-6); }
.py-64 { padding-top: var(--baseline-8); padding-bottom: var(--baseline-8); }

/* Spacing Units (Margin) */
.my-8  { margin-top: var(--baseline-1); margin-bottom: var(--baseline-1); }
.my-16 { margin-top: var(--baseline-2); margin-bottom: var(--baseline-2); }
.my-24 { margin-top: var(--baseline-3); margin-bottom: var(--baseline-3); }
.my-32 { margin-top: var(--baseline-4); margin-bottom: var(--baseline-4); }
.my-48 { margin-top: var(--baseline-6); margin-bottom: var(--baseline-6); }
.my-64 { margin-top: var(--baseline-8); margin-bottom: var(--baseline-8); }

/* Gap Units */
.gap-8  { gap: var(--baseline-1); }
.gap-16 { gap: var(--baseline-2); }
.gap-24 { gap: var(--baseline-3); }
.gap-32 { gap: var(--baseline-4); }
.gap-48 { gap: var(--baseline-6); }
.gap-64 { gap: var(--baseline-8); }

/* ─── 9. ADAPTIVE RESPONSIVE BREAKPOINT MATRIX & COLUMN DROPPING ─────────── */

/* ==========================================================================
   BREAKPOINT 1: ULTRA-WIDE DESKTOP (>= 1536px)
   ========================================================================== */
@media (min-width: 1536px) {
  :root {
    --grid-gutter: 32px;
    --grid-row-gap: 32px;
  }

  .container {
    max-width: var(--container-2xl-max);
  }

  .grid-12-2xl {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .col-span-2xl-1  { grid-column: span 1 / span 1; }
  .col-span-2xl-2  { grid-column: span 2 / span 2; }
  .col-span-2xl-3  { grid-column: span 3 / span 3; }
  .col-span-2xl-4  { grid-column: span 4 / span 4; }
  .col-span-2xl-6  { grid-column: span 6 / span 6; }
  .col-span-2xl-8  { grid-column: span 8 / span 8; }
  .col-span-2xl-12 { grid-column: span 12 / span 12; }
}

/* ==========================================================================
   BREAKPOINT 2: STANDARD DESKTOP (1280px to 1535px)
   ========================================================================== */
@media (min-width: 1280px) and (max-width: 1535px) {
  :root {
    --grid-gutter: 32px;
    --grid-row-gap: 32px;
  }

  .col-span-xl-1  { grid-column: span 1 / span 1; }
  .col-span-xl-2  { grid-column: span 2 / span 2; }
  .col-span-xl-3  { grid-column: span 3 / span 3; }
  .col-span-xl-4  { grid-column: span 4 / span 4; }
  .col-span-xl-6  { grid-column: span 6 / span 6; }
  .col-span-xl-8  { grid-column: span 8 / span 8; }
  .col-span-xl-12 { grid-column: span 12 / span 12; }
}

/* ==========================================================================
   BREAKPOINT 3: COMPACT LAPTOP / SMALL DESKTOP (1024px to 1279px)
   ========================================================================== */
@media (min-width: 1024px) and (max-width: 1279px) {
  :root {
    --grid-gutter: 24px;
    --grid-row-gap: 24px;
  }

  .hero-split {
    gap: 32px;
  }

  .col-span-lg-1  { grid-column: span 1 / span 1; }
  .col-span-lg-2  { grid-column: span 2 / span 2; }
  .col-span-lg-3  { grid-column: span 3 / span 3; }
  .col-span-lg-4  { grid-column: span 4 / span 4; }
  .col-span-lg-6  { grid-column: span 6 / span 6; }
  .col-span-lg-8  { grid-column: span 8 / span 8; }
  .col-span-lg-12 { grid-column: span 12 / span 12; }
}

/* ==========================================================================
   BREAKPOINT 4: TABLET ARCHITECTURE (768px to 1023px)
   Swiss Grid drops to 8-Column Architecture, Gutters: 24px
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --grid-columns: 8;
    --grid-gutter: var(--gutter-tablet);
    --grid-row-gap: var(--gutter-tablet);
  }

  /* 8-Column Grid Conversion on Tablet */
  .grid-12 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    column-gap: var(--gutter-tablet);
    row-gap: var(--gutter-tablet);
  }

  /* Proportional 12 -> 8 Column Dropping Rules */
  .col-span-12 { grid-column: span 8 / span 8; }
  .col-span-11,
  .col-span-10,
  .col-span-9  { grid-column: span 8 / span 8; }
  .col-span-8  { grid-column: span 8 / span 8; }
  .col-span-7,
  .col-span-6  { grid-column: span 4 / span 4; } /* 2-card row */
  .col-span-5,
  .col-span-4  { grid-column: span 4 / span 4; }
  .col-span-3  { grid-column: span 4 / span 4; }
  .col-span-2  { grid-column: span 2 / span 2; }
  .col-span-1  { grid-column: span 2 / span 2; }

  /* Explicit Tablet Column Classes */
  .col-span-md-1 { grid-column: span 1 / span 1; }
  .col-span-md-2 { grid-column: span 2 / span 2; }
  .col-span-md-3 { grid-column: span 3 / span 3; }
  .col-span-md-4 { grid-column: span 4 / span 4; }
  .col-span-md-5 { grid-column: span 5 / span 5; }
  .col-span-md-6 { grid-column: span 6 / span 6; }
  .col-span-md-7 { grid-column: span 7 / span 7; }
  .col-span-md-8 { grid-column: span 8 / span 8; }

  /* Asymmetric Bento Adapts on Tablet */
  .bento-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    grid-auto-rows: minmax(160px, auto);
    gap: var(--gutter-tablet);
  }

  .bento-grid > .span-1 { grid-column: span 4; }
  .bento-grid > .span-2 { grid-column: span 8; }
  .bento-grid > .span-3 { grid-column: span 8; }
  .bento-grid > .span-4 { grid-column: span 8; }

  /* Clinical Quad on Tablet becomes a balanced 2x2 grid */
  .clinic-quad {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gutter-tablet);
  }

  /* Kitchen Triad on Tablet: 2 cols + 1 full */
  .kitchen-triad {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gutter-tablet);
  }
  .kitchen-triad > *:nth-child(3) {
    grid-column: span 2;
  }

  /* Hero Split collapses into high-impact single stack on tablet */
  .hero-split {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 40px;
  }

  .hero-split > .hero-primary-col {
    align-items: center;
  }

  /* Stats Quartet becomes 2x2 grid on tablet */
  .stats-quartet {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gutter-tablet);
  }

  /* Responsive split converts to column stack with clean tablet spacing */
  .responsive-split {
    flex-direction: column;
    gap: var(--gutter-tablet);
  }
  .responsive-split.split-60-40 > *,
  .responsive-split.split-70-30 > *,
  .responsive-split.split-50-50 > * {
    flex: 1 1 100%;
    width: 100%;
  }
}

/* ==========================================================================
   BREAKPOINT 5: MOBILE PHABLET / COMPACT TABLET (640px to 767px)
   Swiss Grid drops to 4-Column Grid, Gutters: 20px
   ========================================================================== */
@media (min-width: 640px) and (max-width: 767px) {
  :root {
    --grid-columns: 4;
    --grid-gutter: 20px;
    --grid-row-gap: 20px;
  }

  .grid-12 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 20px;
  }

  .col-span-12, .col-span-11, .col-span-10,
  .col-span-9, .col-span-8, .col-span-7,
  .col-span-6 {
    grid-column: span 4 / span 4;
  }

  .col-span-5, .col-span-4, .col-span-3 {
    grid-column: span 2 / span 2;
  }

  .col-span-2, .col-span-1 {
    grid-column: span 2 / span 2;
  }

  .bento-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }

  .bento-grid > .span-1 { grid-column: span 2; }
  .bento-grid > .span-2 { grid-column: span 4; }
  .bento-grid > .span-3 { grid-column: span 4; }
  .bento-grid > .span-4 { grid-column: span 4; }

  .clinic-quad {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .kitchen-triad {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .stats-quartet {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .hero-split {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 32px;
  }

  .responsive-split {
    flex-direction: column;
    gap: 20px;
  }
}

/* ==========================================================================
   BREAKPOINT 6: MOBILE SMARTPHONE (360px to 639px)
   Strict 4-Column Grid, Gutter: 16px, Zero Horizontal Overflow Guarantee
   ========================================================================== */
@media (max-width: 639px) {
  :root {
    --grid-columns: 4;
    --grid-gutter: var(--gutter-mobile);
    --grid-row-gap: var(--gutter-mobile);
    --page-inset: 16px;
  }

  /* Grid 12 drops strictly to 4 Columns on Mobile */
  .grid-12 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--gutter-mobile);
    row-gap: var(--gutter-mobile);
  }

  /* Automatic Column Dropping: Everything stacks cleanly or splits 2/2 */
  .col-span-12, .col-span-11, .col-span-10,
  .col-span-9, .col-span-8, .col-span-7,
  .col-span-6, .col-span-5 {
    grid-column: span 4 / span 4;
  }

  .col-span-4, .col-span-3 {
    grid-column: span 4 / span 4; /* Stack cards cleanly on mobile */
  }

  .col-span-2 {
    grid-column: span 2 / span 2;
  }

  .col-span-1 {
    grid-column: span 2 / span 2;
  }

  /* Explicit Mobile Column Spans */
  .col-span-sm-1 { grid-column: span 1 / span 1; }
  .col-span-sm-2 { grid-column: span 2 / span 2; }
  .col-span-sm-3 { grid-column: span 3 / span 3; }
  .col-span-sm-4 { grid-column: span 4 / span 4; }

  /* Reset column start/end offsets on mobile to prevent accidental shifts */
  .col-start-1, .col-start-2, .col-start-3, .col-start-4,
  .col-start-5, .col-start-6, .col-start-7, .col-start-8,
  .col-start-9, .col-start-10, .col-start-11, .col-start-12 {
    grid-column-start: auto;
  }

  /* Bento Grid Mobile Layout: Single column stack, natural height */
  .bento-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: var(--gutter-mobile);
  }

  .bento-grid > .span-1,
  .bento-grid > .span-2,
  .bento-grid > .span-3,
  .bento-grid > .span-4,
  .bento-card.span-2 {
    grid-column: span 1 !important;
  }

  .bento-grid > .row-span-2,
  .bento-grid > .row-span-3 {
    grid-row: span 1 !important;
  }

  /* Specialized Archetypes on Mobile */
  .hero-split {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 32px;
  }

  .hero-split > .hero-primary-col {
    align-items: center;
  }

  .clinic-quad {
    grid-template-columns: 1fr;
    gap: var(--gutter-mobile);
  }

  .kitchen-triad {
    grid-template-columns: 1fr;
    gap: var(--gutter-mobile);
  }

  .stats-quartet {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  /* Responsive Split Stack on Mobile */
  .responsive-split {
    flex-direction: column;
    gap: var(--gutter-mobile);
  }

  .responsive-split.split-reverse-mobile {
    flex-direction: column-reverse;
  }

  .responsive-split > * {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
}

/* ==========================================================================
   BREAKPOINT 7: ULTRA-COMPACT MOBILE (< 360px - e.g. iPhone SE 1st gen / KaiOS)
   Safe Fallback: 2-column or 1-column failsafe, zero clipping
   ========================================================================== */
@media (max-width: 359px) {
  :root {
    --grid-columns: 2;
    --grid-gutter: 12px;
    --grid-row-gap: 12px;
    --page-inset: 12px;
  }

  .grid-12 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
    row-gap: 12px;
  }

  .col-span-12, .col-span-6, .col-span-4, .col-span-2, .col-span-1 {
    grid-column: span 2 / span 2;
  }

  .stats-quartet {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .clinic-quad,
  .kitchen-triad,
  .bento-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* ─── 10. ADAPTIVE INTEGRATION WITH MAIN-SITE COMPONENTS ─────────────────── */
/* Elevate existing main-site grid classes to follow strict Swiss Grid principles */

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
  width: 100%;
}

.hero-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gutter-desktop);
  width: 100%;
}

.profile-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(32px, 4vw, 56px);
  align-items: center;
  width: 100%;
}

.qualifications-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gutter-desktop);
  width: 100%;
}

.kitchen-pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter-desktop);
  width: 100%;
}

.locations-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter-desktop);
  width: 100%;
}

.app-showcase-box {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 4vw, 56px);
  align-items: center;
  width: 100%;
}

.install-guide-box {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter-desktop);
  width: 100%;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr 1fr;
  gap: clamp(32px, 4vw, 48px);
  width: 100%;
}

/* ==========================================================================
   BREAKPOINT OVERHAUL: COMPACT LAPTOP & LARGE TABLET (<= 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 40px;
  }
  .hero-headline, .hero-subhead {
    margin-left: auto;
    margin-right: auto;
  }
  .hero-creds-strip, .hero-actions {
    justify-content: center;
  }
  .hero-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
  .profile-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .profile-image-showcase {
    max-width: 480px;
    margin: 0 auto;
  }
  .kitchen-pillars-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .locations-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gutter-tablet);
  }
  .app-showcase-box {
    grid-template-columns: 1fr;
    padding: 44px 28px;
    text-align: center;
    gap: 36px;
  }
  .install-guide-box {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gutter-tablet);
  }
  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ==========================================================================
   BREAKPOINT OVERHAUL: TABLET & COMPACT DESKTOP (<= 900px)
   Services Bento Grid Collapse & Navigation Transition
   ========================================================================== */
@media (max-width: 900px) {
  .bento-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    width: 100% !important;
  }
  .bento-card,
  .bento-card.span-2,
  .bento-grid > .span-1,
  .bento-grid > .span-2,
  .bento-grid > .span-3,
  .bento-grid > .span-4 {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}

/* ==========================================================================
   BREAKPOINT OVERHAUL: MOBILE TABLET & SMARTPHONE (<= 768px)
   Strict Single-Column Stacking, Safe Insets & Zero Horizontal Overflow
   ========================================================================== */
@media (max-width: 768px) {
  /* 1. Doctor Profile Dual Image Inset Containment */
  .profile-image-showcase {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    overflow: visible;
    box-sizing: border-box;
  }
  .profile-main-img {
    width: 100%;
    border-radius: var(--radius-lg);
  }
  .profile-desk-thumb {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: clamp(110px, 34vw, 160px);
    max-width: 45%;
    border-radius: var(--radius-md);
    border: 3px solid #ffffff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.22);
  }

  /* 2. Hero Section Mobile Optimization */
  .hero-headline {
    font-size: clamp(1.75rem, 5vw, 2.6rem);
    line-height: 1.18;
  }
  .hero-creds-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 24px;
    width: 100%;
  }
  .cred-chip {
    font-size: 0.75rem;
    padding: 5px 10px;
    max-width: 100%;
  }
  .hero-actions {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 340px;
    margin: 0 auto 28px;
    gap: 12px;
  }
  .btn-hero-primary,
  .btn-hero-secondary {
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
  }

  /* Hero Floating Badges Screen Containment */
  .hero-visual-card {
    max-width: 360px;
    margin: 0 auto;
    overflow: visible;
  }
  .floating-badge-top {
    left: 8px;
    top: 12px;
    padding: 8px 12px;
    max-width: calc(100% - 16px);
    box-sizing: border-box;
  }
  .floating-badge-bottom {
    right: 8px;
    bottom: 12px;
    padding: 8px 12px;
    max-width: calc(100% - 16px);
    box-sizing: border-box;
  }

  /* 3. Quick APK Strip Full Width Layout */
  .quick-apk-strip {
    padding: 24px 0;
  }
  .apk-strip-inner {
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 18px;
  }
  .apk-strip-content {
    flex-direction: column;
    text-align: center;
    align-items: center;
    width: 100%;
    gap: 12px;
  }
  .apk-strip-titles {
    width: 100%;
    text-align: center;
  }
  .apk-strip-titles h3 {
    font-size: clamp(1.05rem, 4vw, 1.25rem);
  }
  .apk-strip-titles p {
    font-size: 0.85rem;
    max-width: 100%;
  }
  .apk-strip-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 10px;
  }
  .btn-strip-download,
  .btn-strip-guide {
    width: 100%;
    max-width: 320px;
    justify-content: center;
    box-sizing: border-box;
    padding: 12px 20px;
    font-size: 0.9rem;
  }

  /* 5. Clinics Section & Location Cards */
  .locations-grid {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 16px !important;
  }
  .clinic-card {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 22px 18px !important;
    overflow: hidden !important;
  }
  .location-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 24px;
    width: 100%;
  }
  .tab-btn {
    padding: 8px 14px;
    font-size: 0.82rem;
    touch-action: manipulation;
  }
  .timing-row {
    flex-wrap: wrap;
    font-size: 0.78rem;
    gap: 6px;
  }
  .clinic-action-btn {
    min-height: 44px;
    justify-content: center;
  }

  /* 6. App Showcase Section */
  .app-showcase-box {
    padding: clamp(28px, 5vw, 40px) clamp(16px, 4vw, 24px);
    border-radius: var(--radius-lg);
  }
  .app-title-main {
    font-size: clamp(1.65rem, 4.5vw, 2.2rem);
  }
  .app-features-checklist {
    grid-template-columns: 1fr;
    justify-items: start;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    gap: 12px;
  }
  .app-cta-group {
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 12px;
  }
  .btn-download-main,
  .btn-instruction-toggle {
    width: 100%;
    max-width: 320px;
    justify-content: center;
    box-sizing: border-box;
  }
  .phone-mockup-wrap {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    justify-content: center;
    margin: 20px auto 0;
  }
  .phone-frame {
    width: 100%;
    max-width: min(280px, 86vw);
    height: auto;
    min-height: 460px;
    max-height: 520px;
    margin: 0 auto;
    box-sizing: border-box;
  }
  .install-guide-box {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* 7. Testimonials & FAQ */
  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .testi-card {
    padding: 20px 16px;
    width: 100%;
    box-sizing: border-box;
    border-radius: var(--radius-lg);
  }
  .testi-text {
    font-size: 0.9rem;
    margin-bottom: 16px;
  }
  .faq-wrap {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .faq-item {
    margin-bottom: 10px;
    width: 100%;
    box-sizing: border-box;
  }
  .faq-header {
    padding: 16px 14px;
    min-height: 48px;
  }
  .faq-header h3 {
    font-size: 0.95rem;
    line-height: 1.4;
  }
  .faq-body {
    padding: 0 14px 16px;
    font-size: 0.88rem;
  }

  /* 8. Footer Contacts & Links (Minimum 44px Touch Targets) */
  .site-footer {
    padding: 48px 0 24px;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-bottom: 32px;
    width: 100%;
  }
  .footer-col, .footer-brand {
    width: 100%;
    box-sizing: border-box;
  }
  .footer-col h5 {
    font-size: 0.9rem;
    margin-bottom: 12px;
  }
  .footer-col ul, .footer-contacts-list {
    gap: 6px;
    width: 100%;
  }
  .footer-col li a,
  .footer-contacts-list li {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 0.88rem;
    padding: 4px 0;
    width: 100%;
    word-break: break-word;
  }

  .qualifications-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .hero-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}

/* ==========================================================================
   BREAKPOINT OVERHAUL: COMPACT SMARTPHONE (<= 480px)
   ========================================================================== */
@media (max-width: 480px) {
  .profile-desk-thumb {
    bottom: 10px;
    right: 10px;
    width: clamp(95px, 32vw, 130px);
    max-width: 42%;
    border: 2.5px solid #ffffff;
  }
  .floating-badge-top {
    left: 6px;
    top: 8px;
    padding: 6px 10px;
  }
  .floating-badge-bottom {
    right: 6px;
    bottom: 8px;
    padding: 6px 10px;
  }
  .bento-card {
    padding: 20px 16px !important;
  }
}

/* ==========================================================================
   BREAKPOINT OVERHAUL: ULTRA-COMPACT PHONE (<= 359px)
   ========================================================================== */
@media (max-width: 359px) {
  :root {
    --page-inset: 12px !important;
  }
  .container, .container-fluid {
    padding-inline: 12px !important;
  }
  .hero-headline {
    font-size: 1.55rem !important;
  }
  .hero-stat-number {
    font-size: 1.45rem !important;
  }
  .hero-stats-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .btn-download-main,
  .btn-strip-download,
  .btn-hero-primary,
  .btn-hero-secondary {
    font-size: 0.85rem !important;
    padding: 12px 14px !important;
  }
  .phone-frame {
    max-width: 250px !important;
    min-height: 420px !important;
  }
}

/* ─── 11. SWISS GRID INSPECTION & AUDIT OVERLAY (DEV TOOL) ────────────────── */
/* Add class 'debug-swiss-grid' to body or any container to render 12 Swiss vertical tracks */
.debug-swiss-grid {
  position: relative;
}

.debug-swiss-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 99999;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 7px,
    rgba(16, 185, 129, 0.08) 7px,
    rgba(16, 185, 129, 0.08) 8px
  );
  opacity: 0.6;
}

.debug-columns-overlay {
  position: fixed;
  inset: 0;
  max-width: var(--container-xl-max);
  margin-inline: auto;
  padding-inline: var(--page-inset);
  pointer-events: none;
  z-index: 99998;
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gutter);
}

.debug-columns-overlay > .debug-col {
  height: 100%;
  background: rgba(16, 185, 129, 0.04);
  border-inline: 1px dashed rgba(16, 185, 129, 0.15);
}