/* ============================================================
   REEON – layout.css
   Seitenstruktur, Grid-Systeme, Abstände
   ============================================================ */


/* ─── SEITEN-LAYOUT ─────────────────────────────────────────── */

/* Verhindert horizontales Overflow auf allen Seiten */
.page-wrapper {
    overflow-x: hidden;
}


/* ─── HERO ──────────────────────────────────────────────────── */

.hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    overflow: hidden;
}

/* Hintergrundbild füllt gesamte Hero-Fläche */
.hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero__bg .hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/* Inhalt über dem Hintergrundbild */
.hero__content {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 80px;
}

@media (max-width: 768px) {
    .hero__content {
        padding-bottom: 48px;
    }
}


/* ─── FEATURED TRACK ────────────────────────────────────────── */

/* Zweispaltig: Cover links, Info rechts */
.featured__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-grid);
    align-items: center;
}

@media (max-width: 768px) {
    .featured__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}


/* ─── NEWS GRID ─────────────────────────────────────────────── */

/* 3 Kacheln nebeneinander, bei Tablet 2, bei Mobile 1 */
.news__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

@media (max-width: 768px) {
    .news__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) {
    .news__grid {
        grid-template-columns: 1fr;
    }
}


/* ─── MERCH ─────────────────────────────────────────────────── */

/* Zentriert, max. Breite begrenzt für fokussierten Look */
.merch__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
}


/* ─── FOOTER ────────────────────────────────────────────────── */

.footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 40px;
    padding-bottom: 40px;
    border-top: 1px solid var(--color-dark);
}

@media (max-width: 500px) {
    .footer__inner {
        flex-direction: column;
        gap: 24px;
        text-align: center;
    }
}


/* ─── SPACING HELPERS ───────────────────────────────────────── */

.mt-sm  { margin-top: 16px; }
.mt-md  { margin-top: 32px; }
.mt-lg  { margin-top: 64px; }
.mb-sm  { margin-bottom: 16px; }
.mb-md  { margin-bottom: 32px; }
.mb-lg  { margin-bottom: 64px; }


/* ─── FLEX HELPERS ──────────────────────────────────────────── */

.flex           { display: flex; }
.flex-col       { flex-direction: column; }
.flex-center    { align-items: center; justify-content: center; }
.flex-between   { align-items: center; justify-content: space-between; }
.gap-sm         { gap: 16px; }
.gap-md         { gap: 32px; }
.gap-lg         { gap: 48px; }