/**
 * Dr. Anil Kumar's Eye Hospital ("drakeh") Layout Stylesheet
 * =========================================================
 * 12-column CSS Grid system, responsive container, section spacing,
 * responsive split layouts, aside layouts, and flex stack/cluster primitives.
 */

/* --------------------------------------------------------------------------
 * Container
 * Max width 1280px with responsive fluid gutter padding.
 * ----------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1rem, 3vw, 2rem);
  padding-right: clamp(1rem, 3vw, 2rem);
}

.container-narrow {
  width: 100%;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1rem, 3vw, 2rem);
  padding-right: clamp(1rem, 3vw, 2rem);
}

/* Ensure children inside flex and grid never overflow their containers */
.container > *,
.grid > *,
.grid-12 > *,
.grid-2 > *,
.grid-3 > *,
.grid-4 > *,
.grid-auto > *,
.split > *,
.stack > *,
.cluster > *,
.row > * {
  min-width: 0;
}

/* --------------------------------------------------------------------------
 * Section Spacing & Theming Utilities
 * Generous, rhythmic vertical whitespace.
 * ----------------------------------------------------------------------- */
.section {
  padding-top: clamp(2.5rem, 5vw, 5rem);
  padding-bottom: clamp(2.5rem, 5vw, 5rem);
}

.section-sm {
  padding-top: clamp(1.5rem, 3vw, 3rem);
  padding-bottom: clamp(1.5rem, 3vw, 3rem);
}

.section--alt,
.section-alt {
  background-color: var(--color-bg-alt);
}

.section--tint {
  background-color: var(--color-bg-alt-light);
}

.section--dark,
.section-navy {
  background-color: var(--color-navy-900);
  color: #FFFFFF;
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--dark p,
.section-navy h1,
.section-navy h2,
.section-navy h3,
.section-navy h4,
.section-navy p {
  color: #FFFFFF;
}

/* --------------------------------------------------------------------------
 * Section Header Component (.section-head)
 * Standardized Eyebrow + Heading + Intro pattern
 * ----------------------------------------------------------------------- */
.section-head,
.section-header {
  margin-bottom: var(--space-8);
  max-width: 75ch;
}

.section-head--center,
.section-header--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-blue-600);
  margin-bottom: var(--space-2);
}

.section--dark .section-eyebrow,
.section-navy .section-eyebrow {
  color: var(--color-green-accent-light);
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw + 0.5rem, 2.75rem);
  font-weight: 700;
  color: var(--color-heading);
  line-height: var(--lh-tight);
  margin-bottom: var(--space-3);
}

.section--dark .section-title,
.section-navy .section-title {
  color: #FFFFFF;
}

.section-intro {
  font-size: var(--fs-md);
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
  max-width: 68ch;
  margin: 0;
}

.section--dark .section-intro,
.section-navy .section-intro {
  color: rgba(255, 255, 255, 0.8);
}

/* --------------------------------------------------------------------------
 * Modern CSS Grid Primitives (Auto-fit & Explicit Columns)
 * ----------------------------------------------------------------------- */
.grid {
  display: grid;
  gap: var(--space-6);
}

.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 640px) {
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.grid-4 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 640px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* 12-Column CSS Grid */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(0.5rem, 2vw, 1.5rem);
}

/* Default spans (mobile-first: full width unless specified) */
.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; }

/* Tablet Breakpoint (>= 640px) */
@media (min-width: 640px) {
  .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; }
  .col-span-md-9  { grid-column: span 9 / span 9; }
  .col-span-md-10 { grid-column: span 10 / span 10; }
  .col-span-md-11 { grid-column: span 11 / span 11; }
  .col-span-md-12 { grid-column: span 12 / span 12; }
}

/* Desktop Breakpoint (>= 1024px) */
@media (min-width: 1024px) {
  .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-5  { grid-column: span 5 / span 5; }
  .col-span-lg-6  { grid-column: span 6 / span 6; }
  .col-span-lg-7  { grid-column: span 7 / span 7; }
  .col-span-lg-8  { grid-column: span 8 / span 8; }
  .col-span-lg-9  { grid-column: span 9 / span 9; }
  .col-span-lg-10 { grid-column: span 10 / span 10; }
  .col-span-lg-11 { grid-column: span 11 / span 11; }
  .col-span-lg-12 { grid-column: span 12 / span 12; }
}

/* --------------------------------------------------------------------------
 * Split Layouts (Text + Media, Reverses on Mobile)
 * ----------------------------------------------------------------------- */
.split {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  align-items: center;
}

@media (min-width: 1024px) {
  .split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
  }
}

.split--reversed {
  flex-direction: column-reverse;
}

@media (min-width: 1024px) {
  .split--reversed {
    grid-template-columns: 1fr 1fr;
  }
}

/* --------------------------------------------------------------------------
 * Aside Layouts (Main Content + Sticky Aside)
 * ----------------------------------------------------------------------- */
.layout-with-aside {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  align-items: start;
}

@media (min-width: 1024px) {
  .layout-with-aside {
    grid-template-columns: 2fr 1fr;
    gap: var(--space-12);
  }
}

.main-content-col {
  min-width: 0;
  max-width: 72ch;
}

.aside-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

@media (min-width: 1024px) {
  .sticky-aside-card,
  .aside-col.is-sticky {
    position: sticky;
    top: 96px;
  }
}

/* --------------------------------------------------------------------------
 * Spacing Utilities: Stack & Cluster
 * ----------------------------------------------------------------------- */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.cluster {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

/* Gap Modifiers */
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }
.gap-12 { gap: var(--space-12); }

.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.justify-start   { justify-content: flex-start; }
.items-center    { align-items: center; }
.items-start     { align-items: flex-start; }
.items-stretch   { align-items: stretch; }