/* ═══════════════════════════════════════════════════════
   AVORINO — RESPONSIVE OVERRIDES
   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;
  }

  /* ── 4-col grids → 2-col ── */
  .sv-stats-grid,
  .adu-grid-4,
  .adu-stats-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ── 3-col grids → 2-col ── */
  .sv-grid,
  .av-grid-3col,
  .about-stats-grid,
  .rv-grid,
  .fin-grid-3,
  .est-steps-grid,
  .adu-steps-grid,
  .inv-stats-grid,
  .inv-step-grid,
  .svsub-step-grid,
  .pl-grid,
  .cy-stats-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ── 2-col grids: reduce gap ── */
  .av-grid-2col,
  .ct-grid,
  .ct-form-grid,
  .est-form-grid,
  .svsub-stats-grid,
  .tl-related-grid {
    grid-column-gap: 32px !important;
    grid-row-gap: 32px !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,
  .fin-grid-3,
  .est-steps-grid,
  .adu-steps-grid,
  .adu-grid-4,
  .inv-step-grid,
  .svsub-step-grid,
  .pl-grid,
  .ct-grid,
  .ct-form-grid,
  .est-form-grid,
  .tl-related-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Stats grids: stay 2-col, tighter ── */
  .sv-stats-grid,
  .about-stats-grid,
  .adu-stats-grid,
  .cy-stats-grid,
  .inv-stats-grid,
  .svsub-stats-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-column-gap: 24px !important;
    grid-row-gap: 24px !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;
  }

  /* ── Stat numbers: smaller ── */
  .sv-stat-number,
  .about-stat-number,
  .adu-stat-num,
  .cy-stat-num,
  .inv-stat-num,
  .svsub-stat-num {
    font-size: clamp(36px, 10vw, 56px) !important;
  }

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

  /* ── Image placeholders ── */
  .adu-img-placeholder,
  .svsub-img-placeholder,
  .about-story-img {
    min-height: 220px !important;
  }

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

  /* ── Contact info card: full width ── */
  .ct-info-card {
    padding: 32px 24px !important;
  }

  /* ── Forms: prevent iOS zoom ── */
  .ct-input, .ct-textarea, .ct-select,
  .est-input, .est-textarea, .est-select {
    font-size: 16px !important;
  }

  /* ── Spacing reductions ── */
  .av-mb-96, .sv-mb-96 {
    margin-bottom: 40px !important;
  }
  .av-mb-64, .sv-mb-64, .adu-mb-64,
  .ct-mb-64, .est-mb-64, .fin-mb-64,
  .inv-mb-64, .cy-mb-64, .pl-mb-64, .tl-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;
  }

  /* ── Stats: 1-col ── */
  .sv-stats-grid,
  .about-stats-grid,
  .adu-stats-grid,
  .cy-stats-grid,
  .inv-stats-grid,
  .svsub-stats-grid {
    grid-template-columns: 1fr !important;
    grid-column-gap: 16px !important;
    grid-row-gap: 20px !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 ── */
  .av-btn-primary,
  .av-btn-outline,
  .av-cta-btn,
  .ct-submit-btn,
  .est-submit-btn {
    padding: 14px 28px !important;
    font-size: 13px !important;
    width: 100%;
    justify-content: center !important;
  }

  /* ── Cards: tighten ── */
  .av-card-dark,
  .av-card-light,
  .fin-benefit-card,
  .adu-type-card,
  .inv-step,
  .est-step,
  .fin-step,
  .svsub-step {
    padding: 28px 20px !important;
  }

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

  /* ── Spacing: minimal ── */
  .av-mb-96, .sv-mb-96 {
    margin-bottom: 32px !important;
  }
  .av-mb-64, .sv-mb-64, .adu-mb-64,
  .ct-mb-64, .est-mb-64, .fin-mb-64,
  .inv-mb-64, .cy-mb-64, .pl-mb-64, .tl-mb-64 {
    margin-bottom: 24px !important;
  }
  .av-mb-48, .adu-mb-32, .ct-mb-32,
  .est-mb-32, .fin-mb-32, .inv-mb-32,
  .cy-mb-32, .pl-mb-32, .tl-mb-32 {
    margin-bottom: 16px !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;
  }

  /* ── City info card ── */
  .cy-info-card {
    padding: 24px 16px !important;
  }

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