/* ═══════════════════════════════════════════════════════
   AVORINO — RESPONSIVE OVERRIDES (v3)
   Comprehensive mobile/tablet breakpoints for all pages.
   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,
  .blog-hero, .bt-hero, .sch-hero {
    padding-top: 120px !important;
    padding-left: 48px !important;
    padding-right: 48px !important;
    min-height: 45vh !important;
  }

  /* ── Hero content containers: widen on tablet ── */
  .sv-hero-content,
  .adu-hero-content,
  .ct-hero-content,
  .est-hero-content,
  .inv-hero-content,
  .svsub-hero-content,
  .cy-hero-content,
  .pl-hero-content,
  .tl-hero-content,
  .blog-hero-content,
  .sch-hero-content {
    max-width: 100% !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,
  .blog-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;
  }

  /* ── Contact / Estimate info column: unstick ── */
  .ct-info-col,
  .est-info-col {
    position: relative !important;
    top: auto !important;
  }

  /* ── Calendly widget: reduce height ── */
  .av-cal-widget {
    min-height: 900px !important;
  }

  /* ── Blog cards: tighter ── */
  .blog-card-body {
    padding: 28px !important;
  }
  .blog-card-img-wrap {
    height: 200px !important;
  }

  /* ── Blog template: tighter ── */
  .bt-img-wrap {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
  .bt-article {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }

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

  /* ── Overview paragraphs: allow full width ── */
  .cy-overview,
  .inv-overview {
    max-width: 100% !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,
  .blog-hero, .bt-hero, .sch-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,
  .blog-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;
  }

  /* ── Contact / Estimate: unstick info column, reduce spacing ── */
  .ct-info-col,
  .est-info-col {
    position: relative !important;
    top: auto !important;
  }
  .ct-info-phone {
    font-size: clamp(24px, 5vw, 32px) !important;
  }
  .est-step-item {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  /* ── Financing: hero content full-width ── */
  .fin-hero-content {
    max-width: 100% !important;
  }

  /* ── Investment: reduce stat size, centered layout ── */
  .inv-hero-stat {
    font-size: clamp(56px, 14vw, 96px) !important;
  }
  .inv-hero-stat-label {
    margin-bottom: 32px !important;
  }

  /* ── Calendly widget: reduce height for mobile ── */
  .av-cal-section {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .av-cal-widget {
    min-height: 700px !important;
  }

  /* ── Blog: card layout adjustments ── */
  .blog-card-body {
    padding: 24px !important;
  }
  .blog-card-img-wrap {
    height: 180px !important;
  }
  .blog-card-title {
    font-size: 19px !important;
  }
  .blog-grid-wrap {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* ── Blog template ── */
  .bt-hero-inner {
    max-width: 100% !important;
  }
  .bt-title {
    font-size: clamp(28px, 5vw, 42px) !important;
  }
  .bt-meta {
    gap: 12px !important;
    flex-wrap: wrap !important;
  }
  .bt-img-wrap {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .bt-article {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .bt-rich-text {
    font-size: 16px !important;
    line-height: 2.2 !important;
  }
  .bt-featured-img {
    max-width: 100% !important;
  }

  /* ── City ADU: overview and permit meta ── */
  .cy-overview {
    max-width: 100% !important;
    margin-bottom: 40px !important;
  }
  .cy-permit-meta {
    font-size: 12px !important;
  }

  /* ── Heading size overrides for inner pages ── */
  .av-heading-xl {
    font-size: clamp(36px, 8vw, 56px) !important;
  }
  .av-heading-lg {
    font-size: clamp(28px, 6vw, 40px) !important;
  }

  /* ── Flex column gap reduction ── */
  .av-flex-col {
    grid-row-gap: 16px !important;
  }

  /* ── Cards: reduce padding ── */
  .av-card-dark,
  .av-card-light {
    padding: 40px 32px !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,
  .blog-hero, .bt-hero, .sch-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;
  }
  .inv-hero-stat-label {
    font-size: 14px !important;
    margin-bottom: 24px !important;
  }

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

  /* ── Contact / Estimate: compact ── */
  .ct-hero-content,
  .est-hero-content {
    max-width: 100% !important;
  }
  .ct-info-phone {
    font-size: clamp(20px, 6vw, 28px) !important;
  }
  .ct-info-heading,
  .est-info-heading {
    font-size: clamp(24px, 6vw, 32px) !important;
  }
  .est-step-item {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }
  .est-step-note {
    margin-left: 0 !important;
  }

  /* ── Financing: compact ── */
  .fin-hero-content {
    max-width: 100% !important;
  }

  /* ── Service-sub: compact narrative ── */
  .svsub-narr-heading {
    font-size: clamp(24px, 6vw, 32px) !important;
  }

  /* ── City ADU: compact ── */
  .cy-overview {
    max-width: 100% !important;
    margin-bottom: 32px !important;
    font-size: 15px !important;
  }
  .cy-step-num {
    font-size: clamp(32px, 8vw, 44px) !important;
  }
  .cy-permit-meta {
    font-size: 11px !important;
  }

  /* ── Calendly: minimal ── */
  .av-cal-section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .av-cal-heading {
    font-size: clamp(24px, 6vw, 32px) !important;
  }
  .av-cal-widget {
    min-height: 600px !important;
  }

  /* ── Blog: compact cards ── */
  .blog-card-body {
    padding: 20px !important;
  }
  .blog-card-img-wrap {
    height: 160px !important;
  }
  .blog-card-title {
    font-size: 17px !important;
  }
  .blog-card-summary {
    font-size: 13px !important;
  }
  .blog-card-date {
    font-size: 9px !important;
  }
  .blog-grid-wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* ── Blog template: compact ── */
  .bt-title {
    font-size: clamp(24px, 6vw, 36px) !important;
  }
  .bt-meta {
    gap: 8px !important;
    font-size: 12px !important;
  }
  .bt-img-wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .bt-article {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .bt-rich-text {
    font-size: 15px !important;
    line-height: 2 !important;
  }
  .bt-divider {
    margin-top: 32px !important;
    margin-bottom: 32px !important;
  }
  .bt-back-link {
    width: 100% !important;
    text-align: center !important;
  }

  /* ── Heading sizes: tightest ── */
  .av-heading-xl {
    font-size: clamp(28px, 9vw, 42px) !important;
  }
  .av-heading-lg {
    font-size: clamp(24px, 6vw, 32px) !important;
  }
  .av-heading-md {
    font-size: clamp(20px, 5vw, 28px) !important;
  }

  /* ── Cards: minimal padding ── */
  .av-card-dark,
  .av-card-light {
    padding: 32px 20px !important;
  }

  /* ── Flex column: tighter gap ── */
  .av-flex-col {
    grid-row-gap: 14px !important;
  }
}