/* ═══════════════════════════════════════════════════════
   AVORINO — RESPONSIVE OVERRIDES (v2)
   Adds mobile/tablet breakpoints to Webflow-generated styles.
   Breakpoints: 991px (tablet), 767px (mobile-l), 478px (mobile-p)
   ═══════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════
   TABLET  (≤ 991px)
   ═══════════════════════════════════════════════════════ */
@media screen and (max-width: 991px) {

  /* ── Section padding: 128/80 → 80/48 ── */
  .av-section-warm,
  .av-section-dark,
  .av-section-cream {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
    padding-left: 48px !important;
    padding-right: 48px !important;
  }

  /* ── Heroes: reduce top padding + min-height ── */
  .sv-hero, .adu-hero, .ct-hero, .est-hero,
  .rv-hero, .fin-hero, .inv-hero, .svsub-hero,
  .cy-hero, .pl-hero, .tl-hero, .about-hero {
    padding-top: 120px !important;
    padding-left: 48px !important;
    padding-right: 48px !important;
    min-height: 45vh !important;
  }

  /* ── Split layouts → single column ── */
  .av-split-60-40,
  .av-split-40-60,
  .fin-hero,
  .cy-hero,
  .adu-hero {
    grid-template-columns: 1fr !important;
    grid-column-gap: 48px !important;
  }

  /* ── Alternating image+text rows → single column ── */
  .adu-type-row,
  .svsub-narr-row {
    grid-template-columns: 1fr !important;
    grid-column-gap: 0 !important;
    grid-row-gap: 32px !important;
  }

  /* ── 3-col grids → 2-col ── */
  .sv-grid,
  .av-grid-3col,
  .about-stats-grid,
  .pl-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ── 2-col grids: reduce gap ── */
  .av-grid-2col,
  .rv-grid,
  .av-form-grid-2,
  .tl-related-grid {
    grid-column-gap: 32px !important;
    grid-row-gap: 32px !important;
  }

  /* ── Definition rows: tighten label column ── */
  .cy-reg-row {
    grid-template-columns: 160px 1fr !important;
    grid-column-gap: 32px !important;
  }

  /* ── Step rows: keep layout but tighten ── */
  .adu-step-row,
  .cy-step-row {
    grid-column-gap: 16px !important;
  }

  /* ── Image placeholders: reduce heights ── */
  .av-img-tall {
    min-height: 400px !important;
  }

  /* ── CTA: tighten ── */
  .av-cta {
    padding: 32px !important;
  }
  .av-cta-container {
    padding: 64px 48px !important;
    min-height: 40vh !important;
  }

  /* ── Cards: tighter padding ── */
  .sv-card-content {
    padding: 36px 32px !important;
  }
  .about-process-card {
    max-width: 400px !important;
    padding: 40px 36px !important;
  }

  /* ── Spacing reductions ── */
  .av-mb-96, .sv-mb-96 {
    margin-bottom: 56px !important;
  }
}


/* ═══════════════════════════════════════════════════════
   MOBILE LANDSCAPE  (≤ 767px)
   ═══════════════════════════════════════════════════════ */
@media screen and (max-width: 767px) {

  /* ── Section padding: → 56/24 ── */
  .av-section-warm,
  .av-section-dark,
  .av-section-cream {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* ── Heroes ── */
  .sv-hero, .adu-hero, .ct-hero, .est-hero,
  .rv-hero, .fin-hero, .inv-hero, .svsub-hero,
  .cy-hero, .pl-hero, .tl-hero, .about-hero {
    padding-top: 100px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    min-height: 36vh !important;
  }

  /* ── ALL multi-col grids → 1-col ── */
  .sv-grid,
  .av-grid-3col,
  .av-grid-2col,
  .rv-grid,
  .pl-grid,
  .tl-related-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Form grids → 1-col ── */
  .av-form-grid-2 {
    grid-template-columns: 1fr !important;
  }

  /* ── Definition rows → stacked ── */
  .cy-reg-row {
    grid-template-columns: 1fr !important;
    grid-row-gap: 8px !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  /* ── Step rows → stacked ── */
  .adu-step-row,
  .cy-step-row {
    grid-template-columns: 1fr !important;
    grid-row-gap: 8px !important;
  }
  .adu-step-num-col,
  .cy-step-num-col {
    justify-content: flex-start !important;
  }

  /* ── CTA ── */
  .av-cta {
    padding: 20px !important;
  }
  .av-cta-container {
    padding: 48px 24px !important;
    min-height: 32vh !important;
  }
  .av-cta-heading {
    font-size: clamp(28px, 6vw, 40px) !important;
  }
  .av-cta-btns {
    flex-direction: column !important;
    align-items: center !important;
  }

  /* ── Service cards ── */
  .sv-card {
    min-height: 300px !important;
  }
  .sv-card-content {
    padding: 32px 24px !important;
  }

  /* ── Process cards ── */
  .about-process-card {
    max-width: 320px !important;
    padding: 32px 28px !important;
  }
  .about-process-card-title {
    font-size: 24px !important;
  }

  /* ── Image placeholders ── */
  .av-img-hero {
    min-height: 300px !important;
  }
  .av-img-tall {
    min-height: 300px !important;
  }
  .av-img-landscape {
    min-height: 250px !important;
  }
  .about-story-img {
    min-height: 220px !important;
  }

  /* ── Review cards ── */
  .rv-card {
    padding: 32px 24px !important;
  }

  /* ── Forms: prevent iOS zoom (16px minimum) ── */
  .av-input-clean,
  .av-textarea-clean,
  .av-select-clean {
    font-size: 16px !important;
  }

  /* ── Spacing reductions ── */
  .av-mb-96, .sv-mb-96 {
    margin-bottom: 40px !important;
  }
  .av-mb-64, .sv-mb-64 {
    margin-bottom: 28px !important;
  }

  /* ── Tool embed: reduce iframe height ── */
  .tl-embed {
    min-height: 400px !important;
  }

  /* ── About values zigzag: stack ── */
  .about-values-row {
    flex-direction: column !important;
  }
  .about-values-spacer {
    display: none !important;
  }
}


/* ═══════════════════════════════════════════════════════
   MOBILE PORTRAIT  (≤ 478px)
   ═══════════════════════════════════════════════════════ */
@media screen and (max-width: 478px) {

  /* ── Section padding: minimum ── */
  .av-section-warm,
  .av-section-dark,
  .av-section-cream {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* ── Heroes: compact ── */
  .sv-hero, .adu-hero, .ct-hero, .est-hero,
  .rv-hero, .fin-hero, .inv-hero, .svsub-hero,
  .cy-hero, .pl-hero, .tl-hero, .about-hero {
    padding-top: 80px !important;
    padding-bottom: 32px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    min-height: auto !important;
  }

  /* ── Service-sub hero overlay: tighter ── */
  .svsub-hero-overlay {
    padding: 24px 16px !important;
  }

  /* ── CTA: minimal ── */
  .av-cta {
    padding: 12px !important;
  }
  .av-cta-container {
    padding: 36px 16px !important;
    min-height: auto !important;
  }
  .av-cta-heading {
    font-size: clamp(24px, 7vw, 32px) !important;
  }

  /* ── Service cards ── */
  .sv-card {
    min-height: 260px !important;
  }
  .sv-card-content {
    padding: 24px 20px !important;
  }
  .sv-card-title {
    font-size: 22px !important;
  }

  /* ── Process cards ── */
  .about-process-card {
    max-width: calc(100vw - 32px) !important;
    padding: 24px 20px !important;
  }
  .about-process-card-title {
    font-size: 20px !important;
  }
  .about-process-card-desc {
    font-size: 13px !important;
  }

  /* ── Buttons: full width ── */
  .av-btn-primary,
  .av-btn-outline,
  .av-cta-btn,
  .av-submit-btn {
    padding: 14px 28px !important;
    font-size: 13px !important;
    width: 100%;
    justify-content: center !important;
  }

  /* ── Review cards ── */
  .rv-card {
    padding: 24px 20px !important;
  }

  /* ── Image placeholders: further reduce ── */
  .av-img-hero {
    min-height: 220px !important;
  }
  .av-img-tall {
    min-height: 220px !important;
  }
  .av-img-landscape {
    min-height: 180px !important;
  }

  /* ── Spacing: minimal ── */
  .av-mb-96, .sv-mb-96 {
    margin-bottom: 32px !important;
  }
  .av-mb-64, .sv-mb-64 {
    margin-bottom: 24px !important;
  }

  /* ── Label: smaller ── */
  .av-label {
    font-size: 9px !important;
    letter-spacing: 0.25em !important;
    gap: 0 16px !important;
  }

  /* ── Tool embed ── */
  .tl-embed {
    min-height: 300px !important;
  }
  .tl-iframe {
    min-height: 300px !important;
  }

  /* ── ADU plan cards ── */
  .pl-card {
    padding: 20px !important;
  }

  /* ── Investment hero stat: reduce ── */
  .inv-hero-stat {
    font-size: clamp(48px, 12vw, 80px) !important;
  }

  /* ── Dividers: tighten ── */
  .av-divider,
  .av-divider-light {
    margin-top: 24px !important;
    margin-bottom: 24px !important;
  }
}