/* A treatment direction on a page of its own (views/service-landing.php). It reuses the
   catalogue's service markup and container queries, the page banner and the photo viewer;
   what is here is only the page's own rhythm. */

.service-landing-page #main { container: catalog / inline-size; }
.service-landing-page { background: var(--frost); }

.service-landing-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.6rem;
  min-height: 3rem;
  padding-block: 0.5rem;
  color: var(--text-muted);
  font-size: 0.875rem;
}
.service-landing-breadcrumb a { display: inline-flex; min-height: 2.75rem; align-items: center; color: var(--graphite); text-underline-offset: 0.25em; }

/* "Gesichtsbehandlungen & HydraFacial in Frankfurt" breaks at the seam of the compound
   (soft hyphen from glamroom_heading_text()), never inside "HydraFacial". */
/* The opening words and actions size the banner, not a portrait photograph.
   Keep the whole service result in a bounded frame; no crop or fixed section height.
   These selectors also win when photo-framing.css is loaded last. */
.page-banner.page-banner--landing { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); }
.page-banner--landing .page-banner-copy { padding-block: clamp(1.5rem, 2.4vw, 2.5rem); }
.page-banner--landing .page-banner-eyebrow { display: none; }
html body.service-landing-page .page-banner.page-banner--landing h1 { max-width: none; font-size: clamp(2rem, 1rem + 2.5vw, 3rem); overflow-wrap: break-word; }
.page-banner--landing .page-banner-lead { max-width: 65ch; margin-block-start: 1rem; font-size: 1rem; }
.page-banner--landing .page-banner-actions { gap: 0.5rem 1rem; margin-block-start: 1.25rem; }
.page-banner--landing .page-banner-aside { margin-block-start: 1rem; padding-block-start: 0.75rem; }
.page-banner--landing .page-banner-count strong { font-size: 1.5rem; }
.page-banner.page-banner--landing .page-banner-media {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  min-height: 0;
  aspect-ratio: auto;
}
.page-banner.page-banner--landing .page-banner-media::after { content: none; }
.page-banner.page-banner--landing .page-banner-media picture,
.page-banner.page-banner--landing .page-banner-media img {
  position: static;
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 26rem;
}
.page-banner.page-banner--landing .page-banner-media img { object-fit: contain; }

@media (max-width: 1023px) {
  .page-banner.page-banner--landing { grid-template-columns: minmax(0, 1fr); }
  .page-banner--landing .page-banner-copy { padding-block: 1.25rem; }
  .page-banner.page-banner--landing .page-banner-media picture,
  .page-banner.page-banner--landing .page-banner-media img { max-height: 10rem; }
}

/* The banner lead already says why the direction exists; the group heading does not repeat it. */
.service-landing-page .catalog-group-benefit { display: none; }
.service-landing-catalog { padding-block: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 3vw, 2.5rem); scroll-margin-top: 1rem; }
.service-landing-catalog .catalog-group { border-top: 0; padding-top: 0; }
.service-landing-provenance { max-width: 60ch; margin: 1.5rem 0 0; color: var(--text-muted); font-size: 0.875rem; }

.service-landing-calculator { padding-block: clamp(1rem, 3vw, 2rem) clamp(3rem, 6vw, 5rem); scroll-margin-top: 1rem; }
.service-landing-team { max-width: 62ch; margin: 1.25rem 0 0; color: var(--text-muted); }

.service-landing-gallery,
.service-landing-related { padding-block: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--line); }
.service-landing-gallery h2,
.service-landing-related h2 { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); font-size: clamp(2rem, 3.2vw, 3.2rem); }

/* Whole photographs on the graphite mat the home page uses, never cropped. */
.service-landing-shots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
.service-landing-shot { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--graphite); }
.service-landing-shot.is-comparison { grid-column: span 2; aspect-ratio: 8 / 5; }
.service-landing-shot picture,
.service-landing-shot img { display: block; width: 100%; height: 100%; }
.service-landing-shot img { object-fit: contain; }
.service-landing-shot .photo-open { position: absolute; right: 0; bottom: 0; }

.service-landing-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: 0 2rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}
.service-landing-links a {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr) 1.25rem;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.5rem;
  padding-block: 0.6rem;
  border-bottom: 1px solid var(--line);
  color: var(--graphite);
  text-decoration: none;
}
.service-landing-links .service-symbol { width: 1.6rem; height: 1.6rem; color: var(--gold-text); }
.service-landing-links a:hover span,
.service-landing-links a:focus-visible span { text-decoration: underline; text-underline-offset: 0.2em; }
.service-landing-links .arrow-icon { width: 1.1rem; height: 1.1rem; }

@container catalog (max-width: 767px) {
  .service-landing-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-landing-shot.is-comparison { grid-column: 1 / -1; }
  .service-landing-all { width: 100%; justify-content: space-between; }
}

/* Treatment detail pages retain the established service banner, type and spacing. */
.seo-service-links { padding-block:1.5rem 0; }
.seo-service-links h2 { margin:0 0 .75rem; font-size:var(--type-title); font-weight:500; }
.seo-service-links ul { display:flex; flex-wrap:wrap; gap:.25rem 2rem; margin:0; padding:0; list-style:none; }
.seo-service-links a { display:inline-flex; align-items:center; gap:.75rem; min-height:44px; color:var(--graphite); text-underline-offset:.25em; }
.seo-service-links .arrow-icon { width:1rem; height:1rem; }
.seo-service-copy { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2.5rem clamp(2rem,5vw,5rem); padding-block:clamp(2.5rem,5vw,4rem); }
.seo-service-copy section { min-width:0; }
.seo-service-copy h2,.seo-service-prices>h2,.seo-service-faq>h2 { margin:0 0 1rem; font-size:var(--type-sub); font-weight:300; line-height:1.2; }
.seo-service-copy p { max-width:70ch; margin:0; font-size:1rem; line-height:1.6; color:var(--graphite); }
.seo-service-prices { padding-block:0 clamp(2.5rem,5vw,4rem); scroll-margin-top:2rem; }
.seo-price-service { margin-top:2rem; }
.seo-price-service h3 { margin:0 0 .75rem; font-size:var(--type-title); font-weight:500; }
.seo-price-option { display:flex; justify-content:space-between; align-items:center; gap:1rem 2rem; padding-block:1rem; }
.seo-price-option p { margin:0; }
.seo-price-option .seo-price-label { max-width:55ch; }
.seo-price-option .seo-price-facts { margin-top:.35rem; white-space:nowrap; }
.seo-price-option .button { flex-shrink:0; gap:1rem; }
.seo-package-note { margin:.25rem 0 0; max-width:65ch; color:var(--text-muted); }
.seo-service-faq { padding-block:0 clamp(2.5rem,5vw,4rem); }
.seo-service-faq details { padding-block:.75rem; max-width:70ch; }
.seo-service-faq summary { min-height:44px; display:list-item; cursor:pointer; font-weight:500; line-height:1.5; }
.seo-service-faq details p { margin:.25rem 0 1rem; line-height:1.6; }
.seo-service-parent { padding-block:0 3rem; }
@media(max-width:767px) {
 .seo-service-copy { grid-template-columns:minmax(0,1fr); gap:2rem; }
 .seo-price-option { align-items:flex-start; flex-direction:column; gap:.75rem; }
 .seo-price-option .button { width:100%; justify-content:space-between; }
}