/* ═══════════════════════════════════════════════
   LAYOUT – Rácsrendszer, konténerek, struktúra
   MovarFM · css/layout.css
   ═══════════════════════════════════════════════ */

/* ─── Fő konténer ─── */
.app{
    width:min(1280px, calc(100% - 32px));
    margin:0 auto;
    padding:18px 0 110px;
}

/* ─── Fejléc ─── */
.header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:14px 18px;
    border-radius:20px;
    margin-bottom:18px;
}

.brand{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
}

.brand-mark{
    width:44px;
    height:44px;
    border-radius:14px;
    display:grid;
    place-items:center;
    color:#06131b;
    font-weight:800;
    font-size:.95rem;
    background:linear-gradient(135deg,#87f0ff,#00d2ff);
    box-shadow:0 10px 24px rgba(0,210,255,.22);
    flex:0 0 auto;
}

.brand-copy h1{
    margin:0;
    font-size:1rem;
    font-weight:800;
}

.brand-copy p{
    margin:3px 0 0;
    font-size:.84rem;
    color:var(--muted);
}

.header-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    justify-content:flex-end;
}

.mobile-menu-toggle{
    display:none;
    border:1px solid var(--line);
    background:rgba(255,255,255,.04);
    color:var(--text);
    width:44px;
    height:44px;
    border-radius:12px;
    padding:0;
    cursor:pointer;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:5px;
}

.mobile-menu-toggle span{
    display:block;
    width:18px;
    height:2px;
    border-radius:999px;
    background:currentColor;
    transition:transform .22s ease, opacity .22s ease;
}

#auth-menu-container{
    display:contents;
}

/* ─── Fő rácsrendszer ─── */
.layout{
    display:grid;
    grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr);
    gap:18px;
    align-items:start;
}

/* Közös border-radius a fő kártyákon */
.left-card,.player-card,.side-card,.footer{
    border-radius:var(--radius-xl);
}

.left-card{
    padding:24px;
    min-height:100%;
}

/* ─── Bal oldal – hero szöveg ─── */
.eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    border-radius:999px;
    padding:7px 11px;
    font-size:.76rem;
    color:#d8f3ff;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.07);
    margin-bottom:14px;
}

.eyebrow .live-pulse{
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--success);
    box-shadow:0 0 0 0 rgba(34,197,94,.45);
    animation:pulse 1.8s infinite;
}

.hero-title{
    margin:0 0 10px;
    font-size:clamp(1.55rem,2.2vw,2rem);
    line-height:1.08;
    font-weight:800;
    max-width:16ch;
}

.hero-text{
    margin:0;
    color:var(--muted);
    line-height:1.72;
    font-size:.97rem;
    max-width:50ch;
}

.mini-grid{
    display:grid;
    gap:12px;
    margin-top:18px;
}

.mini-box{
    padding:14px 15px;
    border-radius:18px;
    background:rgba(255,255,255,.035);
    border:1px solid var(--line-soft);
}

.mini-box .label{
    display:block;
    color:var(--muted-2);
    text-transform:uppercase;
    font-size:.71rem;
    margin-bottom:6px;
    letter-spacing:.08em;
}

.mini-box .value{
    font-size:.97rem;
    font-weight:700;
    line-height:1.35;
}

/* ─── Jobb oszlop ─── */
.right-col{
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);
    gap:18px;
    align-items:start;
}

/* ─── Oldal alján copyright/api szöveg ─── */
.page-footer{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    color:var(--muted-2);
    font-size:.82rem;
    padding:22px 8px 6px;
}

.page-footer-sep{
    opacity:.4;
}