/* Phase 03 public service catalogue; loaded only for the Services catalogue and approved service details. */
.wh-os.wh-service-universe,
.wh-os.wh-service-detail { margin: 0 auto; max-width: var(--wh-os-app); min-width: 0; padding: var(--wh-os-space-7) var(--wh-os-space-5) var(--wh-os-space-8); }
.wh-os.wh-service-detail-breadcrumb { margin: var(--wh-os-space-5) auto 0; max-width: var(--wh-os-app); padding: 0 var(--wh-os-space-5); }
.wh-os.wh-service-detail-breadcrumb .wh-breadcrumbs a { align-items: center; display: inline-flex; min-height: var(--wh-os-target); }

.wh-os .wh-os-kicker { color: var(--wh-os-terracotta); display: block; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; margin-bottom: var(--wh-os-space-2); text-transform: uppercase; }
.wh-os .wh-service-universe__intro { max-width: var(--wh-os-reading); }
.wh-os .wh-service-universe__intro p { color: var(--wh-os-muted); font-size: 1.0625rem; }

.wh-os .wh-service-filters { align-items: end; background: var(--wh-os-white); border: 1px solid var(--wh-os-border); border-radius: var(--wh-os-radius); display: grid; gap: var(--wh-os-space-4); grid-template-columns: minmax(220px, 1.4fr) minmax(180px, 1fr) minmax(180px, 1fr) auto; margin: var(--wh-os-space-6) 0 var(--wh-os-space-5); padding: var(--wh-os-space-5); }
.wh-os .wh-service-filters > div { display: grid; gap: var(--wh-os-space-2); min-width: 0; }
.wh-os .wh-service-filters label { color: var(--wh-os-espresso); font-size: 0.8125rem; font-weight: 800; }
.wh-os .wh-service-filters :where(input, select) { background: var(--wh-os-ivory); border: 1px solid var(--wh-os-border); border-radius: var(--wh-os-radius-small); color: var(--wh-os-charcoal); font: inherit; min-height: var(--wh-os-target); min-width: 0; padding: var(--wh-os-space-2) var(--wh-os-space-3); width: 100%; }
.wh-os .wh-service-filters__actions { align-items: center; display: flex !important; grid-template-columns: 1fr; }
.wh-os .wh-service-filters__actions > a { color: var(--wh-os-terracotta); font-size: 0.8125rem; font-weight: 800; min-height: var(--wh-os-target); padding: var(--wh-os-space-3); }
.wh-os .wh-service-results__summary { color: var(--wh-os-muted); margin-bottom: var(--wh-os-space-4); }

.wh-os .wh-service-grid { display: grid; gap: var(--wh-os-space-5); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wh-os .wh-service-card-v8 { background: var(--wh-os-white); border: 1px solid var(--wh-os-border); border-radius: var(--wh-os-radius); box-shadow: var(--wh-os-shadow-subtle); display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.wh-os .wh-service-card-v8__cover,
.wh-os .wh-service-card-v8__placeholder { aspect-ratio: 8 / 5; display: block; object-fit: cover; width: 100%; }
.wh-os .wh-service-card-v8__placeholder { align-items: center; background: linear-gradient(145deg, var(--wh-os-blush), var(--wh-os-ivory)); color: var(--wh-os-terracotta); display: flex; justify-content: center; }
.wh-os .wh-service-card-v8__placeholder .wh-os-icon { height: 48px; width: 48px; }
.wh-os .wh-service-card-v8__body { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; padding: var(--wh-os-space-5); }
.wh-os .wh-service-card-v8__meta { align-items: center; display: flex; flex-wrap: wrap; gap: var(--wh-os-space-2); }
.wh-os .wh-service-card-v8__meta > span:last-child { color: var(--wh-os-muted); font-size: 0.75rem; }
.wh-os .wh-service-card-v8 h3 { font-size: 1.4rem; margin: var(--wh-os-space-4) 0 var(--wh-os-space-2); }
.wh-os .wh-service-card-v8 h3 a { align-items: center; color: var(--wh-os-espresso); display: inline-flex; min-height: var(--wh-os-target); }
.wh-os .wh-service-card-v8__body > p { color: var(--wh-os-muted); }
.wh-os .wh-service-card-v8__sample { font-size: 0.8125rem; font-weight: 700; }
.wh-os .wh-service-card-v8__actions { align-items: flex-start; display: flex; flex-wrap: wrap; gap: var(--wh-os-space-2); margin-top: auto; padding-top: var(--wh-os-space-3); }
.wh-os .wh-service-card-v8__compare { align-items: center; border-top: 1px solid var(--wh-os-border); cursor: pointer; display: flex; font-size: 0.8125rem; font-weight: 700; gap: var(--wh-os-space-2); margin-top: var(--wh-os-space-4); min-height: var(--wh-os-target); padding-top: var(--wh-os-space-3); }
.wh-os .wh-service-card-v8__compare input { height: 20px; margin: 0; width: 20px; }
.wh-os .wh-service-compare-submit { align-items: center; background: var(--wh-os-ivory); border: 1px solid var(--wh-os-border); display: flex; gap: var(--wh-os-space-4); justify-content: space-between; margin-top: var(--wh-os-space-5); padding: var(--wh-os-space-4); }
.wh-os .wh-service-compare-submit p { color: var(--wh-os-muted); margin: 0; }

.wh-os .wh-service-comparison { background: var(--wh-os-white); border: 1px solid var(--wh-os-border); margin: var(--wh-os-space-6) 0; padding: var(--wh-os-space-5); }
.wh-os .wh-service-comparison__table { max-width: 100%; overflow-x: auto; }
.wh-os .wh-service-comparison table { border-collapse: collapse; min-width: 760px; width: 100%; }
.wh-os .wh-service-comparison :where(th, td) { border-bottom: 1px solid var(--wh-os-border); padding: var(--wh-os-space-3); text-align: left; vertical-align: top; }
.wh-os .wh-service-comparison thead th { color: var(--wh-os-espresso); }
.wh-os .wh-service-comparison thead a { align-items: center; display: inline-flex; min-height: var(--wh-os-target); }
.wh-os .wh-service-comparison tbody th { color: var(--wh-os-muted); font-size: 0.8125rem; width: 180px; }

.wh-os .wh-service-detail__hero { align-items: center; background: var(--wh-os-ivory); display: grid; gap: var(--wh-os-space-6); grid-template-columns: minmax(0, 1fr) minmax(300px, 0.8fr); margin-bottom: var(--wh-os-space-7); }
.wh-os .wh-service-detail__hero > img { aspect-ratio: 8 / 5; border-radius: var(--wh-os-radius); object-fit: cover; width: 100%; }
.wh-os .wh-service-detail__heading { align-items: flex-start; display: flex; gap: var(--wh-os-space-4); min-width: 0; }
.wh-os .wh-service-detail__icon { align-items: center; background: var(--wh-os-blush); border-radius: 50%; color: var(--wh-os-terracotta); display: inline-flex; flex: 0 0 64px; height: 64px; justify-content: center; }
.wh-os .wh-service-detail__heading h1 { margin: 0 0 var(--wh-os-space-3); }
.wh-os .wh-service-detail__heading p { color: var(--wh-os-muted); font-size: 1.0625rem; }
.wh-os .wh-service-detail__layout { align-items: start; display: grid; gap: var(--wh-os-space-7); grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); }
.wh-os .wh-service-detail__content { min-width: 0; }
.wh-os .wh-service-detail__content section { border-bottom: 1px solid var(--wh-os-border); margin-bottom: var(--wh-os-space-5); padding-bottom: var(--wh-os-space-5); }
.wh-os .wh-service-detail__content h2,
.wh-os .wh-service-detail__aside h2 { font-size: 1.5rem; }
.wh-os .wh-service-detail__content li { margin-bottom: var(--wh-os-space-2); }
.wh-os .wh-service-detail__aside { background: var(--wh-os-white); border: 1px solid var(--wh-os-border); border-top: 3px solid var(--wh-os-terracotta); display: grid; gap: var(--wh-os-space-3); padding: var(--wh-os-space-5); position: sticky; top: 96px; }
.wh-os .wh-service-inclusion-note { color: var(--wh-os-muted); font-size: 0.8125rem; }
.wh-os .wh-service-related { display: grid; gap: var(--wh-os-space-2); list-style: none; padding: 0; }
.wh-os .wh-service-related li { display: grid; }
.wh-os .wh-service-related span { color: var(--wh-os-muted); font-size: 0.75rem; }

@media (max-width: 980px) {
  .wh-os .wh-service-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wh-os .wh-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wh-os .wh-service-detail__hero,
  .wh-os .wh-service-detail__layout { grid-template-columns: minmax(0, 1fr); }
  .wh-os .wh-service-detail__aside { position: static; }
}

@media (max-width: 600px) {
  .wh-os.wh-service-universe,
  .wh-os.wh-service-detail { padding: var(--wh-os-space-5) var(--wh-os-space-4) var(--wh-os-space-7); }
  .wh-os.wh-service-detail-breadcrumb { padding: 0 var(--wh-os-space-4); }
  .wh-os .wh-service-filters,
  .wh-os .wh-service-grid { grid-template-columns: minmax(0, 1fr); }
  .wh-os .wh-service-compare-submit { align-items: stretch; flex-direction: column; }
  .wh-os .wh-service-detail__heading { flex-direction: column; }
}