/* Article detail page */
.article-page {
    background: #f3f7fd;
}

.article-page .main-header {
    background: rgba(9, 42, 82, .97);
    box-shadow: 0 10px 30px rgba(5, 26, 61, .18);
    backdrop-filter: blur(12px);
}

.article-page .main-header.scrolled {
    background: rgba(7, 32, 67, .98);
}

#post-container {
    min-height: 70vh;
}

.post-hero {
    position: relative;
    padding: 155px 0 92px;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 85% 20%, rgba(71, 152, 255, .24), transparent 32%),
        linear-gradient(135deg, #071f43 0%, #0b376f 58%, #104f91 100%);
}

.post-hero::after {
    position: absolute;
    right: -100px;
    bottom: -190px;
    width: 420px;
    height: 420px;
    z-index: 1;
    content: '';
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
}

.post-hero-background,
.post-hero-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.post-hero-background {
    z-index: 0;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transform: scale(1.025);
    transition: opacity .8s ease, transform 5s ease;
}

.post-hero-background.active {
    opacity: 1;
    transform: scale(1);
}

.post-hero-overlay {
    z-index: 1;
    background: linear-gradient(110deg, rgba(4, 25, 57, .93), rgba(8, 48, 94, .76) 55%, rgba(12, 68, 126, .72));
}

.post-hero-slider-dots {
    position: absolute;
    bottom: 24px;
    left: 50%;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
    max-width: 80%;
    transform: translateX(-50%);
}

.post-hero-slider-dots button {
    width: 9px;
    height: 9px;
    padding: 0;
    background: rgba(255, 255, 255, .48);
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 99px;
    cursor: pointer;
    transition: width .25s ease, background .25s ease;
}

.post-hero-slider-dots button.active {
    width: 25px;
    background: #fff;
}

.post-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 980px;
    margin: 0 auto;
    text-align: center;
}

.post-breadcrumb {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
    margin-bottom: 28px;
    color: rgba(255, 255, 255, .68);
    font-size: .86rem;
}

.post-breadcrumb a {
    color: rgba(255, 255, 255, .84);
    text-decoration: none;
}

.post-breadcrumb a:hover { color: #fff; }
.post-breadcrumb span:last-child { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.post-category,
.post-section-heading > span,
.post-summary > span,
.post-donation-cta > span {
    color: #5faaff;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.post-hero h1 {
    max-width: 900px;
    margin: 14px auto 22px;
    color: #fff;
    font-size: clamp(2.2rem, 5vw, 4.6rem);
    line-height: 1.08;
    text-wrap: balance;
}

.post-hero-meta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 9px;
    color: rgba(255, 255, 255, .78);
    font-size: .94rem;
}

.post-hero-meta strong { color: #fff; }

.post-page-layout {
    padding-top: 64px;
    padding-bottom: 90px;
}

.post-reading-column {
    max-width: 820px;
    margin: 0 auto;
}

.post-full {
    padding: clamp(26px, 5vw, 54px);
    background: #fff;
    border: 1px solid #e3ebf5;
    border-radius: 22px;
    box-shadow: 0 20px 54px rgba(10, 38, 71, .09);
}

.post-summary {
    margin: 6px 0 38px;
    padding: 26px 28px;
    background: linear-gradient(135deg, #edf5ff, #f7fbff);
    border: 1px solid #d8e8fb;
    border-left: 5px solid #2c72c7;
    border-radius: 14px;
}

.post-summary > span { color: #2869b5; }
.post-summary h2 { margin: 7px 0 13px; font-size: 1.35rem; }
.post-summary ul { display: grid; gap: 9px; margin: 0; padding-left: 21px; color: #354d6c; }
.post-summary li { padding-left: 3px; }

.post-full-content {
    color: #243b59;
    font-size: 1.12rem;
    line-height: 1.82;
}

.post-full-content p { margin-bottom: 1.45em; }
.post-full-content h1,
.post-full-content h2,
.post-full-content h3,
.post-full-content h4 { margin: 1.65em 0 .65em; color: #092a52; line-height: 1.25; }
.post-full-content h1 { font-size: 2.15rem; }
.post-full-content h2 { font-size: 1.75rem; }
.post-full-content h3 { font-size: 1.4rem; }
.post-full-content ul,
.post-full-content ol { margin: 0 0 1.5em; padding-left: 1.5em; }
.post-full-content li { margin-bottom: .5em; }
.post-full-content a { color: #195fb3; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.post-full-content blockquote {
    margin: 2em 0;
    padding: 22px 26px;
    color: #173a65;
    background: #f1f6fc;
    border-left: 4px solid #2c72c7;
    border-radius: 0 12px 12px 0;
}
.post-full-content img { max-width: 100%; height: auto; }

.post-share {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 13px;
    margin-top: 42px;
    padding-top: 25px;
    border-top: 1px solid #e3ebf5;
}

.post-share > span:first-child { color: #173a65; font-size: .88rem; font-weight: 800; }
.post-share-buttons { display: flex; gap: 8px; }
.post-share-buttons a,
.post-share-buttons button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    color: #fff;
    background: #164e8c;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 800;
    text-decoration: none;
}
.post-share-buttons a:first-child { background: #20b95d; }
.post-share-buttons a:nth-child(2) { background: #1877f2; }
.post-share-buttons button:hover,
.post-share-buttons a:hover { filter: brightness(.92); transform: translateY(-2px); }
.post-native-share { width: auto !important; }
.post-share-status { color: #23864b; font-size: .82rem; font-weight: 700; }

.post-donation-cta {
    position: relative;
    margin-top: 44px;
    padding: 70px 50px;
    overflow: hidden;
    text-align: center;
    background:
        radial-gradient(circle at 90% 0, rgba(100, 181, 246, .2), transparent 32%),
        linear-gradient(140deg, #071f43, #0b3f77);
    border: 0;
    border-radius: 22px;
    box-shadow: 0 18px 46px rgba(7, 31, 67, .18);
}

.post-donation-cta h2 { max-width: 650px; margin: 10px auto 16px; color: #fff; font-size: clamp(1.8rem, 4vw, 2.7rem); }
.post-donation-cta p { max-width: 640px; margin: 0 auto 24px; color: #cbd9eb; }
.post-donation-cta > span { color: #72b8ff; }
.post-donation-icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin: 0 auto 17px;
    color: #fff;
    background: #25d366;
    border-radius: 50%;
    font-size: 1.5rem;
}
.post-donation-trust { display: flex; justify-content: center; flex-wrap: wrap; gap: 18px; margin-bottom: 28px; color: #dce9f8; font-size: .88rem; font-weight: 700; }

.post-section-heading { margin-bottom: 28px; }
.post-section-heading > span { color: #2869b5; }
.post-section-heading h2 { margin-top: 6px; font-size: 2rem; }

.related-section {
    margin: 66px auto 0;
    padding-top: 45px;
    border-top: 1px solid #dce6f2;
}

.related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.related-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e1e9f3;
    border-radius: 15px;
    box-shadow: 0 9px 26px rgba(10, 38, 71, .07);
    transition: transform .3s ease, box-shadow .3s ease;
}
.related-card:hover { transform: translateY(-5px); box-shadow: 0 15px 34px rgba(10, 38, 71, .13); }
.related-img-wrapper { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #e8eef6; }
.related-img-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.related-card:hover .related-img-wrapper img { transform: scale(1.04); }
.related-content { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 18px; }
.related-content h3 { margin: 8px 0 10px; font-size: 1.05rem; line-height: 1.4; }
.related-content h3 a { color: #092a52; text-decoration: none; }
.related-content p { display: -webkit-box; margin-bottom: 15px; overflow: hidden; color: #607187; font-size: .88rem; line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.related-date { color: #728299; font-size: .75rem; font-weight: 700; text-transform: uppercase; }
.related-read-more { margin-top: auto; color: #195fb3; font-size: .84rem; font-weight: 800; text-decoration: none; }

.post-error { min-height: 70vh; padding: 190px 20px 100px; text-align: center; }

@media (max-width: 900px) {
    .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .related-card:last-child { grid-column: 1 / -1; max-width: calc(50% - 10px); }
}

@media (max-width: 768px) {
    .article-page .main-header {
        top: 10px;
        left: 10px;
        width: calc(100% - 20px);
        border-radius: 12px;
        background: rgba(7, 31, 68, .94);
        transform: none;
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
    }
    .article-page .main-header .container { width: 100%; margin: 0; padding: 0 20px; }
    .article-page .navbar { min-height: 64px; padding: 10px 0; }
    .article-page .logo { gap: 8px; font-size: 1.05rem; line-height: 1.2; }
    .article-page .logo img { width: auto; height: 34px; }
    .article-page .menu-toggle { flex: 0 0 auto; }
    .article-page .nav-links {
        top: 8px;
        left: 8px;
        width: calc(100% - 16px);
        height: calc(100dvh - 16px);
        max-height: calc(100dvh - 16px);
        padding: 92px 28px max(22px, env(safe-area-inset-bottom));
        gap: 9px;
        overflow-y: auto;
        border-radius: 17px;
        overscroll-behavior: contain;
    }
    .article-page .nav-links::before { top: 33px; left: 28px; }
    .article-page .nav-links > a { min-height: 42px; padding: 7px 0 10px; font-size: 1.05rem; }
    .article-page .nav-links .mobile-socials { flex-shrink: 0; margin-top: 12px; padding-top: 16px; }
    .article-page .close-menu-btn { top: 20px; right: 20px; width: 42px; height: 42px; }
    .article-page.mobile-menu-open { overflow: hidden; }
    .article-page.mobile-menu-open .whatsapp-popup,
    .article-page.mobile-menu-open .back-to-top { opacity: 0; visibility: hidden; pointer-events: none; }
    .post-hero { display: flex; min-height: 640px; align-items: center; padding: 112px 0 78px; }
    .post-hero-inner { width: 100%; padding-right: 20px; padding-left: 20px; }
    .post-hero-background { object-position: center center; }
    .post-hero-overlay { background: linear-gradient(180deg, rgba(3, 21, 48, .88), rgba(6, 40, 80, .75) 48%, rgba(4, 26, 58, .9)); }
    .post-breadcrumb { justify-content: flex-start; margin-bottom: 20px; overflow: hidden; font-size: .78rem; white-space: nowrap; }
    .post-breadcrumb span:last-child { display: none; }
    .post-hero h1 { margin: 12px 0 20px; font-size: clamp(2rem, 9.5vw, 2.85rem); line-height: 1.12; text-align: left; overflow-wrap: anywhere; }
    .post-category { display: block; text-align: left; }
    .post-hero-meta { justify-content: flex-start; gap: 7px 9px; font-size: .84rem; text-align: left; }
    .post-hero-slider-dots { bottom: 20px; gap: 6px; }
    .post-hero-slider-dots button { width: 10px; height: 10px; }
    .post-hero-slider-dots button.active { width: 28px; }
    .post-page-layout { padding: 24px 12px 70px; }
    .post-full { padding: 20px 17px 24px; border-radius: 16px; box-shadow: 0 12px 34px rgba(10, 38, 71, .08); }
    .article-page .detail-image-slider { aspect-ratio: 4 / 3; margin-bottom: 25px; }
    .post-full-content { font-size: 1rem; line-height: 1.76; }
    .post-full-content p { margin-bottom: 1.25em; overflow-wrap: anywhere; }
    .post-full-content h1 { font-size: 1.75rem; }
    .post-full-content h2 { font-size: 1.5rem; }
    .post-full-content h3 { font-size: 1.25rem; }
    .post-summary { margin-bottom: 30px; padding: 20px 17px; border-radius: 12px; }
    .post-summary h2 { font-size: 1.2rem; }
    .post-summary ul { padding-left: 18px; font-size: .94rem; }
    .post-donation-cta { margin-top: 28px; padding: 45px 18px; border-radius: 16px; }
    .post-donation-cta h2 { font-size: 1.65rem; line-height: 1.25; }
    .post-donation-cta p { margin-bottom: 22px; font-size: .96rem; line-height: 1.7; }
    .post-donation-trust { gap: 10px 15px; }
    .post-share { align-items: flex-start; flex-direction: column; }
    .post-share-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
    .post-share-buttons a,
    .post-share-buttons button { width: 100%; min-width: 0; }
    .post-native-share { grid-column: 1 / -1; }
    .related-section { margin-top: 44px; padding-top: 31px; }
    .post-section-heading { margin-bottom: 20px; }
    .post-section-heading h2 { font-size: 1.65rem; }
    .related-grid { grid-template-columns: minmax(0, 1fr); }
    .related-card:last-child { grid-column: auto; max-width: none; }
    .related-card { border-radius: 14px; }
    .related-img-wrapper { aspect-ratio: 16 / 9; }
    .related-content { padding: 18px 17px 20px; }
    .related-content h3 { font-size: 1.08rem; }
    .article-page .whatsapp-popup { bottom: calc(14px + env(safe-area-inset-bottom)); }
    .article-page .back-to-top { bottom: calc(70px + env(safe-area-inset-bottom)); }
}

@media (max-width: 420px) {
    .article-page .main-header { left: 7px; width: calc(100% - 14px); }
    .article-page .main-header .container { padding-right: 17px; padding-left: 17px; }
    .article-page .logo { gap: 8px; font-size: .95rem; }
}

@media (max-width: 420px), (max-height: 620px) {
    .article-page .nav-links { padding-top: 78px; gap: 5px; }
    .article-page .nav-links::before { top: 28px; }
    .article-page .close-menu-btn { top: 14px; right: 16px; }
    .article-page .nav-links > a { min-height: 37px; padding: 5px 0 8px; }
    .article-page .nav-links .mobile-socials { margin-top: 7px; padding-top: 12px; }
    .article-page .mobile-socials__label { display: none; }
}

@media (max-width: 420px) {
    .post-hero-meta span[aria-hidden="true"] { display: none; }
    .post-hero-meta { gap: 6px 12px; }
    .post-hero-meta > * { width: auto; }
    .post-hero { min-height: 590px; }
    .post-hero h1 { font-size: clamp(1.8rem, 9.2vw, 2.35rem); }
    .post-category { font-size: .7rem; }
    .post-full { padding-right: 15px; padding-left: 15px; }
    .post-donation-cta .btn-whatsapp-minimal { width: 100%; padding-right: 18px; padding-left: 18px; }
}

@media (max-width: 360px) {
    .article-page .logo { max-width: 220px; font-size: .92rem; }
    .post-hero { min-height: 560px; }
    .post-hero h1 { font-size: 1.75rem; }
    .post-hero-meta span[aria-hidden="true"] { display: none; }
    .post-hero-meta { flex-direction: column; gap: 3px; }
}

@media (prefers-reduced-motion: reduce) {
    .post-hero-background { transition: none; }
}