/* ==========================================================================
   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. "How it works" steps
   6. "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. "How it works" steps -------------------------------------------------------
   Not main.css's .pm-timeline (a card grid with fixed column counts). Vertical below 992px, one row above;
   each step but the last draws the connector to the next marker, so any number of steps fits. */
.pm-service-steps {
  --pm-marker: 3.5rem;
  --pm-steps-gap: 2rem;
  display: grid;
  gap: var(--pm-steps-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pm-service-steps__step {
  position: relative;
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}
.pm-service-steps__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--pm-marker) / 2);
  left: calc(var(--pm-marker) / 2 - 1px);
  height: calc(100% + var(--pm-steps-gap));
  border-left: 2px dashed var(--pm-primary-light);
}
.pm-service-steps__marker {
  position: relative;
  z-index: 1; /* above the connectors */
  flex: 0 0 var(--pm-marker);
  width: var(--pm-marker);
  height: var(--pm-marker);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--pm-primary);
  color: var(--pm-white);
  box-shadow: 0 0 0 6px var(--pm-white), var(--pm-shadow-sm);
}
.pm-service-steps__number {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pm-primary);
  margin-bottom: 0.25rem;
}

@media (min-width: 992px) {
  .pm-service-steps {
    --pm-steps-gap: 1.5rem;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }
  .pm-service-steps__step {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  /* From the centre of this marker to the centre of the next one. */
  .pm-service-steps__step:not(:last-child)::after {
    top: calc(var(--pm-marker) / 2 - 1px);
    left: 50%;
    width: calc(100% + var(--pm-steps-gap));
    height: 0;
    border-left: 0;
    border-top: 2px dashed var(--pm-primary-light);
  }
}

/* 6. 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; }