/* Service pages, the services overview, contact and about pages. */

.service-layout { display: grid; gap: var(--space-7); }
.service-main { display: flex; flex-direction: column; gap: var(--space-7); min-width: 0; }
.service-aside { display: flex; flex-direction: column; gap: var(--space-4); }
@media (min-width: 1000px) {
  .service-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-8); align-items: start; }
}

.steps--compact { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--space-5); }

/* Contact side card */
.contact-card {
  display: flex; flex-direction: column; gap: var(--space-3);
  background: var(--mist); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(22px, 3vw, 28px);
}
.contact-card__title { font-size: 1.25rem; font-stretch: var(--stretch-wide); }
.contact-card .small { margin-bottom: var(--space-2); }
.contact-card__facts { display: grid; gap: var(--space-3); margin-top: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--line); font-size: var(--fs-small); }
.contact-card__facts dt { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.contact-card__facts dd { margin: 2px 0 0; color: var(--heading); }
.service-aside__areas { padding-inline: 4px; }

/* "Other services" link tiles */
.service-links { list-style: none; padding: 0; margin: 0; }
.service-link { height: 100%; gap: 16px; }
.service-link__body { display: flex; flex-direction: column; gap: 4px; }
.service-link__name { font-size: 1.0625rem; }
.service-link__text { font-weight: 400; font-size: var(--fs-small); color: var(--muted); }

/* Services overview */
.services-grid { list-style: none; padding: 0; margin: 0; }
.services-grid .card { height: 100%; }

/* Contact page */
.contact-layout { display: grid; gap: var(--space-7); }
@media (min-width: 1000px) {
  .contact-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-8); }
}
.contact-details { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.contact-details div { display: flex; flex-direction: column; gap: 6px; }
.contact-details dt { color: var(--muted); }
.contact-details dd { margin: 0; color: var(--heading); }

/* About page */
.about-principles { list-style: none; padding: 0; margin: 0; }

/* FAQ */
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.faq__q { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 14px 18px; cursor: pointer; list-style: none; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: ""; margin-left: auto; flex: none; width: 10px; height: 10px; border-right: 2px solid var(--heading); border-bottom: 2px solid var(--heading); transform: rotate(45deg); transition: transform .15s ease; }
.faq[open] .faq__q::after { transform: rotate(-135deg); }
.faq__title { font-size: 1.0625rem; font-stretch: normal; line-height: 1.35; }
.faq__a { padding: 0 18px 18px; }

/* Legal pages */
.legal h2 { margin-top: 1.8em; }
.legal .table-wrap { margin-block: 1em; }
.legal code { font-family: var(--font-mono); font-size: 0.875em; background: var(--mist); padding: 1px 6px; border-radius: 4px; }

/* Side panels only stay pinned while scrolling when the whole panel fits on screen. */
@media (min-width: 1000px) and (min-height: 760px) {
  .service-aside { position: sticky; top: 108px; }
}

/* Optional picture on a service page (set in app/services.php). */
.service-photo {
  display: block; width: 100%; height: auto;
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}