/*
 * responsive.css — Firmeza Design System
 *
 * All media queries — mobile-first (min-width).
 * Only layout, type scale, spacing, and show/hide rules live here.
 * Component-specific breakpoints go in components.css.
 *
 * Breakpoint System:
 * ┌──────────┬────────────┬──────────────────────────────────┐
 * │  Name    │  Min width │  Target devices                  │
 * ├──────────┼────────────┼──────────────────────────────────┤
 * │  xs      │  (default) │  Small phones (< 480px)          │
 * │  sm      │  480px     │  Large phones                    │
 * │  md      │  768px     │  Tablets, landscape phones        │
 * │  lg      │  1024px    │  Small laptops, large tablets     │
 * │  xl      │  1280px    │  Desktops                        │
 * │  2xl     │  1440px    │  Large screens                   │
 * │  3xl     │  1920px    │  Wide / ultra-wide               │
 * └──────────┴────────────┴──────────────────────────────────┘
 */

/* ── xs (default) ────────────────────────────────────────────────────── */

:root {
  --container-px: var(--container-px-mobile);
}

/* Mobile-first: most grids are single column by default */
.grid--2,
.grid--3,
.grid--4,
.grid--6 {
  grid-template-columns: 1fr;
}

.sidebar-layout {
  flex-direction: column;
}

.sidebar-layout__aside {
  width: 100%;
}

/* Navbar: show hamburger, hide desktop links + CTA */
.navbar__hamburger { display: flex; }
.navbar__nav       { display: none; }
.navbar__cta-btn   { display: none; }

/* Cursor: disable on touch (handled by JS too, belt-and-suspenders) */
@media (pointer: coarse) {
  #cursor,
  #cursor-follower {
    display: none;
  }
}

/* ── sm — 480px ──────────────────────────────────────────────────────── */

@media (min-width: 480px) {

  :root {
    --container-px: 1.5rem;  /* 24px */
  }

  .sm\:grid--2 { grid-template-columns: repeat(2, 1fr); }

  .sm\:hidden { display: none !important; }
  .sm\:block  { display: block !important; }
  .sm\:flex   { display: flex !important; }

  .sm\:text-center { text-align: center; }

}

/* ── md — 768px ──────────────────────────────────────────────────────── */

@media (min-width: 768px) {

  :root {
    --container-px: var(--container-px-tablet);
  }

  /* Type scale steps up */
  h1, .h1 { font-size: clamp(1.875rem, 3.2vw, 3rem); }
  h2, .h2 { font-size: clamp(1.875rem, 3vw, 3rem);  }
  h3, .h3 { font-size: clamp(1.375rem, 2.2vw, 1.875rem); }

  /* Grids unlock */
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }

  .md\:grid--2 { grid-template-columns: repeat(2, 1fr); }
  .md\:grid--3 { grid-template-columns: repeat(3, 1fr); }

  .md\:col-span-6 { grid-column: span 6; }
  .md\:col-span-4 { grid-column: span 4; }

  .md\:flex-row { flex-direction: row; }
  .md\:flex-col { flex-direction: column; }

  .md\:hidden { display: none !important; }
  .md\:block  { display: block !important; }
  .md\:flex   { display: flex !important; }

  .md\:text-center { text-align: center; }
  .md\:text-left   { text-align: left;   }

  /* Sidebar layout can go horizontal */
  .sidebar-layout--md {
    flex-direction: row;
  }

  .sidebar-layout--md .sidebar-layout__aside {
    width: 280px;
  }

  /* Section headers can be centred on tablet+ */
  .section-header--center-md {
    text-align:    center;
    margin-inline: auto;
  }

}

/* ── lg — 1024px ─────────────────────────────────────────────────────── */

@media (min-width: 1024px) {

  :root {
    --container-px: var(--container-px-desktop);
  }

  /* Full desktop type scale */
  h1, .h1 { font-size: var(--text-h1); }
  h2, .h2 { font-size: var(--text-h2); }
  h3, .h3 { font-size: var(--text-h3); }
  h4, .h4 { font-size: var(--text-h4); }

  /* Navbar: hide hamburger, show links + CTA */
  .navbar__hamburger { display: none; }
  .navbar__nav       { display: flex; }
  .navbar__cta-btn   { display: inline-flex; }

  /* Grids */
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .grid--6 { grid-template-columns: repeat(6, 1fr); }

  .lg\:grid--2 { grid-template-columns: repeat(2, 1fr); }
  .lg\:grid--3 { grid-template-columns: repeat(3, 1fr); }
  .lg\:grid--4 { grid-template-columns: repeat(4, 1fr); }

  .lg\:col-span-4 { grid-column: span 4; }
  .lg\:col-span-6 { grid-column: span 6; }
  .lg\:col-span-8 { grid-column: span 8; }
  .lg\:col-full   { grid-column: 1 / -1; }

  .lg\:flex-row { flex-direction: row; }
  .lg\:flex-col { flex-direction: column; }

  .lg\:hidden { display: none !important; }
  .lg\:block  { display: block !important; }
  .lg\:flex   { display: flex !important; }

  /* Sidebar restores horizontal layout */
  .sidebar-layout {
    flex-direction: row;
  }

  .sidebar-layout__aside {
    width: 320px;
  }

}

/* ── xl — 1280px ─────────────────────────────────────────────────────── */

@media (min-width: 1280px) {

  .xl\:grid--4 { grid-template-columns: repeat(4, 1fr); }
  .xl\:grid--5 { grid-template-columns: repeat(5, 1fr); }

  .xl\:col-span-3 { grid-column: span 3; }
  .xl\:col-span-4 { grid-column: span 4; }
  .xl\:col-span-9 { grid-column: span 9; }

  .xl\:hidden { display: none !important; }
  .xl\:block  { display: block !important; }

  /* Display type fully unlocks */
  .text-display-2xl { font-size: var(--text-display-2xl); }
  .text-display-xl  { font-size: var(--text-display-xl); }
  .text-display-lg  { font-size: var(--text-display-lg); }

}

/* ── 2xl — 1440px ────────────────────────────────────────────────────── */

@media (min-width: 1440px) {

  .xl2\:grid--4 { grid-template-columns: repeat(4, 1fr); }
  .xl2\:grid--6 { grid-template-columns: repeat(6, 1fr); }

}

/* ── 3xl — 1920px ────────────────────────────────────────────────────── */

@media (min-width: 1920px) {

  :root {
    --container-px: var(--space-16);
  }

}

/* ── Print ───────────────────────────────────────────────────────────── */

@media print {

  *,
  *::before,
  *::after {
    background:  transparent !important;
    color:       #000 !important;
    box-shadow:  none !important;
    text-shadow: none !important;
  }

  a[href]::after {
    content: ' (' attr(href) ')';
  }

  #site-header,
  #site-footer,
  #cursor,
  #cursor-follower,
  .navbar__hamburger,
  .cta-block,
  .anim-marquee {
    display: none !important;
  }

  #main {
    padding-top: 0;
  }

  h2, h3 { page-break-after: avoid; }
  p, blockquote { orphans: 3; widows: 3; }
  img { page-break-inside: avoid; max-width: 100%; }

}

/* ── Dark mode (system preference) ──────────────────────────────────── */

/*
 * System dark mode applies [data-theme="dark"] token overrides from
 * variables.css automatically when the OS is in dark mode.
 * We use a JS toggle (stored in localStorage) as primary control,
 * but honour the system preference as default.
 */

@media (prefers-color-scheme: dark) {

  :root:not([data-theme="light"]) {

    --color-bg:        #09090B;
    --color-bg-subtle: #111113;
    --color-bg-muted:  #18181B;

    --color-surface:          #18181B;
    --color-surface-raised:   #27272A;
    --color-surface-overlay:  #1C1C1F;
    --color-bg-overlay:       rgba(0, 0, 0, 0.7);

    --color-text-primary:   #FAFAFA;
    --color-text-secondary: #A1A1AA;
    --color-text-tertiary:  #71717A;
    --color-text-disabled:  #52525B;
    --color-text-inverse:   #09090B;
    --color-text-brand:     #4C74A2;

    --color-border:         #27272A;
    --color-border-strong:  #3F3F46;
    --color-border-brand:   #3D6BA0;

    --glass-bg:          rgba(18, 18, 20, 0.80);
    --glass-bg-strong:   rgba(18, 18, 20, 0.92);
    --glass-border:      rgba(255, 255, 255, 0.08);

    --shadow-card:       0 1px 3px rgba(0,0,0,0.3), 0 4px 12px rgba(0,0,0,0.2);
    --shadow-card-hover: 0 8px 24px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.2);

    /* Marquee fade edges — dark bg */
    --marquee-fade-from: var(--color-bg);
  }

}