/* DESKTOP-REALIZACJE.CSS v226 — czysty desktop strony /realizacje/. */

@media screen and (min-width:1200px) {
  :root {
    --d-real-container:var(--d-container,1200px);
    --d-real-title-height:92px;
    --d-real-banner-height:306px;
    --d-real-video-left:201px;
    --d-real-video-width:798px;
    --d-real-video-height:450px;
    --d-real-desc-left:20px;
    --d-real-desc-top:0px;
    --d-real-desc-width:1106px;
    --d-real-desc-min-height:64px;
    --d-real-desc-text-bottom:44px;
    --d-real-media-first-top:calc(var(--d-real-desc-text-bottom) + var(--d-gap-kafelek-kafelek,24px));
    --d-real-media-second-top:calc(var(--d-real-media-first-top) + var(--d-real-video-height) + var(--d-gap-kafelek-kafelek,24px));
    --d-real-media-third-top:calc(var(--d-real-media-second-top) + var(--d-real-video-height) + var(--d-gap-kafelek-kafelek,24px));
    --d-real-panel-automation-height:calc(var(--d-real-media-third-top) + var(--d-real-video-height) + var(--d-gap-kafelek-opis,12px));
    --d-real-panel-security-height:calc(var(--d-real-media-third-top) + var(--d-real-video-height) + var(--d-gap-kafelek-opis,12px));
    --d-real-panel-electrical-height:calc(var(--d-real-media-first-top) + var(--d-real-video-height) + var(--d-gap-kafelek-opis,12px));
    --d-real-section-automation-height:calc(var(--d-real-title-height) + var(--d-gap-kafelek-opis,12px) + var(--d-real-banner-height) + var(--d-gap-kafelek-opis,12px) + var(--d-real-panel-automation-height));
    --d-real-section-security-height:calc(var(--d-real-title-height) + var(--d-gap-kafelek-opis,12px) + var(--d-real-banner-height) + var(--d-gap-kafelek-opis,12px) + var(--d-real-panel-security-height));
    --d-real-section-electrical-height:calc(var(--d-real-title-height) + var(--d-gap-kafelek-opis,12px) + var(--d-real-banner-height) + var(--d-gap-kafelek-opis,12px) + var(--d-real-panel-electrical-height));
    --d-real-title-bg:var(--d-page-title-bg);
    --d-real-panel-bg:var(--d-page-panel-bg);
    --d-real-card-bg:rgba(4,9,16,.94);
    --d-real-border:var(--d-page-border);
    --d-real-text:var(--d-page-text);
    --d-real-muted:var(--d-page-muted);
    --d-real-radius:var(--d-page-radius);
    --d-real-radius-small:var(--d-page-radius-small);
    --d-real-shadow:var(--d-page-shadow);
    --d-real-shadow-strong:var(--d-page-shadow);
    --d-real-font:var(--d-page-font);
  }

  body .realizacje-page {
    display:block;
    margin:0;
    padding-bottom:0;
    background:transparent;
    color:var(--d-real-text);
    font-family:var(--d-real-font);
  }

  body .realizacje-page *,
  body .realizacje-page *::before,
  body .realizacje-page *::after {
    box-sizing:border-box;
  }

  body .realizacje-page .seo-visually-hidden {
    position:absolute;
    width:1px;
    height:1px;
    margin:-1px;
    padding:0;
    overflow:hidden;
    clip:rect(0 0 0 0);
    clip-path:inset(50%);
    white-space:nowrap;
    border:0;
  }

  body .realizacje-page .realizacje-canvas {
    width:var(--d-real-container);
    margin:0 auto;
    padding:0;
  }

  body .realizacje-page .real-webwave-section {
    position:relative;
    width:var(--d-real-container);
    margin:0;
    padding:0;
  }

  body .realizacje-page .real-webwave-section + .real-webwave-section {
    margin-top:var(--d-gap-kafelek-kafelek,24px);
  }

  body .realizacje-page .real-section-automation {
    height:var(--d-real-section-automation-height);
  }

  body .realizacje-page .real-section-security {
    height:var(--d-real-section-security-height);
  }

  body .realizacje-page .real-section-electrical {
    height:var(--d-real-section-electrical-height);
  }

  body .realizacje-page .real-title-box {
    position:relative;
    width:var(--d-real-container);
    height:var(--d-real-title-height);
    min-height:var(--d-real-title-height);
    margin:0;
    padding:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:var(--d-real-title-bg);
    border:1px solid var(--d-real-border);
    border-radius:var(--d-real-radius);
    box-shadow:var(--d-real-shadow);
    color:var(--d-real-text);
    font-family:var(--d-real-font);
    font-size:42px;
    line-height:50px;
    font-weight:800;
    letter-spacing:-.4px;
    text-align:center;
  }

  body .realizacje-page .real-title-box::before {
    content:"";
    position:absolute;
    inset:-1px;
    background:radial-gradient(circle at 50% 0, rgba(47,140,255,.13), transparent 46%);
    pointer-events:none;
  }

  body .realizacje-page .real-title-box::after {
    content:none;
  }

  body .realizacje-page .real-banner {
    width:var(--d-real-container);
    height:var(--d-real-banner-height);
    margin-top:var(--d-gap-kafelek-opis,12px);
    overflow:hidden;
    background-color:var(--d-real-card-bg);
    background-repeat:no-repeat;
    background-position:50% 50%;
    background-size:cover;
    border:1px solid var(--d-real-border);
    border-radius:var(--d-real-radius);
    box-shadow:var(--d-real-shadow-strong);
  }

  body .realizacje-page .real-banner-automation {
    background-image:url("/assets/img/realizacje-bg/sterowanie-bg.webp");
  }

  body .realizacje-page .real-banner-security {
    background-image:url("/assets/img/realizacje-bg/cctv-bg.webp");
  }

  body .realizacje-page .real-banner-electrical {
    background-image:url("/assets/img/realizacje-bg/instalacje-bg.webp");
  }

  body .realizacje-page .real-media-panel {
    position:relative;
    width:var(--d-real-container);
    margin-top:var(--d-gap-kafelek-opis,12px);
    overflow:hidden;
    background:var(--d-real-panel-bg);
    border:1px solid var(--d-real-border);
    border-radius:var(--d-real-radius);
    box-shadow:var(--d-real-shadow);
    color:var(--d-real-text);
  }

  body .realizacje-page .real-section-automation .real-media-panel {
    height:var(--d-real-panel-automation-height);
  }

  body .realizacje-page .real-section-security .real-media-panel {
    height:var(--d-real-panel-security-height);
  }

  body .realizacje-page .real-section-electrical .real-media-panel {
    height:var(--d-real-panel-electrical-height);
  }

  body .realizacje-page .real-description {
    position:absolute;
    left:var(--d-real-desc-left);
    top:var(--d-real-desc-top);
    z-index:5;
    width:var(--d-real-desc-width);
    max-width:var(--d-real-desc-width);
    min-height:var(--d-real-desc-min-height);
    margin:0;
    padding:20px;
    color:var(--d-real-muted);
    font-family:var(--d-real-font);
    font-size:17px;
    line-height:24px;
    font-weight:400;
    text-align:left;
    background:transparent;
    border:0;
    box-shadow:none;
  }

  body .realizacje-page .real-video,
  body .realizacje-page .real-gallery {
    position:absolute;
    left:var(--d-real-video-left);
    width:var(--d-real-video-width);
    height:var(--d-real-video-height);
    max-width:var(--d-real-video-width);
    max-height:var(--d-real-video-height);
    overflow:hidden;
    background:#000;
    border:1px solid var(--d-real-border);
    border-radius:var(--d-real-radius-small);
    box-shadow:0 12px 28px rgba(0,0,0,.26);
  }

  body .realizacje-page .real-section-automation .real-video-1,
  body .realizacje-page .real-section-security .real-video-1,
  body .realizacje-page .real-section-electrical .real-gallery {
    top:var(--d-real-media-first-top);
  }

  body .realizacje-page .real-section-automation .real-video-2,
  body .realizacje-page .real-section-security .real-video-2 {
    top:var(--d-real-media-second-top);
  }

  body .realizacje-page .real-section-automation .real-video-3 {
    top:var(--d-real-media-third-top);
  }

  body .realizacje-page .real-section-security .real-gallery {
    top:var(--d-real-media-third-top);
  }

  body .realizacje-page .youtube-lite,
  body .realizacje-page .youtube-lite img,
  body .realizacje-page .ww-gallery,
  body .realizacje-page .ww-gallery-stage,
  body .realizacje-page .ww-gallery-slide,
  body .realizacje-page .ww-gallery-slide img {
    width:100%;
    height:100%;
  }

  body .realizacje-page .youtube-lite {
    position:relative;
    display:block;
    padding:0;
    border:0;
    background:#000;
    cursor:pointer;
  }

  body .realizacje-page .youtube-lite img,
  body .realizacje-page .ww-gallery-slide img {
    display:block;
    object-fit:contain;
    background:#000;
  }

  body .realizacje-page .real-video iframe,
  body .realizacje-page .youtube-lite iframe,
  body .realizacje-page iframe[src*="youtube.com"],
  body .realizacje-page iframe[src*="youtube-nocookie.com"] {
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    height:100%;
    min-width:100%;
    min-height:100%;
    max-width:none;
    max-height:none;
    margin:0;
    padding:0;
    border:0;
    background:#000;
  }

  body .realizacje-page .real-youtube-play {
    position:absolute;
    left:50%;
    top:50%;
    width:58px;
    height:40px;
    margin:0;
    transform:translate(-50%,-50%);
    border:1px solid rgba(255,255,255,.35);
    border-radius:12px;
    background:rgba(0,0,0,.65);
    opacity:1;
    z-index:2;
    pointer-events:none;
    transition:background-color .22s ease, border-color .22s ease, opacity .22s ease;
  }

  body .realizacje-page .real-youtube-play::before {
    content:"";
    position:absolute;
    left:22px;
    top:10px;
    width:0;
    height:0;
    border-left:15px solid #fff;
    border-top:10px solid transparent;
    border-bottom:10px solid transparent;
  }

  body .realizacje-page .real-youtube-play::after {
    content:none;
    display:none;
  }

  body .realizacje-page .youtube-lite:hover .real-youtube-play,
  body .realizacje-page .youtube-lite:focus-visible .real-youtube-play {
    background:rgba(0,0,0,.78);
    border-color:rgba(255,255,255,.55);
    opacity:1;
  }

  body .realizacje-page .ww-gallery {
    position:absolute;
  }

  body .realizacje-page .ww-gallery-stage,
  body .realizacje-page .ww-gallery-slide {
    position:absolute;
    inset:0;
  }

  body .realizacje-page .ww-gallery-slide {
    padding:0;
    cursor:pointer;
    border:0;
    opacity:0;
    background:#000;
    transition:opacity 600ms ease;
  }

  body .realizacje-page .ww-gallery-slide.active {
    opacity:1;
    z-index:1;
  }

  body .realizacje-page .ww-gallery-nav {
    position:absolute;
    top:50%;
    z-index:3;
    width:34px;
    height:54px;
    transform:translateY(-50%);
    cursor:pointer;
    border:0;
    border-radius:0;
    background:rgba(34,34,34,.85);
    color:#fff;
    font-family:Tahoma,Geneva,sans-serif;
    font-size:42px;
    line-height:42px;
  }

  body .realizacje-page .ww-gallery-prev {
    left:28px;
  }

  body .realizacje-page .ww-gallery-next {
    right:28px;
  }

  body .realizacje-page .ww-gallery-dots {
    position:absolute;
    left:0;
    right:0;
    bottom:13px;
    z-index:3;
    display:flex;
    justify-content:center;
    gap:7px;
    pointer-events:none;
  }

  body .realizacje-page .ww-gallery-dots button {
    width:8px;
    height:8px;
    padding:0;
    border:1px solid rgba(255,255,255,.85);
    border-radius:50%;
    background:rgba(34,34,34,.85);
    pointer-events:auto;
  }

  body .realizacje-page .ww-gallery-dots button.active {
    background:#fff;
  }

  body .realizacje-page .reveal {
    opacity:0;
    visibility:visible;
    transform:none;
    transition:opacity 2s ease;
    will-change:opacity;
  }

  body .realizacje-page .reveal.visible {
    opacity:1;
    visibility:visible;
    transform:none;
  }

  body .lightbox {
    position:fixed;
    inset:0;
    z-index:99999;
    display:none;
    align-items:center;
    justify-content:center;
    padding:12px;
    background:rgba(0,0,0,.92);
  }

  body .lightbox.open {
    display:flex;
  }

  body .lightbox img {
    display:block;
    max-width:98vw;
    max-height:94vh;
    width:auto;
    height:auto;
    object-fit:contain;
    margin:0;
    padding:0;
    background:#000;
  }

  body .lightbox button {
    position:absolute;
    top:var(--d-page-radius);
    right:var(--d-page-radius);
    display:block;
    width:auto;
    height:auto;
    min-width:0;
    min-height:0;
    margin:0;
    padding:8px 14px;
    cursor:pointer;
    background:#111;
    border:1px solid #666;
    border-radius:8px;
    color:#fff;
    font-family:Tahoma,Geneva,sans-serif;
    font-size:26px;
    line-height:1;
    pointer-events:auto;
  }
}

/* v333 — desktop: większa ikona odtwarzania YouTube o 50%. */
@media (min-width:1200px){
  body .realizacje-page .real-youtube-play{
    width:87px !important;
    height:60px !important;
    border-radius:18px !important;
  }
  body .realizacje-page .real-youtube-play::before{
    left:33px !important;
    top:15px !important;
    border-left-width:23px !important;
    border-top-width:15px !important;
    border-bottom-width:15px !important;
  }
}