/* index.css - page-specific styling for the home page.
   The .rnm-* recent-media carousel, moved from an inline <style> block. */

.rnm-section { padding: 80px 0; background: transparent; overflow: hidden; position: relative; z-index: 1; }
.rnm-container { margin: 0 auto; max-width: 100%; position: relative; width: 100%; padding: 0; }
.rnm-header { text-align: center; max-width: 860px; margin: 0 auto 50px auto; padding: 0 20px; }
.rnm-header .lead { text-align: center; margin-top: 12px; }
.rnm-track-wrapper { margin: 0 auto; position: relative; max-width: 1500px; overflow: hidden; padding: 40px 0 60px; -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%); }
.rnm-track-inner { display: flex; gap: 20px; width: max-content; transition: transform .6s cubic-bezier(.25, 1, .5, 1); will-change: transform; }
.rnm-card { position: relative; flex: 0 0 min(260px, 70vw); height: 380px; border-radius: 22px; overflow: hidden; background: #0a0a0a; transform: scale(.86); opacity: .55; filter: grayscale(45%); box-shadow: none; transition: all .5s cubic-bezier(.25, 1, .5, 1); cursor: pointer; }
.rnm-card.rnm-active { transform: scale(1); opacity: 1; filter: grayscale(0%); z-index: 10; box-shadow: 0 20px 45px rgba(0, 0, 0, .25); }
.rnm-card.rnm-neighbor { transform: scale(.93); opacity: .78; filter: grayscale(15%); }
.rnm-card:hover { opacity: 1; filter: grayscale(0%); }
.rnm-card img.rnm-img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.rnm-overlay { position: absolute; left: 0; width: 100%; z-index: 2; pointer-events: none; }
.rnm-overlay-bottom { bottom: 0; height: 55%; background: linear-gradient(to top, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .35) 65%, transparent 100%); }
.rnm-info-bottom { position: absolute; bottom: 22px; left: 22px; right: 22px; z-index: 5; }
.rnm-name { color: #fff; font-size: 20px; font-weight: 700; line-height: 1.2; text-shadow: 0 2px 4px rgba(0, 0, 0, .55); }
.rnm-role { color: rgba(255, 255, 255, .9); font-size: 12px; text-transform: uppercase; font-weight: 600; letter-spacing: .04em; margin-top: 6px; text-shadow: 0 2px 4px rgba(0, 0, 0, .5); }
.rnm-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); border: 1px solid rgba(0, 0, 0, .08); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 200; box-shadow: 0 4px 20px rgba(0, 0, 0, .1); transition: all .3s ease; font-size: 18px; color: #1d1d1f; }
.rnm-nav:hover { background: #fff; box-shadow: 0 8px 30px rgba(0, 0, 0, .15); transform: translateY(-50%) scale(1.08); }
.rnm-nav-prev { left: 40px; }
.rnm-nav-next { right: 40px; }
.rnm-brand-line { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; flex-wrap: wrap; font-size: 14px; color: #555; }
.rnm-brand-line strong { color: #1d1d1f; }
@media (max-width: 1024px) {
    .rnm-card { flex: 0 0 240px; height: 360px; }
}
@media (max-width: 768px) {
    .rnm-section { padding: 60px 0; }
    .rnm-track-wrapper { padding: 30px 0 40px; }
    .rnm-track-inner { gap: 14px; }
    .rnm-card { flex: 0 0 78vw; height: 420px; }
    .rnm-nav { width: 40px; height: 40px; font-size: 14px; }
    .rnm-nav-prev { left: 12px; }
    .rnm-nav-next { right: 12px; }
}
@media (max-width: 480px) {
    .rnm-card { flex: 0 0 85vw; height: 400px; }
}