/* Shared stylesheet moved out of inline <style> blocks so browsers cache it.
   Used by: /about/, /adus/camas-wa/, /adus/, /adus/lake-oswego-or/, /adus/portland-or/, /adus/vancouver-wa/, /bathrooms/camas-wa/, /bathrooms/, /bathrooms/lake-oswego-or/, /bathrooms/portland-or/, /bathrooms/vancouver-wa/, /contact/, /exterior-remodeling/camas-wa/, /exterior-remodeling/, /exterior-remodeling/lake-oswego-or/, /exterior-remodeling/portland-or/, /exterior-remodeling/vancouver-wa/, /full-home/camas-wa/, /full-home/, /full-home/lake-oswego-or/, /full-home/portland-or/, /full-home/vancouver-wa/, /home-additions/camas-wa/, /home-additions/, /home-additions/lake-oswego-or/, /home-additions/portland-or/, /home-additions/vancouver-wa/, /interiors/camas-wa/, /interiors/, /interiors/lake-oswego-or/, /interiors/portland-or/, /interiors/vancouver-wa/, /kitchens/camas-wa/, /kitchens/, /kitchens/lake-oswego-or/, /kitchens/portland-or/, /kitchens/vancouver-wa/, /locations/, /services/, /shower-remodeling/camas-wa/, /shower-remodeling/, /shower-remodeling/lake-oswego-or/, /shower-remodeling/portland-or/, /shower-remodeling/vancouver-wa/ */

  /* Anchor links land below the fixed nav (~89px) instead of under it */
  html { scroll-padding-top: 96px; }
  /* NB: do NOT put overflow-x on html/body here — it turns the root into a
     scroll container and breaks the Process section's position:sticky cards.
     Horizontal overflow is already prevented by the per-element fixes below. */

  /* ---- Process steps: stack vertically so they DON'T scroll sideways ---- */
  @media (max-width: 768px) {
    .proc-scroll-wrap { overflow-x: hidden !important; cursor: default !important; }
    .proc-scroll {
      display: flex !important;
      flex-direction: column;
      width: auto !important;
      scroll-snap-type: none;
    }
    .proc-col {
      width: auto !important;
      min-width: 0 !important;
      max-width: none !important;
      min-height: 0 !important;
      scroll-snap-align: none;
      border-left: none !important;
      border-bottom: 1px solid rgba(0,0,0,0.1);
      padding: 32px 24px 0 !important;
    }
    .proc-col:last-child { border-bottom: none; }
    /* hide the "swipe" hint since there's nothing to swipe anymore */
    .proc-scroll-cta { display: none !important; }
  }

  /* ---- Narrow-phone overflow fixes (iPhone SE / Mini / small Androids) ---- */
  @media (max-width: 480px) {
    /* Hero stats: lock to a 3-col grid that can shrink (no sideways scroll) */
    .hero-stats-strip .hero-stats-row {
      display: grid !important;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px !important;
      width: 100%;
      flex-wrap: unset;
    }
    .hero-stats-strip .hero-stat-item { min-width: 0; text-align: center; }

    /* Blog CTA button: let it wrap and fill the column instead of overflowing */
    .ba-cta .btn {
      width: 100%;
      max-width: 100%;
      white-space: normal;
      padding-left: 20px;
      padding-right: 20px;
      box-sizing: border-box;
    }

    /* Contact panel: allow the grid column to shrink below content width */
    .contact-form-panel { min-width: 0; }
    .contact-split { min-width: 0; }
  }

  @media (max-width: 360px) {
    .hero-stats-strip .hero-stat-num { font-size: 1.5rem; }
    .hero-stats-strip .hero-stat-lbl { font-size: 10px;}
    .hero-stats-strip { padding: 14px 16px; }
  }

  /* Blog: horizontal swipe carousel on phones. Cards sit side-by-side in a
     scroll-snap row that bleeds to the screen edges; the next card peeks. */
  @media (max-width: 560px) {
    .blog-grid {
      display: flex !important;
      grid-template-columns: none !important;
      flex-wrap: nowrap !important;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      gap: 16px;
      /* bleed past the container's 24px gutter to the screen edges */
      margin-left: -24px !important;
      margin-right: -24px !important;
      padding: 4px 24px 8px !important;
      scroll-padding-left: 24px;
      scrollbar-width: none;
    }
    .blog-grid::-webkit-scrollbar { display: none; }
    .blog-card {
      flex: 0 0 82%;
      scroll-snap-align: start;
      min-width: 0;
      padding-left: 0 !important;
      padding-right: 0 !important;
      border-bottom: none !important;   /* drop the stacked-view divider */
    }
  }

  /* Trust section (stacked): order becomes title (quote) -> photo -> stats.
     display:contents dissolves .trust-left so the quote and stats can be
     ordered independently around the photo. Desktop keeps two columns. */
  @media (max-width: 860px) {
    .trust-left { display: contents; }
    .trust-quote { order: 1; padding: 56px 24px 32px; margin: 0; }
    .trust-right { order: 2; }
    .trust-stats { order: 3; padding: 32px 24px 20px; }
    #reviews { padding-top: 20px !important; }
  }

  /* Reviews on phones: simpler, cleaner. Full-width card, and the prev/next
     arrows move to a centered row BELOW the card instead of floating over its
     edges. (Site keeps its sharp-edged look.) */
  @media (max-width: 600px) {
    .reviews-carousel-wrap { padding: 0 !important; text-align: center; }
    .reviews-carousel-wrap > .reviews-nav {
      position: static !important;
      transform: none !important;
      top: auto !important; left: auto !important; right: auto !important;
      display: inline-flex !important;
      margin: 20px 7px 0 !important;
      box-shadow: 0 2px 10px rgba(15,15,15,0.10) !important;
    }
    .review-card {
      text-align: left;
      border: 1px solid rgba(15,15,15,0.08);
      padding: 22px 20px 20px !important;
    }
  }

  /* Shorter, more compact footer on phones: brand spans the top, the two
     link/contact columns sit side-by-side (equal width), spacing tightened. */
  @media (max-width: 560px) {
    footer { padding: 40px 0 24px !important; }
    .footer-grid {
      grid-template-columns: 1fr 1fr !important;
      gap: 24px 16px !important;
      padding-bottom: 28px !important;
    }
    .footer-grid > * { min-width: 0; }     /* equal columns, no content blow-out */
    .footer-brand { grid-column: 1 / -1; }
    .footer-logo-img { height: 50px !important; }
    .footer-members { margin-bottom: 16px !important; }
    .footer-members-logos { gap: 14px !important; }
    .footer-license-line { margin-bottom: 0 !important; }
    .footer-cities { margin-top: 16px !important; padding-top: 16px !important; }
    .footer-links a { font-size: 12.5px !important; }
    /* let the long email wrap (prefers the <wbr> after @) instead of forcing its column wide */
    .footer-contact-item, .footer-contact-item a { overflow-wrap: break-word; }
  }