/* ============================================================
   MICHLOR, Video Section CSS
   Klasy: .mvid (sekcja na stronie glownej) + .mpage-videos /
   .mpage-video (komponent kafelka, uzywany tez na podstronach)

   Plik powstal 2026-09-02. Komponent kafelka mieszkal wczesniej
   w subpage.css, ale subpage.css NIE laduje sie na stronie glownej
   (warunek w custom-snippets/global-styles.php), a kafelki stoja teraz
   w obu miejscach. Zeby nie trzymac dwoch kopii tych samych regul,
   komponent wyprowadzony jest tutaj, a arkusz laduje sie globalnie.

   Kafelek to link do YouTube, nie osadzony odtwarzacz: iframe ciagnie
   ponad 600 kB skryptow i stawia ciasteczka Google, zanim ktokolwiek
   kliknie play. Miniatury leza na naszym serwerze jako WebP.
   ============================================================ */


/* ══════════════════════════════════════════════════════════
   SEKCJA NA STRONIE GLOWNEJ   (.mvid)
   Budowa i nazewnictwo jak w pozostalych sekcjach strony glownej
   (mfaq, mecow, mwhy): wlasne tlo, wlasny inner, wlasny naglowek.
   Nie opiera sie na .mpage-section ani .mpage-container, bo tamte
   przychodza ze snippetu WPCode i na stronie glownej nie sa pewne.
   ══════════════════════════════════════════════════════════ */

.mvid {
    position:         relative;
    background-color: var(--color-bg-deep);
    padding:          var(--space-lg) 0;
}

.mvid__inner {
    max-width: 1000px;
    margin:    0 auto;
    padding:   0 clamp(1.5rem, 4vw, 3rem);
}

.mvid__head {
    text-align:    center;
    margin-bottom: 2.5rem;
}

.mvid__overline {
    display:        inline-block;
    font-family:    var(--font-body);
    font-size:      0.72rem;
    font-weight:    500;
    letter-spacing: var(--letter-overline);
    text-transform: uppercase;
    color:          var(--color-accent);
    margin-bottom:  1rem;
    padding:        0.35rem 0.875rem;
    border:         1px solid var(--glass-border);
    border-radius:  var(--radius-pill);
    background:     var(--glass-bg);
}

.mvid__title {
    font-family:    var(--font-heading);
    font-size:      clamp(1.75rem, 3.5vw, 2.75rem);
    font-weight:    800;
    letter-spacing: var(--letter-heading);
    color:          var(--color-text);
    line-height:    1.15;
    margin:         0 0 0.875rem;
}

.mvid__lead {
    font-size:   0.9375rem;
    color:       var(--color-muted);
    line-height: var(--line-height-body);
    margin:      0 auto;
    max-width:   680px;
}

@media (max-width: 768px) {
    .mvid__title {
        font-size: 1.625rem;
    }
}


/* ══════════════════════════════════════════════════════════
   KAFELKI WIDEO Z YOUTUBE   (.mpage-videos / .mpage-video)
   Wdrozone 2026-09-02 na /realizacje/.

   Kafelek to zwykly link do YouTube, nie osadzony odtwarzacz. Powod:
   iframe YouTube ciagnie ponad 600 kB skryptow i stawia ciasteczka
   zanim ktokolwiek kliknie play. Miniatura jest u nas na serwerze
   (WebP, zalaczniki 425 i 426), wiec strona nie odpytuje Google
   przy samym wejsciu, a film otwiera sie w nowej karcie.
   ══════════════════════════════════════════════════════════ */

.mpage-videos {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   1.5rem;
    max-width:             900px;
    margin:                0;
}

@media (max-width: 760px) {
    .mpage-videos {
        grid-template-columns: 1fr;
    }
}

.mpage-video {
    display:         block;
    text-decoration: none;
    background:      rgba(255, 255, 255, 0.03);
    border:          1px solid var(--glass-border);
    border-radius:   var(--radius-md);
    overflow:        hidden;
    transition:      border-color var(--transition-fast), background var(--transition-fast);
}

.mpage-video:hover,
.mpage-video:focus-visible {
    background:   rgba(79, 163, 212, 0.05);
    border-color: rgba(79, 163, 212, 0.3);
}

.mpage-video__thumb {
    display:      block;
    position:     relative;
    aspect-ratio: 16 / 9;
    overflow:     hidden;
    background:   var(--color-bg-deep);
}

.mpage-video__thumb img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform 0.4s ease;
}

.mpage-video:hover .mpage-video__thumb img {
    transform: scale(1.04);
}

/* Znaczek play lezy NAD miniatura, zeby od razu bylo widac, ze to film */
.mpage-video__play {
    position:        absolute;
    inset:           0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      rgba(4, 16, 30, 0.22);
    transition:      background var(--transition-fast);
}

.mpage-video:hover .mpage-video__play {
    background: rgba(4, 16, 30, 0.08);
}

.mpage-video__play svg {
    width:  62px;
    height: 44px;
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));
}

.mpage-video__body {
    display: block;
    padding: 1rem 1.125rem 1.25rem;
}

.mpage-video__title {
    display:     block;
    font-size:   1rem;
    font-weight: 600;
    color:       var(--color-text);
    margin:      0 0 0.375rem;
    line-height: 1.35;
}

.mpage-video__meta {
    display:     flex;
    align-items: center;
    gap:         0.4rem;
    font-size:   0.8125rem;
    color:       var(--color-muted);
    margin:      0;
}

@media (max-width: 480px) {
    .mpage-video__play svg {
        width:  52px;
        height: 37px;
    }
}