/* ============================================================
   TMS VIDEO GALLERY + STRIP  v1.0
   ============================================================ */

/* ── PAGE BANNER ── */
.tms-page-banner {
    padding: 72px 0 56px;
    background: var(--color-navy, #0b1c3a);
    text-align: center;
}
.tms-page-banner .tms-section-label { justify-content: center; margin-bottom: 14px; color: var(--color-teal, #00C4B4); }
.tms-page-banner__title { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; color: #fff; margin-bottom: 14px; }
.tms-page-banner__desc  { font-size: 1.05rem; color: rgba(255,255,255,.72); max-width: 600px; margin: 0 auto; line-height: 1.7; }

/* ── FILTER BAR ── */
.tms-vg-filters {
    background: var(--color-white, #fff);
    border-bottom: 1px solid var(--color-gray-200, #e5e7eb);
    position: sticky;
    top: 72px;
    z-index: 40;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.tms-vg-filters__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 0;
}
.tms-vg-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    background: var(--color-gray-50, #f9fafb);
    border: 1px solid var(--color-gray-200, #e5e7eb);
    border-radius: 100px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-gray-600, #4b5563);
    cursor: pointer;
    transition: all .2s ease;
    white-space: nowrap;
}
.tms-vg-filter:hover    { border-color: var(--color-primary, #1A6FD8); color: var(--color-primary, #1A6FD8); background: #fff; }
.tms-vg-filter.is-active { background: var(--color-primary, #1A6FD8); border-color: var(--color-primary, #1A6FD8); color: #fff; }

/* ── VIDEO GRID ── */
.tms-vg-section { padding: 56px 0; }

.tms-vg__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
@media (max-width: 1024px) { .tms-vg__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .tms-vg__grid { grid-template-columns: 1fr; gap: 20px; } }

.tms-vg__card {
    background: var(--color-white, #fff);
    border: 1px solid var(--color-gray-200, #e5e7eb);
    border-radius: 16px;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}
.tms-vg__card:hover { transform: translateY(-5px); box-shadow: 0 16px 48px rgba(0,0,0,.1); }

/* Thumbnail */
.tms-vg__thumb {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--color-gray-100, #f3f4f6);
}
.tms-vg__thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
.tms-vg__card:hover .tms-vg__thumb img { transform: scale(1.05); }

.tms-vg__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(11,28,58,.4);
    backdrop-filter: blur(2px);
    transition: background .25s ease;
    border: none;
    cursor: pointer;
}
.tms-vg__card:hover .tms-vg__play { background: rgba(11,28,58,.6); }
.tms-vg__play i {
    font-size: 3.5rem;
    color: #fff;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.4));
    transition: transform .2s ease;
}
.tms-vg__card:hover .tms-vg__play i { transform: scale(1.15); }

.tms-vg__featured-badge {
    position: absolute;
    top: 12px; left: 12px;
    background: var(--color-teal, #00C4B4);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Body */
.tms-vg__body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.tms-vg__cat-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 100px;
    background: var(--color-blue-50, #eff6ff);
    color: var(--color-primary, #1A6FD8);
    margin-bottom: 10px;
    align-self: flex-start;
}
.tms-vg__title { font-size: 0.95rem; font-weight: 700; color: var(--color-gray-900, #111827); line-height: 1.35; margin-bottom: 8px; }
.tms-vg__desc  { font-size: 0.82rem; color: var(--color-gray-500, #6b7280); line-height: 1.6; margin-bottom: 16px; flex: 1; }
.tms-vg__watch-btn { align-self: flex-start; margin-top: auto; }

/* Empty state */
.tms-vg__empty {
    text-align: center;
    padding: 5rem 0;
    color: var(--color-gray-400, #9ca3af);
}
.tms-vg__empty i  { font-size: 3.5rem; display: block; margin-bottom: 16px; }
.tms-vg__empty p  { font-size: 1.05rem; font-weight: 600; margin-bottom: 6px; }
.tms-vg__empty small { font-size: 0.85rem; }

/* ── VIDEO STRIP (inline section) ── */
.tms-video-strip {
    background: var(--color-navy, #0b1c3a);
}
.tms-video-strip .tms-section-label { color: var(--color-teal, #00C4B4); justify-content: center; }
.tms-video-strip .tms-section-title { color: #fff; text-align: center; }
.tms-video-strip .tms-section-title em { color: var(--color-teal, #00C4B4); }
.tms-video-strip .tms-section-subtitle { color: rgba(255,255,255,.65); text-align: center; }

.tms-vs__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 40px;
}
@media (max-width: 900px) { .tms-vs__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .tms-vs__grid { grid-template-columns: 1fr; } }

.tms-vs__card {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.tms-vs__card:hover { transform: translateY(-5px); border-color: var(--color-teal, #00C4B4); box-shadow: 0 12px 40px rgba(0,196,180,.15); }

.tms-vs__thumb {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
}
.tms-vs__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.tms-vs__card:hover .tms-vs__thumb img { transform: scale(1.05); }

.tms-vs__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.35);
    border: none;
    cursor: pointer;
    transition: background .2s ease;
}
.tms-vs__card:hover .tms-vs__play { background: rgba(0,196,180,.35); }
.tms-vs__play i { font-size: 3rem; color: #fff; transition: transform .2s ease; }
.tms-vs__card:hover .tms-vs__play i { transform: scale(1.15); }

.tms-vs__info { padding: 16px 18px; }
.tms-vs__title { font-size: 0.88rem; font-weight: 700; color: #fff; line-height: 1.4; margin-bottom: 6px; }
.tms-vs__desc  { font-size: 0.78rem; color: rgba(255,255,255,.6); line-height: 1.55; }

.tms-vs__footer { text-align: center; }
.tms-vs__footer .tms-btn--outline {
    border-color: rgba(255,255,255,.35);
    color: #fff;
}
.tms-vs__footer .tms-btn--outline:hover {
    background: var(--color-teal, #00C4B4);
    border-color: var(--color-teal, #00C4B4);
    color: #fff;
}

/* ── MODAL LIGHTBOX ── */
.tms-vmodal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.tms-vmodal[hidden] { display: none; }

.tms-vmodal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(7,15,35,.92);
    backdrop-filter: blur(6px);
    cursor: pointer;
}
.tms-vmodal__wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 900px;
}
.tms-vmodal__close {
    position: absolute;
    top: -44px;
    right: 0;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    transition: background .2s ease;
}
.tms-vmodal__close:hover { background: rgba(255,255,255,.25); }
.tms-vmodal__title {
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255,255,255,.8);
    margin-bottom: 12px;
    padding-right: 44px;
    line-height: 1.4;
}
.tms-vmodal__frame {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 12px;
    background: #000;
    box-shadow: 0 24px 80px rgba(0,0,0,.6);
}
.tms-vmodal__frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
}

@media (max-width: 640px) {
    .tms-vg-filters { top: 60px; }
    .tms-vg-filters__inner { gap: 6px; }
    .tms-vg-filter { padding: 7px 14px; font-size: 0.78rem; }
    .tms-vmodal__close { top: -40px; }
}