/* ═══════════════════════════════════════════════════
   AWE Videos — Shared CSS · List + Detail
   Path: /templates/stcam/css/awe-videos.css
   Colors matched to working detail page design
   ═══════════════════════════════════════════════════ */

/* ── LIST PAGE ──────────────────────────────────────── */

.vg { max-width: 1400px; margin: 0 auto; padding: 24px 20px 40px; }

.vg__header {
    background: linear-gradient(135deg, rgba(233,30,140,.08), rgba(233,30,140,.04));
    border: 1px solid rgba(233,30,140,.12);
    border-radius: 10px;
    padding: 16px 24px;
    margin-bottom: 20px;
}
.vg__h1 {
    font-size: 18px;
    color: #2d1020; font-weight: 800;
    font-family: 'Montserrat', sans-serif;
    margin: 0 0 8px;
}
.vg__h1 i { color: #f48fb1; margin-right: 8px; }
.vg__subtitle { font-size: 14px; color: #6d3050; margin: 0; }

.vg__search{margin:0 0 20px}
.vg__search-wrap{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #ddd;border-radius:8px;padding:10px 16px;width:100%}
.vg__search-wrap i{color:#aaa;font-size:14px}
.vg__search-wrap input{flex:1;background:none;border:none;outline:none;color:#333;font-size:14px;font-family:inherit}
.vg__search-wrap input::placeholder{color:#aaa}
.vg__search-wrap:focus-within{border-color:#e91e8c;box-shadow:0 0 0 2px rgba(233,30,140,.1)}
.vg__search-clear{color:#aaa;font-size:14px;text-decoration:none}
.vg__search-clear:hover{color:#e91e8c}
.vg__search-info{color:#888;font-size:13px;margin:0 0 16px}
.vg__search-info a{color:#e91e8c;text-decoration:none;margin-left:8px}
.vg__search-info a:hover{text-decoration:underline}

.vg__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px; margin-bottom: 32px;
}

.vg__card {
    display: block; text-decoration: none;
    background: #fff;
    border: 1px solid rgba(233,30,140,.1);
    border-radius: 12px; overflow: hidden;
    transition: transform .2s, box-shadow .2s, border-color .2s;
    box-shadow: 0 1px 4px rgba(233,30,140,.08);
}
.vg__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 28px rgba(233,30,140,.2);
    border-color: rgba(233,30,140,.35);
}

.vd-card--fhg{background:linear-gradient(135deg,rgba(233,30,140,.12),rgba(194,24,91,.06));border:1px solid rgba(233,30,140,.3);border-radius:12px;text-align:center;box-shadow:0 1px 4px rgba(233,30,140,.08)}


.vg__thumb {
    position: relative; aspect-ratio: 16/9;
    overflow: hidden; background: #fce4ec;
}
.vg__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.vg__card:hover .vg__thumb img { transform: scale(1.05); }

.vg__play {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.3); opacity: 0; transition: opacity .25s;
}
.vg__card:hover .vg__play { opacity: 1; }
.vg__play i {
    width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(233,30,140,.85); color: #fff; font-size: 18px;
    border-radius: 50%; box-shadow: 0 4px 15px rgba(233,30,140,.4);
}

.vg__badge-hd {
    position: absolute; top: 10px; left: 10px;
    padding: 3px 8px; border-radius: 4px;
    background: #3b82f6; color: #fff;
    font-size: 10px; font-weight: 800; letter-spacing: .5px;
}
.vg__time {
    position: absolute; bottom: 10px; right: 10px;
    padding: 3px 8px; border-radius: 4px;
    background: rgba(0,0,0,.8); color: #fff;
    font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
}

.vg__body { padding: 14px 16px 16px; }
.vg__title {
    font-size: 14px; font-weight: 700; color: #2d1020;
    margin: 0 0 8px; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vg__performer {
    font-size: 12px; color: #e91e8c; font-weight: 600;
    display: flex; align-items: center; gap: 5px;
}
.vg__performer i { font-size: 11px; }

.vg__pager {
    display: flex; align-items: center; justify-content: center;
    gap: 6px; margin: 28px 0; flex-wrap: wrap;
}
.vg__page {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 38px; height: 38px; padding: 0 10px;
    border-radius: 8px; background: #fff;
    border: 1px solid rgba(233,30,140,.15);
    color: #6d3050; text-decoration: none;
    font-size: 13px; font-weight: 600; transition: all .15s;
    box-shadow: 0 1px 4px rgba(233,30,140,.08);
}
.vg__page:hover { border-color: #e91e8c; color: #e91e8c; }
.vg__page--on { background: #e91e8c; color: #fff; border-color: #e91e8c; }
.vg__page-info { color: #a06070; font-size: 12px; margin-left: 10px; }

.vg__empty { text-align: center; padding: 80px 20px; color: #a06070; }
.vg__empty i { font-size: 56px; display: block; margin-bottom: 16px; color: #f48fb1; }

.vg__seo {
    margin-top: 36px; padding: 28px;
    background: rgba(233,30,140,.03);
    border: 1px solid rgba(233,30,140,.08);
    border-radius: 12px;
}
.vg__seo h2 { font-size: 18px; font-weight: 700; color: #2d1020; margin: 0 0 14px; }
.vg__seo p { color: #6d3050; font-size: 14px; line-height: 1.8; margin: 0 0 14px; }
.vg__seo p:last-child { margin-bottom: 0; }


/* ── DETAIL PAGE ────────────────────────────────────── */

.vd-wrap { max-width: 1400px; margin: 0 auto; padding: 20px 16px 40px; }

.vd-breadcrumb {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: #888; margin-bottom: 20px; flex-wrap: wrap;
}
.vd-breadcrumb a { color: #9f4242; text-decoration: none; }
.vd-breadcrumb a:hover { color: #ff4eaa; }
.vd-breadcrumb i { font-size: 10px; color: #555; }
.vd-breadcrumb span { color: #9f4242; }

.vd-grid { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }

.vd-player {
    background: #000; border-radius: 12px; overflow: hidden;
    margin-bottom: 20px; aspect-ratio: 16/9; min-height: 500px;
    box-shadow: 0 12px 40px rgba(0,0,0,.5); position: relative;
}
.vd-player iframe, .vd-player > div { width: 100% !important; height: 100% !important; border: 0; display: block; }

.vd-header { margin-bottom: 24px; }
.vd-title { font-size: 18px; font-weight: 700; color: #e21d83; margin: 0 0 12px; line-height: 1.3; }

.vd-meta {
    display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
    color: #999; font-size: 14px;
}
.vd-meta__performer {
    display: inline-flex; align-items: center; gap: 6px;
    color: #e91e8c; font-weight: 700; text-decoration: none; padding: 4px 0;
}
.vd-meta__performer:hover { color: #ff4eaa; }
.vd-meta__performer i { font-size: 18px; }
.vd-meta__item { display: inline-flex; align-items: center; gap: 6px; }

.vd-badge { padding: 3px 10px; border-radius: 4px; font-size: 11px; font-weight: 700; letter-spacing: .5px; }
.vd-badge--hd { background: #3b82f6; color: #fff; }

.vd-section {
    background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.05);
    border-radius: 12px; padding: 20px; margin-bottom: 16px;
}
.vd-section__title {
    font-size: 15px; color: #e21d83; margin: 0 0 14px; font-weight: 600;
    display: flex; align-items: center; gap: 8px;
}
.vd-section__title i { color: #e91e8c; }
.vd-desc { font-size: 13px; line-height: 1.75; color: #6d3050; margin: 0; }
.vd-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.vd-tag {
    padding: 6px 12px; background: rgba(233,30,140,.08);
    border: 1px solid rgba(233,30,140,.2); color: #e91e8c;
    border-radius: 16px; font-size: 12px; text-decoration: none; transition: all .2s;
}
.vd-tag:hover { background: rgba(233,30,140,.18); color: #ff4eaa; transform: translateY(-1px); }

.vd-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.vd-gallery__item {
    aspect-ratio: 16/9; border-radius: 8px; overflow: hidden;
    cursor: pointer; transition: transform .2s;
}
.vd-gallery__item:hover { transform: scale(1.04); }
.vd-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; }

.vd-sidebar { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 20px; }

.vd-card {
    background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.06);
    border-radius: 12px; padding: 20px;
}
.vd-card__title {
    font-size: 14px; color: #e21d83; margin: 0 0 12px; font-weight: 600;
    display: flex; align-items: center; gap: 8px;
}
.vd-card__title i { color: #e91e8c; }

.vd-card--performer {
    background: linear-gradient(135deg, rgba(233,30,140,.12), rgba(194,24,91,.06));
    border-color: rgba(233,30,140,.3); text-align: center;
}
.vd-card__header {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; background: rgba(255,0,80,.15);
    border-radius: 20px; font-size: 11px; font-weight: 700;
    color: #ff4eaa; letter-spacing: .5px; margin-bottom: 12px;
}
.vd-card__icon { animation: vd-pulse 1.5s ease-in-out infinite; }
@keyframes vd-pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

.vd-card__name { font-size: 22px; color: #e21d83; margin: 0 0 8px; font-weight: 700; }
.vd-card__desc { color: #aaa; font-size: 13px; line-height: 1.5; margin: 0 0 16px; }

.vd-card__btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; width: 100%; padding: 12px 20px;
    background: linear-gradient(135deg, #e91e8c, #c2185b);
    color: #fff; text-decoration: none; border-radius: 8px;
    font-size: 14px; font-weight: 700; transition: all .2s;
}
.vd-card__btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(233,30,140,.4); color: #fff; }

.vd-info-list { display: flex; flex-direction: column; gap: 10px; }
.vd-info-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.04); font-size: 13px;
}
.vd-info-row:last-child { border-bottom: 0; }
.vd-info-row__label { color: #888; }
.vd-info-row__value { color: #e21d83; font-weight: 600; }

.vd-back {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px; color: #888; text-decoration: none; font-size: 13px;
    padding: 10px 16px; border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px; transition: all .2s;
}
.vd-back:hover { border-color: #e91e8c; color: #e91e8c; }

.vd-404 { text-align: center; padding: 80px 20px; color: #888; }
.vd-404 i { font-size: 64px; display: block; margin-bottom: 16px; color: #555; }
.vd-404 h1 { font-size: 26px; color: #e21d83; margin: 0 0 8px; }
.vd-btn-primary {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 12px 24px; background: #e91e8c; color: #fff;
    text-decoration: none; border-radius: 8px; margin-top: 16px; font-weight: 600;
}

.vd-lightbox {
    position: fixed; inset: 0; background: rgba(0,0,0,.92);
    z-index: 9999; display: none; align-items: center; justify-content: center;
}
.vd-lightbox.active { display: flex; }
.vd-lightbox img { max-width: 95%; max-height: 95%; object-fit: contain; }
.vd-lightbox__close {
    position: absolute; top: 20px; right: 30px;
    color: #fff; font-size: 40px; cursor: pointer; line-height: 1;
}

/* ─── Category & Tag Filter Pills ─────────────────────────────────────────── */
.vg__filters{margin:0 0 20px;display:flex;flex-direction:column;gap:10px}
.vg__filter-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.vg__filter-label{font-size:12px;font-weight:700;color:#999;min-width:90px;display:flex;align-items:center;gap:5px}
.vg__filter-label i{font-size:11px}
.vg__pills{display:flex;gap:6px;flex-wrap:wrap}
.vg__pill{display:inline-flex;align-items:center;gap:4px;padding:5px 14px;border-radius:20px;font-size:12px;font-weight:600;text-decoration:none;background:#f5f5f5;color:#666;border:1px solid rgba(0,0,0,.06);transition:all .15s}
.vg__pill:hover{background:#fce4ec;color:#e91e8c;border-color:rgba(233,30,140,.2)}
.vg__pill--on{background:#e91e8c;color:#fff;border-color:#e91e8c}
.vg__pill--on:hover{background:#c2185b;color:#fff;border-color:#c2185b}
.vg__pill--more{background:transparent;color:#999;border:1px dashed #ddd;font-weight:500}
.vg__pill--more:hover{color:#e91e8c;border-color:#e91e8c}
.vg__pill--more i{font-size:10px}
.vg__pill-count{font-size:10px;background:rgba(0,0,0,.08);padding:1px 6px;border-radius:10px}
.vg__pill--on .vg__pill-count{background:rgba(255,255,255,.25)}
.vg__clear-filters{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:#dc2626;text-decoration:none;padding:4px 0}
.vg__clear-filters:hover{color:#b91c1c;text-decoration:underline}

/* ─── Browse Pages (categories & tags overview) ───────────────────────────── */
.vg__browse-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-bottom:24px}
.vg__browse-card{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:10px;text-decoration:none;color:#333;transition:all .15s}
.vg__browse-card:hover{border-color:rgba(233,30,140,.3);background:#fce4ec;transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.06)}
.vg__browse-card__name{font-size:14px;font-weight:600}
.vg__browse-card__count{font-size:12px;color:#999;background:#f5f5f5;padding:2px 10px;border-radius:12px}
.vg__browse-card:hover .vg__browse-card__count{background:rgba(233,30,140,.15);color:#e91e8c}


/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 900px) {
    .vd-grid { grid-template-columns: 1fr; }
    .vd-sidebar { position: static; }
    .vd-title { font-size: 20px; }
    .vd-player { min-height: 280px; }
    .vd-gallery { grid-template-columns: repeat(2, 1fr); }
	.vd-player { min-height: 0; }
}
@media (max-width: 640px) {
    .vg__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .vg__header { padding: 20px; }
    .vg__h1 { font-size: 22px; }
    .vg__body { padding: 10px 12px 12px; }
    .vg__title { font-size: 13px; }
}