/* ==========================================================================
   SKIIN - SINGLE SERVICE template  (service-page/service.css)
   Loaded on service pages AFTER service-category.css (intro photo height,
   checklist column variants and the "lift" card hover come from there).
   Banner, split, photo, checklist, accordion, cards, disclaimer and booking
   form are GLOBAL. This file adds only:
     1 photo marker | 2 intro card | 3 check list | 4 media block | 5 info cards | 6 related | 7 FAQ
   ========================================================================== */

/* ---------- 1. photo: small red "*" above it (live disclaimer marker) ---------- */
.sk-svc .sk-photo { position: relative; overflow: visible; }            /* let the marker sit outside the photo */
.sk-svc .sk-photo img { border-radius: 20px; }                           /* radius moves to the img (overflow is visible now) */
.sk-svc .sk-photo::before {
  content: "*"; position: absolute; left: 0; top: -20px;
  font-size: 14px; font-weight: 700; line-height: 1; color: var(--color-notice-red);
}

/* ---------- 2. intro without photo: centred cream card (Cosmecutical) ---------- */
.sk-svc-intro--card .sk-svc-intro__card {
  max-width: 1100px; margin: 0 auto; padding: clamp(28px, 4vw, 56px);
  text-align: center; background: var(--color-bg-cream); border-radius: var(--sk-radius-lg);
}

/* ---------- 3. check list (global .sk-checklist) + long lines + sub-items ---------- */
.sk-svc-list { margin: 18px 0 0; text-align: left; }
.sk-svc-list li { align-items: flex-start; line-height: 1.5; }          /* long items: icon stays on the first line */
.sk-svc-list li svg { margin-top: 3px; }
.sk-svc-list__sub { display: grid; gap: 8px; margin: 8px 0 0; padding: 0 0 0 4px; list-style: none; }
.sk-svc-list__sub li { display: flex; gap: 10px; }
.sk-svc-list__body { min-width: 0; }
.sk-svc-intro__text .sk-btns, .sk-svc-media__text .sk-btns { margin-top: 26px; }

/* ---------- 4. media block (photo | text) e.g. Tattoo Removal "Aftercare:" ---------- */
.sk-svc-media { padding-top: 0; }
.sk-svc-media .sk-photo { min-height: clamp(280px, 26vw, 460px); }
.sk-svc-media .sk-title { margin-bottom: 12px; }

/* ---------- 5. info cards (live .care-card) ---------- */
.sk-svc-cards { padding-top: 0; }
.sk-svc-cards__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.sk-svc-card { padding: clamp(24px, 3vw, 40px); background: var(--color-bg-cream); border-radius: var(--sk-radius-lg); }
.sk-svc-card--full { grid-column: 1 / -1; }
.sk-svc-card--center { text-align: center; }
.sk-svc-card--lg .sk-title { margin-bottom: 18px; text-align: center; }     /* big headings are always centred on the live site */
.sk-svc-card__title { margin: 0 0 16px; font-size: clamp(18px, 1.4vw, 21px); line-height: 1.35; }
.sk-svc-card__title span { color: var(--color-rose-accent); }               /* {{accent}} part, same as .sk-title */
.sk-svc-card .sk-prose { font-size: 15px; text-align: left; }
.sk-svc-card--center .sk-prose { text-align: center; }
.sk-svc-card .sk-prose p:last-child { margin-bottom: 0; }
.sk-svc-card .sk-svc-list { margin-top: 6px; gap: 12px 28px; }
.sk-svc-card .sk-svc-list li { font-size: 14px; }
.sk-svc-card .sk-btns { margin-top: 26px; }

/* ---------- 6. related services ---------- */
.sk-svc-related { padding-bottom: 0; }

/* ---------- 7. FAQ: title 4 / accordion 8 ---------- */
.sk-svc-faq__grid { grid-template-columns: 4fr 8fr; align-items: start; }
.sk-svc-faq .sk-head p { font-size: 14px; }
.sk-svc-faq .sk-acc__body p:last-child { margin-bottom: 0; }

/* ---------- responsive ---------- */
@media (max-width: 991px) {
  .sk-svc-cards__grid, .sk-svc-faq__grid { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
  .sk-svc-card .sk-svc-list { grid-template-columns: 1fr; }
}