/* ==========================================================================
   ADU page: mobile treatment
   Loads last on adu.html so it wins the cascade.

   This page is built almost entirely from inline style attributes (~420 of
   them) carrying hardcoded desktop values: 80px margins, `max-width: 80%`,
   `display: flex` rows, fixed image heights. Inline styles beat any
   stylesheet selector, so the overrides here need !important. That is
   deliberate and confined to this file rather than a reason to rewrite the
   markup.

   What was wrong on a phone:
     - The hero ran 813px tall, so the H1 sat at the very bottom of a screen
       of dark video and the tab bar was two swipes down.
     - Four levels of nested padding (15 + 30 + 20 + 20 per side) ate 130px
       of a 500px viewport, and only some blocks carried it, so section
       gutters visibly disagreed with each other down the page.
     - The city grid got 370px to work with against 160px items plus a 30px
       gap, so 80 cities rendered one per row: an 18,000px tab.
     - The three ADU type tiles stayed a flex row and squeezed to ~130px each.
   ========================================================================== */

@media screen and (max-width: 767px) {

  /* ---- Hero -------------------------------------------------------------
     Was 813px: a full screen of dark footage with the headline pushed to the
     bottom edge. Cap it so the copy sits in view and the tabs are reachable
     without a scroll. dvh tracks the visible viewport on iOS Safari, where
     100vh excludes the URL bar.
     --------------------------------------------------------------------- */
  .about-hero {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .hero.about-hero {
    height: 62vh !important;
    height: 62dvh !important;
    min-height: 430px !important;
    max-height: 560px !important;
  }

  .about-hero .hero-video {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
  }

  /* The stock overlay is a flat wash. Weight it to the bottom so the video
     reads clearly up top and the copy sits on solid dark. */
  .about-hero .hero-overlay {
    background: linear-gradient(
      to bottom,
      rgba(15, 30, 48, 0.45) 0%,
      rgba(15, 30, 48, 0.30) 40%,
      rgba(15, 30, 48, 0.78) 100%
    ) !important;
  }

  /* Pin the copy to the bottom of the frame rather than letting it float in
     the middle of the video with dead space under it. */
  .about-hero .hero-content {
    display: flex !important;
    align-items: flex-end !important;
    height: 100% !important;
    padding: 0 !important;
  }

  .about-hero .hero-text-container {
    width: 100% !important;
    padding: 0 20px 26px !important;
    text-align: left !important;
  }

  .about-hero h1 {
    font-size: 1.9rem !important;
    line-height: 1.12 !important;
    letter-spacing: -0.01em !important;
    margin: 0 0 10px !important;
  }

  /* No auto margins here: the block is left-aligned, so centring the
     paragraph inside it just indents it away from the H1's edge. */
  .about-hero .hero-content p {
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    max-width: 36ch !important;
    margin: 0 !important;
  }

  /* ---- Tab bar ----------------------------------------------------------
     Five tabs never fit across a phone, so the bar scrolls. It was clipping
     "PLANS & PRICING" mid-word with no hint that anything lay to the right.
     Keep it scrollable, but add end padding and snap so a partially visible
     tab reads as "more this way" rather than as a broken layout.
     --------------------------------------------------------------------- */
  .about-tabs-container.wide-section-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .about-tabs.wide-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding: 0 16px !important;
    gap: 4px;
  }

  .about-tabs.wide-tabs::-webkit-scrollbar { display: none; }

  .about-tabs .tab-item {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    scroll-snap-align: start;
    padding: 14px 14px !important;
    font-size: 0.76rem !important;
    letter-spacing: 0.06em !important;
  }

  /* ---- Gutters ----------------------------------------------------------
     Collapse the nested padding to a single 18px gutter owned by one level,
     so every section lines up on the same left edge. Without this the page
     reads as several different documents stacked together.
     --------------------------------------------------------------------- */
  .about-content > .container.wide-section-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .tab-content .adu-content-container,
  .tab-content .adu-hero-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .tab-content > .adu-hero-section > .adu-content-container {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* Blocks the markup insets with a percentage max-width (80%, 90%) so their
     text ends up narrower than the headings above them, which is what made
     the gutters look like they disagreed down the page. Full width here; the
     shared 18px gutter is the only inset that should apply. */
  .tab-content [style*="max-width: 80%"],
  .tab-content [style*="max-width:80%"],
  .tab-content [style*="max-width: 85%"],
  .tab-content [style*="max-width: 90%"],
  .tab-content [style*="max-width:90%"],
  .tab-content [style*="max-width: 95%"] {
    max-width: 100% !important;
  }

  /* ---- Vertical rhythm --------------------------------------------------
     The desktop 80px/60px section margins are roughly a third of a phone
     screen of dead space each. Halve them. Matching on the inline value is
     ugly but it is the only handle these blocks expose.
     --------------------------------------------------------------------- */
  .tab-content [style*="margin-top: 80px"] { margin-top: 40px !important; }
  .tab-content [style*="margin-bottom: 60px"] { margin-bottom: 32px !important; }
  .tab-content [style*="padding: 80px 0"] { padding: 40px 0 !important; }
  .tab-content [style*="margin-top: 60px"] { margin-top: 32px !important; }
  .tab-content [style*="margin-bottom: 40px"] { margin-bottom: 24px !important; }

  /* Full-bleed bands: the markup pulls these out to 100vw with negative
     margins. Keep the bleed but bring the inner padding in line. */
  .tab-content [style*="100vw"] > div {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* ---- Text and headings ------------------------------------------------ */
  .tab-content .process-title {
    font-size: 1.55rem !important;
    line-height: 1.18 !important;
    margin-bottom: 12px !important;
  }

  .tab-content .process-lead {
    font-size: 1rem !important;
    line-height: 1.5 !important;
    margin-bottom: 16px !important;
  }

  .tab-content .process-text p,
  .tab-content .adu-content-container > div > p {
    font-size: 0.95rem !important;
    line-height: 1.7 !important;
  }

  /* Stack the alternating image/text rows and drop the row-reverse, which
     only means anything when they sit side by side. Its own 20px padding
     stacks on top of the page gutter and pushes these blocks 20px further in
     than everything around them, so zero it. */
  .tab-content .process-content-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 22px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .tab-content .process-image img {
    width: 100% !important;
    height: auto !important;
    border-radius: 4px;
  }

  /* ---- ADU type tiles ---------------------------------------------------
     Three inline flex:1 columns squeezed to ~130px each. Stack them, and let
     the images fill rather than letterbox inside a fixed 250px box. */
  .adu-type-tiles {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    max-width: 100% !important;
    margin-top: 28px !important;
  }

  .adu-type-tiles > div {
    text-align: left !important;
  }

  .adu-type-tiles > div > div:first-child {
    height: 200px !important;
  }

  .adu-type-tiles img {
    object-fit: cover !important;
  }

  .adu-type-tiles h3 {
    font-size: 1.15rem !important;
    margin-bottom: 8px !important;
  }

  .adu-type-tiles p {
    font-size: 0.92rem !important;
    line-height: 1.6 !important;
  }

  /* ---- City grid --------------------------------------------------------
     The whole reason the Regulations tab ran 18,000px. It had 370px of usable
     width against 160px items plus a 30px gap, so every one of the 80 cities
     took its own row. Two per row on a real grid, with the button sized to
     the cell instead of a fixed 160px.
     --------------------------------------------------------------------- */
  .city-grid-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .city-grid-container {
    margin: 24px auto 32px !important;
  }

  .city-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 22px 14px !important;
    padding: 0 !important;
    justify-content: stretch !important;
  }

  .city-item {
    width: auto !important;
    margin-bottom: 0 !important;
  }

  .city-logo-container {
    width: 74px !important;
    height: 74px !important;
    padding: 9px !important;
    margin-bottom: 10px !important;
  }

  .city-logo {
    max-width: 54px !important;
    max-height: 54px !important;
  }

  .city-button {
    width: 100% !important;
    padding: 9px 4px !important;
    font-size: 0.78rem !important;
    line-height: 1.25;
  }

  /* ---- Comparison modal -------------------------------------------------
     The inline `min-width: 300px` on its columns forces a horizontal scroll
     inside a modal that is itself only ~90vw. Let them collapse.
     --------------------------------------------------------------------- */
  #adu-comparison-modal .modal-content {
    width: 94% !important;
    margin: 20px auto !important;
    max-height: 88vh !important;
  }

  #adu-comparison-modal [style*="min-width: 300px"],
  #adu-comparison-modal [style*="min-width:300px"] {
    min-width: 0 !important;
    flex-basis: 100% !important;
  }

  #adu-comparison-modal [style*="padding: 30px"] {
    padding: 20px 18px !important;
  }

  #adu-comparison-modal [style*="padding: 20px 30px"] {
    padding: 18px !important;
  }

  #adu-comparison-modal h2 {
    font-size: 1.25rem !important;
    line-height: 1.25 !important;
  }

  #adu-comparison-modal [style*="display: flex"] {
    gap: 20px !important;
  }

  /* The 24px × glyph is a small tap target sitting close to the header text. */
  #close-comparison-modal {
    width: 40px !important;
    height: 40px !important;
    top: 8px !important;
    right: 8px !important;
    line-height: 1 !important;
  }

  #toggle-comparison {
    width: 100% !important;
    justify-content: center !important;
    font-size: 0.9rem !important;
    padding: 14px 18px !important;
  }

  /* ---- Generic inline flex rows ----------------------------------------
     Anything left in the body still laid out as a side-by-side pair. */
  .tab-content [style*="display: flex"][style*="gap: 30px"] {
    flex-direction: column !important;
    gap: 22px !important;
  }

  /* ---- Callout cards ----------------------------------------------------
     The financing tab uses accent-bordered cards with 25px of padding, which
     leaves ~400px of text column once the page gutter is counted. These are
     real card chrome rather than a gutter bug, so keep the inset, just make
     it proportionate to the width available.
     --------------------------------------------------------------------- */
  .tab-content [style*="padding: 25px"] {
    padding: 18px 16px !important;
  }

  .tab-content [style*="border-left: 5px"] {
    border-left-width: 3px !important;
  }

  .tab-content [style*="padding: 20px 0"] {
    padding: 8px 0 !important;
  }

  /* ---- Decorative rules -------------------------------------------------
     Several 2px full-width dividers carry `margin: 40px auto`, which stacks
     with the section margins above and below into ~120px of nothing. */
  .tab-content [style*="height: 2px"] {
    margin-top: 26px !important;
    margin-bottom: 26px !important;
  }
}

/* Narrow phones. */
@media screen and (max-width: 390px) {
  .about-hero h1 { font-size: 1.7rem !important; }
  .tab-content .process-title { font-size: 1.4rem !important; }
  .tab-content > .adu-hero-section > .adu-content-container {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  .city-grid { gap: 18px 10px !important; }
  .city-button { font-size: 0.72rem !important; }
}