/* ==========================================================
   O LASER GAME
   Gladiators Laser Game
========================================================== */


/* ==========================================================
   ÚVODNÍ TEXTY
========================================================== */

.intro-text{

    max-width:900px;

    margin:0 auto 2.5rem;

    color:var(--grey);

    font-size:1.02rem;

    line-height:1.9;

    text-align:center;

}



/* ==========================================================
   FEATURE GRID
========================================================== */

.feature-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(300px,1fr));

    gap:2rem;

    margin-top:2rem;

}



/* ==========================================================
   FEATURE CARD
========================================================== */

.feature-card{

    display:flex;

    flex-direction:column;

    height:100%;

    background:var(--dark2);

    border:1px solid rgba(255,212,0,.12);

    border-radius:14px;

    overflow:hidden;

    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;

}



.feature-card:hover{

    transform:translateY(-6px);

    border-color:rgba(255,212,0,.28);

    box-shadow:

        0 12px 26px rgba(0,0,0,.40),

        0 0 18px rgba(255,212,0,.10);

}



/* ==========================================================
   IKONA
========================================================== */

.feature-icon{

    display:flex;

    justify-content:center;

    align-items:center;

    height:82px;

    background:linear-gradient(
        180deg,
        rgba(255,212,0,.12),
        rgba(255,212,0,.03)
    );

    border-bottom:1px solid rgba(255,212,0,.08);

}



.feature-icon i{

    color:var(--yellow);

    font-size:2.4rem;

}



/* ==========================================================
   NADPIS
========================================================== */

.feature-card h2{

    margin:1.5rem 1.5rem .8rem;

    color:var(--yellow);

    font-family:'Cinzel',serif;

    font-size:1.35rem;

    font-weight:700;

}



/* ==========================================================
   TEXT
========================================================== */

.feature-card p{

    flex:1;

    margin:0 1.5rem;

    color:var(--grey-light);

    line-height:1.8;

}



/* ==========================================================
   SEZNAM
========================================================== */

.feature-card ul{

    margin:1.5rem;

    padding-left:1.2rem;

}



.feature-card li{

    color:var(--grey-light);

    margin-bottom:.6rem;

}



.feature-card li:last-child{

    margin-bottom:0;

}

/* ==========================================================
   TIMELINE
========================================================== */

.timeline{

    position:relative;

    margin:3rem auto;

    max-width:900px;

    padding-left:40px;

}



/* svislá čára */

.timeline::before{

    content:"";

    position:absolute;

    left:20px;

    top:0;

    bottom:0;

    width:3px;

    border-radius:2px;

    background:linear-gradient(

        to bottom,

        rgba(255,212,0,.15),

        rgba(255,212,0,.80),

        rgba(255,212,0,.15)

    );

}



/* ==========================================================
   POLOŽKA
========================================================== */

.timeline-item{

    position:relative;

    display:flex;

    align-items:flex-start;

    gap:2rem;

    margin-bottom:3rem;

}



.timeline-item:last-child{

    margin-bottom:0;

}



/* ==========================================================
   ČÍSLO
========================================================== */

.timeline-number{

    position:absolute;

    left:-20px;

    width:40px;

    height:40px;

    border-radius:50%;

    background:var(--yellow);

    color:var(--black);

    font-weight:700;

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:2;

    box-shadow:

        0 0 0 6px rgba(255,212,0,.08),

        0 0 16px rgba(255,212,0,.25);

}



/* ==========================================================
   OBSAH
========================================================== */

.timeline-content{

    flex:1;

    margin-left:40px;

    background:var(--dark2);

    border:1px solid rgba(255,212,0,.12);

    border-radius:14px;

    padding:1.6rem 1.8rem;

    transition:

        transform .22s,

        border-color .22s,

        box-shadow .22s;

}



.timeline-content:hover{

    transform:translateY(-4px);

    border-color:rgba(255,212,0,.30);

    box-shadow:

        0 12px 22px rgba(0,0,0,.35),

        0 0 18px rgba(255,212,0,.08);

}



/* ==========================================================
   NADPIS
========================================================== */

.timeline-content h2{

    margin:0 0 .8rem;

    color:var(--yellow);

    font-family:'Cinzel',serif;

    font-size:1.35rem;

}



.timeline-content p{

    margin:0;

    color:var(--grey-light);

    line-height:1.9;

}



/* ==========================================================
   EQUIPMENT GRID
========================================================== */

.equipment-grid{

    display:grid;

    grid-template-columns:

        repeat(auto-fit,minmax(420px,1fr));

    gap:2rem;

    margin-top:2rem;

}



/* ==========================================================
   EQUIPMENT CARD
========================================================== */

.equipment-card{

    display:flex;

    flex-direction:column;

    background:var(--dark2);

    border-radius:14px;

    overflow:hidden;

    border:1px solid rgba(255,212,0,.12);

    transition:.25s;

}



.equipment-card:hover{

    transform:translateY(-5px);

    border-color:rgba(255,212,0,.28);

    box-shadow:

        0 12px 24px rgba(0,0,0,.40),

        0 0 18px rgba(255,212,0,.10);

}



/* ==========================================================
   OBRÁZEK
========================================================== */

.equipment-image{

    aspect-ratio:16/9;

    overflow:hidden;

    background:#111;

}



.equipment-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .35s ease;

}



.equipment-card:hover img{

    transform:scale(1.04);

}



/* ==========================================================
   TEXT
========================================================== */

.equipment-body{

    padding:1.8rem;

}



.equipment-body h2{

    margin:0 0 1rem;

    color:var(--yellow);

    font-family:'Cinzel',serif;

}



.equipment-body p{

    color:var(--grey-light);

    line-height:1.8;

}



.equipment-body ul{

    margin-top:1.4rem;

    padding-left:1.2rem;

}



.equipment-body li{

    margin-bottom:.55rem;

    color:var(--grey-light);

}



/* ==========================================================
   INFO PANEL
========================================================== */

.equipment-note{

    margin-top:2rem;

    display:flex;

    gap:1.2rem;

    align-items:flex-start;

    background:rgba(255,212,0,.05);

    border:1px solid rgba(255,212,0,.12);

    border-left:4px solid var(--yellow);

    border-radius:12px;

    padding:1.4rem;

}



.equipment-note-icon{

    color:var(--yellow);

    font-size:1.5rem;

    flex-shrink:0;

}



.equipment-note strong{

    color:var(--yellow);

}

/* ==========================================================
   SAFETY GRID
========================================================== */

.safety-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(280px,1fr));

    gap:2rem;

    margin-top:2rem;

}

.safety-card{

    background:var(--dark2);

    border:1px solid rgba(255,212,0,.12);

    border-radius:14px;

    padding:2rem;

    text-align:center;

    transition:
        transform .22s,
        border-color .22s,
        box-shadow .22s;

}

.safety-card:hover{

    transform:translateY(-5px);

    border-color:rgba(255,212,0,.28);

    box-shadow:
        0 10px 24px rgba(0,0,0,.35),
        0 0 18px rgba(255,212,0,.08);

}

.safety-icon{

    width:72px;

    height:72px;

    margin:0 auto 1.4rem;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(255,212,0,.08);

}

.safety-icon i{

    font-size:2rem;

    color:var(--yellow);

}

.safety-card h2{

    color:var(--yellow);

    font-family:'Cinzel',serif;

    margin-bottom:1rem;

    font-size:1.3rem;

}

.safety-card p{

    color:var(--grey-light);

    line-height:1.8;

}



/* ==========================================================
   TARGET GROUPS
========================================================== */

.target-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(260px,1fr));

    gap:2rem;

    margin-top:2rem;

}

.target-item{

    background:linear-gradient(
        180deg,
        rgba(255,212,0,.05),
        rgba(255,212,0,.01)
    );

    border:1px solid rgba(255,212,0,.10);

    border-radius:14px;

    padding:2rem;

    transition:.25s;

}

.target-item:hover{

    transform:translateY(-4px);

    border-color:rgba(255,212,0,.25);

}

.target-item i{

    font-size:2rem;

    color:var(--yellow);

    margin-bottom:1rem;

}

.target-item h3{

    color:var(--yellow);

    margin-bottom:.9rem;

    font-family:'Cinzel',serif;

}

.target-item p{

    color:var(--grey-light);

    line-height:1.8;

}



/* ==========================================================
   FACTS
========================================================== */

.facts-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(250px,1fr));

    gap:2rem;

    margin-top:2rem;

}

.fact-card{

    text-align:center;

    padding:2rem;

    border-radius:14px;

    background:var(--dark2);

    border:1px solid rgba(255,212,0,.10);

    transition:.22s;

}

.fact-card:hover{

    transform:translateY(-5px);

    border-color:rgba(255,212,0,.28);

}

.fact-number{

    width:84px;

    height:84px;

    margin:0 auto 1.4rem;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:2rem;

    font-weight:800;

    color:var(--black);

    background:var(--yellow);

    box-shadow:
        0 0 20px rgba(255,212,0,.25);

}

.fact-card h2{

    color:var(--yellow);

    font-family:'Cinzel',serif;

    margin-bottom:1rem;

}

.fact-card p{

    color:var(--grey-light);

    line-height:1.8;

}



/* ==========================================================
   FAQ
========================================================== */

.faq-list{

    margin-top:2rem;

}

.faq-item{

    margin-bottom:1rem;

    border:1px solid rgba(255,212,0,.10);

    border-radius:12px;

    overflow:hidden;

    background:var(--dark2);

}

.faq-item summary{

    cursor:pointer;

    list-style:none;

    padding:1.25rem 1.5rem;

    color:var(--white);

    font-weight:600;

    transition:.2s;

}

.faq-item summary:hover{

    background:rgba(255,212,0,.05);

}

.faq-item summary::-webkit-details-marker{

    display:none;

}

.faq-item p{

    padding:0 1.5rem 1.5rem;

    color:var(--grey-light);

    line-height:1.8;

}



/* ==========================================================
   CTA
========================================================== */

.cta-section{

    background:none;

    border:none;

    padding-top:0;

}

.cta-box{

    border-radius:18px;

    padding:3rem;

    text-align:center;

    background:
        linear-gradient(
            180deg,
            rgba(255,212,0,.08),
            rgba(255,212,0,.02)
        );

    border:1px solid rgba(255,212,0,.15);

}

.cta-box h2{

    font-family:'Cinzel',serif;

    color:var(--yellow);

    margin-bottom:1rem;

    font-size:2rem;

}

.cta-box p{

    max-width:700px;

    margin:0 auto 2rem;

    color:var(--grey-light);

    line-height:1.8;

}

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:1rem;

    flex-wrap:wrap;

}

.cta-button{

    display:inline-flex;

    align-items:center;

    gap:.7rem;

    padding:1rem 2rem;

    border-radius:999px;

    font-weight:700;

    text-decoration:none;

    transition:.22s;

}

.cta-primary{

    background:var(--yellow);

    color:var(--black);

}

.cta-secondary{

    border:2px solid var(--yellow);

    color:var(--yellow);

}

.cta-button:hover{

    transform:translateY(-3px);

    box-shadow:
        0 10px 20px rgba(0,0,0,.30);

}

/* ==========================================================
   HOVER EFEKTY
========================================================== */

.feature-card:hover h2,
.timeline-content:hover h2,
.equipment-card:hover h2,
.safety-card:hover h2,
.target-item:hover h3,
.fact-card:hover h2{

    color:#FFE35A;

}

.feature-card:hover .feature-icon{

    background:linear-gradient(
        180deg,
        rgba(255,212,0,.20),
        rgba(255,212,0,.05)
    );

}

.fact-card:hover .fact-number{

    transform:scale(1.08);

    box-shadow:
        0 0 30px rgba(255,212,0,.35);

}

.timeline-number{

    transition:
        transform .25s,
        box-shadow .25s;

}

.timeline-item:hover .timeline-number{

    transform:scale(1.08);

    box-shadow:

        0 0 0 8px rgba(255,212,0,.10),

        0 0 20px rgba(255,212,0,.35);

}



/* ==========================================================
   PLYNULÉ PŘECHODY
========================================================== */

.feature-card,
.timeline-content,
.equipment-card,
.safety-card,
.target-item,
.fact-card,
.faq-item,
.cta-button{

    will-change:transform;

}



/* ==========================================================
   TABLET
========================================================== */

@media (max-width:1100px){

    .equipment-grid{

        grid-template-columns:1fr;

    }

    .feature-grid{

        grid-template-columns:
            repeat(2,minmax(0,1fr));

    }

    .facts-grid{

        grid-template-columns:
            repeat(2,minmax(0,1fr));

    }

}



/* ==========================================================
   MOBIL
========================================================== */

@media (max-width:720px){

    .feature-grid,
    .equipment-grid,
    .safety-grid,
    .target-grid,
    .facts-grid{

        grid-template-columns:1fr;

    }

    .timeline{

        padding-left:28px;

    }

    .timeline::before{

        left:14px;

    }

    .timeline-number{

        left:-6px;

        width:32px;

        height:32px;

        font-size:.9rem;

    }

    .timeline-content{

        margin-left:28px;

        padding:1.3rem;

    }

    .equipment-body{

        padding:1.4rem;

    }

    .cta-box{

        padding:2rem 1.4rem;

    }

    .cta-box h2{

        font-size:1.6rem;

    }

    .cta-buttons{

        flex-direction:column;

    }

    .cta-button{

        justify-content:center;

        width:100%;

    }

}



/* ==========================================================
   MALÉ MOBILY
========================================================== */

@media (max-width:420px){

    .feature-card,
    .equipment-card,
    .safety-card,
    .target-item,
    .fact-card{

        border-radius:12px;

    }

    .feature-card h2,
    .timeline-content h2,
    .equipment-body h2,
    .safety-card h2,
    .fact-card h2{

        font-size:1.15rem;

    }

    .feature-card p,
    .equipment-body p,
    .timeline-content p,
    .safety-card p,
    .target-item p,
    .fact-card p{

        font-size:.93rem;

    }

    .fact-number{

        width:68px;

        height:68px;

        font-size:1.6rem;

    }

}



/* ==========================================================
   ACCESSIBILITY
========================================================== */

.feature-card:focus-within,
.equipment-card:focus-within,
.timeline-content:focus-within,
.faq-item:focus-within{

    outline:2px solid var(--yellow);

    outline-offset:3px;

}



/* ==========================================================
   VÝBĚR TEXTU
========================================================== */

.page-title::selection,
.section-label::selection,
.feature-card::selection,
.timeline-content::selection,
.equipment-body::selection,
.safety-card::selection,
.fact-card::selection{

    background:var(--yellow);

    color:var(--black);

}



/* ==========================================================
   TISK
========================================================== */

@media print{

    .feature-card,
    .equipment-card,
    .timeline-content,
    .safety-card,
    .target-item,
    .fact-card{

        break-inside:avoid;

        box-shadow:none;

        transform:none !important;

    }

    .cta-section{

        display:none;

    }

}



/* ==========================================================
   PŘÍPRAVA NA BUDOUCÍ ANIMACE
========================================================== */

.animate{

    opacity:0;

    transform:translateY(20px);

}

.animate.visible{

    opacity:1;

    transform:none;

    transition:

        opacity .5s ease,

        transform .5s ease;

}

/* ==========================================================
   GALERIE
========================================================== */

.gallery-grid{

    display:grid;

    grid-template-columns:
        repeat(2,1fr);

    gap:1.5rem;

    margin-top:2rem;

}

.gallery-item{

    display:block;

    overflow:hidden;

    border-radius:16px;

    border:1px solid rgba(255,212,0,.12);

    background:#111;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;

}

.gallery-item:hover{

    transform:translateY(-5px);

    border-color:rgba(255,212,0,.30);

    box-shadow:
        0 12px 28px rgba(0,0,0,.35),
        0 0 18px rgba(255,212,0,.08);

}

.gallery-item img{

    display:block;

    width:100%;

    aspect-ratio:16/10;

    object-fit:cover;

    transition:transform .35s ease;

}

.gallery-item:hover img{

    transform:scale(1.05);

}

@media (max-width:720px){

    .gallery-grid{

        grid-template-columns:1fr;

    }

}

/* ==========================================================
   HERO FOTO
========================================================== */

.hero-image{

    margin:2.5rem auto 3rem;

    border-radius:18px;

    overflow:hidden;

    border:1px solid rgba(255,212,0,.15);

    box-shadow:
        0 18px 40px rgba(0,0,0,.35),
        0 0 24px rgba(255,212,0,.08);

}

.hero-image img{

    display:block;

    width:100%;

    aspect-ratio:21/9;

    object-fit:cover;

    transition:transform .45s ease;

}

.hero-image:hover img{

    transform:scale(1.02);

}

@media (max-width:900px){

    .hero-image img{

        aspect-ratio:16/9;

    }

}

@media (max-width:600px){

    .hero-image{

        border-radius:14px;

    }

    .hero-image img{

        aspect-ratio:4/3;

    }

}

/* =============================================================
   FIX: Odsazení pod fixní hlavičkou & fix uskakování
   ============================================================= */

/* 1. Uzamkne šířku okna na všech podstránkách (zamezí skákání do stran) */
html {
  overflow-y: scroll !important;
}

/* 2. Odtlačí první prvek na podstránce pod 70px hlavičku */
.container:first-of-type,
.page-header,
.intro-text,
.mode-group:first-of-type,
main {
  padding-top: 100px !important;
}

/* 3. Zazdění přetahování aktivního odkazového tlačítka v navigaci */
.nav-link.active {
  display: inline-block !important;
  margin: 0 !important;
}