/* magazin.css – Dominik Olesch Photography */

/* ── Breadcrumb ──────────────────────────────────────────── */
.mag-breadcrumb {
    background: var(--dark-2);
    padding: 14px 40px;
    font-size: .72rem;
    color: var(--text-muted);
    letter-spacing: .04em;
    border-bottom: 1px solid rgba(122,158,130,.08);
}
.mag-breadcrumb a { color: var(--gold); transition: color .3s; }
.mag-breadcrumb a:hover { color: var(--gold-light); }
.mag-breadcrumb span { margin: 0 6px; opacity: .4; }

/* ── Article layout ──────────────────────────────────────── */
.mag-layout {
    max-width: 1200px;
    margin: 0 auto;
    padding: 72px 40px 100px;
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 72px;
    align-items: start;
}

.mag-content h2 {
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 300;
    color: var(--cream);
    margin: 52px 0 18px;
    line-height: 1.25;
}
.mag-content h2:first-child { margin-top: 0; }
.mag-content h2 em { color: var(--gold-light); font-style: italic; }

.mag-content h3 {
    font-family: var(--font-sans);
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 36px 0 12px;
}

.mag-content p {
    font-size: .95rem;
    font-weight: 300;
    color: var(--text-light);
    line-height: 1.9;
    margin-bottom: 20px;
}

.mag-content ul, .mag-content ol {
    margin: 0 0 24px 22px;
    color: var(--text-light);
    font-size: .95rem;
    line-height: 1.9;
    font-weight: 300;
}
.mag-content li { margin-bottom: 6px; }

.mag-divider {
    width: 48px;
    height: 1px;
    background: var(--gold);
    opacity: .3;
    margin: 36px 0;
}

/* ── Figures ─────────────────────────────────────────────── */
.mag-figure {
    margin: 36px 0;
    overflow: hidden;
    border-radius: 2px;
}
.mag-figure img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
}
.mag-figure figcaption {
    padding: 10px 0;
    font-size: .72rem;
    color: var(--text-muted);
    letter-spacing: .06em;
    font-style: italic;
}

/* ── Highlight box ───────────────────────────────────────── */
.mag-highlight {
    margin: 28px 0;
    padding: 20px 24px;
    background: rgba(122,158,130,.07);
    border-left: 2px solid var(--gold);
}
.mag-highlight p {
    font-size: .88rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.78;
}
.mag-highlight p + p { margin-top: 10px; }
.mag-highlight strong { color: var(--gold-light); font-weight: 500; }

/* ── Sidebar ─────────────────────────────────────────────── */
.mag-sidebar { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 18px; }

.mag-sidebar-box {
    background: var(--dark-2);
    border: 1px solid rgba(122,158,130,.1);
    padding: 26px 22px;
    border-radius: 2px;
}
.mag-sidebar-box h4,
.mag-sidebar-box h3 {
    font-family: var(--font-sans);
    font-size: .63rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 16px;
}
.mag-sidebar-box a {
    display: block;
    font-size: .82rem;
    font-weight: 300;
    color: var(--text-light);
    padding: 7px 0;
    border-bottom: 1px solid rgba(122,158,130,.07);
    transition: color .3s;
}
.mag-sidebar-box a:last-child { border-bottom: none; }
.mag-sidebar-box a:hover { color: var(--gold-light); }

.mag-cta-box {
    background: linear-gradient(145deg, rgba(122,158,130,.1) 0%, var(--dark-2) 100%);
    border: 1px solid rgba(122,158,130,.22);
    padding: 28px 22px;
    border-radius: 2px;
    text-align: center;
}
.mag-cta-box p {
    font-size: .82rem;
    color: var(--text-muted);
    margin-bottom: 18px;
    line-height: 1.7;
}
.mag-cta-box .btn-primary { font-size: .72rem; padding: 12px 24px; width: 100%; text-align: center; display: block; }

/* ── Article CTA strip ───────────────────────────────────── */
.mag-cta-strip {
    background: var(--dark-2);
    padding: 88px 40px;
    text-align: center;
    border-top: 1px solid rgba(122,158,130,.1);
}
.mag-cta-strip h2 {
    font-family: var(--font-serif);
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    font-weight: 300;
    color: var(--cream);
    margin-bottom: 14px;
    line-height: 1.2;
}
.mag-cta-strip h2 em { font-style: italic; color: var(--gold-light); }
.mag-cta-strip p {
    font-size: .92rem;
    color: var(--text-light);
    margin-bottom: 36px;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.8;
}
.mag-cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ── Hub: overview page ──────────────────────────────────── */
.mag-hub-intro {
    max-width: 620px;
    margin: 0 auto;
    padding: 80px 40px 60px;
    text-align: center;
}
.mag-hub-intro .section-sub { margin: 0 auto; }

.mag-hub-grid {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px 100px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
}

.mag-card {
    background: var(--dark-2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: background .3s;
}
.mag-card:hover { background: var(--dark-3); }

.mag-card-img-wrap { overflow: hidden; height: 220px; }
.mag-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .55s ease;
}
@media (hover: hover) {
    .mag-card:hover .mag-card-img { transform: scale(1.05); }
}

.mag-card-body {
    padding: 24px 22px 28px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.mag-card-tag {
    font-size: .62rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 8px;
    display: block;
}
.mag-card-title {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    font-weight: 300;
    color: var(--cream);
    line-height: 1.35;
    margin-bottom: 10px;
    flex: 1;
}
.mag-card-teaser {
    font-size: .8rem;
    color: var(--text-muted);
    line-height: 1.65;
    margin-bottom: 16px;
    font-weight: 300;
}
.mag-card-link {
    font-size: .64rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: color .3s;
    margin-top: auto;
}
.mag-card:hover .mag-card-link { color: var(--gold-light); }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
    .mag-layout {
        grid-template-columns: 1fr;
        padding: 48px 24px 80px;
        gap: 48px;
    }
    .mag-sidebar { position: static; }
    .mag-hub-grid { grid-template-columns: repeat(2, 1fr); padding: 0 24px 80px; }
}
@media (max-width: 640px) {
    .mag-hub-grid { grid-template-columns: 1fr; }
    .mag-breadcrumb { padding: 12px 20px; }
    .mag-cta-strip { padding: 56px 20px; }
    .mag-hub-intro { padding: 56px 20px 40px; }
    .mag-figure img { height: 260px; }
}