/**
 * FourData Blocks v2 — Responsive Breakpoints
 * All media queries for the FD design system.
 * Every rule is scoped to .fd-blocks-root.
 *
 * Breakpoints:
 *   Tablet   — max-width: 991px
 *   Mobile   — max-width: 680px
 *   Small    — max-width: 480px
 */


/* ═══════════════════════════════════════════
   TABLET — 991px
   ═══════════════════════════════════════════ */
@media (max-width: 991px) {

  /* Layout ───────── */
  .fd-blocks-root .fd-container {
    padding: 0 1.5rem;
  }

  .fd-blocks-root .fd-section {
    padding: 3.5rem 0;
  }

  /* Hero ───────── */
  .fd-blocks-root .fd-hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .fd-blocks-root .fd-hero-ctas {
    justify-content: center;
  }

  .fd-blocks-root .fd-breadcrumb {
    justify-content: center;
  }

  /* Zigzag ───────── */
  .fd-blocks-root .fd-zigzag {
    grid-template-columns: 1fr;
  }

  .fd-blocks-root .fd-zigzag--reverse {
    direction: ltr;
  }

  /* Cards grids ───────── */
  .fd-blocks-root .fd-cards-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .fd-blocks-root .fd-cards-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Product grid ───────── */
  .fd-blocks-root .fd-product-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Detail grid ───────── */
  .fd-blocks-root .fd-detail-grid {
    grid-template-columns: 1fr;
  }

  /* Section header ───────── */
  .fd-blocks-root .fd-sh {
    margin-bottom: 2.5rem;
  }

  .fd-blocks-root .fd-sh h2 {
    font-size: 1.875rem;
  }
}


/* ═══════════════════════════════════════════
   MOBILE — 680px
   ═══════════════════════════════════════════ */
@media (max-width: 680px) {

  /* Layout ───────── */
  .fd-blocks-root .fd-section {
    padding: 2.5rem 0;
  }

  /* Typography ───────── */
  .fd-blocks-root h2 {
    font-size: 1.75rem;
  }

  /* Hero ───────── */
  .fd-blocks-root .fd-hero-text h1 {
    font-size: 1.875rem;
  }

  .fd-blocks-root .fd-hero-desc {
    font-size: 0.9375rem;
  }

  .fd-blocks-root .fd-hero-kpis {
    grid-template-columns: 1fr;
  }

  .fd-blocks-root .fd-hero-ctas {
    flex-direction: column;
  }

  /* Buttons full-width on mobile ───────── */
  .fd-blocks-root .fd-btn-primary,
  .fd-blocks-root .fd-btn-outline {
    width: 100%;
    justify-content: center;
  }

  /* Cards grids ───────── */
  .fd-blocks-root .fd-cards-grid--3,
  .fd-blocks-root .fd-cards-grid--2 {
    grid-template-columns: 1fr;
  }

  .fd-blocks-root .fd-cards-grid--4 {
    grid-template-columns: 1fr;
  }

  /* Product grid ───────── */
  .fd-blocks-root .fd-product-grid {
    grid-template-columns: 1fr;
  }

  /* Section header ───────── */
  .fd-blocks-root .fd-sh {
    margin-bottom: 2rem;
  }

  .fd-blocks-root .fd-sh h2 {
    font-size: 1.625rem;
  }

  .fd-blocks-root .fd-sh p {
    font-size: 0.9375rem;
  }

  /* Stepper ───────── */
  .fd-blocks-root .fd-stepper {
    flex-direction: column;
  }

  /* Table ───────── */
  .fd-blocks-root .fd-table-wrap {
    font-size: 0.75rem;
  }

  /* Cards ───────── */
  .fd-blocks-root .fd-card {
    padding: 1.5rem 1.25rem;
  }
}


/* ═══════════════════════════════════════════
   SMALL MOBILE — 480px
   ═══════════════════════════════════════════ */
@media (max-width: 480px) {

  /* Layout ───────── */
  .fd-blocks-root .fd-container {
    padding: 0 1rem;
  }

  /* Hero ───────── */
  .fd-blocks-root .fd-hero-text h1 {
    font-size: 1.5rem;
  }

  /* Cards ───────── */
  .fd-blocks-root .fd-card {
    padding: 1.25rem 1rem;
  }

  /* Section header ───────── */
  .fd-blocks-root .fd-sh h2 {
    font-size: 1.375rem;
  }

  /* Buttons ───────── */
  .fd-blocks-root .fd-btn-primary,
  .fd-blocks-root .fd-btn-outline,
  .fd-blocks-root .fd-btn-primary--dark {
    padding: 0.75rem 1.25rem;
    font-size: 0.8125rem;
  }
}