/*
 * Blog article page. Same layout as before (hero, article column, sidebar); this file only restyles it.
 * Loaded after style.css and typography.css; every selector starts with `:root body` so it wins over both.
 * Sizes come from typography.css; article headings use a calmer reading scale (28 / 22 / 18) than page sections.
 */
:root body .magazine-blog-details {
    --ink: #14172b;
    --text: #3b4160;
    --muted: #6b7190;
    --line: #eceef5;
    --soft: #f6f7fb;
    --brand-soft: rgba(var(--brand-rgb, 212, 20, 120), .08);
    padding-bottom: 70px;
}

/* ---------- hero ---------- */
:root body .magazine-blog-details .article-hero {
    height: auto;
    min-height: clamp(480px, 68vh, 660px);
    align-items: flex-end;
    isolation: isolate;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}
/* The picture stays sharp. Only the left side and the bottom get a dark gradient, which is where the title and meta sit, so the
   text stays readable while the rest of the picture shows clearly. */
:root body .magazine-blog-details .hero-overlay {
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(10, 12, 28, .78) 0%, rgba(10, 12, 28, .5) 38%, rgba(10, 12, 28, 0) 72%),
        linear-gradient(180deg, rgba(10, 12, 28, 0) 35%, rgba(10, 12, 28, .6) 100%);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
:root body .magazine-blog-details .hero-content { max-width: 880px; padding: 90px 0 46px; }
:root body .magazine-blog-details .hero-category {
    margin-bottom: 18px; padding: 7px 16px; border-radius: 999px;
    background: var(--brand, #d41478); box-shadow: 0 8px 20px rgba(var(--brand-rgb, 212, 20, 120), .4);
    font-size: var(--fs-small); font-weight: 700; letter-spacing: .02em; text-transform: none;
}
:root body .magazine-blog-details .hero-content h1 {
    margin: 0 0 20px; max-width: 880px;
    font-size: var(--fs-h1); font-weight: 700; line-height: 1.2; letter-spacing: -.01em;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .45);
}
:root body .magazine-blog-details .hero-meta { gap: 10px 24px; }
:root body .magazine-blog-details .hero-meta span {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: var(--fs-small); font-weight: 500; color: rgba(255, 255, 255, .88);
}
:root body .magazine-blog-details .hero-meta i { margin: 0; color: #ff8fc2; font-size: 1.05em; }

/* ---------- share box ---------- */
:root body .magazine-blog-details .share-box { margin-top: 36px; padding: 22px 26px; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: 0 1px 2px rgba(20, 23, 43, .04), 0 10px 30px rgba(20, 23, 43, .05); }
:root body .magazine-blog-details .share-box h4 { margin: 0 0 14px; font-size: var(--fs-h4); font-weight: 700; color: var(--ink); }
.share-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
:root body .share-buttons a, :root body .share-buttons button {
    display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border: 1px solid var(--line); border-radius: 12px;
    background: #fff; color: #3b4160; font: inherit; font-size: var(--fs-small); font-weight: 600; text-decoration: none; cursor: pointer;
    transition: transform .2s ease, color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
:root body .share-buttons a:hover, :root body .share-buttons button:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(20, 23, 43, .1); }
.share-buttons .facebook:hover { background: #1877f2; border-color: #1877f2; color: #fff; }
.share-buttons .twitter:hover { background: #14171a; border-color: #14171a; color: #fff; }
.share-buttons .whatsapp:hover { background: #25d366; border-color: #25d366; color: #fff; }
.share-buttons .telegram:hover { background: #229ed9; border-color: #229ed9; color: #fff; }
.share-buttons .linkedin:hover { background: #0a66c2; border-color: #0a66c2; color: #fff; }
.share-buttons .copy:hover, .share-buttons .copy.copied { background: var(--brand, #d41478); border-color: var(--brand, #d41478); color: #fff; }

/* ---------- sidebar (same look as the guides page) ---------- */
/* The sidebar is taller than a screen. A plain `top: 104px` would hide everything below the fold until the article ended, so a small
   script in the page sets `top` to (screen height - sidebar height - 24px): the sidebar scrolls with the article until its LAST
   box is in view, then stays there. This value is only the fallback for a sidebar shorter than the screen. */
:root body .magazine-blog-details .right-bar { position: sticky; top: 104px; margin-top: 44px; }
:root body .magazine-blog-details .side-box { margin-bottom: 22px; padding: 22px; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: 0 1px 2px rgba(20, 23, 43, .04), 0 10px 30px rgba(20, 23, 43, .05); }
:root body .magazine-blog-details .side-box h4 { margin: 0 0 16px; padding-bottom: 12px; font-size: var(--fs-h4); font-weight: 700; color: var(--ink); }
:root body .magazine-blog-details .side-box h4::after { width: 38px; height: 3px; margin-top: 12px; background: linear-gradient(90deg, var(--brand, #d41478), #ff6aa2); }

:root body .magazine-blog-details .side-box .input-group { overflow: hidden; border: 1px solid #e3e6f0; border-radius: 12px; background: #f8f9fc; flex-wrap: nowrap; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
:root body .magazine-blog-details .side-box .input-group:focus-within { background: #fff; border-color: var(--brand, #d41478); box-shadow: 0 0 0 4px rgba(var(--brand-rgb, 212, 20, 120), .12); }
:root body .magazine-blog-details .side-box .form-control { height: 46px; padding: 0 16px; font-size: var(--fs-body); }
:root body .magazine-blog-details .side-box button { width: 52px; background: linear-gradient(135deg, var(--brand, #d41478), #f0588b); font-size: 16px; }

:root body .magazine-blog-details .side-box .links li { margin-bottom: 6px; }
:root body .magazine-blog-details .side-box .links li a {
    padding: 11px 14px; border: 0; border-radius: 12px; background: transparent; color: #3b4160;
    font-size: var(--fs-body); font-weight: 600; line-height: 1.3;
}
:root body .magazine-blog-details .side-box .links li a::after { content: none; }
:root body .magazine-blog-details .side-box .links li a { gap: 12px; }
:root body .magazine-blog-details .side-box .links li a em { flex: none; min-width: 34px; text-align: center; padding: 2px 9px; border-radius: 999px; background: #f0f2f8; color: var(--muted); font-style: normal; font-size: var(--fs-small); font-weight: 600; transition: all .2s ease; }
:root body .magazine-blog-details .side-box .links li a:hover { background: var(--soft); color: var(--brand, #d41478); transform: translateX(3px); border-color: transparent; }
:root body .magazine-blog-details .side-box .links li a.active { background: var(--brand, #d41478); color: #fff; box-shadow: 0 8px 18px rgba(var(--brand-rgb, 212, 20, 120), .28); transform: none; }
:root body .magazine-blog-details .side-box .links li a.active em { background: rgba(255, 255, 255, .25); color: #fff; }

:root body .magazine-blog-details .related-blog-item { align-items: center; gap: 14px; margin-bottom: 12px; padding: 10px; border: 1px solid transparent; border-radius: 14px; background: transparent; }
:root body .magazine-blog-details .related-blog-item:last-child { margin-bottom: 0; }
:root body .magazine-blog-details .related-blog-item:hover { transform: none; border-color: var(--line); background: var(--soft); box-shadow: none; }
:root body .magazine-blog-details .related-img { position: relative; flex: none; width: 96px; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: #14172b; isolation: isolate; box-shadow: 0 4px 12px rgba(20, 23, 43, .12); }
:root body .magazine-blog-details .related-img::before { content: ""; position: absolute; inset: -8px; z-index: -1; background: var(--img) center / cover no-repeat; filter: blur(8px) brightness(.85); }
:root body .magazine-blog-details .related-img img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; object-fit: contain; display: block; margin: 0; box-shadow: none; }
:root body .magazine-blog-details .related-title {
    font-size: var(--fs-body); font-weight: 600; line-height: 1.35; color: var(--ink);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
:root body .magazine-blog-details .related-title:hover { color: var(--brand, #d41478); }

@media (max-width: 991px) {
    :root body .magazine-blog-details .right-bar { position: static; margin-top: 10px; }
}
@media (max-width: 575px) {
    :root body .magazine-blog-details .article-hero { min-height: 320px; }
    :root body .magazine-blog-details .hero-content { padding: 70px 0 32px; }
    :root body .magazine-blog-details .article-body h1,
    :root body .magazine-blog-details .article-body h2 { font-size: 24px; }
    :root body .magazine-blog-details .article-body h3 { font-size: 20px; }
    :root body .magazine-blog-details .article-body blockquote { padding: 18px 20px; font-size: var(--fs-body); }
    :root body .magazine-blog-details .share-box { padding: 18px; }
    :root body .share-buttons a span, :root body .share-buttons button span { display: none; }
    :root body .share-buttons a, :root body .share-buttons button { padding: 0 14px; }
}