/* ==========================================================================
   Laundry & Co Pricing — Responsive Stylesheet (Light Theme)
   --------------------------------------------------------------------------
   Loaded after style.css.

   Mobile is the primary target: customers scan a QR code in the shop and read
   this on a phone. Everything below ≤767px is treated as the main experience,
   not a fallback — pricing tables become cards, and a fixed Call / Rate bar
   sits within thumb reach.

   ≤1399px  Large desktop trim
   ≤1199px  Laptop
   ≤991px   Tablet
   ≤767px   Mobile — tables become cards, action bar appears
   ≤575px   Small mobile
   ≤400px   Very small mobile
   Plus: landscape, touch, hover capability, high-DPI, forced colours
   ========================================================================== */


/* ==========================================================================
   ≤1399px — LARGE DESKTOP
   ========================================================================== */

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

  .container,
  .container-lg,
  .container-xl,
  .container-xxl { padding-inline: 20px; }

  .cta-card { padding: 40px; }
  .rate-card { padding: 32px 34px; }
  .price-section { padding-block: 52px; }
}


/* ==========================================================================
   ≤1199px — LAPTOP
   ========================================================================== */

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

  :root { --nav-h: 70px; }

  .hero { padding-block: 46px 36px; }

  .section-icon { width: 52px; height: 52px; font-size: 1.24rem; }

  .price-table thead th { padding: 15px 17px; }
  .price-row > th,
  .price-row > td { padding: 14px 17px; }
  .th-item { width: 38%; }

  .cta-card { padding: 36px; }
  .rate-card { gap: 24px; padding: 30px; }
}


/* ==========================================================================
   ≤991px — TABLET
   ========================================================================== */

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

  :root {
    --nav-h: 66px;
    --toolbar-h: 58px;
  }

  html { scroll-padding-top: calc(var(--nav-h) + var(--toolbar-h) + 16px); }

  .site-nav { padding-block: 10px; }

  /* ---- Hero ----------------------------------------------------------- */

  .hero { padding-block: 40px 32px; }
  .hero-title { font-size: clamp(2rem, 6.5vw, 3.1rem); }
  .hero-sub { margin-bottom: 26px; }

  .filter-wrap { margin-top: 22px; }

  /* ---- Toolbar -------------------------------------------------------- */

  .toolbar-inner { gap: 11px; }
  .toolbar-search { flex: 0 1 240px; }
  .toolbar-pills .pill--sm { padding: 7px 12px; font-size: .8rem; }

  /* ---- Sections ------------------------------------------------------- */

  .price-section { padding-block: 46px; }

  .section-head { gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
  .section-icon { width: 48px; height: 48px; font-size: 1.14rem; }
  .section-blurb { font-size: .88rem; }
  .section-badge { order: 3; }

  /* ---- Tables (still tabular here) ------------------------------------ */

  .price-table thead th { padding: 13px 15px; font-size: .7rem; letter-spacing: .1em; }
  .price-row > th,
  .price-row > td { padding: 13px 15px; }

  .item-ico { width: 33px; height: 33px; font-size: .84rem; }
  .item-name { font-size: .92rem; }
  .price { font-size: 1rem; }

  /* ---- Card grids ----------------------------------------------------- */

  .cta-grid { grid-template-columns: 1fr; gap: 26px; }

  .ss-block { margin-bottom: 26px; }
  .why-block { margin-top: 32px; }
  .why-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* ---- Rate us -------------------------------------------------------- */

  .rate-card { padding: 42px 26px; }
  .rate-stars { font-size: 1.8rem; gap: 9px; }

  /* ---- CTA ------------------------------------------------------------ */

  .cta-card { padding: 30px 24px; }
  .cta-text { max-width: none; margin-bottom: 22px; }
  .contact-section { padding-bottom: 60px; }

}


/* ==========================================================================
   ≤767px — MOBILE  (the primary experience)
   Pricing tables become cards. There is deliberately NO horizontal scroll.
   ========================================================================== */

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

  :root {
    --nav-h: 62px;
    --toolbar-h: 104px;     /* two stacked rows — see .toolbar-inner below */
    --radius: 16px;
    --mobile-bar-h: 74px;   /* reserves space for the fixed action bar */
  }

  /* ---- Sticky toolbar: stacked ---------------------------------------- */

  .toolbar { height: auto; padding-block: 9px; }

  .toolbar-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .toolbar-search { flex: 1 1 auto; width: 100%; }

  /* Comfortable typing target rather than a squeezed 36px box */
  .toolbar-search input { min-height: 44px; font-size: .95rem; }

  .toolbar-pills {
    margin-left: 0;
    padding-block: 0;
    scroll-snap-type: x proximity;
  }

  .toolbar-pills .pill--sm { scroll-snap-align: start; min-height: 38px; }

  .container,
  .container-lg,
  .container-xl,
  .container-xxl { padding-inline: 15px; }

  /* ---- Fixed Call / Rate bar ------------------------------------------ */

  .mobile-bar { display: flex; }

  /* ---- Hero ----------------------------------------------------------- */

  .hero { padding-block: 30px 26px; }

  .hero-eyebrow {
    margin-bottom: 16px;
    padding: 6px 13px;
    font-size: .64rem;
    letter-spacing: .1em;
  }

  .hero-title { font-size: clamp(1.85rem, 8.5vw, 2.5rem); margin-bottom: 12px; }
  .hero-sub { font-size: .93rem; margin-bottom: 22px; }

  .search-input { padding: 15px 50px 15px 48px; font-size: 1rem; }
  .search-ico { left: 19px; font-size: .94rem; }
  .search-clear { right: 12px; width: 32px; height: 32px; }
  .search-status { font-size: .82rem; margin-top: 10px; }

  /* Pills scroll horizontally — a deliberate, self-contained scroller */
  .filter-pills {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: 100%;
    padding: 4px 15px;
    margin-inline: -15px;
  }

  .filter-pills::-webkit-scrollbar { display: none; }

  .pill {
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: 10px 15px;
    font-size: .84rem;
  }

  /* ---- Section headers ------------------------------------------------ */

  .price-section { padding-block: 36px; }

  .section-head { gap: 12px; margin-bottom: 18px; }
  .section-icon { width: 44px; height: 44px; font-size: 1rem; border-radius: 13px; }
  .section-title { font-size: 1.34rem; }
  .section-blurb { font-size: .84rem; }
  .section-badge { padding: 6px 12px; }
  .section-badge-num { font-size: .92rem; }
  .section-badge-lbl { font-size: .64rem; }

  /* ==============================================================
     TABLE → CARD CONVERSION
     Each <tr> becomes a card; each <td> prints its data-label.
     ============================================================== */

  .table-card {
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    border-radius: 0;
  }

  .price-table,
  .price-table tbody,
  .price-table tr,
  .price-table th,
  .price-table td { display: block; width: 100%; }

  /* Column headings are replaced by per-cell data-labels */
  .price-table thead { display: none; }

  .price-table { border-spacing: 0; }

  .price-row {
    margin-bottom: 12px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  }

  .price-row:last-child { margin-bottom: 0; }

  /* Zebra striping is meaningless once rows are separate cards */
  .price-row:nth-child(even) { background: var(--card); }

  .price-row:hover,
  .price-row:active {
    background: var(--card);
    border-color: var(--border-brand);
    box-shadow: var(--glow);
  }

  /* Card title row */
  .price-row > .cell-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 0 13px;
    margin-bottom: 3px;
    border: 0;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
  }

  .price-row > .cell-item::before { display: none; }

  .item-ico { width: 34px; height: 34px; font-size: .86rem; }
  .item-name { font-size: 1rem; font-weight: 700; }

  /* Label ......... value rows */
  .price-row > .cell-price,
  .price-row > .cell-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
    border: 0;
    border-bottom: 1px dashed var(--border);
    text-align: left;
    white-space: normal;
  }

  .price-row > .cell-price:last-child,
  .price-row > .cell-meta:last-child { border-bottom: 0; padding-bottom: 0; }

  /* This is what turns "Wash Only" into a visible label on mobile */
  .price-row > .cell-price::before,
  .price-row > .cell-meta::before {
    content: attr(data-label);
    flex: 0 0 auto;
    color: var(--text-mute);
    font-size: .84rem;
    font-weight: 500;
  }

  /* Dotted leader between label and price — reads like a receipt */
  .price-row > .cell-price::after,
  .price-row > .cell-meta::after {
    content: '';
    order: 1;
    flex: 1 1 auto;
    height: 0;
    margin-inline: 4px;
    border-bottom: 1px dotted rgba(4, 41, 64, .22);
    transform: translateY(-4px);
  }

  .price-row > .cell-price > .price,
  .price-row > .cell-price > .price-unit,
  .price-row > .cell-price > .price-na { order: 2; flex: 0 0 auto; }

  /* The meta cell has no wrapping span — push its text past the leader */
  .price-row > .cell-meta { text-align: right; }

  .price { font-size: 1.08rem; }

  /* ---- Self-service --------------------------------------------------- */

  .ss-block-title { margin-bottom: 10px; }

  /* Four supporting points stack rather than squeeze */
  .why-list { grid-template-columns: 1fr; gap: 16px; padding-top: 18px; }

  /* ---- Terms ---------------------------------------------------------- */

  /* Two columns of fine print do not fit a phone — stack them */
  .terms-list { columns: 1; }
  .term { padding: 14px 0 14px 34px; }

  /* ---- Note / no-results ---------------------------------------------- */

  .price-note { padding: 15px 16px; gap: 11px; }
  .price-note p { font-size: .84rem; }

  .no-results { padding: 46px 18px; }
  .no-results-ico { width: 60px; height: 60px; font-size: 1.36rem; margin-bottom: 17px; }
  .no-results-title { font-size: 1.22rem; }
  .no-results-text { font-size: .88rem; margin-bottom: 20px; }

  /* ---- Rate us -------------------------------------------------------- */

  .rate-section { padding-block: 16px 38px; }
  .rate-card { padding: 34px 18px; border-radius: var(--radius); }

  .rate-badge { margin-bottom: 18px; padding: 7px 14px; font-size: .68rem; }
  .rate-stars { font-size: 1.7rem; gap: 8px; margin-bottom: 18px; }
  .rate-title { font-size: 1.34rem; margin-bottom: 10px; }
  .rate-text { font-size: .92rem; margin-bottom: 22px; }

  .rate-actions { flex-direction: column; align-items: stretch; width: 100%; }
  .btn-google { justify-content: center; width: 100%; padding: 15px 20px; }

  /* Chips stack rather than wrap awkwardly mid-phrase */
  .rate-meta { flex-direction: column; align-items: center; gap: 9px; margin-top: 20px; }
  .rate-meta li { font-size: .82rem; }

  /* ---- CTA ------------------------------------------------------------ */

  .cta-card { padding: 24px 20px; border-radius: var(--radius); }
  .cta-title { font-size: 1.5rem; }
  .cta-text { font-size: .91rem; }

  .cta-actions { flex-direction: column; align-items: stretch; }

  .btn-primary-glow,
  .btn-ghost { justify-content: center; width: 100%; padding: 14px 20px; }

  .contact-list li { padding: 13px 14px; gap: 12px; }
  .contact-ico { width: 38px; height: 38px; font-size: .88rem; }
  .contact-val { font-size: .89rem; }
  .contact-list li:hover { transform: none; }

  /* ---- Back to top ---------------------------------------------------- */

  .back-to-top {
    right: 14px;
    bottom: calc(14px + var(--mobile-bar-h));
    width: 44px;
    height: 44px;
    font-size: .9rem;
  }
}


/* ==========================================================================
   ≤575px — SMALL MOBILE
   ========================================================================== */

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

  .hero { padding-block: 24px 22px; }
  .hero-title { font-size: 1.8rem; }
  .hero-sub { font-size: .9rem; }


  .price-section { padding-block: 30px; }

  .section-head { gap: 11px; }
  .section-icon { width: 40px; height: 40px; font-size: .94rem; }
  .section-title { font-size: 1.2rem; }

  .price-row { padding: 15px; }
  .item-name { font-size: .95rem; }
  .price { font-size: 1.04rem; }
  .price-row > .cell-price,
  .price-row > .cell-meta { padding: 9px 0; }
  .price-row > .cell-price::before,
  .price-row > .cell-meta::before { font-size: .81rem; }

  .cta-card { padding: 20px 16px; }
  .cta-title { font-size: 1.34rem; }
  .rate-card { padding: 22px 16px; }

  .toolbar-search input { font-size: .85rem; padding: 9px 13px 9px 36px; }
  .toolbar-search .ico { left: 13px; }

  .mobile-bar a { font-size: .85rem; padding: 11px 8px; gap: 7px; }
}


/* ==========================================================================
   ≤400px — VERY SMALL MOBILE
   ========================================================================== */

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

  .container,
  .container-lg,
  .container-xl,
  .container-xxl { padding-inline: 12px; }

  .hero-title { font-size: 1.62rem; }
  .hero-eyebrow { font-size: .6rem; padding: 5px 11px; }

  .search-input { padding: 14px 44px 14px 42px; font-size: .94rem; }
  .search-ico { left: 16px; font-size: .86rem; }

  .brand-logo { height: 30px; }

  .price-row { padding: 13px; }
  .item-ico { width: 30px; height: 30px; font-size: .8rem; }
  .item-name { font-size: .9rem; }

  /* The dotted leader has no room to breathe this narrow */
  .price-row > .cell-price::after,
  .price-row > .cell-meta::after { display: none; }
  .price-row > .cell-price,
  .price-row > .cell-meta { gap: 8px; }

  .section-title { font-size: 1.1rem; }
  .section-badge { display: none; }


  .mobile-bar { gap: 7px; padding-inline: 9px; }
  .mobile-bar a { font-size: .78rem; gap: 6px; }
}


/* ==========================================================================
   ≤340px — TINY SCREENS (Galaxy Fold, legacy 320px handsets)
   ========================================================================== */

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

  /* Three labels genuinely will not fit here; the icons carry the meaning and
     every link keeps an aria-label for screen readers. */
  .mobile-bar a span { display: none; }

  .mobile-bar a {
    gap: 0;
    padding-inline: 6px;
  }

  .mobile-bar a .ico,
  .mobile-bar a .g-mark { font-size: 1.2rem; width: 21px; height: 21px; }
}


/* ==========================================================================
   LANDSCAPE PHONES — reclaim vertical space
   ========================================================================== */

@media screen and (max-width: 991.98px) and (orientation: landscape) and (max-height: 520px) {

  .hero { padding-block: 22px 18px; }
  .hero-title { font-size: 1.7rem; margin-bottom: 8px; }
  .hero-sub { margin-bottom: 16px; font-size: .88rem; }
  .hero-eyebrow { margin-bottom: 12px; }

  /* The action bar eats too much of a short viewport */
  .mobile-bar { display: none; }
  :root { --mobile-bar-h: 0px; }
}


/* ==========================================================================
   TOUCH DEVICES — no hover, bigger targets
   ========================================================================== */

@media screen and (hover: none) {

  /* Hover transforms stick on tap and look broken; drop them */
  .price-row:hover,
  .contact-list li:hover,
  .pill:hover,
  .btn-primary-glow:hover,
  .btn-ghost:hover,
  .btn-google:hover,
  .back-to-top:hover { transform: none; }

  .section-head:hover .section-icon { transform: none; }

  /* WCAG 2.5.5-friendly tap targets (44×44 minimum) */
  .pill { min-height: 44px; }
  .search-clear { min-width: 44px; min-height: 44px; }
  .back-to-top { width: 48px; height: 48px; }

  .btn-google,
  .btn-primary-glow,
  .btn-ghost { min-height: 48px; }

  /* The logo is the only header control left */
  .brand { min-height: 44px; }
}


/* ==========================================================================
   FINE POINTERS — richer hover affordances
   ========================================================================== */

@media screen and (hover: hover) and (pointer: fine) {

  .contact-val:hover { text-decoration: underline; }
}


/* ==========================================================================
   HIGH-DPI — hairlines get too heavy when doubled
   ========================================================================== */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {

  .aurora-grid {
    background-image:
      linear-gradient(to right, rgba(4, 41, 64, .028) .5px, transparent .5px),
      linear-gradient(to bottom, rgba(4, 41, 64, .028) .5px, transparent .5px);
  }
}


/* ==========================================================================
   WIDE SCREENS — let the layout breathe past the container cap
   ========================================================================== */

@media screen and (min-width: 1600px) {

  .hero { padding-block: 84px 60px; }
  .price-section { padding-block: 72px; }

  .price-table thead th { padding: 19px 26px; }
  .price-row > th,
  .price-row > td { padding: 18px 26px; }

  .item-name { font-size: 1rem; }
  .price { font-size: 1.08rem; }
  .cta-card { padding: 54px; }
}


/* ==========================================================================
   FORCED COLORS / HIGH CONTRAST
   ========================================================================== */

@media (forced-colors: active) {

  .pill,
  .price-row,
  .table-card,
  .rate-card,
  .search-input,
  .mobile-bar a { border: 1px solid CanvasText; }

  .pill.is-active { forced-color-adjust: none; background: Highlight; color: HighlightText; }

  .aurora { display: none; }

  mark.hl { background: Highlight; color: HighlightText; }
}