/* =============================================================================
   RESPONSIVE.CSS
   -----------------------------------------------------------------------------
   The source uses THREE min-width breakpoints on top of a mobile-first base:
       base   : < 768px   (mobile)      4-col grid,  design width 375
       tablet : >= 768px                8-col grid,  design width 768
       laptop : >= 1280px               12-col grid, design width 1440
       desktop: >= 1440px               12-col grid, design width 1920

   At each step it re-sets the fluid engine (--scale-modifier,
   --target-window-width) and the semantic radii / gutters, so the SAME calc()
   sizes reflow correctly. This file is the ONLY place breakpoints live.
   ========================================================================== */

/* --- BASE / MOBILE (< 768px) ------------------------------------------------ */
:root {
  --root-columns: 4;
  --columns: var(--root-columns);
  --gutter-outer: 16px;
  --gutter-inner: 16px;
  --scale-modifier: 0.2;      /* gentle fluidity on small screens */
  --target-window-width: 375;

  --radius-block-small:  16px;
  --radius-block-medium: 24px;
  --radius-block-large:  48px;
  --radius-block-card:   48px;
}

/* Mobile-only: collapse nav to a burger + drawer */
@media only screen and (max-width: 767px) {
  .ds-nav-links { display: none; }
  .ds-nav-toggle { display: inline-grid; }

  .ds-hero-title { max-width: 100%; }
  .ds-cards-row,
  .ds-pricing { grid-template-columns: 1fr; }
  .ds-footer-grid { grid-template-columns: 1fr 1fr; }

  /* A sticky column only works BESIDE something that scrolls past it. Once the
     layout collapses to one column there is no "beside": the pinned block
     stays put while the content that used to sit next to it scrolls up
     underneath, and the two render on top of each other. */
  .ds-sticky { position: static; }

  /* Display type steps down on phones. The fluid engine alone is not enough:
     at 390px a heading-2 renders ~56px, and a single long Portuguese word
     ("oportunidades") is then wider than the screen — .ds-word is
     inline-block, so it cannot hyphenate its way out and pushes the page
     sideways. One step down keeps the impact and kills the overflow. */
  .ds-heading[data-variant="heading-1"] { font-size: var(--fluid-56); }
  .ds-heading[data-variant="heading-2"] { font-size: var(--fluid-40); }
  .ds-heading[data-variant="heading-3"] { font-size: var(--fluid-32); }

  /* Reveal distance is smaller on mobile to avoid layout thrash. The
     [data-from] variants are flattened too: a 32px horizontal pre-offset on a
     full-width column sticks out past the viewport until it animates in. */
  .ds-reveal,
  .ds-reveal[data-from] { transform: translateY(16px); }
  .ds-reveal[data-from="scale"] { transform: scale(0.94); }
}

/* --- TABLET (>= 768px) ------------------------------------------------------ */
@media only screen and (min-width: 768px) {
  :root {
    --root-columns: 8;
    --gutter-outer: 24px;
    --gutter-inner: 20px;
    --scale-modifier: 0.35;
    --target-window-width: 768;

    --radius-block-small:  20px;
    --radius-block-medium: 32px;
    --radius-block-large:  64px;
    --radius-block-card:   56px;
  }

  .ds-hero { grid-template-columns: 1.1fr 0.9fr; }
  .ds-cards-row { grid-template-columns: repeat(2, 1fr); }
  .ds-pricing   { grid-template-columns: repeat(2, 1fr); }
  .ds-footer-grid { grid-template-columns: 2fr repeat(3, 1fr); }
  .ds-cards-row--3 { grid-template-columns: repeat(3, 1fr); }
}

/* --- LAPTOP (>= 1280px) ----------------------------------------------------- */
@media only screen and (min-width: 1280px) {
  :root {
    --root-columns: 12;
    --gutter-outer: 32px;
    --gutter-inner: 24px;
    --scale-modifier: 0.5;
    --target-window-width: 1440;

    --radius-block-medium: 40px;
    --radius-block-large:  80px;
    --radius-block-card:   88px;
  }

  .ds-pricing { grid-template-columns: repeat(3, 1fr); }
  .ds-cards-row--3 { grid-template-columns: repeat(3, 1fr); }
  .ds-cards-row--4 { grid-template-columns: repeat(4, 1fr); }

  /* Enable richer hover only on fine pointers */
  @media (hover: hover) and (pointer: fine) {
    .ds-card:hover { transform: translateY(-6px); }
  }
}

/* --- DESKTOP / ULTRAWIDE (>= 1440px) ---------------------------------------- */
@media only screen and (min-width: 1440px) {
  :root {
    --scale-modifier: 0.6;      /* most fluid on large screens */
    --target-window-width: 1920;
    --border-radius-large: 88px;
  }
}

/* Cap fluid growth on ultrawide so type doesn't get comically large:
   past the container max, lock the design width to the container. */
@media only screen and (min-width: 1920px) {
  :root {
    --scale-modifier: 0;        /* freeze at reference px beyond 1920 */
  }
  .ds-container { max-width: var(--container-max); }
}