/* Basic grid */
.mwe-video-gallery-wrap { max-width:1200px; margin:60px auto; padding:0 20px; }
.mwe-video-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:30px; align-items:start; }
.mwe-video-card { text-align:center; }
.mwe-thumb { position:relative; overflow:hidden; background:#000; border-radius:2px; }
.mwe-thumb img { width:100%; height:220px; object-fit:cover; display:block; }
.mwe-play-overlay { position:absolute; left:0; right:0; top:0; bottom:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.mwe-play-icon { width:84px; height:56px; background:rgba(255,0,0,0.95); border-radius:12px; clip-path: polygon(30% 20%, 70% 50%, 30% 80%); box-shadow:0 6px 18px rgba(0,0,0,0.35); }
.mwe-video-title { display:block; margin-top:12px; color:#6b2f2f; text-decoration:none; font-family: 'Helvetica Neue', Arial; }

/* Pagination */
.mwe-video-pagination { text-align:center; margin:30px 0; }
.mwe-video-pagination .page-numbers { display:inline-block; padding:8px 12px; border:1px solid #ddd; border-radius:6px; margin:0 4px; }

/* Modal */
.mwe-modal { display:none; position:fixed; inset:0; z-index:99999; }
.mwe-modal[aria-hidden="false"] { display:block; }
.mwe-modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.85); }
.mwe-modal-inner { position:relative; max-width:980px; margin:60px auto; z-index:100000; background:transparent; padding:0 20px; }
.mwe-close { position:absolute; right:0; top:-40px; background:transparent; color:#fff; border:0; font-size:38px; cursor:pointer; }
.mwe-player-wrap { background:#000; border-radius:4px; overflow:hidden; padding-top:56.25%; position:relative; } /* 16:9 */
#mwe-player { position:absolute; left:0; right:0; top:0; bottom:0; }

/* Thumbnail strip inside modal */
.mwe-thumb-strip { margin-top:12px; display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; }
.mwe-thumb-strip .mwe-mini { flex:0 0 160px; cursor:pointer; opacity:.85; }
.mwe-thumb-strip .mwe-mini img { width:100%; height:90px; object-fit:cover; display:block; border-radius:2px; }
.mwe-thumb-strip .mwe-mini.active { outline:3px solid #e63b3b; opacity:1; }

/* Responsive */
@media (max-width:900px) {
  .mwe-video-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width:560px) {
  .mwe-video-grid { grid-template-columns: 1fr; }
  .mwe-thumb img { height:180px; }
}

.mwe-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; }
.mwe-modal[aria-hidden="false"] { display: block; }
.mwe-modal-backdrop { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); backdrop-filter: blur(5px); }
.mwe-modal-inner { position: relative; width: 90%; max-width: 1200px; height: 80vh; margin: 5vh auto; background: #000; border-radius: 12px; overflow: hidden; z-index: 10000; display: flex; flex-direction: column; }
.mwe-close { position: absolute; top: 15px; right: 15px; background: rgba(0,0,0,0.7); border: none; color: white; font-size: 28px; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; z-index: 10001; display: flex; align-items: center; justify-content: center; transition: background 0.3s; }
.mwe-close:hover { background: rgba(255,0,0,0.8); }
.mwe-player-wrap { flex: 1; position: relative; background: #000; }
#mwe-player { width: 100%; height: 100%; }
#mwe-player iframe { width: 100%; height: 100%; display: block; }
.mwe-thumb-strip { display: flex; padding: 15px; gap: 10px; overflow-x: auto; background: #111; border-top: 1px solid #333; }
.mwe-mini { flex: 0 0 auto; width: 120px; height: 80px; cursor: pointer; border: 2px solid transparent; border-radius: 4px; overflow: hidden; transition: all 0.3s; }
.mwe-mini:hover { border-color: #666; transform: scale(1.05); }
.mwe-mini.active { border-color: #ff0000; transform: scale(1.05); }
.mwe-mini img { width: 100%; height: 100%; object-fit: cover; }
.mwe-video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 20px; margin-bottom: 30px; }
.mwe-video-card { cursor: pointer; transition: transform 0.3s; }
.mwe-video-card:hover { transform: translateY(-5px); }
.mwe-thumb { position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 16/9; }
.mwe-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mwe-play-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; transition: background 0.3s; }
.mwe-video-card:hover .mwe-play-overlay { background: rgba(0,0,0,0.5); }
.mwe-play-icon { width: 60px; height: 60px; background: #ff0000; border-radius: 50%; position: relative; transition: transform 0.3s; }
.mwe-play-icon::before { content: ''; position: absolute; top: 50%; left: 55%; transform: translate(-50%,-50%); border-left: 15px solid white; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.mwe-video-card:hover .mwe-play-icon { transform: scale(1.1); }
.mwe-video-title { display: block; margin-top: 10px; font-weight: 600; color: #333; text-decoration: none; line-height: 1.4; }
.mwe-video-title:hover { color: #ff0000; }
.mwe-video-pagination { display: flex; justify-content: center; gap: 5px; margin-top: 30px; }
.mwe-video-pagination a, .mwe-video-pagination span { padding: 8px 15px; border: 1px solid #ddd; text-decoration: none; color: #333; border-radius: 4px; }
.mwe-video-pagination a:hover { background: #f0f0f0; }
.mwe-video-pagination .current { background: #333; color: white; border-color: #333; }
body.mwe-modal-open { overflow: hidden; }