/* ============================================================
   Home page – mobile premium polish (phones only, < 768px)
   1) Promo codes become a swipeable slider
   2) "Looking for Best Residential & Commercial..." heading block
   Desktop / tablet are NOT affected.
   ============================================================ */

/* dots are mobile only */
.promo-dots { display: none; }

@media (max-width: 767.98px) {

  /* ───────────── 1. PROMO SLIDER ───────────── */
  .promo-banner-section { padding: .9rem 0 .35rem !important; }
  .promo-banner-section > .container { padding-left: 0; padding-right: 0; }

  .promo-slider { position: relative; }
  .promo-track {
    display: flex;
    gap: .75rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 16px 14px;              /* room for shadow + peek of next card */
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .promo-track::-webkit-scrollbar { display: none; }

  .promo-track > .promo-card {
    flex: 0 0 100%;
    min-width: 0;
    margin-bottom: 0 !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    animation: none;                     /* entrance animation fights with snap */
  }
  .promo-slider.is-multi .promo-track > .promo-card { flex-basis: 88%; }

  /* equal-height cards, button row pinned to the bottom */
  .promo-track > .promo-card > .row { height: 100%; align-content: space-between; }

  .promo-slider.is-multi .promo-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: -2px;
  }
  .promo-dot {
    width: 6px; height: 6px;
    padding: 0; border: 0; border-radius: 99px;
    background: #c3d3d0;
    transition: width .3s ease, background-color .3s ease;
    cursor: pointer;
  }
  .promo-dot.is-active { width: 20px; background: var(--primary, #0d9488); }


  /* ───────────── 2. PREMIUM HEADING BLOCK ───────────── */
  #categories { padding-top: 1.75rem !important; }

  #categories .cat-head {
    position: relative;
    text-align: left !important;
    margin-bottom: 1.4rem !important;
    padding: 1.35rem 1.25rem 1.3rem;
    border-radius: 24px;
    background:
      radial-gradient(120% 90% at 100% 0%, rgba(13,148,136,.10) 0%, rgba(13,148,136,0) 60%),
      linear-gradient(180deg, #ffffff 0%, #f3faf8 100%);
    border: 1px solid #dcebe8;
    box-shadow: 0 1px 2px rgba(11,31,36,.04), 0 14px 32px -14px rgba(11,31,36,.14);
    overflow: hidden;
  }

  /* gold → teal rule on top */
  #categories .cat-head::before {
    content: "";
    display: block;
    width: 44px; height: 4px;
    border-radius: 99px;
    margin-bottom: .95rem;
    background: linear-gradient(90deg, #f5b301 0%, #0d9488 100%);
  }
  /* soft ring ornament, bottom-right */
  #categories .cat-head::after {
    content: "";
    position: absolute;
    right: -38px; bottom: -46px;
    width: 130px; height: 130px;
    border-radius: 50%;
    border: 1.5px solid rgba(13,148,136,.16);
    box-shadow: 0 0 0 16px rgba(13,148,136,.05), 0 0 0 34px rgba(13,148,136,.03);
    pointer-events: none;
  }

  #categories .cat-head .section-title {
    position: relative; z-index: 1;
    margin: 0 0 .6rem;
    font-size: 1.62rem;
    line-height: 1.16;
    letter-spacing: -.035em;
    font-weight: 800;
    color: var(--ink, #0b1f24);
  }
  #categories .cat-head-lead {
    display: block;
    font-size: .98rem;
    font-weight: 600;
    letter-spacing: -.005em;
    color: #5b7078;
    margin-bottom: .2rem;
  }
  #categories .cat-head-main { display: inline; }
  #categories .cat-head-city {
    display: inline;
    background: linear-gradient(90deg, #0d9488 0%, #0f766e 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
  }

  #categories .cat-head .section-subtitle {
    position: relative; z-index: 1;
    margin: 0;
    max-width: 34ch;
    padding-left: .8rem;
    border-left: 2px solid #f5b301;
    font-size: .86rem;
    line-height: 1.55;
    color: #4a626b;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .promo-dot { transition: none; }
}


/* ============================================================
   Popular Services – mobile card (phones only, < 768px)
   Photo + details on top, price & buttons in a neat footer row.
   ============================================================ */
.svc-from { font: inherit; }

@media (max-width: 767.98px) {
  #popular-services { padding-top: 1.75rem !important; padding-bottom: 1.75rem !important; }
  #popular-services .pop-head { margin-bottom: 1rem !important; }
  #popular-services .pop-head .section-title { font-size: 1.4rem; letter-spacing: -.03em; }
  #popular-services .pop-head p { font-size: .84rem; color: #5b7078 !important; }
  #popular-services .row { --bs-gutter-y: .8rem; --bs-gutter-x: 0; }

  /* the card: 2-column grid  [photo | text]  + full-width footer */
  #popular-services .service-card {
    display: grid !important;
    grid-template-columns: 84px minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 0;
    align-items: start;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid #e3ecea;
    background: #fff;
    box-shadow: 0 1px 2px rgba(11,31,36,.04), 0 10px 26px -14px rgba(11,31,36,.18);
  }
  #popular-services .service-card:hover { transform: none; }

  #popular-services .service-card-img {
    grid-column: 1; grid-row: 1 / span 3;
    width: 84px !important; height: 84px !important;
    margin: 0 !important;
    border-radius: 14px;
    background: #eef5f4;
    border: 0;
  }
  #popular-services .service-card-img img { padding: 0; object-fit: cover; }

  /* body wrapper disappears so its children can sit in the grid */
  #popular-services .service-card-body { display: contents; }

  #popular-services .svc-meta {
    grid-column: 2; grid-row: 1;
    margin: 0 0 .3rem !important;
    gap: .5rem;
    align-items: center !important;
    min-width: 0;
  }
  #popular-services .svc-meta .badge {
    min-width: 0; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: .66rem !important;
    padding: .28rem .6rem;
  }
  #popular-services .svc-meta .service-duration {
    flex: 0 0 auto; font-size: .72rem; font-weight: 600; color: #6b7f86;
  }

  #popular-services .service-card-body h5 {
    grid-column: 2; grid-row: 2;
    margin: 0 0 .25rem !important;
    font-size: .98rem !important;
    line-height: 1.25;
    letter-spacing: -.02em;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  #popular-services .service-card-body p {
    grid-column: 2; grid-row: 3;
    margin: 0 !important;
    font-size: .76rem !important;
    line-height: 1.45;
    color: #5b7078 !important;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }

  /* footer: price left, buttons right */
  #popular-services .svc-foot {
    grid-column: 1 / -1; grid-row: 4;
    flex-wrap: nowrap !important;
    margin-top: 12px !important;
    padding-top: 12px;
    border-top: 1px dashed #d6e4e1;
    gap: .6rem !important;
  }
  #popular-services .svc-foot .service-price {
    display: flex; flex-direction: column;
    font-size: 1.12rem !important;
    line-height: 1.1;
    letter-spacing: -.02em;
    white-space: nowrap;
  }
  #popular-services .svc-from {
    font-size: .68rem; font-weight: 600; letter-spacing: 0;
    color: #6b7f86; margin-bottom: 2px;
  }
  #popular-services .svc-actions { gap: .5rem !important; flex: 0 0 auto; }
  #popular-services .atc-btn,
  #popular-services .svc-actions .btn-primary-gradient {
    height: 40px;
    padding: 0 1rem !important;
    font-size: .82rem !important;
    justify-content: center;
    box-shadow: none;
  }
  #popular-services .atc-btn { border-width: 1.5px; padding: 0 .85rem !important; }
  #popular-services .svc-actions .btn-primary-gradient { box-shadow: 0 8px 18px -8px rgba(13,148,136,.55); }
}