/* SiteCapture Videos & Webinars — mirrors the /blog/ .post-item card
   pattern (see quiety-style_main.min.css) under an .scv- namespace so
   nothing collides with theme classes. */

.scv-section-title {
    margin: 0 0 20px;
}

.scv-empty-state {
    color: #777;
}

/* Card grid, matching /blog/'s breakpoints exactly */
.scv-posts-grid,
.scv-upcoming-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(1, 1fr);
}

@media (min-width: 768px) and (max-width: 1024px) {

    .scv-posts-grid,
    .scv-upcoming-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1025px) {

    .scv-posts-grid,
    .scv-upcoming-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* The whole card is clickable, but the only real interactive element is the
   title's <a class="scv-post-link">, stretched over the card by the ::after
   below. See scv_render_card() in includes/shortcodes.php for why the anchor
   doesn't just wrap the entire card. */
.scv-post-item {
    background: #fff;
    border-radius: 20px;
    padding: 0;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* #000C1E in every state, hover included — deliberately not
   var(--e-global-color-text), which resolves to a different colour on this
   site, and deliberately not changing on hover. The states are listed
   explicitly because the theme styles a:hover/:focus globally, and
   .scv-post-title .scv-post-link outscores those bare-element rules. */
.scv-post-title .scv-post-link,
.scv-post-title .scv-post-link:link,
.scv-post-title .scv-post-link:visited,
.scv-post-title .scv-post-link:hover,
.scv-post-title .scv-post-link:focus,
.scv-post-title .scv-post-link:active,
.scv-post-item:hover .scv-post-title .scv-post-link {
    color: #000C1E;
    text-decoration: none;
}

.scv-post-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 20px;
}

.scv-post-link:focus-visible::after {
    outline: 2px solid #175cff;
    outline-offset: 2px;
}

/* Fixed aspect ratio so every card's thumbnail is the same height
   regardless of source (WP featured image, YouTube's 4:3 sddefault.jpg,
   Vimeo's oEmbed thumbnail) or its native aspect ratio. The image itself
   is a background-image (background-size: cover, background-position:
   center center) on a separate absolutely-positioned .scv-post-thumbnail-bg
   layer rather than an <img>, so the hover zoom below can scale just that
   layer without also scaling the play icon/badges that share this
   container. */
.scv-post-thumbnail {
    display: block;
    overflow: hidden;
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 20px 20px 0 0;
}

.scv-post-thumbnail-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transition: transform .2s linear;
    border-bottom: 2px solid var(--e-global-color-ac04d2e)
}

.scv-post-item:hover .scv-post-thumbnail-bg {
    transform: scale(1.02);
}

.scv-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 56px;
    height: 56px;
    margin: -28px 0 0 -28px;
    border-radius: 50%;
    background: rgba(17, 17, 17, .65);
    pointer-events: none;
}

.scv-play-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 54%;
    width: 0;
    height: 0;
    margin: -9px 0 0 -6px;
    border-style: solid;
    border-width: 9px 0 9px 14px;
    border-color: transparent transparent transparent #fff;
}

/* Category / subtitle badges — top-right corner over the thumbnail,
   10px from the top and right edges. */
.scv-post-badges {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    z-index: 2;
}

.scv-post-category,
.scv-post-badge {
    padding: 5px 10px;
    border-radius: 3px;
    font-weight: 700;
    font-size: 12px;
    display: inline-block;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
    transition: background-color .2s linear;
}

.scv-post-category {
    background: #111;
    color: #fff;
}

.scv-post-item:hover .scv-post-category {
    background: #175cff;
}

.scv-post-badge {
    background: #fff;
    color: #175cff;
    border: 1px solid #175cff;
}

.scv-post-info {
    margin: 0;
    padding: 20px;
}

.scv-post-title {
    margin: 0 0 10px;
}

.scv-post-description {
    margin: 0;
}

.scv-post-speakers {
    margin: 8px 0 0;
    font-size: 14px;
    color: #777;
}

.scv-post-date {
    color: #111;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 6px;
    display: block;
}

.scv-readmore {
    display: inline-block;
    font-weight: 700;
    color: #175cff;
    margin-top: 10px;
}

/* Truncated description (2 lines) + "show more" tooltip.

   z-index lifts this above .scv-post-link::after, the transparent overlay
   that makes the whole card clickable. Without it the overlay would sit on
   top of the "i" toggle and every click on it would just follow the card
   link instead of opening the tooltip. */
.scv-post-description-wrap {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.scv-clamp-2 {
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.scv-desc-info {
    flex: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #bbb;
    background: none;
    color: #999;
    font-size: 10px;
    font-weight: 400;
    font-style: normal;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color .15s linear, color .15s linear;
}

.scv-desc-info:hover,
.scv-desc-info[aria-expanded="true"] {
    border-color: #175cff;
    color: #175cff;
}

.scv-tooltip {
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: 8px;
    width: 260px;
    max-width: 90vw;
    background: #111;
    color: #fff;
    padding: 12px 14px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.4;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
    z-index: 5;
}

.scv-tooltip.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* Upcoming banner */
.scv-upcoming {
    margin-bottom: 20px;
}

/* Featured hero block */
.scv-featured {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: 20px;
}

@media (min-width: 768px) {
    .scv-featured {
        grid-template-columns: 1.2fr 1fr;
    }
}

.scv-featured .scv-post-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* [sc_videos_tabs]: Webinars / Interviews / Demos filter over one grid */
.scv-tabs-nav {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 20px;
    padding: 0;
}

.scv-tabs-nav .scv-tab {
    padding: 10px 20px;
    border-radius: 3px;
    background: #f2f2f2;
    color: #111;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s linear, color .15s linear;
}

.scv-tabs-nav .scv-tab:hover,
.scv-tabs-nav .scv-tab.active {
    background: #175cff;
    color: #fff;
}

/* Each card's grid cell — a plain wrapper so hiding/showing individual
   cards lets CSS Grid reflow the remaining ones on its own; no masonry
   library needed. Fade timing/sequencing lives in sitecapture-videos.js. */
.scv-tab-item {
    height: 100%;
}

.scv-tab-pane {
    transition: opacity .18s ease;
    border-radius: 20px;
    border: 2px solid var(--e-global-color-ac04d2e);
}

.scv-tab-pane.scv-fade-out {
    opacity: 0;
}

.scv-tab-pane.scv-tab-hidden {
    display: none;
}

.scv-tab-empty {
    color: #777;
}


/* ==========================================================================
   Single video page — /videos/<slug>/ (templates/single-sc_video.php)

   The header and footer come from the theme via get_header()/get_footer(),
   so only the content column is styled here. 1140px matches the Elementor
   content width the rest of the site's pages lay out to.
   ========================================================================== */
.scv-single {
    padding: 40px 20px 60px;
}

.scv-single-inner {
    max-width: 1140px;
    margin: 0 auto;
}

/* Type, colour, and the arrow icon all come from the child theme's
   .hvr-link.back rules (quiety-child/style.css) — the same back link the
   case study pages use. Nothing is restyled here on purpose; only the
   spacing below it is ours. */
.scv-single-breadcrumb {
    margin-bottom: 20px;
}

.scv-single-header {
    max-width: 900px;
    margin: 0 auto 24px;
    text-align: center;
}

/* Static context here, unlike on a card where the badges are absolutely
   positioned over the thumbnail. The badge classes themselves are shared
   with the cards so the two never drift apart visually. */
.scv-single-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-bottom: 12px;
}

/* Scales between the mobile and desktop ends rather than stepping at a
   breakpoint — a video title runs long (the /videos/ grid has several past
   90 characters) and a fixed desktop size wraps to four lines on a phone.

   Scoped to .scv-single-header, not bare .scv-single-title, on purpose:
   Elementor's global kit styles h1 as `.elementor-kit-15 h1` (0,1,1), which
   outranks a lone class (0,1,0). A bare .scv-single-title rule is silently
   ignored and the title renders at the kit's size — 46px, even at a 375px
   viewport. Two classes (0,2,0) clear it without needing !important. */
.scv-single-header .scv-single-title {
    margin: 0 0 10px;
    font-size: clamp(30px, 4.2vw, 48px);
    line-height: 1.2;
}

.scv-single-date {
    margin: 0;
    color: #777;
    font-size: 14px;
    font-weight: 700;
}

.scv-single-player {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
    overflow: hidden;
    border-radius: 20px;
    background: #111;
    margin-bottom: 30px;
}

.scv-single-player iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* No provider/video ID set — the card thumbnail stands in for the player. */
.scv-single-player-empty .scv-post-thumbnail-bg {
    border-bottom: 0;
}

.scv-single-description {
    padding: 40px;
    background: var(--e-global-color-67faad7);
    border: 2px solid rgba(0, 0, 0, .03);
    border-radius: 10px;
    margin-bottom: 20px;
}

@media (max-width: 767px) {
    .scv-single-description {
        padding: 24px;
    }
}

.scv-single-description p {
    margin: 0 0 1em;
}

.scv-single-description p:last-child {
    margin-bottom: 0;
}

/* Nested inside .scv-single-description, so this only needs to separate
   itself from the intro copy above — the panel's own 40px padding supplies
   the space below it. */
.scv-single-speakers {
    margin: 26px 0 0;
}


.scv-speaker-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(1, 1fr);
}

@media (min-width: 768px) {
    .scv-speaker-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

.scv-speaker {
    padding: 14px 18px;
    border-radius: 12px;
    background: #fff;
}

.scv-speaker-name {
    display: block;
    font-weight: 700;
    color: #111;
}

.scv-speaker-title {
    display: block;
    font-size: 14px;
    color: #777;
}

.scv-single-related {
    margin-bottom: 0;
}

/* The related row reuses .scv-posts-grid, which is 3-up above 1025px. With
   at most 3 related videos that fills exactly one row. */
.scv-single-related .scv-post-item {
    border-radius: 20px;
    border: 2px solid var(--e-global-color-ac04d2e);
}