.abcg{
  --abcg-bg:#001A2D;
  --abcg-accent:#00BC6B;
  position:relative;
  padding:100px 70px;
  background:var(--abcg-bg);
  color:#fff;
  box-sizing:border-box;
  overflow:hidden;
}
.abcg *{box-sizing:border-box}
/* reset tlačidiel z témy (Hello Elementor a pod.) */
.abcg button,.abcg button:hover,.abcg button:focus,.abcg button:active{
  -webkit-appearance:none;appearance:none;margin:0;
  border:0;border-radius:0;box-shadow:none;
  background:none;background-color:transparent;color:inherit;
  font:inherit;line-height:1;letter-spacing:normal;text-transform:none;text-decoration:none;
  min-width:0;min-height:0;width:auto;height:auto;
  white-space:nowrap;user-select:none;
}

.abcg--glow{background:radial-gradient(circle at 76% 52%,rgba(0,188,107,.12),transparent 38%),var(--abcg-bg)}

/* hlavička */
.abcg__top{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.abcg__eyebrow{margin:0 0 22px;font:600 15px/1 Inter,sans-serif;letter-spacing:1.8px;text-transform:uppercase;color:var(--abcg-accent)}
.abcg__title{margin:0;font-family:"Geom Graphic",sans-serif;font-weight:700;font-size:clamp(30px,3.4vw,44px);line-height:1.14;color:#fff}

/* záložky */
.abcg__tabs{display:inline-flex;gap:4px;border:1px solid rgba(255,255,255,.25);border-radius:10px 0;padding:4px}
.abcg .abcg__tabs button,.abcg .abcg__tabs button:hover,.abcg .abcg__tabs button:focus,.abcg .abcg__tabs button:active{padding:11px 22px;border-radius:8px 0;font:500 15px/1 Inter,sans-serif;color:rgba(255,255,255,.7);cursor:pointer;transition:background-color .2s,color .2s}
.abcg .abcg__tabs button:hover{color:#fff;background-color:rgba(255,255,255,.08)}
.abcg .abcg__tabs button[aria-selected=true],.abcg .abcg__tabs button[aria-selected=true]:hover,.abcg .abcg__tabs button[aria-selected=true]:focus{background-color:var(--abcg-accent);color:#fff}
.abcg__tabs button:focus-visible{outline:2px solid var(--abcg-accent);outline-offset:2px}

/* telo */
.abcg__body{margin-top:44px;display:grid;gap:14px}
.abcg--thumbs-right .abcg__body{grid-template-columns:minmax(0,1fr) 150px}
.abcg--thumbs-bottom .abcg__body,.abcg--thumbs-none .abcg__body{grid-template-columns:minmax(0,1fr)}

/* hlavný obrázok */
.abcg__stage{position:relative;aspect-ratio:16/9;border-radius:0 18px;overflow:hidden;background:#0a2436;outline:none;touch-action:pan-y}
.abcg__stage:focus-visible{box-shadow:0 0 0 3px var(--abcg-accent)}
.abcg__img{display:block;width:100%;height:100%;object-fit:cover;transition:opacity .3s ease}
.abcg__img.is-fading{opacity:0}
.abcg__cap{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:flex-end;gap:20px;padding:40px 24px 18px;background:linear-gradient(0deg,rgba(0,26,45,.88),transparent);font:400 14px/1.45 Inter,sans-serif;pointer-events:none}
.abcg__cap p{margin:0}
.abcg__cap-t{color:var(--abcg-accent);font-weight:600;margin-right:8px}
.abcg__count{flex:none;font-weight:600;font-variant-numeric:tabular-nums;opacity:.8}

/* šípky */
.abcg .abcg__nav,.abcg .abcg__nav:hover,.abcg .abcg__nav:focus,.abcg .abcg__nav:active{position:absolute;top:50%;z-index:2;width:48px;height:48px;padding:0;margin-top:-24px;display:flex;align-items:center;justify-content:center;border-radius:50%;background-color:rgba(0,26,45,.6);color:#fff;cursor:pointer;opacity:0;transition:opacity .2s,background-color .2s;backdrop-filter:blur(4px)}
.abcg .abcg__nav svg{display:block;width:22px;height:22px;flex:none}
.abcg .abcg__nav--prev{left:16px}.abcg .abcg__nav--next{right:16px}
.abcg .abcg__nav--prev svg{margin-left:-2px}.abcg .abcg__nav--next svg{margin-right:-2px}
.abcg .abcg__stage:hover .abcg__nav,.abcg .abcg__nav:focus-visible{opacity:1}
.abcg .abcg__nav:hover{background-color:var(--abcg-accent);color:#fff}
.abcg__nav:focus-visible{outline:2px solid #fff}

/* náhľady */
.abcg__thumbs{display:flex;gap:10px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
.abcg__thumbs::-webkit-scrollbar{width:4px;height:4px}
.abcg__thumbs::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25);border-radius:4px}
.abcg__thumbs::-webkit-scrollbar-track{background:transparent}
/* náhľady vpravo: výška = výška hlavného obrázka, zvyšok na scroll */
.abcg--thumbs-right .abcg__thumbs{flex-direction:column;height:0;min-height:100%;padding-right:6px;-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 40px),transparent)}
.abcg--thumbs-right .abcg__thumbs.is-end{-webkit-mask-image:none;mask-image:none}
.abcg--thumbs-bottom .abcg__thumbs{flex-direction:row}
.abcg.abcg--thumbs-bottom .abcg__thumb.abcg__thumb{width:140px}
.abcg .abcg__thumb,.abcg .abcg__thumb:hover,.abcg .abcg__thumb:focus,.abcg .abcg__thumb:active{display:block;flex:none;width:100%;aspect-ratio:3/2;padding:0;border:2px solid transparent;border-radius:10px 0;overflow:hidden;background-color:#0a2436;cursor:pointer;opacity:.55;transition:opacity .2s,border-color .2s}
.abcg__thumb img{display:block;width:100%;height:100%;object-fit:cover}
.abcg .abcg__thumb:hover{opacity:.85;background-color:#0a2436;border-color:transparent}
.abcg .abcg__thumb[aria-current=true],.abcg .abcg__thumb[aria-current=true]:hover,.abcg .abcg__thumb[aria-current=true]:focus{opacity:1;border-color:var(--abcg-accent);background-color:#0a2436}
.abcg__thumb:focus-visible{outline:2px solid #fff;outline-offset:2px}

@media (max-width:900px){
  .abcg{padding:64px 20px}
  .abcg--thumbs-right .abcg__body{grid-template-columns:minmax(0,1fr)}
  .abcg--thumbs-right .abcg__thumbs{flex-direction:row;height:auto;min-height:0;padding-right:0;padding-bottom:6px;-webkit-mask-image:none;mask-image:none}
  .abcg .abcg__thumbs .abcg__thumb.abcg__thumb{width:110px}
  .abcg .abcg__stage .abcg__nav.abcg__nav{opacity:1;width:40px;height:40px;margin-top:-20px}
  .abcg__cap{padding:30px 16px 14px;font-size:13px}
}
@media (hover:none){.abcg .abcg__nav{opacity:1}}
@media (prefers-reduced-motion:reduce){.abcg__img,.abcg__thumb,.abcg__nav{transition:none}}