/* ============================================================
   HOME PAGE (desktop / tablet) - mobile-style cards
   Layout stays the normal wide desktop layout. Only the LOOK of
   two blocks is taken from the phone version:
     1) Category tiles: photo fills the tile, name sits on the photo
     2) Popular services: photo on the left, details + price/buttons
   Phones (< 768px) already have this and are not touched.
   ============================================================ */
@media (min-width: 768px) {

/* ---------- 1. Category tiles ---------- */
  #categories .cat-card {
    position: relative;
    border: 0;
    border-radius: 22px;
    background: #0f172a;
    box-shadow: 0 10px 22px -8px rgba(15,23,42,.35);
    isolation: isolate;
  }

  #categories .cat-card .cat-img-box,
  #categories .cat-card .cat-icon { aspect-ratio: 4 / 5; border-radius: 0; }
  #categories .cat-card .cat-img-box img { object-fit: cover; }

  /* dark fade at the bottom so the name is always readable */
  #categories .cat-card::before {
    content: "";
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(to top, rgba(6,11,17,.88) 0%, rgba(6,11,17,.35) 38%, rgba(6,11,17,0) 62%);
    pointer-events: none;
  }
  /* name sits on the photo */
  #categories .cat-card .cat-name {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    padding: 0 .85rem .8rem;
    text-align: left;
    color: #fff;
    font-size: .88rem;
    font-weight: 800;
    line-height: 1.25;
    text-shadow: 0 1px 6px rgba(0,0,0,.45);
  }
  /* small arrow badge, top-right */
  #categories .cat-card::after {
    content: "\2197";
    position: absolute; top: 10px; right: 10px; z-index: 2;
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.92);
    color: #0d9488;
    font-size: 1rem; font-weight: 800;
    box-shadow: 0 4px 10px rgba(0,0,0,.2);
  }

#categories .cat-card { transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s; }
#categories a:hover .cat-card {
  transform: translateY(-6px);
  box-shadow: 0 22px 40px -12px rgba(15,23,42,.5);
}
#categories .cat-card .cat-name { font-size: .95rem; padding: 0 1rem .95rem; }
#categories .cat-card::after { top: 12px; right: 12px; transition: transform .3s, background .3s, color .3s; }
#categories a:hover .cat-card::after { background: #0d9488; color: #fff; transform: rotate(45deg); }

/* ---------- 2. Popular services cards ---------- */
#popular-services .row { --bs-gutter-x: 1.25rem; --bs-gutter-y: 1.25rem; }
  /* 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-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); }

#popular-services .service-card { transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s, border-color .3s; }
#popular-services .service-card:hover {
  transform: translateY(-4px);
  border-color: #8fdcd1;
  box-shadow: 0 2px 6px rgba(11,31,36,.05), 0 22px 44px -14px rgba(13,148,136,.28);
}

}

@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
  #categories .cat-card, #popular-services .service-card { transition: none; }
  #categories a:hover .cat-card, #popular-services .service-card:hover { transform: none; }
}