/* ============================================================
   Task #1519757: Visual QA — Tablet Breakpoint (768px)

   Pages audited:
   1. Homepage (/)
   2. Pricing (/pricing)
   3. Settlements directory (/settlements)
   4. Settlement detail (/settlements/:slug)
   5. Blog index (/blog)
   6. Blog post (/blog/:slug)
   7. Quiz (/quiz)
   8. About (/about)
   9. News (/news)
   10. Guides (/guides)

   Scope: @media (min-width: 600px) and (max-width: 900px)
   Tablet range = 600px–900px; primary target is 768px.

   Rules:
   - DO NOT break existing 375px (mobile) styles
   - DO NOT break existing 1440px (desktop) styles
   - Target is the gap between mobile breakpoints (≤560–640px)
     and desktop breakpoints (≥900–1024px)
   ============================================================ */

/* ══════════════════════════════════════════════════════════════
   ── 1. GLOBAL NAVIGATION (all pages)
   ══════════════════════════════════════════════════════════════
   At 768px the hamburger nav is active (≤768px triggers mobile nav).
   Ensure no horizontal overflow from nav elements.
   ────────────────────────────────────────────────────────────── */

@media (min-width: 600px) and (max-width: 900px) {

  /* Prevent any stray nav elements from creating h-scroll */
  .sr-nav,
  .sr-header,
  nav.global-nav,
  header {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* Global trust bar — allow wrapping at tablet, prevent h-overflow */
  .sr-gtb,
  .sr-trust-ticker,
  [class*="trust-ticker"],
  [class*="trust-bar"] {
    overflow-x: hidden !important;
    flex-wrap: wrap !important;
  }

  /* Body — prevent horizontal scroll sitewide */
  body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   ── 2. HOMEPAGE (/)
   ══════════════════════════════════════════════════════════════ */

@media (min-width: 600px) and (max-width: 900px) {

  /* Hero — reduce extreme padding at tablet */
  .hp-hero {
    padding-top: clamp(5rem, 12vw, 7rem) !important;
    padding-bottom: clamp(2rem, 4vw, 3rem) !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  .hp-hero__inner {
    max-width: 680px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Hero h1 — comfortable tablet scale */
  .hp-hero h1,
  .hp-hero__h1 {
    font-size: clamp(2rem, 5vw, 3rem) !important;
  }

  /* Hero CTA row — 2-column layout at tablet */
  .hp-hero__actions,
  .hp-hero-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
    justify-content: center !important;
  }

  .hp-hero__actions a,
  .hp-hero__actions button,
  .hp-hero-actions a,
  .hp-hero-actions button {
    min-height: 44px !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  /* Stats grid — 4-col at desktop, 2-col at mobile, use 3-col at tablet */
  .hp-stats__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-5, 1.25rem) !important;
    max-width: 560px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Category grid — 4-col desktop, 2-col mobile → 3-col tablet */
  .hp-cat-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--space-4, 1rem) !important;
  }

  /* Settlement-of-the-day grid — 3-col desktop, 1-col mobile → 2-col tablet */
  .hp-sotd__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-4, 1rem) !important;
  }

  /* Testimonials — 3-col desktop, 1-col mobile → 2-col tablet */
  .hp-testimonials__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-5, 1.25rem) !important;
  }

  /* Pricing grid — 3-col desktop, 1-col mobile → 2-col tablet */
  .hp-pricing__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    max-width: 680px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: var(--space-5, 1.25rem) !important;
  }

  /* For-Business cards — 4-col desktop, 1-col mobile → 2-col tablet */
  .hp-for-business__cards {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-5, 1.25rem) !important;
  }

  /* HP steps — ensure 2-col at tablet (not squished in mobile 1-col) */
  .hp-steps__grid,
  .hp-how__grid,
  .hp-how-list {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-5, 1.25rem) !important;
  }

  /* Live feed section — reasonable width */
  .hp-feed,
  .hp-live-feed {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  /* Hero search — full-width at tablet */
  .hp-hero__search,
  .hp-hero-search {
    max-width: 520px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Section padding — consistent at tablet */
  .hp-section,
  [class^="hp-"][class$="__section"],
  [class^="hp-"][class$="-section"] {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  /* Unclaimed section inner — prevent overflow */
  section.hp-unclaimed .hp-unclaimed__inner {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  /* Social proof ticker — wrap gracefully */
  .sp-ticker-wrap,
  .spt-track {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   ── 3. PRICING (/pricing)
   ══════════════════════════════════════════════════════════════
   Pricing grid is 3-col at desktop, 1-col at ≤768px.
   At 768px tablet it snaps immediately to 1-col — too sparse.
   Use 2-col at tablet for first two tiers + full-width row for 3rd.
   ────────────────────────────────────────────────────────────── */

@media (min-width: 600px) and (max-width: 900px) {

  /* Pricing plans grid — 2-col at tablet */
  .pricing-grid,
  .sr-pricing-grid,
  [class*="pricing-grid"],
  [class*="plan-grid"],
  [class*="plans-grid"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.25rem !important;
    max-width: 680px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Pricing cards — proper sizing */
  .pricing-card,
  .sr-pricing-card,
  [class*="pricing-card"],
  [class*="plan-card"] {
    width: auto !important;
    min-width: 0 !important;
  }

  /* Urgency/promo bar — wrap text, no overflow */
  .pricing-urgency-bar,
  [class*="urgency-bar"],
  [class*="promo-bar"] {
    flex-wrap: wrap !important;
    overflow: hidden !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    text-align: center !important;
  }

  /* Hero — good padding at tablet */
  .pricing-hero,
  [class*="pricing-hero"] {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    padding-top: clamp(5rem, 12vw, 7rem) !important;
  }

  /* Comparison table — horizontal scroll for overflow */
  .pricing-compare,
  .compare-table,
  [class*="compare-table"],
  [class*="pricing-table"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* FAQ accordion — full width at tablet */
  .pricing-faq,
  [class*="pricing-faq"] {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  /* Social proof ticker on pricing */
  .social-proof-ticker-wrap,
  .spt-wrap {
    overflow: hidden !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   ── 4. SETTLEMENTS DIRECTORY (/settlements)
   ══════════════════════════════════════════════════════════════
   Bloomberg-style directory has a filter sidebar + main content.
   At 768px the sidebar should collapse or overlay, and the card
   grid should be 2-col.
   ────────────────────────────────────────────────────────────── */

@media (min-width: 600px) and (max-width: 900px) {

  /* Directory hero — good tablet padding + typography */
  .dir-hero {
    padding: clamp(5rem, 10vw, 6rem) 1.5rem 2.5rem !important;
  }

  .dir-hero-inner {
    max-width: 100% !important;
  }

  .dir-h1 {
    font-size: clamp(1.5rem, 4vw, 2.25rem) !important;
  }

  /* Hero stats — 3-across at tablet */
  .dir-hero-stats {
    gap: 1.5rem !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
  }

  /* Hero category pills — wrap cleanly */
  .dir-hero-cats {
    flex-wrap: wrap !important;
    gap: 0.4rem !important;
  }

  /* Filter bar — horizontal scroll on tablet if needed */
  .dir-filter-bar,
  .dir-cat-nav {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
  }

  .dir-filter-bar::-webkit-scrollbar,
  .dir-cat-nav::-webkit-scrollbar {
    display: none !important;
  }

  /* Card grid — 2-col at tablet */
  .dir-grid,
  .dir-cards-grid,
  [class*="dir-grid"],
  .ms-cards-grid,
  .settlements-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }

  /* Settlement cards — prevent overflow */
  .dir-card,
  .ms-card,
  .sr2-card,
  [class*="dir-card"] {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  /* Browse sidebar — hide on tablet (mobile-style) */
  .dir-sidebar,
  .ms-sidebar,
  [class*="dir-sidebar"] {
    display: none !important;
  }

  /* Main content — full width when sidebar hidden */
  .dir-main,
  .ms-main,
  [class*="dir-main"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Category browse grid — 3-col at tablet */
  .dir-browse-cats .dir-cat-grid,
  .dir-cat-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* State pills grid */
  .dir-states-grid,
  .dir-state-pills {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* Sort bar — flexible layout */
  .dir-sort-row,
  .dir-toolbar {
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  /* Result count + sort buttons */
  .dir-result-count,
  .dir-sort-btn {
    flex-shrink: 0 !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   ── 5. SETTLEMENT DETAIL (/settlements/:slug)
   ══════════════════════════════════════════════════════════════
   The detail page collapses to single-column at ≤900px already.
   At 768px we just need to ensure:
   - Sidebar CTA is properly sized
   - Hero image scales correctly
   - Typography is readable
   - No horizontal overflow from wide tables or code blocks
   ────────────────────────────────────────────────────────────── */

@media (min-width: 600px) and (max-width: 900px) {

  /* The 2-col grid already stacks at ≤900px — confirm content padding */
  body.page-settlement-detail .content-with-sidebar {
    padding: 1.5rem !important;
    gap: 1.5rem !important;
  }

  /* Sidebar CTA at top — proper width */
  body.page-settlement-detail .sidebar {
    max-width: 480px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
  }

  /* Detail header — good padding */
  body.page-settlement-detail .detail-header,
  body.page-settlement-detail .detail-inner {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  /* Hero image — constrain at tablet */
  body.page-settlement-detail .shi-hero-img,
  body.page-settlement-detail .settlement-hero-image,
  body.page-settlement-detail [class*="hero-image"] img {
    max-height: 320px !important;
    object-fit: cover !important;
    width: 100% !important;
  }

  /* Filing CTA sticky bar — ensure it doesn't clip content */
  #stickyFilingBar,
  .sticky-filing-bar,
  [id*="sticky"][class*="filing"] {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Overflow tables in settlement detail */
  body.page-settlement-detail table,
  body.page-settlement-detail .detail-content table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
  }

  /* H1 — tablet scale */
  body.page-settlement-detail .detail-header h1 {
    font-size: clamp(1.5rem, 4vw, 2.25rem) !important;
  }

  /* View-gate modals — centered at tablet */
  .sd-vg-modal,
  .vg-modal,
  [class*="view-gate"] {
    max-width: 480px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   ── 6. BLOG INDEX (/blog) + 7. BLOG POST (/blog/:slug)
   ══════════════════════════════════════════════════════════════
   content-pages-redesign-1469879.css collapses to 1-col at ≤768px.
   At 768px tablet we want 2-col card grid + visible sidebar.
   ────────────────────────────────────────────────────────────── */

@media (min-width: 600px) and (max-width: 900px) {

  /* Content hub hero — proper tablet padding */
  .ch-hero {
    padding: clamp(5rem, 10vw, 6.5rem) 1.5rem 2.5rem !important;
  }

  .ch-hero-inner {
    max-width: 680px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .ch-hero h1 {
    font-size: clamp(1.6rem, 4.5vw, 2.5rem) !important;
  }

  /* Layout — narrow sidebar visible at tablet, or single column */
  .ch-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;  /* sidebar hidden, content full */
    padding: 2rem 1.5rem 3rem !important;
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Sidebar — still hidden at 768px but show at 860px+ */
  .ch-sidebar {
    display: none !important;
  }

  @media (min-width: 820px) {
    .ch-layout {
      grid-template-columns: 1fr 240px !important;
      gap: 2rem !important;
    }
    .ch-sidebar {
      display: block !important;
      position: sticky !important;
      top: 80px !important;
    }
  }

  /* Card grid — 2-col at tablet (overrides 1-col from ≤768px rule) */
  .ch-card-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.25rem !important;
  }

  /* Related grid — 2-col at tablet */
  .ch-related-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }

  /* Guides grid — 2-col at tablet */
  .ch-guides-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }

  /* Featured card — side-by-side at tablet */
  .ch-featured-card {
    grid-template-columns: 1fr 1fr !important;
    min-height: 220px !important;
  }

  .ch-featured-card-img-wrap {
    aspect-ratio: 4/3 !important;
  }

  /* Filter bar — horizontal scroll */
  .ch-filter-bar {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    white-space: nowrap !important;
  }

  .ch-filter-bar::-webkit-scrollbar {
    display: none !important;
  }

  .ch-filter-inner {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    gap: 0.5rem !important;
    padding: 0 1.5rem !important;
  }

  /* Blog post article — readable width at tablet */
  .ch-article-header {
    padding: clamp(5rem, 10vw, 6rem) 1.5rem 2rem !important;
  }

  .ch-article-body,
  .ch-prose {
    max-width: 680px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  /* Newsletter signup form — inline at tablet */
  .ch-newsletter-form {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
  }

  .ch-newsletter-form input[type="email"] {
    min-width: 240px !important;
    flex: 1 !important;
  }

  .ch-newsletter-form button {
    min-height: 44px !important;
    flex-shrink: 0 !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   ── 8. QUIZ (/quiz)
   ══════════════════════════════════════════════════════════════ */

@media (min-width: 600px) and (max-width: 900px) {

  /* Quiz wrapper — centered, max-width at tablet */
  .qw-page,
  .quiz-wrap,
  .eligibility-quiz-wrap,
  [class*="quiz-wrap"],
  [class*="quiz-page"] {
    max-width: 620px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  /* Quiz card — comfortable size at tablet */
  .qw-card,
  .quiz-card,
  [class*="quiz-card"] {
    padding: 2rem !important;
    border-radius: 16px !important;
  }

  /* Quiz options — 2-col at tablet if they're short options */
  .qw-options,
  .quiz-options,
  [class*="quiz-options"] {
    gap: 0.75rem !important;
  }

  /* Quiz CTAs — proper touch targets */
  .qw-btn,
  .quiz-btn,
  [class*="quiz-btn"],
  [class*="quiz-cta"] {
    min-height: 48px !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    font-size: 1rem !important;
  }

  /* Quiz progress bar */
  .qw-progress,
  .quiz-progress,
  [class*="quiz-progress"] {
    max-width: 620px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Results page — good layout */
  .qw-results,
  .quiz-results,
  [class*="quiz-results"] {
    max-width: 680px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  /* Match cards — 2-col at tablet */
  .qw-matches-grid,
  [class*="quiz-matches"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   ── 9. ABOUT (/about)
   ══════════════════════════════════════════════════════════════ */

@media (min-width: 600px) and (max-width: 900px) {

  /* About hero — proper spacing at tablet */
  .ab4-hero,
  .about-hero,
  [class*="about-hero"],
  [class*="ab4-hero"] {
    padding-top: clamp(5rem, 12vw, 7rem) !important;
    padding-bottom: 2.5rem !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  /* About inner content — no overflow */
  .ab4-inner,
  .about-inner,
  [class*="ab4-inner"] {
    max-width: 680px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    overflow-x: hidden !important;
  }

  /* Stats row — 2-col grid at tablet */
  .ab4-stats,
  .about-stats,
  [class*="ab4-stats"],
  [class*="about-stats"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.25rem !important;
  }

  /* Team cards — 2-col at tablet */
  .ab4-team-grid,
  .about-team-grid,
  [class*="team-grid"],
  [class*="ab4-team"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
  }

  /* Values / features — 2-col at tablet */
  .ab4-values,
  .ab4-features,
  [class*="ab4-values"],
  [class*="ab4-features"],
  [class*="about-values"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
  }

  /* About h1 */
  .ab4-hero h1,
  .about-hero h1 {
    font-size: clamp(1.8rem, 5vw, 3rem) !important;
  }

  /* CTA section — full width buttons at tablet */
  .ab4-cta,
  [class*="ab4-cta"] {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   ── 10. NEWS (/news) + 11. GUIDES (/guides)
   ══════════════════════════════════════════════════════════════
   Both pages use the ch-* namespace (content-pages-redesign).
   The card grid and article grid already handled in section 6.
   Add page-specific fixes here.
   ────────────────────────────────────────────────────────────── */

@media (min-width: 600px) and (max-width: 900px) {

  /* News hub — article cards 2-col at tablet */
  .news-grid,
  .news-cards,
  [class*="news-grid"],
  [class*="news-cards"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.25rem !important;
  }

  /* News article cards */
  .news-card,
  [class*="news-card"] {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  /* News hub layout wrapper */
  .news-hub-wrap,
  [class*="news-hub"] {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Guides grid — 2-col at tablet */
  .hub-grid,
  .guides-grid,
  [class*="guide-grid"],
  [class*="hub-grid"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.25rem !important;
  }

  /* Hub hero — proper tablet padding */
  .hub-hero {
    padding-top: clamp(5rem, 10vw, 6.5rem) !important;
    padding-bottom: 2.5rem !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  .hub-hero .container {
    max-width: 680px !important;
  }

  /* Hub articles section */
  .hub-section,
  [class*="hub-section"] {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Guide cards */
  .hub-card,
  [class*="hub-card"] {
    min-width: 0 !important;
    overflow: hidden !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   ── 12. GLOBAL SECTION PADDING (all pages)
   ══════════════════════════════════════════════════════════════
   Ensure all major section wrappers have consistent side padding
   at tablet width to prevent content from touching viewport edges.
   ────────────────────────────────────────────────────────────── */

@media (min-width: 600px) and (max-width: 900px) {

  /* Common container patterns */
  .sr-container,
  .container,
  .page-container,
  .page-inner,
  [class*="inner-wrap"],
  [class*="page-wrap"] {
    padding-left: max(1.5rem, env(safe-area-inset-left)) !important;
    padding-right: max(1.5rem, env(safe-area-inset-right)) !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Max-width containers — full use of tablet viewport */
  .sr-max-900,
  [class*="max-900"],
  [class*="max-w-900"] {
    max-width: 100% !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  /* Images — prevent overflow */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Embeds and iframes */
  iframe,
  embed,
  video {
    max-width: 100% !important;
  }

  /* Tables — force horizontal scroll instead of page overflow */
  table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
  }

  /* CTA buttons — 44px minimum touch target across all pages */
  .sr-btn,
  .btn,
  [class*="cta-btn"],
  [class*="cta-primary"],
  [class*="cta-secondary"],
  .dir-cta-primary,
  .dir-cta-secondary {
    min-height: 44px !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   ── 13. MODAL & OVERLAY SAFETY (all pages)
   ══════════════════════════════════════════════════════════════
   Modals that use fixed/absolute positioning can overflow at tablet.
   Constrain them safely.
   ────────────────────────────────────────────────────────────── */

@media (min-width: 600px) and (max-width: 900px) {

  /* Modal dialogs — max-width at tablet */
  .modal,
  .sr-modal,
  [class*="modal-dialog"],
  [role="dialog"] {
    max-width: calc(100vw - 3rem) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Dropdown menus — prevent overflow */
  .dropdown,
  .dropdown-menu,
  [class*="dropdown"] {
    max-width: calc(100vw - 2rem) !important;
  }

  /* Toast notifications */
  .sr-toast,
  [class*="toast"] {
    max-width: calc(100vw - 2rem) !important;
    left: 1rem !important;
    right: 1rem !important;
  }
}