.histories-video-element { position: relative; --hv-cols: 3; } .histories-video-element[data-columns="2"] { --hv-cols: 2; } .histories-video-element[data-columns="4"] { --hv-cols: 4; } /* dekoratory SVG — przeniesione do przez JS, position: fixed = dokładnie krawędź okna; JS przelicza `top` przy scrollu, więc dekorator trzyma się elementu w pionie */ .histories-video__decor { position: fixed; z-index: -1; /* pod treścią strony (kafelkami), nad białym tłem body */ pointer-events: none; max-width: 16vw; height: auto; } .histories-video__decor--1 { left: 0; } /* lewa krawędź ekranu */ .histories-video__decor--2 { right: 0; } /* prawa krawędź ekranu */ /* ---------- GRID (pionowe kafelki 270x480, kontener 1140, space-between) ---------- */ .histories-video__grid { position: relative; z-index: 1; /* nad dekoratorami */ display: grid; /* kolumna = szerokość opisu (328px); wideo (270px) centrowane w kolumnie */ grid-template-columns: repeat(var(--hv-cols), minmax(0, 328px)); justify-content: space-between; column-gap: clamp(12px, 1.8vw, 20px); /* odstępy maleją na RWD */ row-gap: 72px; width: 100%; max-width: 1140px; margin: 0 auto; } .histories-video__tile { margin: 0; } .histories-video__media { position: relative; width: 100%; max-width: 186px; /* kafelek na stronie: 186x332 */ margin: 0 auto; /* wideo wyśrodkowane w kolumnie (i przy 1 kolumnie na wąskim ekranie) */ aspect-ratio: 186 / 332; overflow: hidden; background: #000; cursor: pointer; } .histories-video__video { width: 100%; height: 100%; object-fit: cover; display: block; } /* przycisk play */ .histories-video__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s ease, opacity 0.2s ease; } .histories-video__play svg { width: 26px; height: 26px; fill: #fff; } .histories-video__play img { width: 28px; height: 28px; display: block; } /* własna ikona — bez tła kółka, większa */ .histories-video__play--custom { background: transparent; width: auto; height: auto; } .histories-video__play--custom img { width: 72px; height: 72px; } /* na hover chowamy ikonę play tylko w gridzie (czysty podgląd); slider nie reaguje na hover */ .histories-video-element .histories-video__media:hover .histories-video__play { opacity: 0; pointer-events: none; } /* gdy gra z dźwiękiem (sterowanie natywne) — chowamy play */ .histories-video__media.is-playing .histories-video__play { display: none; } .histories-video__desc { max-width: 328px; margin: 12px auto 0; color: #000; text-align: center; font-family: "Gill Sans Nova", "gill-sans-nova", Helvetica, Verdana, sans-serif; font-size: 16px; font-style: normal; font-weight: 500; line-height: normal; } .histories-video__desc p { margin: 0; color: inherit; text-align: inherit; font: inherit; } /* ---------- MODAL / SLIDER ---------- */ body.histories-video-modal-open { overflow: hidden; } .histories-video__modal[hidden] { display: none; } .histories-video__modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; cursor: pointer; /* obszar zamykający (tło) — wskazuje klikalność */ } .histories-video__modal-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.9); } .histories-video__modal-dialog { position: relative; z-index: 1; width: 100%; padding: 0 16px; display: flex; align-items: center; justify-content: center; gap: 16px; } .histories-video__modal-stage { display: flex; align-items: center; justify-content: center; gap: 24px; } /* slider = jedno wideo naraz (bez podglądu sąsiadów) */ .histories-video__slide { position: relative; flex: 0 0 auto; } .histories-video__modal .histories-video__media { width: auto; max-width: none; margin: 0; } .histories-video__slide--active .histories-video__media { height: min(524px, 86vh); /* slider: 294x524 */ aspect-ratio: 294 / 524; } /* przyciski sterujące */ /* X w prawym górnym rogu aktualnego wideo (jest dzieckiem .histories-video__media) */ .histories-video__modal-close { position: absolute; top: 8px; right: 8px; z-index: 3; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.45); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; } .histories-video__modal-close svg { width: 22px; height: 22px; } .histories-video__modal-close img { width: 24px; height: 24px; display: block; } .histories-video__modal-close--custom { background: transparent; width: auto; height: auto; } .histories-video__modal-close--custom img { width: 44px; height: 44px; } .histories-video__modal-prev, .histories-video__modal-next { flex: 0 0 auto; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.15); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; } .histories-video__arrow-icon { display: inline-flex; } .histories-video__arrow-icon svg { width: 24px; height: 24px; } .histories-video__arrow-icon img { width: 24px; height: 24px; display: block; } /* lewa strzałka = ta sama ikona obrócona o 180° */ .histories-video__modal-prev .histories-video__arrow-icon { transform: rotate(180deg); } /* własna ikona strzałki — bez tła kółka, większa */ .histories-video__modal-arrow--custom { background: transparent; width: auto; height: auto; } .histories-video__modal-arrow--custom .histories-video__arrow-icon svg, .histories-video__modal-arrow--custom .histories-video__arrow-icon img { width: 48px; height: 48px; } @media (max-width: 1024px) { .histories-video-element[data-columns="4"] { --hv-cols: 3; } } @media (max-width: 768px) { .histories-video-element[data-columns="4"], .histories-video-element[data-columns="3"] { --hv-cols: 2; } .histories-video__grid { row-gap: 32px; } /* mobile: mniejszy odstęp między rzędami */ } @media (max-width: 480px) { .histories-video-element[data-columns] { --hv-cols: 1; } .histories-video__grid { justify-content: center; } /* jedna kolumna = kafelek wyśrodkowany */ }