/* assets/css/more-slider.css */
:root{ --more-bg:#0b0e14; --more-card:#0f1522; --more-border:#1a2340; --more-text:#e7ecf7; --more-muted:#a6b2c9; --more-brand:#7aa2ff; }
.more-section{ background:var(--more-bg); color:var(--more-text); padding: clamp(32px, 6vw, 64px) 0; }
.more-section .container{ max-width:1200px; margin:0 auto; padding:0 20px; }
.more-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:16px; }
.more-head h2{ margin:0; font-size:clamp(1.4rem, 2.4vw, 2rem); font-weight:800; letter-spacing:.2px }
.more-controls{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.more-controls button{ border:1px solid var(--more-border); background:linear-gradient(180deg,#0e1524,#0c1220); color:var(--more-text); padding:10px 14px; border-radius:12px; cursor:pointer }
.more-controls button:hover{ border-color:#2a3760 }
.more-controls .pagination{ color:var(--more-muted); font-size:.95rem; padding-inline:8px }

.more-viewport{ position:relative; overflow:hidden; border:1px solid var(--more-border); border-radius:18px; background:linear-gradient(180deg, var(--more-card), #0b1220) }
.more-track{ display:flex; will-change:transform; transition: transform .6s cubic-bezier(.2,.6,.2,1) }
.more-slide{ min-width:100%; padding: clamp(16px, 3vw, 24px); display:grid; grid-template-columns: 1.15fr .85fr; gap: clamp(16px, 3vw, 24px); }
@media (max-width: 900px){ .more-slide{ grid-template-columns: 1fr; } }
.more-media{ aspect-ratio: 4/3; border:1px solid var(--more-border); border-radius:14px; overflow:hidden; background:#0a1020 }
.more-media img{ width:100%; height:100%; object-fit:contain; display:block; }
.more-badge{ position:absolute; top:12px; inset-inline-start:12px; background:rgba(122,162,255,.18); border:1px solid #27324a; color:#cbd7ff; padding:4px 10px; border-radius:999px; backdrop-filter:blur(6px) }
.more-info h3{ margin:.2rem 0 .4rem; font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight:800 }
.more-info .meta{ color:var(--more-muted); margin:0 0 .4rem; font-size: .95rem }
.more-info .desc{ margin:.4rem 0 1rem; color:#d6def2; font-size: clamp(.98rem, 1.6vw, 1.06rem) }
.more-kv{ list-style:none; margin:0; padding:0; display:grid; gap:8px }
.more-kv li{ display:flex; gap:8px; align-items:flex-start }
.more-kv strong{ color:#c9d4ff }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .more-track{ transition:none }
}


/* fade-in for images after load */
.fade-img{ opacity:0; transition: opacity .45s ease }
.fade-img:is([complete], :not([src=""])) { opacity:1 }