/* ===================== */
/* ===== CASE STUDIES - MOAJZA NATIVE JOURNAL ===== */
/* ===================== */

.article-trigger {
    font-family: inherit;
}

.article-card,
.featured-article,
.mobile-article,
.mobile-featured-article {
    border: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.article-card:focus-visible,
.featured-article:focus-visible,
.mobile-article:focus-visible,
.mobile-featured-article:focus-visible,
.article-gate-close:focus-visible,
.gate-input-row button:focus-visible,
.gate-actions a:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
}

@media (min-width: 1024px) {
    .journal-page-laptop {
        background: var(--color-white);
        color: var(--color-black);
        overflow: hidden;
    }

    .journal-hero {
        min-height: 60vh;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 145px 60px 86px;
        text-align: center;
        background: linear-gradient(135deg, var(--color-white) 0%, var(--color-gray-50) 100%);
        overflow: hidden;
    }

    .journal-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(var(--color-gray-200) 1px, transparent 1px);
        background-size: 50px 50px;
        opacity: 0.4;
        pointer-events: none;
    }

    .journal-hero::after {
        content: "";
        position: absolute;
        width: min(520px, 42vw);
        height: min(520px, 42vw);
        right: 7vw;
        bottom: -16%;
        background: radial-gradient(circle, rgba(200, 169, 126, 0.15), transparent 68%);
        pointer-events: none;
    }

    .journal-hero-mark {
        position: absolute;
        width: min(430px, 35vw);
        right: 8vw;
        bottom: 28px;
        opacity: 0.055;
        pointer-events: none;
    }

    .journal-hero-inner {
        width: min(1180px, 100%);
        position: relative;
        z-index: 2;
        opacity: 0;
        transform: translateY(30px);
        animation: caseHeroReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
    }

    @keyframes caseHeroReveal {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .journal-topline {
        display: flex;
        justify-content: center;
        gap: 20px;
        margin-bottom: 30px;
        color: var(--color-accent);
        font-size: 0.7rem;
        font-weight: var(--font-weight-medium);
        letter-spacing: 4px;
        text-transform: uppercase;
    }

    .journal-title h1 {
        max-width: 980px;
        margin: 0 auto 25px;
        color: var(--color-black);
        font-family: var(--font-display);
        font-size: 4.2rem;
        font-weight: 600;
        line-height: 1.08;
        letter-spacing: 0.02em;
    }

    .journal-title em {
        color: var(--color-accent);
        font-style: normal;
    }

    .journal-intro {
        display: block;
        max-width: 660px;
        margin: 0 auto;
    }

    .journal-intro p {
        color: var(--color-gray-500);
        font-size: 1.05rem;
        line-height: 1.75;
    }

    .journal-index-label {
        display: inline-flex;
        align-items: center;
        gap: 16px;
        margin-top: 30px;
        color: var(--color-gray-500);
        font-size: 0.68rem;
        font-weight: var(--font-weight-medium);
        letter-spacing: 3px;
        text-transform: uppercase;
    }

    .journal-featured {
        padding: 100px 0;
        background: var(--color-white);
    }

    .featured-article {
        width: min(1180px, calc(100% - 80px));
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1.05fr 0.95fr;
        gap: 58px;
        align-items: center;
        background: var(--color-white);
        color: var(--color-black);
    }

    .featured-image {
        min-height: 500px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        border-radius: 16px;
        background:
            radial-gradient(circle at center, rgba(200, 169, 126, 0.16), transparent 56%),
            linear-gradient(135deg, var(--color-gray-50), var(--color-white));
        box-shadow: var(--shadow-lg);
    }

    .featured-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: none;
        transition: var(--transition-premium);
    }

    .featured-article:hover .featured-image img {
        transform: scale(1.04);
    }

    .article-number {
        position: absolute;
        left: 26px;
        bottom: 24px;
        color: var(--color-accent);
        font-size: 0.78rem;
        font-weight: var(--font-weight-medium);
        letter-spacing: 2px;
    }

    .featured-badge {
        position: absolute;
        top: 24px;
        right: 24px;
        padding: 8px 16px;
        border-radius: 30px;
        background: var(--color-white);
        color: var(--color-accent-dark);
        box-shadow: var(--shadow-sm);
        font-size: 0.62rem;
        font-weight: var(--font-weight-medium);
        letter-spacing: 2px;
        text-transform: uppercase;
    }

    .article-meta {
        display: flex;
        justify-content: space-between;
        gap: 18px;
        padding-bottom: 14px;
        border-bottom: 1px solid var(--color-gray-200);
        color: var(--color-accent);
        font-size: 0.65rem;
        font-weight: var(--font-weight-medium);
        letter-spacing: 2.2px;
        text-transform: uppercase;
    }

    .featured-copy h2 {
        margin: 30px 0 22px;
        color: var(--color-black);
        font-family: var(--font-display);
        font-size: 3.25rem;
        font-weight: 600;
        line-height: 1.05;
        letter-spacing: 0.02em;
    }

    .featured-copy h2 em {
        display: inline;
        color: var(--color-accent);
        font-style: normal;
    }

    .featured-copy > p {
        max-width: 480px;
        color: var(--color-gray-600);
        font-size: 0.95rem;
        line-height: 1.8;
    }

    .read-line {
        display: inline-flex;
        align-items: center;
        gap: 14px;
        margin-top: 34px;
        padding: 14px 28px;
        background: var(--color-black);
        color: var(--color-white);
        font-size: 0.72rem;
        font-weight: var(--font-weight-medium);
        letter-spacing: 2px;
        text-transform: uppercase;
        transition: var(--transition-smooth);
    }

    .featured-article:hover .read-line {
        background: var(--color-accent);
        transform: translateX(8px);
    }

    .journal-archive {
        padding: 100px 0 120px;
        background: var(--color-gray-50);
    }

    .archive-heading {
        width: min(1180px, calc(100% - 80px));
        margin: 0 auto 60px;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: 40px;
    }

    .archive-kicker {
        color: var(--color-accent);
        font-size: 0.7rem;
        font-weight: var(--font-weight-medium);
        letter-spacing: 4px;
        text-transform: uppercase;
    }

    .archive-heading h2 {
        margin-top: 18px;
        color: var(--color-black);
        font-family: var(--font-display);
        font-size: 3rem;
        font-weight: 600;
        line-height: 1.12;
        letter-spacing: 0.02em;
    }

    .archive-count {
        display: flex;
        align-items: flex-end;
        gap: 16px;
    }

    .archive-count strong {
        color: var(--color-accent);
        font-size: 3.2rem;
        font-weight: var(--font-weight-medium);
        line-height: 0.9;
    }

    .archive-count span {
        color: var(--color-gray-500);
        font-size: 0.62rem;
        font-weight: var(--font-weight-medium);
        letter-spacing: 2px;
        line-height: 1.5;
        text-transform: uppercase;
    }

    .article-grid {
        width: min(1180px, calc(100% - 80px));
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 44px 34px;
    }

    .article-card {
        min-width: 0;
        background: var(--color-white);
        border: 1px solid var(--color-gray-100);
        border-radius: 16px;
        overflow: hidden;
        box-shadow: var(--shadow-md);
        transition: var(--transition-smooth);
    }

    .article-card:hover {
        transform: translateY(-7px);
        border-color: var(--color-accent-light);
        box-shadow: var(--shadow-lg);
    }

    .article-card-coming-soon {
        cursor: default;
    }

    .article-card-coming-soon:hover {
        transform: none;
        border-color: var(--color-gray-100);
        box-shadow: var(--shadow-md);
    }

    .article-card-wide {
        grid-column: span 2;
    }

    .article-image,
    .article-card-wide .article-image {
        height: 300px;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        background:
            radial-gradient(circle at center, rgba(200, 169, 126, 0.16), transparent 58%),
            var(--color-white-off);
        border-radius: 0;
    }

    .article-card-wide .article-image {
        height: 340px;
    }

    .article-image img {
        width: min(58%, 250px);
        height: auto;
        object-fit: contain;
        transition: var(--transition-premium);
    }

    .article-image img.article-thumbnail {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .article-card:hover .article-image img {
        transform: scale(1.06);
    }

    .coming-soon-mark {
        position: static;
        color: var(--color-black);
        font-family: var(--font-display);
        font-size: 2.1rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        line-height: 1.05;
        text-align: center;
        text-transform: uppercase;
    }

    .article-card-wide .coming-soon-mark {
        font-size: 2.4rem;
    }

    .article-image > span {
        position: absolute;
        top: 20px;
        left: 22px;
        color: var(--color-accent);
        font-size: 0.7rem;
        font-weight: var(--font-weight-medium);
        letter-spacing: 2px;
    }

    .article-image > .coming-soon-mark {
        position: static;
        color: var(--color-black);
        font-size: 2.1rem;
        letter-spacing: 0.08em;
    }

    .article-card-wide .article-image > .coming-soon-mark {
        font-size: 2.4rem;
    }

    .article-card-copy {
        padding: 26px;
    }

    .article-card-copy h3 {
        margin: 20px 0 13px;
        color: var(--color-black);
        font-family: var(--font-display);
        font-size: 1.7rem;
        font-weight: 600;
        line-height: 1.13;
        letter-spacing: 0.03em;
    }

    .article-card-copy > p {
        color: var(--color-gray-600);
        font-size: 0.86rem;
        line-height: 1.7;
    }

    .article-link {
        display: inline-block;
        margin-top: 22px;
        color: var(--color-black);
        font-size: 0.65rem;
        font-weight: var(--font-weight-medium);
        letter-spacing: 2px;
        text-transform: uppercase;
        transition: var(--transition-smooth);
    }

    .article-card:hover .article-link {
        color: var(--color-accent);
        transform: translateX(6px);
    }
}

@media (max-width: 1023px) {
    .journal-page-mobile {
        background: var(--color-white);
        color: var(--color-black);
        overflow: hidden;
    }

    .mobile-journal-hero {
        min-height: 60vh;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 112px 24px 60px;
        text-align: center;
        background: linear-gradient(135deg, var(--color-white) 0%, var(--color-gray-50) 100%);
        overflow: hidden;
    }

    .mobile-journal-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(var(--color-gray-200) 1px, transparent 1px);
        background-size: 42px 42px;
        opacity: 0.38;
        pointer-events: none;
    }

    .mobile-journal-meta {
        position: relative;
        z-index: 2;
        display: flex;
        justify-content: center;
        gap: 14px;
        margin-bottom: 22px;
        color: var(--color-accent);
        font-size: 1rem;
        font-weight: var(--font-weight-medium);
        letter-spacing: 0.24em;
        line-height: 1.35;
        text-transform: uppercase;
    }

    .mobile-journal-hero h1 {
        position: relative;
        z-index: 2;
        margin: 0 auto 18px;
        color: var(--color-black);
        font-family: var(--font-display);
        font-size: 2rem;
        font-weight: 600;
        line-height: 1.25;
        letter-spacing: 0.03em;
    }

    .mobile-journal-hero h1 em {
        display: block;
        color: var(--color-accent);
        font-style: normal;
    }

    .mobile-journal-hero > p {
        position: relative;
        z-index: 2;
        max-width: 340px;
        margin: 0 auto;
        color: var(--color-gray-500);
        font-size: 0.95rem;
        line-height: 1.7;
    }

    .mobile-story-count {
        position: relative;
        z-index: 2;
        display: inline-flex;
        justify-content: center;
        gap: 14px;
        margin-top: 30px;
        color: var(--color-gray-500);
        font-size: 0.72rem;
        font-weight: var(--font-weight-medium);
        letter-spacing: 0.2em;
        text-transform: uppercase;
    }

    .mobile-featured-section {
        padding: 70px 24px;
        background: var(--color-white);
    }

    .mobile-featured-article {
        width: 100%;
        background: var(--color-white);
        color: var(--color-black);
    }

    .mobile-featured-image {
        position: relative;
        aspect-ratio: 4 / 5;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        border-radius: 16px;
        background:
            radial-gradient(circle at center, rgba(200, 169, 126, 0.16), transparent 58%),
            var(--color-white-off);
        box-shadow: var(--shadow-md);
    }

    .mobile-featured-image img {
        width: 70%;
        height: auto;
        object-fit: contain;
    }

    .mobile-number {
        position: absolute;
        left: 18px;
        bottom: 18px;
        color: var(--color-accent);
        font-size: 0.72rem;
        font-weight: var(--font-weight-medium);
        letter-spacing: 2px;
    }

    .mobile-featured-label {
        position: absolute;
        top: 16px;
        right: 16px;
        padding: 7px 12px;
        border-radius: 24px;
        background: var(--color-white);
        color: var(--color-accent-dark);
        box-shadow: var(--shadow-sm);
        font-size: 0.58rem;
        font-weight: var(--font-weight-medium);
        letter-spacing: 1.5px;
    }

    .mobile-featured-copy {
        padding-top: 26px;
        text-align: center;
    }

    .mobile-meta-row {
        display: flex;
        justify-content: center;
        gap: 18px;
        margin-bottom: 18px;
        color: var(--color-accent);
        font-size: 0.68rem;
        font-weight: var(--font-weight-medium);
        letter-spacing: 1.8px;
        text-transform: uppercase;
    }

    .mobile-featured-copy h2 {
        margin: 0 0 14px;
        color: var(--color-black);
        font-family: var(--font-display);
        font-size: 2rem;
        font-weight: 600;
        line-height: 1.16;
        letter-spacing: 0.03em;
    }

    .mobile-featured-copy h2 em {
        color: var(--color-accent);
        font-style: normal;
    }

    .mobile-featured-copy p {
        max-width: 340px;
        margin: 0 auto;
        color: var(--color-gray-600);
        font-size: 0.9rem;
        line-height: 1.7;
    }

    .mobile-read {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        margin-top: 24px;
        padding: 13px 24px;
        background: var(--color-black);
        color: var(--color-white);
        font-size: 0.68rem;
        font-weight: var(--font-weight-medium);
        letter-spacing: 2px;
        text-transform: uppercase;
    }

    .mobile-archive {
        padding: 70px 24px 100px;
        background: var(--color-gray-50);
        text-align: center;
    }

    .mobile-archive-kicker {
        color: var(--color-accent);
        font-size: 1rem;
        font-weight: var(--font-weight-medium);
        letter-spacing: 0.24em;
        line-height: 1.35;
        text-transform: uppercase;
    }

    .mobile-archive > h2 {
        margin: 18px 0 42px;
        color: var(--color-black);
        font-family: var(--font-display);
        font-size: 2rem;
        font-weight: 600;
        line-height: 1.16;
        letter-spacing: 0.03em;
    }

    .mobile-article-list {
        display: grid;
        gap: 26px;
        border: 0;
        text-align: left;
    }

    .mobile-article {
        width: 100%;
        padding: 0;
        border: 1px solid var(--color-gray-100);
        border-radius: 16px;
        background: var(--color-white);
        box-shadow: var(--shadow-sm);
        overflow: hidden;
    }

    .mobile-article-image {
        position: relative;
        aspect-ratio: 16 / 10;
        margin-bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        background:
            radial-gradient(circle at center, rgba(200, 169, 126, 0.14), transparent 58%),
            var(--color-white-off);
    }

    .mobile-article-image img {
        width: 58%;
        height: auto;
        object-fit: contain;
    }

    .mobile-article-image img.article-thumbnail {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .mobile-featured-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .mobile-article .coming-soon-mark {
        position: static;
        color: var(--color-black);
        font-family: var(--font-display);
        font-size: 1.75rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        line-height: 1.05;
        text-align: center;
        text-transform: uppercase;
    }

    .mobile-article-image > .coming-soon-mark {
        position: static;
        color: var(--color-black);
        font-size: 1.75rem;
        letter-spacing: 0.08em;
    }

    .mobile-article-image span {
        position: absolute;
        top: 16px;
        left: 16px;
        color: var(--color-accent);
        font-size: 0.62rem;
        font-weight: var(--font-weight-medium);
        letter-spacing: 2px;
    }

    .mobile-article small,
    .mobile-article h3,
    .mobile-article p,
    .mobile-article strong {
        margin-left: 22px;
        margin-right: 22px;
    }

    .mobile-article small {
        display: block;
        margin-top: 22px;
        color: var(--color-accent);
        font-size: 0.64rem;
        font-weight: var(--font-weight-medium);
        letter-spacing: 1.8px;
        text-transform: uppercase;
    }

    .mobile-article h3 {
        margin-top: 12px;
        margin-bottom: 10px;
        color: var(--color-black);
        font-family: var(--font-display);
        font-size: 1.45rem;
        font-weight: 600;
        line-height: 1.18;
        letter-spacing: 0.03em;
    }

    .mobile-article p {
        color: var(--color-gray-600);
        font-size: 0.84rem;
        line-height: 1.65;
    }

    .mobile-article strong {
        display: inline-block;
        margin-top: 18px;
        margin-bottom: 24px;
        color: var(--color-black);
        font-size: 0.62rem;
        font-weight: var(--font-weight-medium);
        letter-spacing: 1.8px;
        text-transform: uppercase;
    }
}

.article-gate {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.article-gate.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.article-gate-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.article-gate-panel {
    width: min(500px, 100%);
    position: relative;
    z-index: 2;
    padding: 44px;
    border: 1px solid var(--color-gray-100);
    border-radius: 24px;
    background: var(--color-white);
    color: var(--color-black);
    box-shadow: var(--shadow-xl);
    transform: translateY(20px) scale(0.98);
    transition: var(--transition-smooth);
}

.article-gate.active .article-gate-panel {
    transform: translateY(0) scale(1);
}

.article-gate-close {
    width: 44px;
    height: 44px;
    position: absolute;
    top: 18px;
    right: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: var(--color-black);
    color: var(--color-white);
    font-size: 1.2rem;
    font-weight: var(--font-weight-light);
    cursor: pointer;
    transition: var(--transition-smooth);
}

.article-gate-close:hover {
    background: var(--color-accent);
    transform: rotate(90deg);
}

.gate-brand {
    width: auto;
    height: 50px;
    margin: 0 auto 22px;
}

.gate-brand img {
    display: block;
    width: auto;
    height: 50px;
    object-fit: contain;
    margin: 0 auto;
}

.gate-kicker {
    display: block;
    color: var(--color-accent);
    font-size: 0.62rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: 3px;
    text-align: center;
    text-transform: uppercase;
}

.article-gate-panel h2 {
    margin: 17px 0 14px;
    color: var(--color-black);
    font-family: var(--font-display);
    font-size: 2.35rem;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: 0.03em;
    text-align: center;
}

.article-gate-panel h2 em {
    color: var(--color-accent);
    font-style: normal;
}

.gate-description {
    max-width: 360px;
    margin: 0 auto;
    color: var(--color-gray-500);
    font-size: 0.88rem;
    line-height: 1.7;
    text-align: center;
}

.gate-selected {
    margin: 28px 0;
    padding: 16px 0;
    border-top: 1px solid var(--color-gray-100);
    border-bottom: 1px solid var(--color-gray-100);
    text-align: center;
}

.gate-selected span {
    display: block;
    margin-bottom: 7px;
    color: var(--color-accent);
    font-size: 0.58rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.gate-selected p {
    color: var(--color-gray-700);
    font-size: 0.86rem;
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
}

#articleGateForm label {
    display: block;
    margin-bottom: 10px;
    color: var(--color-accent);
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.gate-input-row {
    display: flex;
    border-bottom: 1px solid var(--color-gray-300);
}

.gate-input-row:focus-within {
    border-bottom-color: var(--color-accent);
}

.gate-input-row input {
    flex: 1;
    min-width: 0;
    padding: 14px 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--color-black);
    font-family: var(--font-sans);
    font-size: 0.9rem;
}

.gate-input-row input::placeholder {
    color: var(--color-gray-400);
}

.gate-input-row button {
    width: 54px;
    border: 0;
    background: transparent;
    color: var(--color-black);
    font-size: 1.4rem;
    cursor: pointer;
    transition: var(--transition-fast);
}

.gate-input-row button:hover {
    color: var(--color-accent);
    transform: translateX(5px);
}

.gate-error {
    min-height: 18px;
    margin-top: 8px;
    color: #a03d32;
    font-size: 0.7rem;
}

.gate-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 28px;
}

.gate-actions[hidden] {
    display: none;
}

.gate-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 14px 16px;
    border: 1px solid var(--color-black);
    color: var(--color-black);
    font-size: 0.62rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: 1.8px;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
    transition: var(--transition-smooth);
}

.gate-actions a:first-child {
    background: var(--color-black);
    color: var(--color-white);
}

.gate-actions a:hover {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: var(--color-white);
}

.gate-privacy {
    margin-top: 20px;
    color: var(--color-gray-500);
    font-size: 0.68rem;
    line-height: 1.5;
    text-align: center;
}

@media (max-width: 600px) {
    .article-gate {
        align-items: flex-end;
        padding: 0;
    }

    .article-gate-panel {
        width: 100%;
        max-height: 92vh;
        overflow-y: auto;
        padding: 42px 24px 34px;
        border-radius: 24px 24px 0 0;
    }

    .gate-brand {
        width: auto;
        margin-bottom: 18px;
    }

    .article-gate-panel h2 {
        font-size: 2rem;
    }

    .gate-selected {
        margin: 24px 0;
    }

    .gate-actions {
        grid-template-columns: 1fr;
    }
}