/* Mobile + tablet responsive overrides for all LOE Law pages.
   Loaded after assets/styles.css. */

/* Base — never let anything overflow horizontally on small viewports. */
html, body { overflow-x: hidden; }
img, svg { max-width: 100%; height: auto; }

/* Wrap long emails / URLs so they never push the footer column wide. */
a[href^="mailto:"], a[href^="tel:"] { word-break: break-word; overflow-wrap: anywhere; }

/* Open the container side gutter a bit tighter on phones. */
@media (max-width: 720px) {
  .container { padding: 0 20px !important; }
}

/* Mobile + small tablet: collapse multi-column layouts to stacks. */
@media (max-width: 900px) {
  /* Generic: any grid template column with 2-4 cols collapses to 1. */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  [style*="gridTemplateColumns"]   { grid-template-columns: 1fr !important; }

  /* Headings rescale. */
  h1.serif { font-size: clamp(40px, 9vw, 64px) !important; line-height: 1.05 !important; }
  h2.serif { font-size: clamp(28px, 6.5vw, 44px) !important; line-height: 1.05 !important; }
  h3.serif { font-size: clamp(20px, 5vw, 28px) !important; }

  /* Section padding shrinks. */
  section { padding-top: 56px !important; padding-bottom: 56px !important; }

  /* Nav — hide secondary anchor links, keep logo + primary CTA only. */
  header nav .nav-a { display: none !important; }

  /* Tables / 3-col flat-fee rows wrap into stacked rows on phone. */
  .flat-row, .row-head {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }
  .row-head { display: none !important; }
  .flat-row { padding: 14px 16px !important; }
  .flat-row > *:nth-child(3) { text-align: left !important; }

  /* Quiz: keep itemized line-item rows as a compact 2-col grid (label + prices stacked). */
  .quiz-grid [style*="1.7fr"] {
    grid-template-columns: 1fr auto !important;
    gap: 4px 12px !important;
    padding: 12px 16px !important;
  }
  /* Header row of the line-item table: drop the redundant "non-member" column, keep only the star header. */
  .quiz-grid [style*="1.7fr"] > *:nth-child(2) { text-align: right !important; font-size: 12px !important; }
  .quiz-grid [style*="1.7fr"] > *:nth-child(3) { text-align: right !important; }

  /* Verdict headline scales down on phones. */
  .quiz-grid .serif[style*="44px"] { font-size: clamp(28px, 7vw, 38px) !important; }
  .quiz-grid .serif[style*="30px"] { font-size: clamp(22px, 6vw, 28px) !important; }
  .quiz-grid .numeric[style*="32px"] { font-size: clamp(22px, 6vw, 28px) !important; }
}

/* Phone — even tighter. */
@media (max-width: 480px) {
  .container { padding: 0 16px !important; }
  .quiz-grid [style*="padding"] { padding-left: 16px !important; padding-right: 16px !important; }
}

/* Tablet — keep some 2-col layouts but tighten everything down. */
@media (min-width: 720px) and (max-width: 1024px) {
  .container { padding: 0 28px !important; }
  h1.serif { font-size: clamp(48px, 6.5vw, 80px) !important; }
  h2.serif { font-size: clamp(32px, 5vw, 48px) !important; }
}