/* Basic reset & theme */
* { box-sizing: border-box; }
:root{
  --lavender-50:#f6f5ff;
  --lavender-100:#ebe9ff;
  --lavender-600:#635bff;
  --lavender-800:#2d2a6a;
  --cream-50:#fffaf2;
}
body{ margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; color:#111; background: linear-gradient(to bottom, #fff, var(--cream-50));}

/* layout */
.section{ padding: 80px 0; background: linear-gradient(to bottom, #ffe4f1 0%, var(--cream-50) 100%); }
.container{ max-width: 1120px; padding:0 20px; margin:0 auto; }
.header{ margin-bottom: 48px; }
.title{ font-size: clamp(28px, 5vw, 44px); color: var(--lavender-800); margin: 0 0 12px; font-weight: 800; }
.subtitle{ font-size: clamp(16px, 2.5vw, 20px); color:#555; margin: 0 auto; max-width: 680px; }

.text-center{ text-align:center; }

/* pills */
.lang-toggle{ display:flex; justify-content:center; gap:10px; margin: 8px 0 24px; }
.pill{ padding:10px 16px; border-radius:999px; border:1px solid #ddd; background:#fff; font-weight:600; cursor:pointer; }
.pill.active{ background: var(--lavender-600); color:#fff; border-color: transparent; box-shadow: 0 10px 20px rgba(99,91,255,0.25); }

/* filters */
.filters{ display:flex; flex-wrap: wrap; justify-content:center; gap:12px; margin: 0 0 32px; }
.filters .filter-btn{ padding:12px 18px; border-radius:999px; font-weight:600; border:1px solid #e6e6e6; background:#fff; color:#444; cursor:pointer; transition: .2s ease; }
.filters .filter-btn.active{ background: var(--lavender-600); color:#fff; border-color: transparent; box-shadow: 0 10px 20px rgba(99,91,255,0.25); }
.filters .filter-btn:hover{ background:#f7f7ff; }

/* grid */
.grid{ display:grid; grid-template-columns: 1fr; gap:24px; }
@media (min-width: 768px){ .grid{ grid-template-columns: repeat(2, 1fr);} }
@media (min-width: 1024px){ .grid{ grid-template-columns: repeat(3, 1fr);} }

.card{ background:#fff; border-radius: 18px; overflow:hidden; box-shadow: 0 10px 25px rgba(0,0,0,.08); cursor:pointer; transition: transform .2s ease, box-shadow .3s ease; }
.card:hover{ transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,.12); }
.card .media-wrap{ position:relative; aspect-ratio: 3/4; overflow:hidden; }
.card img{ width:100%; height:100%; object-fit:cover; transition: transform .3s ease; display:block; }
.card:hover img{ transform: scale(1.05); }
.card .gradient{ position:absolute; inset:0; background: linear-gradient(to top, rgba(0,0,0,.6), transparent 60%); opacity:0; transition: .3s ease; }
.card:hover .gradient{ opacity:1; }

.play-badge{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.play-circle{ width:64px; height:64px; border-radius:50%; background: rgba(255,255,255,.92); display:grid; place-items:center; }
.play-icon{ width:28px; height:28px; color: var(--lavender-600); margin-left:3px; }

.card .body{ padding:18px; }
.card .title{ font-size: 20px; margin:0 0 6px; color:#111; }
.card .desc{ font-size: 14px; color:#666; line-height:1.6; }

/* modal */
.modal{ position: fixed; inset:0; background: rgba(0,0,0,.92); display:flex; align-items:center; justify-content:center; padding:16px; z-index: 50; }
.modal.hidden{ display:none; }
.modal-content{ position:relative; width:min(100%, 1024px); max-height: 90vh; background:#fff; border-radius: 18px; overflow:hidden; }
.modal-grid{ display:grid; grid-template-columns: 1fr; height: 100%; }
@media (min-width: 1024px){ .modal-grid{ grid-template-columns: 1fr 1fr; } }
.media-area{ background:#000; display:flex; align-items:center; justify-content:center; min-height: 320px; }
.content-area{ padding:24px; display:flex; flex-direction:column; justify-content:center; }
.modal-title{ font-size:28px; margin:0 0 12px; }
.modal-desc{ color:#666; font-size:18px; line-height:1.6; margin:0 0 16px; }

.badge{ padding:6px 10px; background: var(--lavender-100); color: var(--lavender-800); border-radius: 999px; font-weight:600; text-transform:capitalize; }
.counter{ color:#666; font-size: 14px; }

.icon-btn{ position:absolute; top:12px; right:12px; width:40px; height:40px; border-radius:50%; background: rgba(255,255,255,.95); border:none; display:grid; place-items:center; cursor:pointer; }
.icon-btn.close{ top:12px; right:12px; }
.nav-btn{ position:absolute; top:50%; transform: translateY(-50%); width:48px; height:48px; border-radius:50%; background: rgba(255,255,255,.95); border:none; display:grid; place-items:center; cursor:pointer; }
.nav-btn.prev{ left:12px; }
.nav-btn.next{ right:12px; }

/* utilities */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0, 0, 1px, 1px); border:0; }