/* ==========================================================================
   ARTICLE DETAIL PAGE — coloured hero panel + body + similar journals
   ========================================================================== */
.article-page {
    --article-hero-bg: #b6c4cf;            /* default panel color; per-article override via inline --article-hero-bg */
    --article-hero-radius: 14px;
    padding-bottom: 12vh;
}

/* Coloured hero panel that frames the cover image.
   Bottom padding is large enough to fully contain the floating overlay badge
   so it never crosses into the article body region. The panel is pulled up
   behind the fixed header so its colour shows through the frosted-glass strip
   at the very top of the page; the top padding compensates so the photo keeps
   the same visual offset below the header. */
.article-hero-section {
    background-color: var(--article-hero-bg);
    margin-top: calc(var(--header-height) * -1);
    margin-bottom: 6vh;
    padding: calc(4vh + var(--header-height)) var(--container-gutter) clamp(110px, 13vh, 180px) var(--container-gutter);
}

.article-hero-frame {
    position: relative;
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    max-height: 82vh;
    border-radius: var(--article-hero-radius);
    overflow: visible;                     /* overlay straddles the bottom edge */
}

.article-hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--article-hero-radius);
    display: block;
}

.article-hero-section.is-pending .article-hero-frame {
    background: linear-gradient(135deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.12) 100%);
    border-radius: var(--article-hero-radius);
}

/* Floating glass badge that overlaps the photo's lower edge */
.article-hero-overlay {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
    width: min(460px, 84%);
    background-color: rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 12px;
    padding: 0.95rem 1.2rem 1rem 1.2rem;
    color: #fff;
    text-align: center;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
}

.article-overlay-type {
    display: inline-block;
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    color: #fff;
    background-color: rgba(255, 255, 255, 0.14);
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    margin-bottom: 0.55rem;
}

.article-overlay-title {
    font-size: clamp(0.95rem, 1.5vw, 1.15rem);
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: #fff;
    margin: 0 0 0.5rem 0;
}

.article-overlay-meta {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    align-items: baseline;
    flex-wrap: wrap;
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    color: rgba(255, 255, 255, 0.78);
}

.article-overlay-dot {
    color: rgba(255, 255, 255, 0.5);
}

/* Body section — text column centered on the page */
.article-excerpt {
    position: relative;
    font-size: clamp(1.1rem, 1.6vw, 1.3rem);
    line-height: 1.55;
    font-weight: 300;
    color: var(--text-muted);
    max-width: 64ch;
    margin: 0 auto 4vh auto;
    padding-bottom: 4vh;
}

.article-excerpt::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100vw - 2 * var(--container-gutter));
    height: 1px;
    background-color: var(--border-color);
}

.article-body {
    font-size: 1.05rem;
    line-height: 1.75;
    font-weight: 300;
    color: var(--text-main);
    max-width: 64ch;
    margin: 0 auto;
}

.article-body h2 {
    font-size: clamp(1.2rem, 1.8vw, 1.45rem);
    font-weight: 400;
    letter-spacing: -0.01em;
    margin: 3rem 0 1rem 0;
}

.article-body p {
    margin: 0 0 1.4rem 0;
}

.article-body p:last-child {
    margin-bottom: 0;
}

/* Responsive: smaller hero, full-width badge on narrow screens */
@media (max-width: 768px) {
    .article-hero-section {
        padding: calc(3vh + var(--header-height)) var(--container-gutter) 9vh var(--container-gutter);
    }
    .article-hero-frame {
        aspect-ratio: 4 / 3;
    }
    .article-hero-overlay {
        width: calc(100% - 2 * var(--container-gutter));
        padding: 1.1rem 1.2rem 1.2rem 1.2rem;
        text-align: left;
    }
    .article-overlay-meta {
        justify-content: flex-start;
    }
}


/* ==========================================================================
   SIMILAR JOURNALS — related articles under a journal entry
   ========================================================================== */
.similar-journals {
    position: relative;
    margin-top: 10vh;
    padding-top: 6vh;
}

.similar-journals::before {
    content: '';
    position: absolute;
    top: 0;
    left: var(--container-gutter);
    right: var(--container-gutter);
    height: 1px;
    background-color: var(--border-color);
}

.similar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 4vh;
}

.similar-title {
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 300;
    letter-spacing: -0.02em;
    margin: 0;
}

.similar-view-all {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.7rem 1.2rem;
    background-color: #f1f1f1;
    border-radius: 6px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--text-main);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

.similar-view-all:hover {
    background-color: #e2e2e2;
    color: var(--text-main);
}

.similar-view-all-arrow {
    font-size: 0.85rem;
    letter-spacing: 0;
    transition: transform 0.3s ease;
}

.similar-view-all:hover .similar-view-all-arrow {
    transform: translateX(3px);
}

.similar-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2vw;
}

.similar-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: var(--transition-fast);
}

.similar-card:hover .similar-card-title {
    color: var(--text-muted);
}

.similar-card-image {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 12px;
    background-color: #f6f6f6;
    margin-bottom: 1.4rem;
}

.similar-card-image.is-pending {
    background-image: linear-gradient(135deg, #f0f0f0 0%, #f8f8f8 100%);
}

.similar-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.similar-card:hover .similar-card-image img {
    transform: scale(1.03);
}

.similar-card-title {
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin: 0 0 0.9rem 0;
    transition: var(--transition-fast);
}

.similar-card-date {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--text-muted);
}


/* ==========================================================================
   Responsive — similar journals
   ========================================================================== */
@media (max-width: 1024px) {
    .similar-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 3vw;
    }
}

@media (max-width: 768px) {
    .similar-journals {
        margin-top: 8vh;
        padding-top: 5vh;
    }
    .similar-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
        margin-bottom: 3vh;
    }
    .similar-grid {
        display: flex;
        grid-template-columns: none;
        gap: 4vw;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        margin: 0 calc(var(--container-gutter) * -1);
        padding: 0 var(--container-gutter) 1rem var(--container-gutter);
        scrollbar-width: none;
    }
    .similar-grid::-webkit-scrollbar {
        display: none;
    }
    .similar-card {
        flex: 0 0 78%;
        scroll-snap-align: start;
    }
}