/* CoXx — stíluslap. Színek, elrendezés és reszponzív szabályok. */

:root {
    --pink:#d00042;
    --bg:#050505;
    --text:#f7f7f7
}

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth
}

body {
    margin:0;
    background:#000;
    color:var(--text);
    font-family:'Arial',sans-serif;
    font-size:17px
}

a {
    color:inherit;
    text-decoration:none
}

a:hover {
    color:var(--pink)
}

.wall {
    background:#000 url('../assets/wall.jpg') center center/cover no-repeat
}

.wrap {
    max-width:1160px;
    margin:auto;
    padding:0 24px
}

.top {
    padding:17px 0 30px;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:24px
}

.brand {
    width:225px;
    display:block;
    line-height:1
}

.brand .small {
    color:var(--pink);
    font-size:9px;
    font-weight:900;
    letter-spacing:.6px
}

.brand .word {
    font-size:76px;
    font-weight:1000;
    letter-spacing:-8px;
    color:var(--pink);
    line-height:.82
}

.brand .word span {
    font-size:16px;
    vertical-align:middle;
    letter-spacing:0
}

.brand .cruising {
    font-weight:900;
    font-size:24px;
    letter-spacing:1.4px;
    margin-top:8px
}

.brand .sub {
    color:var(--pink);
    font-size:10px;
    font-weight:900;
    letter-spacing:7px;
    margin-top:7px
}

.nav {
    display:flex;
    gap:42px;
    align-items:center;
    margin-top:53px;
    font-weight:800
}

.nav a {
    position:relative;
    padding-bottom:9px
}

.nav a.active:after,.nav a:hover:after {
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    width:32px;
    height:3px;
    background:var(--pink)
}

.menu {
    display:none;
    background:none;
    border:1px solid #555;
    color:white;
    padding:8px 12px
}

.hero {
    padding-bottom:32px
}

.facts {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:26px 55px;
    padding:34px 0 30px
}

.fact {
    display:flex;
    align-items:flex-start;
    gap:12px;
    line-height:1.48
}

.symbol {
    color:var(--pink);
    font-size:25px;
    font-weight:900;
    min-width:26px
}

.fact strong {
    color:var(--pink);
    display:block;
    font-size:17px
}

.fact p {
    margin:0
}

.section {
    padding:24px 0 45px
}

.section h2 {
    font-size:48px;
    margin:0 0 48px;
    font-weight:900;
    position:relative
}

.section h2:after {
    content:'';
    position:absolute;
    left:0;
    bottom:-26px;
    background:var(--pink);
    height:2px;
    width:40px
}

.parties {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:72px 24px;
    padding:15px 8px 0
}

.party {
    display:flex;
    align-items:stretch;
    gap:22px;
    min-height:56px
}

.party-icon {
    background:#d00043;
    width:56px;
    min-width:56px;
    display:grid;
    place-items:center;
    font-size:29px;
    font-weight:bold
}

.party-label {
    background:#111;
    flex:1;
    display:grid;
    place-items:center;
    text-align:center;
    padding:10px;
    font-size:15px
}

.gallery {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px
}

.gallery img {
    width:100%;
    height:235px;
    object-fit:cover;
    cursor:pointer
}

.shop-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px
}

.shop ul {
    list-style:none;
    padding:0;
    margin:0
}

.shop li {
    margin:12px 0
}

.shop li:before {
    content:'/';
    color:var(--pink);
    margin-right:18px;
    font-weight:bold
}

.shop-image {
    position:relative
}

.shop-image img {
    width:100%;
    max-height:390px;
    object-fit:cover;
    filter:grayscale(1)
}

.shop-caption {
    font-size:25px;
    color:var(--pink);
    font-weight:900
}

.shop-caption small {
    display:block;
    font-size:13px;
    color:white
}

.contact {
    background:#111;
    padding:70px 0 110px
}

.contact-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    text-align:center;
    gap:24px
}

.contact-icon {
    border:3px solid var(--pink);
    border-radius:50%;
    width:80px;
    height:80px;
    display:grid;
    place-items:center;
    margin:0 auto 22px;
    color:var(--pink);
    font-size:36px
}

.contact h3 {
    font-size:31px;
    margin:0
}

.footer {
    background:#000;
    color:#666;
    text-align:center;
    padding:32px 20px 50px;
    font-size:13px
}

.up {
    position:fixed;
    right:25px;
    bottom:25px;
    border-radius:50%;
    background:#aa0034;
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    font-size:26px
}

.lightbox {
    display:none;
    position:fixed;
    inset:0;
    background:#000e;
    z-index:10;
    align-items:center;
    justify-content:center;
    padding:30px
}

.lightbox.show {
    display:flex
}

.lightbox img {
    max-width:95%;
    max-height:85vh
}

.lightbox button {
    position:absolute;
    top:20px;
    right:24px;
    background:none;
    border:0;
    color:white;
    font-size:36px;
    cursor:pointer
}

@media(max-width:760px) {
    .top {
        align-items:center
    }

    .menu {
        display:block
    }

    .nav {
        display:none;
        position:absolute;
        z-index:5;
        top:130px;
        left:0;
        right:0;
        background:#111;
        padding:25px;
        flex-direction:column;
        gap:22px;
        margin:0
    }

    .nav.open {
        display:flex
    }

    .facts,.parties,.shop-grid {
        grid-template-columns:1fr
    }

    .parties {
        gap:18px
    }

    .gallery {
        grid-template-columns:1fr 1fr
    }

    .gallery img {
        height:180px
    }

    .contact-grid {
        grid-template-columns:1fr;
        gap:55px
    }

    .section h2 {
        font-size:40px
    }

    .hero {
        background-position:center top
    }

    .contact h3 {
        font-size:26px
    }

}

@media(max-width:430px) {
    .gallery {
        grid-template-columns:1fr
    }

    .gallery img {
        height:auto
    }

    .party {
        gap:10px
    }

    .party-label {
        font-size:12px
    }

    .brand {
        transform:scale(.85);
        transform-origin:left center
    }

}

/* Kőfal kizárólag a felső bemutatkozó blokkban */
section.wall {
    background:transparent!important
}

.hero.wall {
    background:#000 url('../assets/wall.jpg') center center/cover no-repeat
}

.gallery-shell {
    position:relative;
    padding:0 10px
}

.gallery-window {
    overflow:hidden
}

.gallery-track {
    display:flex;
    gap:22px;
    transition:transform .42s ease;
    will-change:transform
}

.gallery-slide {
    flex:0 0 calc((100% - 44px)/3);
    min-width:0;
    border:0;
    padding:0;
    background:transparent;
    cursor:pointer
}

.gallery-slide img {
    display:block;
    width:100%;
    height:235px;
    object-fit:cover
}

.gallery-arrow {
    position:absolute;
    z-index:2;
    top:50%;
    transform:translateY(-50%);
    border:0;
    background:rgba(0,0,0,.48);
    color:var(--pink);
    font-size:40px;
    line-height:1;
    width:38px;
    height:58px;
    cursor:pointer
}

.gallery-arrow:hover {
    background:#111;
    color:white
}

.gallery-prev {
    left:-2px
}

.gallery-next {
    right:-2px
}

.gallery-count {
    text-align:center;
    color:#888;
    font-size:13px;
    margin-top:13px
}

@media(max-width:760px) {
    .gallery-slide {
        flex-basis:calc((100% - 16px)/2)
    }

    .gallery-track {
        gap:16px
    }

    .gallery-slide img {
        height:180px
    }

}

@media(max-width:500px) {
    .gallery-slide {
        flex-basis:100%
    }

    .gallery-slide img {
        height:auto;
        aspect-ratio:3/2
    }

    .gallery-track {
        gap:16px
    }

}

.hero.wall {
    position:relative;
    isolation:isolate;
    background:transparent;
}

body::before {
    content:"";
    position:fixed;
    inset:0;
    z-index:-2;
    background:#000 url('../assets/wall.jpg') center center / cover no-repeat;
}

body::after {
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:rgba(0,0,0,.48);
}

.hero.wall > .wrap {
    position:relative;
    z-index:1;
}

@media(max-width:760px) {
    .hero.wall {
        background:transparent;
    }

}

/* Saját, eredeti SVG piktogramok */
.symbol {
    display:flex;
    align-items:flex-start;
    justify-content:center;
    width:26px;
    min-width:26px;
    padding-top:3px
}

.symbol img {
    display:block;
    width:24px;
    height:24px;
    object-fit:contain
}

.party-icon img {
    display:block;
    width:52px;
    height:52px;
    object-fit:contain;
    background:transparent
}

.contact-icon {
    border:0;
    background:none
}

.contact-icon img {
    display:block;
    width:80px;
    height:80px;
    object-fit:contain
}


/* 18+ életkor-ellenőrzés és cookie panel */
body.age-locked {overflow:hidden;}
body.age-locked > :not(#ageGate):not(#cookieBanner):not(#cookiePreferences) {visibility:hidden;}
.age-gate {position:fixed;inset:0;z-index:9999;background:linear-gradient(rgba(0,0,0,.25),rgba(0,0,0,.55)),url('../assets/wall.jpg') center center / cover no-repeat #000;display:grid;place-items:center;padding:24px;color:#fff;text-align:center;}
.age-gate[hidden],.cookie-banner[hidden],.cookie-preferences[hidden]{display:none!important;}
.age-panel {width:min(100%,460px);padding:30px 24px 38px;background:#000;box-shadow:0 15px 70px #0008;}
.age-logo {display:flex;flex-direction:column;text-align:left;color:#d0003b;max-width:350px;margin:0 auto 26px;line-height:1;}
.age-logo-top {font-weight:800;font-size:12px;letter-spacing:.04em;}
.age-logo strong {font-size:clamp(75px,16vw,116px);letter-spacing:-.095em;font-weight:900;}
.age-logo-bottom {text-align:right;font-size:12px;font-weight:800;}
.age-panel h1{font-size:25px;margin:0 0 30px;color:#fff;}
.age-panel p{font-size:15px;margin:0 0 20px;}
.age-actions,.cookie-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.age-actions button,.cookie-actions button,#reopenCookies{cursor:pointer;border:0;background:#383838;color:white;padding:12px 19px;border-radius:4px;font:inherit;font-weight:700;}
.age-actions button:hover,.cookie-actions button:hover,#reopenCookies:hover{background:#d0003b;}
.remember{display:block;margin-top:18px;font-size:14px;}
.age-panel .age-denied{color:#ff6384;margin-top:18px;}
.cookie-banner{position:fixed;z-index:9998;bottom:0;left:0;right:0;background:#303039;color:#fff;display:flex;align-items:center;justify-content:center;gap:22px;padding:14px 24px;font-size:13px;box-shadow:0 -4px 25px #0007;}
.cookie-banner p{margin:0;max-width:720px;line-height:1.5;}
.cookie-banner a{color:#fff;text-decoration:underline;}
.cookie-actions button{padding:9px 14px;font-size:13px;}
.cookie-actions button:first-child{background:#d0003b;}
.cookie-preferences{position:fixed;inset:0;z-index:10000;background:#000b;display:grid;place-items:center;padding:20px;}
.cookie-modal{background:#171717;color:#fff;max-width:530px;width:100%;padding:28px;box-shadow:0 10px 45px #000b;}
.cookie-modal h2{margin:0 0 12px;}
.cookie-modal p{line-height:1.6;}
.cookie-modal label{display:block;margin:16px 0;}
.privacy-note{background:#0b0b0b;color:#aaa;padding:32px 0;font-size:13px;line-height:1.6;}
.privacy-note h2{font-size:18px;color:#fff;}
.privacy-note button{margin-top:12px;}
@media(max-width:700px){.cookie-banner{flex-direction:column;text-align:center;gap:10px;}.age-panel{padding:25px 18px;}}

/* Magyar / English language switch */
.top {position:relative;}
.language-switch {position:absolute;right:0;top:5px;display:flex;align-items:center;gap:9px;font-size:13px;font-weight:800;z-index:10;background:rgba(0,0,0,.55);padding:7px 10px;border-radius:3px;}
.language-switch a{color:#bdbdbd;text-decoration:none;transition:color .2s;}
.language-switch a.selected,.language-switch a:hover{color:#e00046;}
.language-switch span{color:#777;}
@media(max-width:850px){.language-switch{right:8px;top:0}.top .nav{margin-top:26px}}