/* ====================================================================
   NovaFolio — nvf-responsive.css
   Unified responsive layer for ALL Nova blocks.
   Single source of truth — 3 standard breakpoints.

   Breakpoints (align with token.css):
     Tablet ………  ≤ 1024 px
     Mobile ………  ≤  768 px
     Small  ………  ≤  480 px

   RULES:
   • This file loads AFTER individual block CSS.
   • Same-specificity rules win thanks to source-order.
   • Use !important only where the original rule already does.
   • DO NOT touch Hero / Hero Slider / FAQ / Contact titles — they
     already use adequate clamp() scales.
   ==================================================================== */


/* ------------------------------------------------------------------
   0. Responsive tokens
   ------------------------------------------------------------------ */
:root {
  --nvf-resp-block-max:    min(100%, 90vw);   /* comfortable mobile   */
  --nvf-resp-block-max-sm: min(100%, 92vw);   /* tiny screens: wider  */
}


/* ==================================================================
   1. TABLET  ≤ 1024 px
   ================================================================== */
@media (max-width: 1024px) {

  /* ---- Grid normalisation: cap dense grids to 2 columns ---- */
  .nvf-services--cols-4 .nvf-services__grid,
  .nvf-services--cols-3 .nvf-services__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nvf-counter--cols-5 .nvf-counter__grid,
  .nvf-counter--cols-6 .nvf-counter__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .nvf-counter--cols-4 .nvf-counter__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ---- Columns inner: cap to comfortable reading width ---- */
  .nvf-columns__inner {
    max-width: var(--nvf-resp-block-max);
    margin-inline: auto;
  }

  /* ---- Typography: first step-down for blocks without clamp ---- */
  .nvf-services__title {
    font-size: clamp(0.9375rem, 2.2vw, 1.125rem);
  }
  .nvf-counter__label {
    font-size: clamp(0.8125rem, 1.8vw, 0.9375rem);
  }
  .nvf-testimonials__text {
    font-size: clamp(0.9375rem, 2vw, 1.0625rem);
  }
}


/* ==================================================================
   2. MOBILE  ≤ 768 px
   ================================================================== */
@media (max-width: 768px) {

  /* --------------------------------------------------------
     2a  Block widths — comfortable reading width
     -------------------------------------------------------- */

  /*  Global: ensure every top-level block fills at least
      90 % of the viewport on mobile.                        */
  .entry-content > *,
  .wp-block-post-content > * {
    min-width: min(90vw, 100%);
    box-sizing: border-box;
  }

  /*  Full-bleed blocks: constrain the INNER container only
      (wrapper keeps its background edge-to-edge).            */
  .nvf-cta__inner {
    max-width: var(--nvf-resp-block-max);
    margin-inline: auto;
  }

  /*  Content blocks without a built-in container constraint:
      add consistent visual margin from screen edges.         */
  .nvf-services,
  .nvf-counter,
  .nvf-blog-posts,
  .nvf-core-portfolio-grid {
    max-width: var(--nvf-resp-block-max);
    margin-inline: auto;
    box-sizing: border-box;
  }

  /*  Self-contained blocks (Logo Bar, Testimonials) already have
      max-width + margin-inline:auto.  Normalise their padding
      so the live-content aligns with the 90 vw rhythm.       */
  .nvf-testimonials,
  .nvf-logo-bar {
    padding-inline: 5vw;
  }

  /*  Images Slider: override the inline max-width to be
      viewport-relative on mobile (desktop uses a fixed setting). */
  .nvf-slider {
    max-width: var(--nvf-resp-block-max) !important;
  }

  /*  Columns inner: constrain to readable width                */
  .nvf-columns__inner {
    max-width: var(--nvf-resp-block-max);
    margin-inline: auto;
  }

  /*  Stacked column children: take full available width      */
  .nvf-columns--stack .nvf-column {
    width: 100%;
    max-width: var(--nvf-resp-block-max);
    margin-inline: auto;
  }


  /* --------------------------------------------------------
     2b  Grid collapse — force single column
     Services: was 1 col at ≤540 → now ≤768
     Counter:  was 1 col at ≤400 → now ≤768
     Blog:     was 1 col at ≤600 → now ≤768
     -------------------------------------------------------- */
  .nvf-services__grid {
    grid-template-columns: 1fr !important;
  }

  .nvf-counter__grid {
    grid-template-columns: 1fr !important;
    gap: var(--nvf-space-m, 20px);
  }

  .nvf-blog-posts__grid {
    grid-template-columns: 1fr !important;
  }

  /* ---- Blog image height: cap on mobile ---- */
  .nvf-blog-posts__image {
    height: clamp(180px, 40vw, 240px);
  }
  .nvf-blog-posts--overlay .nvf-blog-posts__image {
    min-height: clamp(200px, 45vw, 260px);
  }


  /* --------------------------------------------------------
     2c  Typography harmonisation
     Only blocks that LACK responsive font-sizes.
     Hero / Hero Slider / FAQ / Contact: untouched.
     -------------------------------------------------------- */

  /* — Titles — */
  .nvf-cta__title {
    font-size: var(--nvf-cta-title-size, clamp(1.25rem, 5vw, 1.75rem));
  }
  .nvf-services__title {
    font-size: clamp(0.9375rem, 3vw, 1.125rem);
  }
  .nvf-counter__label {
    font-size: clamp(0.8125rem, 2.5vw, 0.9375rem);
  }
  .nvf-testimonials__text {
    font-size: clamp(0.875rem, 2.8vw, 1rem);
  }
  .nvf-testimonials__name {
    font-size: clamp(0.875rem, 2.5vw, 1rem);
  }

  /* — Subtitles & body — */
  .nvf-cta__subtitle,
  .nvf-services__text {
    font-size: clamp(0.8125rem, 2.5vw, 0.9375rem);
  }
  .nvf-cta__eyebrow {
    font-size: clamp(0.6875rem, 2vw, 0.75rem);
  }

  /* — Blog Posts — */
  .nvf-blog-posts__title {
    font-size: clamp(0.9375rem, 3vw, 1.125rem);
  }
  .nvf-blog-posts__excerpt {
    font-size: clamp(0.8125rem, 2.5vw, 0.875rem);
  }

  /* — Buttons — */
  .nvf-cta__btn {
    font-size: clamp(0.8125rem, 2.2vw, 0.9375rem);
  }
}


/* ==================================================================
   3. SMALL MOBILE  ≤ 480 px
   ================================================================== */
@media (max-width: 480px) {

  /* Slightly wider relative content for tiny viewports        */
  .nvf-services,
  .nvf-counter,
  .nvf-blog-posts,
  .nvf-core-portfolio-grid,
  .nvf-columns--stack .nvf-column {
    max-width: var(--nvf-resp-block-max-sm);
  }
  .nvf-cta__inner,
  .nvf-columns__inner {
    max-width: var(--nvf-resp-block-max-sm);
  }
  .nvf-slider {
    max-width: var(--nvf-resp-block-max-sm) !important;
  }
  .nvf-testimonials,
  .nvf-logo-bar {
    padding-inline: 4vw;
  }

  /* Further title reduction                                   */
  .nvf-cta__title {
    font-size: clamp(1.125rem, 5.5vw, 1.5rem);
  }
  .nvf-services__title {
    font-size: clamp(0.875rem, 3.5vw, 1.0625rem);
  }
  .nvf-testimonials__text {
    font-size: clamp(0.8125rem, 3.2vw, 0.9375rem);
  }
}