/* ==========================================================================
   ProntaMano — service pages (catalogue, service detail, service cards)
   Pages that include the service card elsewhere (the home page) must load this file too.

   1. Service card
   2. Intro (the page hero lives in main.css)
   3. "What's included" cards
   4. Sub-service sections + "Not included" notice
   5. "Good to know" facts, help band
   ========================================================================== */

:root {
  /* Border of the "Not included" notice (its text uses the shared --pm-accent-ink). */
  --pm-notice-border: #e9b766;
}

/* Smooth jumps to the #sub-service anchors (only when motion is welcome). */
@media (prefers-reduced-motion: no-preference) {
  html:has(.pm-page-service) { scroll-behavior: smooth; }
}

/* 1. Service card ------------------------------------------------------------ */
.pm-service-card { overflow: hidden; }
.pm-service-card__media {
  display: block;
  background: var(--pm-primary-soft);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.pm-service-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.pm-service-card:hover .pm-service-card__media img { transform: scale(1.03); }
.pm-service-card__body { padding: 1.5rem; }
.pm-service-card__title { color: var(--pm-ink); text-decoration: none; }
.pm-service-card__title:hover,
.pm-service-card__title:focus-visible { color: var(--pm-primary); text-decoration: underline; }
.pm-service-card__tagline { font-weight: 600; color: var(--pm-primary-dark); margin-bottom: 0.5rem; }

/* Tick list (sub-services on cards). */
.pm-checklist {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}
.pm-checklist li {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  line-height: 1.4;
}
.pm-checklist__icon { flex-shrink: 0; margin-top: 0.15em; color: var(--pm-primary); }
.pm-checklist a { color: var(--pm-ink); text-decoration: none; }
.pm-checklist a:hover,
.pm-checklist a:focus-visible { color: var(--pm-primary); text-decoration: underline; }

/* 2. Intro (the hero is the shared .pm-page-hero--service of main.css) ---------- */
.pm-service-intro p:last-child { margin-bottom: 0; }
.pm-service-intro p:first-child { font-size: 1.15rem; }

/* 3. "What's included" cards --------------------------------------------------- */
.pm-sub-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.5rem 1.25rem;
  color: var(--pm-ink);
  text-decoration: none;
}
.pm-sub-card:hover,
.pm-sub-card:focus-visible { color: var(--pm-ink); }
.pm-sub-card:focus-visible { outline: 3px solid var(--pm-primary); outline-offset: 3px; }
.pm-sub-card__img {
  width: 7.5rem;
  height: 7.5rem;
  object-fit: contain;
  margin-bottom: 1rem;
}
.pm-sub-card__body { display: flex; flex-direction: column; flex-grow: 1; gap: 0.5rem; }
.pm-sub-card__title { display: block; margin-bottom: 0; }
.pm-sub-card__text { display: block; font-size: 0.95rem; color: var(--pm-muted); }
.pm-sub-card__more {
  margin-top: auto;
  padding-top: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  font-weight: 600;
  color: var(--pm-primary);
}
.pm-sub-card:hover .pm-sub-card__more { text-decoration: underline; }

/* 4. Sub-service sections ------------------------------------------------------ */
.pm-subservices { display: grid; gap: 1.5rem; }
.pm-subservice { padding: clamp(1.5rem, 4vw, 2.5rem); }
/* Highlight the section the visitor jumped to. */
.pm-subservice:target { border-color: var(--pm-primary-light); box-shadow: 0 0 0 4px rgba(var(--pm-primary-rgb), 0.15); }
.pm-subservice__img {
  display: block;
  width: 100%;
  max-width: 16rem;
  height: auto;
  margin-inline: auto;
}
.pm-subservice__text p:last-child { margin-bottom: 0; }
.pm-subservice__cta { margin-top: 1rem; font-weight: 600; }

/* "Not included" notice: amber, with icon and heading — never colour alone. */
.pm-not-included {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  background: var(--pm-accent-soft);
  border: 1px solid var(--pm-notice-border);
  border-left-width: 5px;
  border-radius: var(--pm-radius-sm);
  color: var(--pm-ink);
}
.pm-not-included__icon { flex-shrink: 0; color: var(--pm-accent-ink); margin-top: 0.1rem; }
.pm-not-included__title {
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pm-accent-ink);
  margin-bottom: 0.35rem;
}
.pm-not-included__text { font-size: 0.95rem; }
.pm-not-included__text p:last-child { margin-bottom: 0; }

/* 5. Facts, help band ---------------------------------------------------------- */
.pm-fact {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  height: 100%;
  padding: 1.25rem 1.5rem;
  background: var(--pm-white);
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius);
}
.pm-fact__title { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.35rem; }

.pm-help-band { padding: clamp(1.5rem, 4vw, 2.5rem); }
.pm-services-empty { max-width: 36rem; }