/**
 * Template #1 -- Individual Service page (single-prss_service.php) styling.
 *
 * Loaded only on is_singular('prss_service'). Uses the existing design
 * tokens from template-tokens.css and mirrors the services-archive/homepage
 * scale, spacing and link-color conventions (Astra's unconfigured global
 * link color needs the same scoped !important overrides used elsewhere).
 */

.prss-service-single-section {
  padding-block: clamp(40px, 5vw, 72px);
}

.prss-service-single-inner {
  max-width: 1260px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 56px);
}

.prss-service-single-inner--narrow {
  max-width: 860px;
}

.prss-service-single-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-semibold);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-block-end: 0.9em;
}

.prss-service-single-heading {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display-semibold);
  color: var(--color-text);
  line-height: 1.15;
  margin: 0 0 0.5em 0;
}

.prss-service-single-heading--h1 {
  font-size: clamp(2.1rem, 4.2vw, 3.2rem);
}

.prss-service-single-heading--h2 {
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  margin-block-end: 0.6em;
}

.prss-service-single-heading--h3 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display-medium);
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  color: var(--color-text);
  margin: 0 0 0.55em 0;
}

/* "What to Expect" reads as a secondary editorial heading -- same family as
   the primary H2s (About This Service, Related Services) but visually more
   restrained, since it introduces supporting detail rather than a new major
   section. Semantics stay H2; only the visual weight is reduced. */
.prss-service-single-heading--content {
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  font-weight: var(--font-weight-display-medium);
  margin-block-end: 0.7em;
}

.prss-service-single-body {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-regular);
  color: var(--color-muted);
  font-size: 1.05rem;
  line-height: 1.7;
  margin: 0;
}

/* -----------------------------------------------------------------------
 * Rich text (post content, What to Expect, guidance blocks)
 * --------------------------------------------------------------------- */

.prss-service-single-richtext {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--color-muted);
}

.prss-service-single-richtext p {
  margin: 0 0 1em 0;
}

.prss-service-single-richtext p:last-child {
  margin-block-end: 0;
}

.prss-service-single-richtext ul,
.prss-service-single-richtext ol {
  margin: 0 0 1em 0;
  padding-inline-start: 1.3em;
}

.prss-service-single-richtext--compact {
  font-size: 0.92rem;
  line-height: 1.65;
}

/* -----------------------------------------------------------------------
 * Hero
 * --------------------------------------------------------------------- */

/* Two hero variants (Prompt #10D): --text-only is the original approved
   light editorial hero (untouched); --image turns the Featured Image into a
   full-bleed background with an overlay, content layered on top. */

.prss-service-hero--text-only {
  background: var(--color-background);
  padding-block-end: clamp(28px, 4vw, 56px);
}

.prss-service-hero--text-only .prss-service-hero__grid--no-media {
  max-width: 760px;
}

.prss-service-hero--image {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(500px, 62vw, 700px);
  overflow: hidden;
  padding-block: clamp(40px, 6vw, 64px);
}

.prss-service-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.prss-service-hero__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
}

.prss-service-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(28,25,23,0.78) 0%, rgba(28,25,23,0.55) 32%, rgba(28,25,23,0.18) 62%, rgba(28,25,23,0.05) 100%), linear-gradient(0deg, rgba(28,25,23,0.55) 0%, rgba(28,25,23,0.15) 45%, rgba(28,25,23,0) 75%);
}

.prss-service-hero--image .prss-service-hero__grid {
  position: relative;
  z-index: 1;
  display: block;
}

.prss-service-hero--image .prss-service-hero__content {
  max-width: 640px;
}

.prss-service-hero--image .prss-service-single-eyebrow {
  color: var(--color-accent-soft);
}

.prss-service-hero--image .prss-service-single-heading--h1 {
  color: var(--color-surface);
}

.prss-service-hero--image .prss-service-hero__intro {
  color: rgba(247,243,237,0.92);
}

.prss-service-hero--image .prss-service-hero__price {
  color: var(--color-surface);
}

.prss-service-hero--image .prss-service-hero__duration {
  color: rgba(247,243,237,0.82);
}

.prss-service-hero--image .prss-service-hero__meta-sep {
  color: rgba(247,243,237,0.5);
}

.prss-service-hero--image .prss-service-hero__badge {
  color: var(--color-surface);
  border-color: rgba(247,243,237,0.55);
}

.prss-service-hero__content {
  min-width: 0;
}

.prss-service-hero__badge {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-semibold);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
  border: 1px solid var(--color-accent-soft);
  border-radius: 2px;
  padding: 0.3em 0.7em;
  margin-block: 0.2em 0.9em;
}

.prss-service-hero__intro {
  max-width: 52ch;
  margin-block-start: 0.6em;
}

.prss-service-hero__meta {
  display: flex;
  align-items: baseline;
  gap: 0.75em;
  font-family: var(--font-body);
  font-size: 1rem;
  margin-block: 1.1em;
  flex-wrap: wrap;
}

.prss-service-hero__price {
  font-weight: var(--font-weight-body-semibold);
  color: var(--color-text);
  font-size: 1.1rem;
}

.prss-service-hero__duration {
  color: var(--color-muted);
}

.prss-service-hero__meta-sep {
  color: var(--color-border);
}

/* Prompt #14C: wraps the primary Book action (unchanged styling) alongside
   the optional secondary WhatsApp action. flex-wrap so WhatsApp drops to
   its own line rather than overflowing on narrow screens. Not reserved --
   when WhatsApp is absent (or both are), this wrapper is exactly as tall as
   whatever it contains, so the hero layout is unaffected either way. */
.prss-service-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9em;
  margin-block-start: 0.6em;
}

.prss-service-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-semibold);
  font-size: 0.95rem;
  color: var(--color-surface) !important;
  text-decoration: none !important;
  background: var(--color-accent);
  padding: 0.85em 1.6em;
  border-radius: 2px;
  transition: background-color 0.2s ease;
}

.prss-service-hero__cta:hover,
.prss-service-hero__cta:focus-visible {
  background: var(--color-primary);
}

.prss-service-hero__cta:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Secondary: lighter, outlined -- never competes with the solid primary
   Book button. Text color adapts for the --image hero's dark overlay so
   it stays readable there without a separate solid fill. */
.prss-service-hero__whatsapp {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-medium);
  font-size: 0.9rem;
  color: var(--color-text) !important;
  text-decoration: none !important;
  border: 1px solid var(--color-border);
  padding: 0.8em 1.4em;
  border-radius: 2px;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.prss-service-hero__whatsapp:hover,
.prss-service-hero__whatsapp:focus-visible {
  color: var(--color-accent) !important;
  border-color: var(--color-accent);
}

.prss-service-hero__whatsapp:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.prss-service-hero--image .prss-service-hero__whatsapp {
  color: var(--color-surface) !important;
  border-color: rgba(247,243,237,0.55);
}

.prss-service-hero--image .prss-service-hero__whatsapp:hover,
.prss-service-hero--image .prss-service-hero__whatsapp:focus-visible {
  color: var(--color-surface) !important;
  border-color: var(--color-surface);
}

@media (max-width: 600px) {
  .prss-service-hero--image {
    min-height: clamp(500px, 148vw, 600px);
    padding-block: 32px;
  }

  .prss-service-hero--image .prss-service-hero__content {
    max-width: none;
  }
}

/* -----------------------------------------------------------------------
 * About / What to Expect sections (alternate backgrounds for rhythm)
 * --------------------------------------------------------------------- */

.prss-service-about {
  border-top: 1px solid var(--color-border);
}

.prss-service-expect {
  background: var(--color-background-alt);
  border-top: 1px solid var(--color-border);
}

/* -----------------------------------------------------------------------
 * Suitable For / Preparation / Aftercare
 * --------------------------------------------------------------------- */

.prss-service-guidance {
  border-top: 1px solid var(--color-border);
}

.prss-service-guidance__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(20px, 2.6vw, 36px);
}

.prss-service-guidance__block {
  border-inline-start: 2px solid var(--color-accent-soft);
  padding-inline-start: clamp(16px, 2vw, 22px);
}

/* -----------------------------------------------------------------------
 * Related Services
 *
 * template-parts/service-card.php is shared with the /services/ archive and
 * is NOT duplicated here. Its markup (.prss-services-card and children) only
 * receives archive-specific styling from services-archive.css, which is not
 * enqueued on the single-Service template -- so on this page those classes
 * would otherwise render with Astra's unstyled defaults (default link blue,
 * no card boundary). These rules scope the same visual family to the
 * Related Services context only, without loading the full archive
 * stylesheet (hero, category nav, etc.) on a page that doesn't need it.
 * --------------------------------------------------------------------- */

.prss-service-related {
  background: var(--color-background-alt);
  border-top: 1px solid var(--color-border);
}

.prss-service-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2vw, 26px);
  margin-block-start: clamp(20px, 2.5vw, 32px);
}

@media (max-width: 900px) {
  .prss-service-related__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .prss-service-related__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.prss-service-related .prss-services-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.prss-service-related .prss-services-card:hover {
  border-color: var(--color-accent-soft);
  transform: translateY(-2px);
}

.prss-service-related .prss-services-card__media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.prss-service-related .prss-services-card__body {
  display: flex;
  flex-direction: column;
  padding: clamp(18px, 2.2vw, 24px);
}

.prss-service-related .prss-services-card__badge {
  align-self: flex-start;
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-semibold);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
  border: 1px solid var(--color-accent-soft);
  border-radius: 2px;
  padding: 0.25em 0.65em;
  margin-block-end: 0.85em;
}

.prss-service-related .prss-services-card__title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display-medium);
  font-size: 1.1rem;
  line-height: 1.32;
  margin: 0 0 0.5em 0;
}

.prss-service-related .prss-services-card__title a {
  color: var(--color-text) !important;
  text-decoration: none !important;
}

.prss-service-related .prss-services-card__title a:hover,
.prss-service-related .prss-services-card__title a:focus-visible {
  color: var(--color-accent) !important;
}

.prss-service-related .prss-services-card__desc {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-muted);
  margin: 0 0 1em 0;
  flex-grow: 1;
}

.prss-service-related .prss-services-card__meta {
  display: flex;
  align-items: baseline;
  gap: 0.75em;
  font-family: var(--font-body);
  font-size: 0.85rem;
  margin-block-end: 0.9em;
  flex-wrap: wrap;
}

.prss-service-related .prss-services-card__price {
  font-weight: var(--font-weight-body-semibold);
  color: var(--color-text);
}

.prss-service-related .prss-services-card__duration {
  color: var(--color-muted);
}

.prss-service-related .prss-services-card__meta-sep {
  color: var(--color-border);
  font-size: 0.85em;
}

.prss-service-related .prss-services-card__link {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-semibold);
  font-size: 0.85rem;
  color: var(--color-primary) !important;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

.prss-service-related .prss-services-card__link span {
  display: inline-block;
  transition: transform 0.2s ease;
}

.prss-service-related .prss-services-card__link:hover,
.prss-service-related .prss-services-card__link:focus-visible {
  color: var(--color-accent) !important;
}

.prss-service-related .prss-services-card__link:hover span,
.prss-service-related .prss-services-card__link:focus-visible span {
  transform: translateX(3px);
}

.prss-service-related .prss-services-card a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* -----------------------------------------------------------------------
 * Booking CTA
 * --------------------------------------------------------------------- */

.prss-service-booking-cta {
  text-align: center;
  border-top: 1px solid var(--color-border);
}

.prss-service-booking-cta .prss-service-single-body {
  max-width: 46ch;
  margin-inline: auto;
  margin-block-end: 1.4em;
}

.prss-service-booking-cta__button {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-semibold);
  font-size: 0.95rem;
  color: var(--color-surface) !important;
  text-decoration: none !important;
  background: var(--color-accent);
  padding: 0.9em 2em;
  border-radius: 2px;
  transition: background-color 0.2s ease;
}

.prss-service-booking-cta__button:hover,
.prss-service-booking-cta__button:focus-visible {
  background: var(--color-primary);
}

.prss-service-booking-cta__button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Prompt #14C: wraps Book (primary, unchanged) + optional WhatsApp
   (secondary). Centered to match the existing text-align:center section. */
.prss-service-booking-cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1em;
}

.prss-service-booking-cta__whatsapp {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-medium);
  font-size: 0.9rem;
  color: var(--color-text) !important;
  text-decoration: none !important;
  border: 1px solid var(--color-border);
  padding: 0.85em 1.7em;
  border-radius: 2px;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.prss-service-booking-cta__whatsapp:hover,
.prss-service-booking-cta__whatsapp:focus-visible {
  color: var(--color-accent) !important;
  border-color: var(--color-accent);
}

.prss-service-booking-cta__whatsapp:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* -----------------------------------------------------------------------
 * Reduced motion
 * --------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .prss-service-hero__cta,
  .prss-service-booking-cta__button {
    transition: none;
  }

  .prss-service-related .prss-services-card,
  .prss-service-related .prss-services-card__link span {
    transition: none;
  }

  .prss-service-related .prss-services-card:hover {
    transform: none;
  }

  .prss-service-related .prss-services-card__link:hover span,
  .prss-service-related .prss-services-card__link:focus-visible span {
    transform: none;
  }
}