/* ==========================================================================
   SKIIN - SERVICE CATEGORY template  (service-category-page/service-category.css)
   One stylesheet for every parent service (Skin Treatments, Skin Conditions,
   Body Sculpting, Cosmetic Treatments ...). Banner, split + photo, checklist,
   card grid, CTA banner, disclaimer and booking form are GLOBAL; this file adds
   only what the category layouts need on top:
     1 intro | 2 checklist columns | 3 highlight band | 4 how-it-works | 5 dark hover cards
   ========================================================================== */

/* ---------- 1. intro (text left, photo right) ---------- */
.sk-svc-intro .sk-photo { min-height: clamp(320px, 32vw, 600px); }   /* photo as tall as the text column, like the live page */
.sk-svc-intro .sk-prose { font-size: 15px; }
.sk-svc-intro .sk-checklist { margin-top: 18px; }

/* ---------- 2. checklist column variants (global .sk-checklist = 2 columns) ---------- */
.sk-checklist--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sk-checklist--1 { grid-template-columns: 1fr; gap: 8px; }

/* ---------- 3. highlight band: dark section, white cards centred ---------- */
.sk-svc-hl { padding: clamp(48px, 6vw, 96px) 0; background: var(--sk-dark); }
.sk-svc-hl__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.sk-svc-hl__card {
  flex: 0 1 528px;                       /* two cards side by side, centred (matches the live width) */
  padding: clamp(24px, 3vw, 36px);
  background: var(--color-white);
  border-radius: var(--sk-radius);
}
.sk-svc-hl__card h3 { margin: 0 0 14px; font-size: clamp(20px, 1.6vw, 24px); line-height: 1.3; }
.sk-svc-hl__card h3 span { color: var(--color-rose-accent); }   /* {{accent}} part, same as .sk-title */
.sk-svc-hl__card p { font-size: 15px; }
.sk-svc-hl__card .sk-checklist { margin: 4px 0 0; }

/* ---------- 4. how it works: two cream cards ---------- */
.sk-svc-how__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.sk-svc-how__card { padding: clamp(24px, 3vw, 40px); background: var(--color-bg-cream); border-radius: var(--sk-radius-lg); }
.sk-svc-how__card--text { display: flex; flex-direction: column; justify-content: center; text-align: center; }
.sk-svc-how__card--text .sk-prose { font-size: 15px; }
.sk-svc-how__card--media { display: flex; align-items: center; justify-content: center; }
.sk-svc-how__card--media img { width: 100%; height: auto; border-radius: var(--sk-radius); }

/* ---------- 5. service grid: dark "lift" hover card (live Skin Treatments / Skin Conditions) ---------- */
.sk-svc-grid { padding-top: clamp(48px, 5vw, 80px); }
.sk-cards--lift .sk-card {
  padding-bottom: 18px;                  /* reserve the dark area so nothing jumps on hover */
  border-radius: 20px;
  transition: background .3s ease, box-shadow .3s ease, transform .3s ease;
}
.sk-cards--lift .sk-card__img { border-radius: 20px; margin-bottom: 16px; }
.sk-cards--lift .sk-card h3,
.sk-cards--lift .sk-card p { padding: 0 14px; transition: color .3s ease; }
.sk-cards--lift .sk-card:hover,
.sk-cards--lift .sk-card:focus-within {
  background: var(--sk-dark);
  box-shadow: 0 18px 36px rgba(35, 31, 32, .18);
  transform: translateY(-4px);
}
.sk-cards--lift .sk-card:hover .sk-card__img,
.sk-cards--lift .sk-card:focus-within .sk-card__img { border-radius: 20px 20px 0 0; }
.sk-page .sk-cards--lift .sk-card:hover h3 a,
.sk-page .sk-cards--lift .sk-card:focus-within h3 a { color: var(--color-white); }
.sk-cards--lift .sk-card:hover p,
.sk-cards--lift .sk-card:focus-within p { color: rgba(255, 255, 255, .9); }   /* red "*" keeps its colour */
/* "+" : keep the global white circle, drop the rose tint over the photo, rose plus sign */
.sk-cards--lift .sk-card__icon { background: transparent; }
.sk-cards--lift .sk-card__icon::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CE9B9B' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}

/* ======================= RESPONSIVE ======================= */
@media (max-width: 991px) {
  .sk-svc-how__grid { grid-template-columns: 1fr; }
  .sk-checklist--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
  .sk-checklist--3 { grid-template-columns: 1fr; }
}
@media (hover: none) {
  /* touch screens: no "stuck" dark card after a tap */
  .sk-cards--lift .sk-card:hover { background: none; box-shadow: none; transform: none; }
  .sk-cards--lift .sk-card:hover .sk-card__img { border-radius: 20px; }
  .sk-page .sk-cards--lift .sk-card:hover h3 a { color: var(--sk-dark); }
  .sk-cards--lift .sk-card:hover p { color: var(--color-body); }
}
@media (prefers-reduced-motion: reduce) {
  .sk-cards--lift .sk-card { transition: none; }
  .sk-cards--lift .sk-card:hover { transform: none; }
}