/* ─── Video Scroll Section ───────────────────────────────────────────────────
   Layout and animation only. Font size, family, and colour are set at theme level.
   ─────────────────────────────────────────────────────────────────────────── */

.vss-wrapper {
    position: relative;
    width: 100%;
}

/* ─── Inline text + video block ──────────────────────────────────────────── */

.vss-text {
    /* Inline flow so words and pill videos sit on the same baseline */
    display: block;
    line-height: inherit;
}

/* ── Words ────────────────────────────────────────────────────────────────── */

.vss-word {
    display: inline;
    opacity: 0.2;
    transition: opacity 0.4s ease;
    will-change: opacity;
}

.vss-word.is-visible {
    opacity: 1;
}

/* ── Inline pill video ────────────────────────────────────────────────────── */

.vss-video-item {
    display: inline-block;
    position: relative;
    /* Height is tied to the current font size so pills scale with text */
    width: 120px;
    height: 66px;
    border-radius: 999px;
    overflow: hidden;
    vertical-align: middle;
    cursor: pointer;
    text-decoration: none;
    /* A tiny margin so the pill breathes between adjacent words */
    margin: 0 0.15em;
    flex-shrink: 0;
    opacity: 0.2;
    transition: opacity 0.4s ease;
    will-change: opacity;
}

.vss-video-item.is-visible {
    opacity: 1;
}

.vss-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

/* Loading placeholder — subtle tint until video is ready */
.vss-video-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: currentColor;
    opacity: 0.12;
    z-index: 1;
    transition: opacity 0.4s ease;
    pointer-events: none;
    border-radius: inherit;
}

.vss-video-item.is-loaded::before {
    opacity: 0;
}

/* ── Hover overlay ────────────────────────────────────────────────────────── */

.vss-video-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #364940;
    opacity: 0;
    z-index: 2;
    transition: opacity 0.25s ease;
    pointer-events: none;
    border-radius: inherit;
}

.vss-video-item:hover::after {
    opacity: 0.5;
}

@media (max-width: 768px) {
    .vss-video-item {
        width: 90px;
        height: 50px;
    }
}

@media (max-width: 480px) {
    .vss-video-item {
        width: 72px;
        height: 40px;
    }
}