/* ==========================================================================
   Reverio Blog — scoped styling for the /blog/ section.
   Reuses .header, .footer, .container and .cookie-banner from styles.css;
   everything below is blog-specific (article typography + hub cards).
   Brand: pink #e91e63 / deep #c2185b / ink #1a0f14. Inter via inter.css.
   ========================================================================== */

.blog-main {
    max-width: 760px;
    margin: 0 auto;
    padding: 110px 22px 40px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1a0f14;
}
.blog-main.wide { max-width: 1080px; }

/* Breadcrumb ------------------------------------------------------------- */
.breadcrumb {
    font-size: 0.82rem;
    color: #9ca3af;
    margin-bottom: 26px;
    letter-spacing: 0.01em;
}
.breadcrumb a { color: #c2185b; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span { margin: 0 6px; color: #d1c0c7; }

/* Article header --------------------------------------------------------- */
.article-eyebrow {
    display: inline-block;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #e91e63;
    background: rgba(233, 30, 99, 0.08);
    padding: 6px 12px;
    border-radius: 999px;
    margin-bottom: 16px;
}
.article-title {
    font-size: clamp(1.9rem, 5vw, 2.7rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin: 0 0 16px;
}
.article-meta {
    font-size: 0.85rem;
    color: #9ca3af;
    margin-bottom: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    align-items: center;
}
.article-meta .dot { color: #e0c4cf; }
.article-lead {
    font-size: 1.18rem;
    line-height: 1.6;
    color: #4a4248;
    font-weight: 500;
    margin: 0 0 34px;
    padding-bottom: 30px;
    border-bottom: 1px solid #f0e3e9;
}

/* Article body typography ----------------------------------------------- */
.article-body { font-size: 1.06rem; line-height: 1.75; color: #2a2228; }
.article-body h2 {
    font-size: clamp(1.4rem, 3.4vw, 1.85rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 48px 0 16px;
    scroll-margin-top: 90px;
}
.article-body h3 {
    font-size: 1.22rem;
    font-weight: 700;
    margin: 30px 0 10px;
    color: #1a0f14;
    scroll-margin-top: 90px;
}
.article-body p { margin: 0 0 18px; }
.article-body a { color: #c2185b; text-decoration: underline; text-underline-offset: 2px; }
.article-body a:hover { color: #e91e63; }
.article-body ul, .article-body ol { margin: 0 0 20px; padding-left: 1.3em; }
.article-body li { margin-bottom: 9px; }
.article-body strong { color: #1a0f14; font-weight: 700; }
.article-body blockquote {
    margin: 26px 0;
    padding: 16px 22px;
    border-left: 4px solid #e91e63;
    background: rgba(233, 30, 99, 0.05);
    border-radius: 0 12px 12px 0;
    font-style: italic;
    color: #4a4248;
}

/* Cost / comparison tables ---------------------------------------------- */
.cost-table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0 28px;
    font-size: 0.98rem;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(173, 20, 87, 0.08);
}
.cost-table th {
    background: #e91e63;
    color: #fff;
    text-align: left;
    padding: 13px 16px;
    font-weight: 700;
    font-size: 0.92rem;
}
.cost-table td {
    padding: 12px 16px;
    border-bottom: 1px solid #f3e7ed;
    background: #fff;
}
.cost-table tr:last-child td { border-bottom: none; }
.cost-table tr:nth-child(even) td { background: #fdf5f8; }
.cost-table td:last-child { font-weight: 600; color: #c2185b; white-space: nowrap; }

/* In-article CTA box ----------------------------------------------------- */
.article-cta {
    margin: 40px 0;
    padding: 30px 28px;
    border-radius: 20px;
    background: linear-gradient(155deg, #fdf2f7, #fbe3ec);
    border: 1px solid #f6d3e1;
    text-align: center;
}
.article-cta h3 { font-size: 1.3rem; font-weight: 800; margin: 0 0 8px; color: #1a0f14; }
.article-cta p { font-size: 1rem; color: #6b5860; margin: 0 0 20px; line-height: 1.55; }
.article-cta .cta-btn {
    display: inline-block;
    background: #e91e63;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    padding: 14px 30px;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 10px 26px rgba(233, 30, 99, 0.32);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.article-cta .cta-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(233, 30, 99, 0.4); }
.article-cta .cta-note { font-size: 0.8rem; color: #9b8088; margin: 14px 0 0; }

/* Key takeaway / tip callout -------------------------------------------- */
.callout {
    margin: 26px 0;
    padding: 18px 22px;
    border-radius: 14px;
    background: #fff7fa;
    border: 1px solid #f6d3e1;
    font-size: 0.99rem;
}
.callout strong { color: #c2185b; }

/* FAQ -------------------------------------------------------------------- */
/* Own class (.blog-faq) on purpose: styles.css already defines .faq-item as a
   white card for the homepage <details> accordion, which collided here. */
.blog-faq {
    border-bottom: 1px solid #f0e3e9;
    padding: 18px 0;
    background: none;
    border-left: 0; border-right: 0; border-top: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
}
.blog-faq h3 { font-size: 1.08rem; font-weight: 700; margin: 0 0 8px; }
.blog-faq p { margin: 0; color: #4a4248; line-height: 1.7; }

/* Table of contents ------------------------------------------------------ */
.toc {
    background: #fafafa;
    border: 1px solid #efe6ea;
    border-radius: 14px;
    padding: 20px 24px;
    margin: 0 0 36px;
    font-size: 0.96rem;
}
.toc-title { font-weight: 700; font-size: 0.86rem; letter-spacing: 0.04em; text-transform: uppercase; color: #9ca3af; margin-bottom: 10px; }
.toc ol { margin: 0; padding-left: 1.2em; }
.toc li { margin-bottom: 6px; }
.toc a { color: #c2185b; text-decoration: none; }
.toc a:hover { text-decoration: underline; }

/* Author / closing footer of an article --------------------------------- */
.article-end {
    margin-top: 44px;
    padding-top: 26px;
    border-top: 1px solid #f0e3e9;
    font-size: 0.92rem;
    color: #9ca3af;
}

/* Related posts ---------------------------------------------------------- */
.related { margin-top: 50px; }
.related h2 { font-size: 1.35rem; font-weight: 800; margin-bottom: 18px; }

/* ===== Blog hub (index) ================================================= */
.hub-hero { text-align: center; margin-bottom: 48px; }
.hub-hero .article-title { margin-bottom: 14px; }
.hub-hero p { font-size: 1.12rem; color: #6b5860; max-width: 600px; margin: 0 auto; line-height: 1.6; }

.post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}
.post-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #f0e3e9;
    border-radius: 20px;
    padding: 26px 24px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    box-shadow: 0 4px 18px rgba(173, 20, 87, 0.05);
}
.post-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 38px rgba(173, 20, 87, 0.14);
    border-color: #f6d3e1;
}
.post-card .tag {
    align-self: flex-start;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #e91e63;
    background: rgba(233, 30, 99, 0.08);
    padding: 5px 11px;
    border-radius: 999px;
    margin-bottom: 14px;
}
.post-card h2 { font-size: 1.22rem; font-weight: 800; line-height: 1.25; margin: 0 0 10px; }
.post-card p { font-size: 0.96rem; color: #6b5860; line-height: 1.55; margin: 0 0 16px; flex-grow: 1; }
.post-card .read { font-size: 0.9rem; font-weight: 700; color: #c2185b; }

/* NOTE: no prefers-color-scheme:dark block here on purpose. The main site
   (styles.css) keeps the page background light even in dark mode, so theming
   only the blog content dark produced white-on-light text. The blog therefore
   always renders in the readable light palette, matching the rest of the site. */
.blog-main { color-scheme: light; }