

:where(#primary > section) { padding: var(--section-gap) 0; }

.service-header { padding: var(--sp-7) 0 var(--sp-6); text-align: center; background: var(--color-bg-alt); }
.service-header__inner { max-width: 780px; margin: 0 auto; }
.service-header h1 { margin: var(--sp-2) 0 0; }

.service-thumbnail { padding: var(--sp-6) 0; }
.service-thumbnail__media {
    max-width: 1020px;
    margin: 0 auto;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
}
.service-thumbnail__media img { display: block; width: 100%; height: auto; }

.service-alt { padding: var(--sp-6) 0 var(--section-gap); display: flex; flex-direction: column; gap: var(--sp-7); }

.service-alt__row { display: flex; align-items: center; gap: var(--sp-8); }
.service-alt__row--reverse { flex-direction: row-reverse; }
.service-alt__row--text-only { max-width: 780px; margin: 0 auto; }

.service-alt__text { flex: 1 1 auto; min-width: 0; }
.service-alt__media { flex: 0 0 42%; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.service-alt__media img,
.service-alt__media video { display: block; width: 100%; height: 100%; object-fit: cover; }

.entry-content.prose { font-size: var(--fs-base); }

.entry-content.prose h2 { margin-top: 0; font-size: var(--fs-h3); }
.entry-content.prose h3 { margin-top: 0; font-size: var(--fs-h4); }

.service-alt__gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--sp-4);
}
.service-alt__gallery img,
.service-alt__gallery video {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

@media (max-width: 1023px) {
    .service-alt__row { gap: var(--sp-6); }
    .service-alt__media { flex-basis: 38%; }
}

@media (max-width: 767px) {
    .service-header { padding: var(--sp-6) 0 var(--sp-5); }
    .service-thumbnail { padding: var(--sp-5) 0; }
    .service-alt { padding: var(--sp-5) 0 var(--section-gap); gap: var(--sp-6); }

    .service-alt__row,
    .service-alt__row--reverse { flex-direction: column; align-items: stretch; gap: var(--sp-4); }
    .service-alt__media { flex: none; width: 100%; aspect-ratio: 4 / 3; }
}
