/* Additions to the compiled app.css for CMS-driven content. */

.site-logo { height: calc(var(--logo-h, 56px) * .8); }
@media (min-width: 640px) { .site-logo { height: var(--logo-h, 56px); } }

.site-social { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin-bottom: 0; }
.site-social a { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border: 1px solid color-mix(in oklab, var(--on-navy-muted) 40%, transparent); color: var(--on-navy-muted); transition: color .2s, border-color .2s; }
.site-social a:hover { color: var(--teal-light); border-color: var(--teal-light); }
.site-social svg { width: 1.05rem; height: 1.05rem; }

@media (min-width: 1024px) { .site-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.site-items-center { align-items: center; }
@media (min-width: 1024px) { .site-order-last { order: 2; } }

.site-media { display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--navy-deep); object-fit: cover; }

.site-gallery { display: grid; gap: 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1024px) { .site-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 479px) { .site-gallery { grid-template-columns: 1fr; } }

.site-prose { max-width: 52rem; }

.hero-slider { overflow: hidden; }
.hero-slide {
    position: absolute; inset: 0;
    opacity: 0; transform: scale(1.08);
    transition: opacity 1.6s ease-in-out, transform 0s linear 1.6s;
    will-change: opacity, transform;
}
.hero-slide.is-active {
    opacity: 1; transform: scale(1);
    transition: opacity 1.6s ease-in-out, transform var(--hero-slide-time, 8s) linear;
}
@media (prefers-reduced-motion: reduce) {
    .hero-slide, .hero-slide.is-active { transform: none; }
}

.site-map { display: block; width: 100%; height: 420px; border: 0; margin-top: 3.5rem; }
@media (max-width: 639px) { .site-map { height: 300px; } }