:root{
    --bh-black:#000;
    --bh-white:#fff;

    --col-gap: 56px;                 /* fix térköz az oszlopok között */
    --right-min: 380px;              /* jobb „fix” oszlop cél-szélesség */
    --right-max: 520px;
}

*{ box-sizing:border-box; }

html { scroll-behavior: smooth; }
section { scroll-margin-top: 12vh; }

body{
    margin:0;
    background:var(--bh-white);
    overflow:hidden;                 /* a teljes oldal nem görög, csak a bal panel */
}

/* ===== KÉTOSZLOPOS, TELJES MAGASSÁGÚ RÁCS ===== */
.split{
    display:grid;
    grid-template-columns:
        minmax(360px, 1fr)
        minmax(var(--right-min), var(--right-max));
    grid-template-areas: "left right";
    column-gap:var(--col-gap);
    height:100svh;                   /* mobil-safe viewport magasság */
    padding:0 5%;
}

/* BAL, GÖRGETHETŐ OSZLOP */
/* BAL panel: görgethető, de scrollbar rejtve */
.left-pane{
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;

    /* scrollbar elrejtése minden nagyobb böngészőben */
    scrollbar-width: none;        /* Firefox */
    -ms-overflow-style: none;     /* IE/Edge (régi) */
}
.left-pane::-webkit-scrollbar{  /* Chrome, Edge (Chromium), Safari */
    width: 0;
    height: 0;
}

/* Felső kép a bal oszlopban */
.left-image{ justify-self:start; }
.left-image img{
    width:100%;
    max-width:700px;
    height:auto;
    display:block;
    margin: 20vh 0 6vh 0;
}

.main-container{
    padding-left: 3vw;
    padding-top: 16vh; /* megtartott indítás a törzsnél */
}

/* Jobb, STICKY oszlop (fixen a helyén marad) */
.right-content{
    grid-area:right;
    position:sticky;
    top:0;
    height:100svh;

    width:clamp(var(--right-min), 35vw, var(--right-max));
    justify-self:end;

    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;

    text-align:left;
    text-wrap:balance;
    hyphens:auto;
}

/* Tipó beállítások (változatlanul) */
.bauhaus-font{
    text-transform:uppercase;
    color:var(--bh-black);
    font-weight:800;
    font-family:Helvetica, Arial, sans-serif;
    letter-spacing:-0.04em;
}
.hero-title{
    font-size:clamp(2.5rem,6vw,5rem);
    margin:0 0 1rem 0;
}

.hero-menu ul{
    list-style:none;
    padding:0;
    margin:0;
}
.hero-menu li{ margin-bottom:0.5rem; }
.hero-menu a{
    text-decoration:none;
    font-family:'Jost','Oswald', sans-serif;
    text-transform:lowercase;
    font-weight:50;
    letter-spacing:.02em;
    line-height:1.3;
    color:var(--bh-black);
    font-size:clamp(1.25rem,2.5vw,1.75rem);
    transition:color .2s, text-decoration .2s;
}
.hero-menu a:hover{
    text-decoration:underline;
    color:#333;
}

.main-content-title {
    text-transform:uppercase;
    color:var(--bh-black);
    font-weight:800;
    font-family:Helvetica, Arial, sans-serif;
    letter-spacing:-0.04em;
    font-size: 3rem;
}
.main-content-text {
    text-decoration:none;
    font-family:'Jost','Oswald', sans-serif;
    font-weight:50;
    letter-spacing:.02em;
    line-height:1.3;
    color:var(--bh-black);
    font-size:clamp(1.25rem,2.5vw,1.75rem);
    transition:color .2s, text-decoration .2s;
    margin-bottom: 36vh;
}

/* ===== Bauhaus badge ===== */
.bh-badges{
    display:flex; flex-wrap:wrap; gap:.5rem .5rem;
}

/* alapértékek – igazodik a meglévő betűidhez */
.bh-badge{
    --b-pad-y: .22em;
    --b-pad-x: .55em;
    --b-border: 2px;
    --b-radius: 0;               /* Bauhaus: éles sarok */
    --b-gap: .35em;
    --b-font: 'Jost','Oswald',sans-serif;

    display:inline-flex;
    align-items:center;
    gap:var(--b-gap);

    font-family:var(--b-font);
    font-size:clamp(1rem, 0.75vw, 1rem);
    font-weight:600;
    text-transform:lowercase;
    letter-spacing:.02em;
    line-height:1;

    color:var(--bh-black);
    border:var(--b-border) solid var(--bh-black);
    border-radius:var(--b-radius);
    padding:var(--b-pad-y) var(--b-pad-x);

    background:transparent;
    text-decoration:none;
    vertical-align:middle;

    transition: background .18s ease, color .18s ease, transform .05s ease;
}

/* automatikus # előtag – nem kell kiírnod a HTML-ben */
.bh-badge::before{
    content:"#";
    font-weight:800;
    line-height:1;
    transform:translateY(-.02em); /* optikai igazítás */
}

/* Interakciók */
.bh-badge:hover{ background:var(--bh-black); color:var(--bh-white); }
.bh-badge:active{ transform:translateY(1px); }
.bh-badge:focus-visible{
    outline:2px dashed var(--bh-black);
    outline-offset:3px;
}

/* Tömör (inverted) változat */
.bh-badge--solid{
    background:var(--bh-black);
    color:var(--bh-white);
}
.bh-badge--solid:hover{
    background:transparent;
    color:var(--bh-black);
}

/* Méretek */
.bh-badge--xs{ font-size:clamp(.68rem, .75vw, .78rem); --b-pad-y:.18em; --b-pad-x:.45em; --b-border:1.5px; }
.bh-badge--lg{ font-size:clamp(.9rem, 1.1vw, 1rem); --b-pad-y:.28em; --b-pad-x:.7em; }

/* Ha sötét háttérre teszed, tarts kontrasztot */
.dark .bh-badge{ border-color:var(--bh-white); color:var(--bh-white); }
.dark .bh-badge:hover{ background:var(--bh-white); color:var(--bh-black); }

/* ===== Reszponzív: ha már nem fér ki két oszlop, váltsunk egyre ===== */
@media (max-width: 1200px){
    body{ overflow:auto; }                     /* ismét normál oldalgörgetés */
    .split{
        grid-template-columns: 1fr;
        grid-template-areas:
            "right"
            "left";                            /* menü felül, tartalom alul */
        row-gap:4vh;
        height:auto;
        padding:4vh 5%;
    }
    .right-content{
        position:static;
        height:auto;
        justify-self:center;
        align-items:center;
        width:min(92vw, var(--right-max));
    }
    .left-pane{
        height:auto;
        overflow:visible;
        padding-top:0;
    }
    .hero-menu ul{
        display:flex;
        flex-direction:column;
        gap:0.25rem;
    }
}

/* Nagyon kicsi kijelzők */
@media (max-width: 768px){
    .left-image img{ width:min(60vw, 260px); }
}

/* Extra nagy kijelzőn egy kicsi extra padding */
@media (min-width: 1400px){
    .split{ padding-left:8%; padding-right:8%; }
}