/* --- ZÁKLAD --- */
html, body { margin:0; padding:0; }
html { overflow-y: scroll !important; }
.modal-open { padding-right:0 !important; }
body { overflow-x: hidden; }

#team-cards .member-card .card-img-top {
    object-position: center 20%;
}

/* --- HERO POZADIE (fixné) --- */
.pozadie{
    background:url("../src/images/background_home.jpg") no-repeat center center;
    background-size:cover;
    background-attachment:fixed;
    position:relative;
}

@media (hover: none) and (pointer: coarse),
       (max-width: 991.98px) {
  .pozadie{
    background-attachment: scroll !important;
    background-size: cover;      /* istota, že sa nevypočíta 100% auto a pod. */
    background-position: center;
  }
}

.pozadie::before{
    content:"";
    position:absolute; inset:0;
    background:rgba(0,0,0,.45);
}
.pozadie > .row, .pozadie > .container, .pozadie > div{
    position:relative; z-index:1;
}

/* --- NAVBAR (tmavý) --- */
.navbar-compact{ padding-top:4px; padding-bottom:4px; min-height:48px; }
.navbar-brand{ font-weight:700; font-size:1.2rem; color:#fff !important; text-decoration:none; }
.navbar-dark .nav-link{ color:#fff; opacity:.9; }
.navbar-dark .nav-link:hover, .navbar-dark .nav-link:focus{ color:#fff; opacity:1; text-decoration:none; }
.navbar-dark .nav-link.active{ color:#fff; opacity:1; font-weight:600; }
.navbar{ margin-bottom:0 !important; border-bottom:0; }
#section_1, #section_1 .container-fluid{ margin-top:0 !important; padding-top:0 !important; }
.navbar + section{ margin-top:0 !important; }

/* --- POMOCNÉ --- */
.nazov_clubu{ letter-spacing:5px; }
.bg-treneri{
    background:
            linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)),
            url(../src/images/runningbg.jpg) center center no-repeat;
}

/* --- KARTY (bootstrap base) --- */
.card{
    border:none;
    background:linear-gradient(0deg, rgba(247,247,247,1) 0%, rgba(247,247,247,1) 100%);
}
.backside .card a,
.frontside .card .card-title,
.backside .card .card-title{ color:#000 !important; }
.frontside .card .card-body img{ max-height:100%; }

/* --- UTILITY --- */
.hiding{ display:none; }
img:hover + .hiding, .hiding:hover{ display:inline-block; }

/* --- VIDEO / BUTTONY (globálne) --- */
.video-container{ position:relative; padding-bottom:56.25%; height:0; overflow:hidden; border-radius:8px; }
.video-container iframe{ position:absolute; top:0; left:0; width:100%; height:100%; }
.btn{ display:inline-block; padding:.75rem 1.5rem; background:#333; color:#fff; text-decoration:none; border-radius:6px; }
.btn-center{ text-align:center; margin-top:1rem; }

/* --- Custom hamburger na tmavom pozadí --- */
.custom-toggler .navbar-toggler-icon{
    background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
.custom-toggler.navbar-toggler{ border-color:#fff; }

/* --- Kontakt modal --- */
.contact-modal{
    border:0; border-radius:16px; overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,.35);
    background:#f8f9fa;
}
.contact-modal__header{
    background:linear-gradient(135deg, #212529 0%, #2b3035 55%, #0d6efd 120%);
    color:#fff; padding:1.25rem 1.25rem 1rem; position:relative;
}
.contact-modal .btn-close{ filter:invert(1); opacity:.9; }
.contact-modal .btn-close:hover{ opacity:1; }
.contact-modal .form-control{
    border:1px solid rgba(0,0,0,.08); border-radius:10px; background:#fff; box-shadow:none;
}
.contact-modal .form-control:focus{
    border-color:#0d6efd; box-shadow:0 0 0 .2rem rgba(13,110,253,.15);
}
.contact-modal .form-floating > label{ color:#6c757d; display:flex; align-items:center; gap:.25rem; }
.btn-primary{ background-color:#007bff; border:none; }
.btn-primary:hover, .btn-primary:focus{ background-color:#0056b3; }
@media (max-width:575.98px){
    .contact-modal{ border-radius:12px; }
    .contact-modal__header h4{ font-size:1.05rem; }
}

/* --- HERO ENHANCEMENTS --- */
.hero-wrap {
  position: relative;
  min-height: calc(100dvh - var(--nav-text-height));

  display: flex;                 /* zapne flexbox */
  flex-direction: column;        /* texty sa radia zhora dole */
  justify-content: center;       /* vertikálne vycentrovanie */
  align-items: center;           /* horizontálne vycentrovanie */
  text-align: center;            /* ak chceš aby boli texty centrované */
}
@supports not (height: 100dvh){
  .hero-wrap{ min-height: calc(100svh - var(--nav-text-height)); }
}
@supports not (height: 100svh){
  .hero-wrap{ min-height: calc(100vh - var(--nav-text-height)); }
}
.hero-overlay{
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.35) 40%, rgba(0,0,0,.55) 100%);
    z-index:0;
}
.hero-title{
    position:relative; z-index:1; color:#fff; font-weight:800;
    letter-spacing:.12em; line-height:1.05; text-transform:uppercase;
    font-size:clamp(2rem, 6vw, 4rem); margin:0;
}
.hero-title span{ display:block; font-weight:700; opacity:.95; }
.hero-subtitle{
    position:relative; z-index:1; color:rgba(255,255,255,.92);
    margin:1rem auto 1.75rem; font-size:clamp(1rem, 2.4vw, 1.2rem); line-height:1.6; max-width:42rem;
}
.hero-cta .btn-hero{ margin:.25rem .35rem; padding:.7rem 1.25rem; border-radius:999px; font-weight:600; }
.hero-cta .btn-outline-light{ border-width:2px; }
.hero-cta .btn-primary{ background-color:#007bff; border:none; }
.hero-cta .btn-primary:hover{ background-color:#0056b3; }
.scroll-cue{
    position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
    width:28px; height:48px; border:2px solid rgba(255,255,255,.75);
    border-radius:20px; display:inline-flex; align-items:flex-start; justify-content:center;
    text-decoration:none; z-index:2;
}
.scroll-cue span{
    display:block; width:4px; height:10px; border-radius:3px; background:rgba(255,255,255,.85);
    margin-top:6px; animation:scrolldot 1.4s ease-in-out infinite;
}
@keyframes scrolldot{
    0%{ transform:translateY(0); opacity:1; }
    70%{ transform:translateY(18px); opacity:.2; }
    100%{ transform:translateY(0); opacity:1; }
}
@media (max-width:575.98px){
    .hero-cta .btn-hero{ width:100%; max-width:320px; }
}

@media (hover: none) and (pointer: coarse),
       (max-width: 991.98px) {
  .hero-wrap{
    min-height: calc(100svh - var(--nav-text-height));
  }
}

/* --- NOVINKY (jediná verzia) --- */
.top-news-section{ background-color:#f0f0f0; padding:4rem 1rem; }
.top-news-section h2{
    text-align:center; font-size:clamp(1.6rem, 2.4vw, 2rem);
    margin-bottom:2rem; font-weight:800; letter-spacing:.02em;
}
.top-news-article{
    position:relative; background:#fff; padding:1rem; border-radius:14px;
    box-shadow:0 6px 18px rgba(0,0,0,.06);
    height:100%; display:flex; flex-direction:column;
    transition:transform .28s ease, box-shadow .28s ease;
}
.top-news-article:hover{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(0,0,0,.12); }
.media-container{
    aspect-ratio:16 / 9; width:100%; overflow:hidden; border-radius:10px;
    margin-top:.25rem; position:relative;
}
.media-container img, .media-container iframe{
    width:100%; height:100%; object-fit:cover; border:0; border-radius:10px; transition:transform .5s ease;
}
.top-news-article:hover .media-container img{ transform:scale(1.04); }
.news-meta{ display:flex; align-items:center; gap:.5rem; margin:.25rem 0 .5rem; font-size:.92rem; }
.news-date{ color:#6c757d; }
.news-badge{
    display:inline-block; background:#e9ecef; color:#495057; border-radius:999px;
    padding:.2rem .75rem; font-size:.75rem; font-weight:600; letter-spacing:.02em; text-decoration:none; transition:.25s;
}
.news-badge:hover{ background:#007bff; color:#fff; box-shadow:0 4px 8px rgba(0,0,0,.15); transform:translateY(-2px); }
.news-title{
    margin:.2rem 0 .35rem; font-weight:800; line-height:1.3; font-size:1.05rem;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.news-excerpt{ margin-top:.5rem; color:#343a40; line-height:1.55; }
.btn-overlay{
    position:absolute; bottom:10px; left:10px; background:#007bff; color:#fff;
    padding:6px 14px; border-radius:999px; text-decoration:none; font-size:14px; font-weight:600;
    transition:background-color .3s ease, transform .2s ease;
}
.btn-overlay:hover{ background:#0056b3; color:#fff; transform:translateY(-1px); }
.top-news-article > div{ padding:.15rem; }
.media-container iframe{ display:block; }

/* --- O NÁS sekcia --- */
.about-wrap{ background:#111; padding:50px 0; position:relative; }
.section-title{
    color:#fff; text-align:center; text-transform:uppercase; font-weight:800;
    letter-spacing:.12em; margin-bottom:.5rem; font-size:clamp(1.6rem, 3.2vw, 2.2rem);
}
.section-divider{
    width:120px; height:4px; margin:.5rem auto 1.5rem; border-radius:999px;
    background:linear-gradient(90deg, #007bff 0%, #66a6ff 100%); box-shadow:0 6px 18px rgba(0,123,255,.25);
}
.lead-text{
    color:rgba(255,255,255,.92); font-size:1.05rem; line-height:1.8; max-width:56rem; margin-left:auto; margin-right:auto;
}

/* --- ČLENOVIA: FLIP KARTY --- */
:root{ --member-card-h:440px; } /* desktop výška karty */
@media (max-width:991.98px){ :root{ --member-card-h:400px; } }
@media (max-width:575.98px){ :root{ --member-card-h:380px; } }

.member-card,
.member-card .image-flip,
.member-card .mainflip{ height:var(--member-card-h); }

.member-card .card{
    background:#f7f7f7; border-radius:14px; box-shadow:0 6px 18px rgba(0,0,0,.12);
    overflow:hidden; transition:transform .25s ease, box-shadow .25s ease; height:100%;
}
.member-card:hover .card{ transform:translateY(-3px); box-shadow:0 14px 32px rgba(0,0,0,.2); }

.member-photo{ width:100%; aspect-ratio:1 / 1; overflow:hidden; }
.member-photo img{ width:100%; height:100%; object-fit:cover; }
.member-card .card-title{ font-weight:800; font-size:1rem; margin:.5rem 0 0; }

.member-card{
    position: relative;
    height: 100%;
    border-radius: 14px;                 /* <- oblé rohy na WRAPPERI */
    overflow: hidden;                    /* <- oreže rohy pri otočení */
    box-shadow: 0 6px 18px rgba(0,0,0,.12);
    transition: transform .25s ease, box-shadow .25s ease;
}
.member-card:hover{
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(0,0,0,.2);
}
.image-flip{ position: relative; perspective: 1000px; border-radius: inherit; }
.mainflip{
    position: relative;
    width: 100%; height: 100%;
    transition: transform .8s ease;
    transform-style: preserve-3d;
    border-radius: inherit;              /* <- zdedí oblé rohy */
    will-change: transform;
}
.frontside,
.backside{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
    border-radius: inherit;              /* <- dôležité */
    box-shadow: none;                    /* <- tieň nech je len na wrapperi */
}

.frontside{ transform: rotateY(0); }
.backside{  transform: rotateY(180deg); background:#fff; }
.image-flip:hover .mainflip,
.image-flip.hover .mainflip{ transform: rotateY(180deg); }
.frontside .card,
.backside .card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.backside .card-body {
  flex: 1 1 auto;          /* vyplní dostupnú výšku */
  min-height: 0;           /* umožní overflow v rámci flex kontajnera */
  overflow: auto;          /* tu sa aktivuje vnútorný scroll */
  -webkit-overflow-scrolling: touch; /* príjemné scrollovanie na mobile */
  padding: 1rem;           /* prípadne dolaď odsadenie */
}

/* foto zostáva štvorcové */
.member-photo{ width:100%; aspect-ratio:1/1; overflow:hidden; }
.member-photo img{ width:100%; height:100%; object-fit:cover; }

/* názov */
.member-card .card-title{ font-weight:800; font-size:1rem; margin:.5rem 0 0; }

/* dotykové zariadenia – vypnúť hover flip, riešime klikom (JS) */
@media (hover:none) and (pointer:coarse){
    .image-flip:hover .mainflip{ transform:none; }
}

.backside .card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* scrolluje sa iba vnútro card-body */
.backside .card-body {
  flex: 1 1 auto;
  min-height: 0;                     /* kľúčové pri flexboxe */
  overflow-y: auto !important;       /* vynútiť vnútorný scroll */
  overflow-x: hidden;
  margin-top: 0 !important;          /* prebijeme prípadné mt-* z HTML */
  -webkit-overflow-scrolling: touch; /* plynulé na iOS */
  overscroll-behavior: contain;      /* neprepúšťaj scroll na stránku na hranách */
  padding: 1rem;                     /* nechaj podľa vkusu */
}

/* 1) keď je karta otočená, predná strana nech "neprekáža" */
.image-flip:hover .frontside,
.image-flip.hover .frontside {
  pointer-events: none;
}

/* 2) scrolluj priamo zadnú stranu – istota pre wheel/touch */
.backside {
  overflow-y: auto !important;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* voliteľné – ak by niečo ešte blokovalo, pridaj: */
  position: relative;
}

/* 3) nech má vnútro naozaj priestor scrollovať (flex fix) */
.backside .card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}


.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.9);
    color: #fff;
    padding: 1rem;
    font-size: 0.95rem;
    z-index: 10000;
    display: none; /* default skryté, ukáže sa v JS */
}
.cookie-content {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.cookie-buttons {
    display: flex;
    gap: 0.75rem;
}
.cookie-buttons button {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
}

/* --- NOVINKY: header button responsive fix --- */
#novinky .position-relative > a.btn {
    white-space: nowrap;              /* nech sa text tlačidla neláme */
}

/* Na mobiloch daj tlačidlo pod nadpis a vycentruj */
@media (max-width: 767.98px) {
    #novinky .position-relative > a.btn {
        position: static !important;    /* odlep ho z pravého okraja */
        display: inline-block;
        margin-top: .5rem;
        transform: none !important;     /* zruš translate-middle-y */
    }
}

#acceptCookies { background: #007bff; color: #fff; }
#declineCookies { background: #6c757d; color: #fff; }
#acceptCookies:hover { background: #0056b3; }
#declineCookies:hover { background: #5a6268; }