/**
 * wsccoursepromo – globális, oldalfüggetlen stílusok.
 * Csak azokon a CMS-oldalakon töltődik be, amelyekhez van aktív konfiguráció.
 *
 * Nézetváltás:
 *   - alapból a .wsc-promo-content rejtett, a .wsc-promo-buynow látszik;
 *   - ha a <html> elemen ott a .wsc-promo-active class (a modul JS-e / inline
 *     scriptje teszi rá egyező ?promo= paraméternél), a kettő felcserélődik.
 *
 * Szándékosan a <html> class-ra épül, nem inline display-re: így a szekció
 * megtartja a saját (Elementor által adott, pl. flex) display értékét, amikor
 * megjelenik.
 */

html:not(.wsc-promo-active) .wsc-promo-content {
    display: none !important;
}

html.wsc-promo-active .wsc-promo-buynow {
    display: none !important;
}

/* ------------------------------------------------------------------
 * Generikus videó-grid (a korábbi CustomTpl widget <style> blokkja helyett).
 * Használat a widgetben csak HTML-lel:
 *
 *   <div class="wsc-video-grid">
 *     <div class="wsc-video-item">
 *       <div class="wsc-video-frame"><iframe src="..." allowfullscreen></iframe></div>
 *       <div class="wsc-video-title">1. lecke – Bevezetés</div>
 *     </div>
 *     ...
 *   </div>
 * ------------------------------------------------------------------ */

.wsc-video-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin: 0 0 32px;
    padding: 0;
}

.wsc-video-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wsc-video-item {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.wsc-video-frame {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 */
    background: #000;
    border-radius: 6px;
    overflow: hidden;
}

.wsc-video-frame iframe,
.wsc-video-frame video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.wsc-video-title {
    margin-top: 10px;
    font-weight: 600;
    line-height: 1.35;
}

.wsc-video-desc {
    margin-top: 4px;
    font-size: 0.9em;
    opacity: 0.8;
}

@media (max-width: 991px) {
    .wsc-video-grid,
    .wsc-video-grid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}

@media (max-width: 575px) {
    .wsc-video-grid,
    .wsc-video-grid--3 {
        grid-template-columns: minmax(0, 1fr);
    }
}
