.temple-carousel { margin-top: 38px; min-width: 0; }
.temple-carousel__viewport { overflow: hidden; width: 100%; touch-action: pan-y pinch-zoom; }
.temple-carousel__track { display: flex; gap: 22px; width: 100%; will-change: transform; }
.temple-carousel__card { position: relative; display: block; flex: 0 0 calc((100% - 44px) / 3); aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; background: var(--paper); }
.temple-carousel__card img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.temple-carousel__card::after { position: absolute; inset: 55% 0 0; content: ''; background: linear-gradient(transparent, rgba(33,26,22,.8)); pointer-events: none; }
.temple-carousel__caption { position: absolute; z-index: 1; right: 20px; bottom: 16px; left: 20px; color: var(--ivory); font: 22px/1.5 var(--serif); }
.temple-carousel__card:focus-visible { outline: 3px solid var(--gold); outline-offset: -4px; }
.temple-carousel__controls { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 20px; }
.temple-carousel__controls button { min-width: 44px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink); font: 20px/1 var(--sans); cursor: pointer; }
.temple-carousel__controls button[data-carousel-pause] { border-radius: 4px; font-size: 13px; }
.temple-carousel__controls button:hover { background: var(--paper); }
.temple-carousel__controls button:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
@media (max-width: 900px) { .temple-carousel__card { flex-basis: calc((100% - 22px) / 2); } }
@media (max-width: 560px) { .temple-carousel__track { gap: 14px; } .temple-carousel__card { flex-basis: 86%; } .temple-carousel__caption { left: 16px; bottom: 13px; font-size: 20px; } }
@media (prefers-reduced-motion: reduce) { .temple-carousel__track { will-change: auto; } }