/* Magazine Theme Variables */
.article-magazine {
    --mag-paper: #ffffff;
    --mag-cream: #f6f8fb;
    --mag-ink: #1a2430;
    --mag-moss: #1e6c61;
    --mag-barn: #d17d43;
    --mag-wheat: #ffe8cf;
    background:
        radial-gradient(circle at 8% 0%, rgba(30, 108, 97, 0.08), transparent 30%),
        radial-gradient(circle at 100% 100%, rgba(209, 125, 67, 0.12), transparent 35%),
        var(--mag-cream);
    border: 1px solid #dbe3eb;
    border-radius: 1rem;
    box-shadow: 0 18px 35px rgba(26, 36, 48, 0.08);
    padding: clamp(1rem, 2vw, 2rem);
    margin-bottom: 1rem;
    position: relative;
}

.podcast-container iframe {
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* Article Card */
.article-card {
    background: var(--mag-paper);
    border: 1px solid #dee6ee;
    border-radius: 0.9rem;
    box-shadow: 0 10px 22px rgba(26, 36, 48, 0.08);
    overflow: hidden;
    animation: fadeUp 0.65s ease;
}

.article-card .card-body {
    padding: 1.5rem;
}

/* Article Meta (date) */
.article-meta {
    color: var(--mag-barn);
    font-family: "Inconsolata", monospace;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0.5rem 0 0;
}

/* Article Content */
.article-content-wrapper {
    animation: fadeUp 0.8s ease;
}

.article-img-block {
    margin-bottom: 1.5rem;
}

.article-featured-img {
    max-width: 100%;
    height: auto;
    border-radius: 0.65rem;
    box-shadow: 0 8px 18px rgba(26, 36, 48, 0.06);
    display: block;
}

@media (min-width: 768px) {
    .article-content-wrapper {
        display: flex;
        gap: 2rem;
        align-items: flex-start;
    }
    .article-img-block {
        flex: 0 0 45%;
        max-width: 45%;
        margin-bottom: 0;
    }
    .article-body {
        flex: 1;
    }
}

.article-body {
    color: #5b6876;
    font-family: "Lato", sans-serif;
    font-size: 1.05rem;
    line-height: 1.75;
}

.article-body p {
    margin-bottom: 1rem;
}

/* Podcast Section */
.podcast-container {
    background: var(--mag-cream);
    border: 1px solid #dee6ee;
    border-radius: 0.85rem;
    padding: 1rem;
    margin-top: 1.5rem;
}

/* Sidebar */
.sidebar-card {
    background: var(--mag-paper);
    border: 1px solid #dee6ee;
    border-radius: 0.85rem;
    box-shadow: 0 8px 18px rgba(26, 36, 48, 0.06);
    animation: fadeUp 0.8s ease;
}

.sidebar-card .card-body {
    padding: 1rem;
}

.sidebar-section-title {
    color: var(--mag-ink);
    font-family: "Cabin", sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #dbe3eb;
}

.related-article {
    align-items: flex-start;
    border-top: 1px solid #ebf0f5;
    display: grid;
    gap: 0.4rem;
    padding: 0.65rem 0;
}

.related-article:first-of-type {
    border-top: 0;
    padding-top: 0.2rem;
}

.related-article-date {
    color: #728192;
    font-family: "Inconsolata", monospace;
    font-size: 0.8rem;
    text-transform: uppercase;
    margin-bottom: 0;
}

.related-article-link {
    color: #263240;
    font-family: "Cabin", sans-serif;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
}

.related-article-link:hover {
    color: var(--mag-moss);
    text-decoration: underline;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Amazon Ad Card */
.amazon-ad-card {
    background: var(--mag-paper);
    border: 1px solid #dee6ee;
    border-radius: 0.85rem;
    box-shadow: 0 8px 18px rgba(26, 36, 48, 0.06);
    margin-bottom: 1rem;
    padding: 0.95rem;
    text-align: center;
    animation: fadeUp 0.7s ease;
}

.amazon-ad-card .amazon-ad-link {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.amazon-ad-card .amazon-ad-link:hover {
    transform: translateY(-2px);
}

.amazon-ad-card .amazon-ad-img {
    border-radius: 0.5rem;
    display: block;
    margin: 0 auto 0.4rem;
    max-width: 140px;
}

.amazon-ad-card .amazon-ad-title {
    color: var(--mag-ink);
    font-family: "Cabin", sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}

.amazon-ad-card .amazon-ad-price {
    color: var(--mag-moss);
    font-family: "Inconsolata", monospace;
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 0.2rem;
}

.amazon-ad-card .amazon-ad-cta {
    background: var(--mag-moss);
    border-radius: 0.4rem;
    color: #fff;
    display: inline-block;
    font-family: "Cabin", sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.4rem 0.9rem;
    transition: background 0.2s ease;
}

.amazon-ad-card .amazon-ad-link:hover .amazon-ad-cta {
    background: #2a6b5a;
}

.amazon-ad-card .amazon-ad-disclosure {
    color: #8a99a8;
    display: block;
    font-family: "Lato", sans-serif;
    font-size: 0.7rem;
    margin-top: 0.6rem;
}

.article-body .amazon-ad-card-inline {
    margin: 1.25rem 0;
}

/* Pro Pairing Tip card */
.pairing-tip-card {
    background: linear-gradient(135deg, #f0faf8 0%, #eaf5f2 100%);
    border: 1px solid #c2e0da;
    border-left: 4px solid #1e6c61;
    border-radius: 0 0.65rem 0.65rem 0;
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
}

.pairing-tip-card p {
    color: #3a4a56;
    line-height: 1.65;
    margin: 0;
}

.pairing-tip-label {
    color: #1e6c61;
    font-family: "Cabin", sans-serif;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Quiz Promo Card */
.quiz-promo-card {
    background: var(--mag-paper);
    border: 1px solid #dee6ee;
    border-radius: 0.85rem;
    box-shadow: 0 8px 18px rgba(26, 36, 48, 0.06);
    margin-bottom: 1rem;
    overflow: hidden;
    animation: fadeUp 0.7s ease;
}

.quiz-promo-card-accent {
    background: var(--mag-moss);
    padding: 0.5rem 1rem;
}

.quiz-promo-kicker {
    color: #d4f0eb;
    font-family: "Inconsolata", monospace;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0;
}

.quiz-promo-card-body {
    padding: 1rem;
}

.quiz-promo-title {
    color: var(--mag-ink);
    font-family: "Cabin", sans-serif;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 0.4rem;
}

.quiz-promo-summary {
    color: #5b6876;
    font-family: "Lato", sans-serif;
    font-size: 0.88rem;
    line-height: 1.55;
    margin: 0 0 0.75rem;
}

.quiz-promo-btn {
    background: var(--mag-moss);
    border-radius: 0.4rem;
    color: #fff;
    display: inline-block;
    font-family: "Cabin", sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.4rem 0.9rem;
    text-decoration: none;
    transition: background 0.2s ease;
}

.quiz-promo-btn:hover {
    background: #14564d;
    color: #fff;
}

@media (max-width: 767.98px) {
    .article-card {
        border-left: none;
        border-radius: 0;
        border-right: none;
        box-shadow: none;
    }
    .article-card .card-body {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .article-card,
    .article-content-wrapper,
    .sidebar-card,
    .amazon-ad-card,
    .quiz-promo-card {
        animation: none;
    }
}