/* =========================================================================
   Content — interior page components
   ========================================================================= */

/* ---- Prose ---- */
.prose { font-size: var(--step-0); }
.prose > * + * { margin-block-start: 1.05em; }
.prose h2 { font-size: var(--step-3); margin-block-start: 1.9em; }
.prose h3 { font-size: var(--step-1); margin-block-start: 1.6em; }
.prose > :first-child { margin-block-start: 0; }
.prose p, .prose li { max-width: var(--measure); }
.prose ul, .prose ol { padding-left: 1.25em; display: grid; gap: 0.45em; }
.prose li::marker { color: var(--brand-text); }
.prose a { color: var(--ink-900); text-decoration-color: var(--brand); text-decoration-thickness: 2px; font-weight: 600; }
.prose a:hover { color: var(--brand-text); }
.prose img { border-radius: var(--r-lg); margin-block: 1.6em; }
.prose blockquote { margin: 1.6em 0; padding: 1.1rem 1.4rem; background: var(--surface); border-radius: var(--r-md); font-size: var(--step-1); }
.prose hr { margin-block: 2em; border: 0; height: 1px; background: var(--line); }

/* ---- Symptoms panel ---- */
.symptoms {
  display: grid; gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--dark); color: var(--on-dark);
  border-radius: var(--r-xl);
}
@media (min-width: 56rem) { .symptoms { grid-template-columns: 0.8fr 1.2fr; align-items: start; gap: var(--space-xl); } }
.symptoms h2 { color: var(--on-dark); font-size: var(--step-3); }
.symptoms p { color: var(--on-dark-muted); margin-top: var(--space-2xs); }
.symptoms__list { list-style: none; padding: 0; display: grid; gap: 0.1rem; }
@media (min-width: 36rem) { .symptoms__list { grid-template-columns: 1fr 1fr; column-gap: var(--space-md); } }
.symptoms__list li {
  display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: start;
  padding: 0.65rem 0; border-bottom: 1px solid var(--line-dark);
}
.symptoms__list .icon { color: var(--brand); margin-top: 0.2rem; }

/* ---- Split: prose + sticky aside ---- */
.split { display: grid; gap: var(--space-xl); align-items: start; }
@media (min-width: 56rem) { .split { grid-template-columns: minmax(0, 1.55fr) minmax(18rem, 1fr); } }
.aside-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: var(--space-lg);
}
@media (min-width: 56rem) { .aside-card { position: sticky; top: calc(var(--header-h) + 1.5rem); } }
.aside-card h2 { font-size: var(--step-2); margin-bottom: var(--space-xs); }
.aside-card ul { list-style: none; padding: 0; display: grid; gap: 0.7rem; margin-bottom: var(--space-md); }
.aside-card li { display: grid; grid-template-columns: auto 1fr; gap: 0.65rem; font-size: var(--step--1); }
.aside-card li .icon { width: 1.25rem; height: 1.25rem; color: var(--brand-text); margin-top: 0.1rem; }
.aside-card .btn + .btn { margin-top: 0.55rem; }
.aside-card .status { margin-top: var(--space-sm); font-size: var(--step--1); color: var(--text-muted); white-space: normal; }

/* ---- Service index (hub pages) ---- */
.svc-index { list-style: none; padding: 0; display: grid; gap: 0 var(--space-lg); border-top: 1px solid var(--line); }
@media (min-width: 48rem) { .svc-index { grid-template-columns: 1fr 1fr; } }
.svc-index a {
  display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 1rem; align-items: center;
  padding: var(--space-sm) 0.2rem;
  border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit;
}
.svc-index h3 { font-size: var(--step-1); transition: color var(--dur-fast); }
.svc-index p { grid-column: 1; color: var(--text-muted); font-size: var(--step--1); }
.svc-index .icon { grid-row: 1 / span 2; grid-column: 2; width: 1.5rem; height: 1.5rem; color: var(--ink-500); transition: translate var(--dur-mid) var(--ease-out-quart), color var(--dur-fast); }
.svc-index a:hover h3 { color: var(--brand-text); }
.svc-index a:hover .icon { translate: 5px 0; color: var(--brand-text); }

/* ---- Related services (photo cards) ---- */
.related { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.related a {
  display: flex; flex-direction: column;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  text-decoration: none; color: inherit;
  transition: transform var(--dur-mid) var(--ease-out-quart), box-shadow var(--dur-mid) var(--ease-out-quart);
}
.related a:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.related img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--surface-2); }
.related__body { padding: var(--space-sm) var(--space-md) var(--space-md); display: grid; gap: 0.35rem; }
.related h3 { font-size: var(--step-1); }
.related p { color: var(--text-muted); font-size: var(--step--1); }

/* ---- FAQ accordion ---- */
.faq-layout { display: grid; gap: var(--space-lg); }
@media (min-width: 60rem) { .faq-layout { grid-template-columns: 0.7fr 1.3fr; gap: var(--space-xl); } }
.faq { display: grid; gap: 0.6rem; }
.faq details { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); }
.faq details[open] { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-display); font-weight: 500; font-size: var(--step-1); line-height: 1.25;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { flex: none; color: var(--brand-text); transition: rotate var(--dur-mid) var(--ease-out-quart); }
.faq details[open] summary .icon { rotate: 45deg; }
.faq details > div { padding: 0 var(--space-md) var(--space-md); color: var(--text-soft); }
.faq details > div p { max-width: 64ch; }

/* ---- Contact ---- */
.phone-cta { display: grid; gap: var(--space-md); align-items: center; padding: var(--space-lg); border-radius: var(--r-xl); background: var(--dark); color: var(--on-dark); }
@media (min-width: 52rem) { .phone-cta { grid-template-columns: 1fr auto; } }
.phone-cta h2 { color: var(--on-dark); font-size: var(--step-3); }
.phone-cta p { color: var(--on-dark-muted); margin-top: 0.3rem; }
.phone-cta__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.contact-cols { display: grid; gap: var(--space-xl); align-items: start; }
@media (min-width: 58rem) { .contact-cols { grid-template-columns: 1.25fr 0.75fr; } }
.form-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-xl); padding: var(--space-lg); box-shadow: var(--shadow-sm); }
.form-card > h2 { font-size: var(--step-3); }
.form-card > p { color: var(--text-muted); margin: 0.35rem 0 var(--space-md); }
.contact-aside { display: grid; gap: var(--space-md); }
.contact-aside .aside-card { position: static; }
.contact-aside dl { display: grid; gap: 0.7rem; font-size: var(--step--1); }
.contact-aside dt { font-weight: 600; color: var(--ink-900); }
.contact-aside dd { margin: 0; color: var(--text-soft); }

/* ---- Gallery ---- */
.gallery { columns: 1; column-gap: var(--space-sm); }
@media (min-width: 36rem) { .gallery { columns: 2; } }
@media (min-width: 62rem) { .gallery { columns: 3; } }
.gallery figure { break-inside: avoid; margin-bottom: var(--space-sm); border-radius: var(--r-md); overflow: hidden; background: var(--surface-2); }
.gallery a { display: block; }
.gallery img { width: 100%; height: auto; transition: transform 0.9s var(--ease-out-expo); }
.gallery a:hover img { transform: scale(1.03); }

/* ---- Error ---- */
.error-page { text-align: left; padding-block: var(--space-2xl); }
.error-page h1 { font-size: var(--step-6); }

/* ---- Gallery lightbox ---- */
.gallery a { position: relative; }
.gallery__zoom {
  position: absolute; right: 0.6rem; bottom: 0.6rem;
  display: grid; place-items: center; width: 2.2rem; height: 2.2rem;
  border-radius: var(--r-sm);
  background: color-mix(in oklch, var(--dark) 72%, transparent);
  color: var(--on-dark);
  opacity: 0; translate: 0 4px;
  transition: opacity var(--dur-fast) ease, translate var(--dur-mid) var(--ease-out-quart), background-color var(--dur-fast) ease;
}
.gallery a:hover .gallery__zoom, .gallery a:focus-visible .gallery__zoom { opacity: 1; translate: 0 0; }
.gallery a:hover .gallery__zoom { background: var(--brand); color: var(--brand-ink); }

.lb {
  border: 0; padding: 0; margin: 0;
  width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
  background: transparent; color: var(--on-dark);
  overflow: hidden;
}
.lb::backdrop { background: color-mix(in oklch, var(--dark-0) 97%, transparent); backdrop-filter: blur(3px); }
.lb[open] { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-2xs); }
@media (prefers-reduced-motion: no-preference) {
  .lb[open] { animation: lb-in var(--dur-mid) var(--ease-out-expo); }
  @keyframes lb-in { from { opacity: 0; } }
  .lb__img { animation: lb-img var(--dur-mid) var(--ease-out-expo); }
  @keyframes lb-img { from { opacity: 0; transform: scale(0.985); } }
}
.lb__stage {
  grid-column: 2; margin: 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-sm);
  padding-block: var(--space-md);
}
.lb__img {
  max-width: min(100%, 1400px); max-height: 78dvh;
  width: auto; height: auto; object-fit: contain;
  border-radius: var(--r-md);
}
.lb__caption {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0.35rem 0.9rem;
  max-width: 60ch; padding-inline: var(--gutter);
  font-size: var(--step--1); color: var(--on-dark-muted); text-align: center;
}
.lb__count { color: var(--brand); font-weight: 600; }
.lb__nav, .lb__close {
  display: grid; place-items: center;
  width: 3rem; height: 3rem; flex: none;
  background: color-mix(in oklch, var(--dark-2) 80%, transparent);
  border: 1px solid var(--line-dark); border-radius: var(--r-sm);
  color: var(--on-dark);
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.lb__nav:hover, .lb__close:hover { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.lb__nav .icon { width: 1.5rem; height: 1.5rem; }
.lb__nav--prev { grid-column: 1; margin-left: var(--space-2xs); rotate: 90deg; }
.lb__nav--next { grid-column: 3; margin-right: var(--space-2xs); rotate: -90deg; }
.lb__close { position: fixed; top: var(--space-sm); right: var(--space-sm); z-index: 2; }
@media (max-width: 40rem) {
  .lb__nav { position: fixed; bottom: calc(var(--space-sm) + env(safe-area-inset-bottom)); width: 3.4rem; height: 3.4rem; }
  .lb__nav--prev { left: var(--space-sm); margin: 0; }
  .lb__nav--next { right: var(--space-sm); margin: 0; }
  .lb__stage { grid-column: 1 / -1; }
  .lb__img { max-height: 66dvh; }
}