/**
 * Brand design: global breakpoints for typography, grid columns, spacing, overflow.
 * Mobile-first. Breakpoints: 560, 640, 768, 860, 980, 1024px.
 * Theme-ready (light now; dark via :root variables).
 */

/* ===== TYPOGRAPHY SCALING BY BREAKPOINT ===== */
/* Base sizes set in base.css; here we only adjust where breakpoints matter */

@media (min-width: 640px) {
  body {
    font-size: var(--font-size-base);
  }
}

@media (min-width: 768px) {
  .section-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
  }
  .section-subtitle {
    font-size: var(--font-size-lg);
  }
}

/* Desktop .section-title in brand-design.desktop.css */

/* ===== GRID COLUMN OVERRIDES BY BREAKPOINT ===== */
/* Use with .grid for responsive column counts */
.grid-cols-1-md-2 {
  grid-template-columns: 1fr;
}

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

.grid-cols-1-lg-4 {
  grid-template-columns: 1fr;
}

/* Desktop .grid-cols-1-lg-4 in brand-design.desktop.css */

.grid-cols-1-lg-12 {
  grid-template-columns: 1fr;
}
/* Desktop .grid-cols-1-lg-12 in brand-design.desktop.css */

/* ===== SPACING BY BREAKPOINT ===== */
.padding-inline-responsive {
  padding-left: var(--space-5);
  padding-right: var(--space-5);
}

@media (min-width: 640px) {
  .padding-inline-responsive {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
}

/* Desktop .padding-inline-responsive in brand-design.desktop.css */

/* ===== OVERFLOW ===== */
.overflow-x-auto {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

/* ===== TOUCH-FRIENDLY TARGETS ===== */
@media (pointer: coarse) {
  .btn,
  .nav-link,
  a[role="button"] {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ===== THEME READY (dark now; light can override later) ===== */
[data-theme="light"] {
  --color-background: #f8fafc;
  --color-surface: rgba(0, 0, 0, 0.03);
  --color-text-primary: #0f172a;
  --color-text-muted: #475569;
  --color-border: rgba(0, 0, 0, 0.12);
  --color-border-strong: rgba(0, 0, 0, 0.18);
}