/* Shared mobile fixes for all article detail pages (article/*.html) */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* The body repeats the page title as an <h1>. Hide the duplicate copy. */
#article-body > h1 {
    display: none;
}

/* The single <h2> is the article subtitle; give it hierarchy instead of body-text styling. */
#article-body > h2 {
    margin-top: 0;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.6;
    color: #e2e8f0;
    border-left: 3px solid #06b6d4;
    padding-left: 0.875rem;
}

/* Keep long words or pasted URLs inside the article from forcing horizontal scroll. */
#article-body {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Any media that may end up in article content stays fluid. */
#article-body img,
#article-body video,
#article-body iframe,
#article-body table {
    max-width: 100%;
}

#article-body iframe,
#article-body table {
    width: 100%;
    height: auto;
}

@media (max-width: 767px) {
    /* 30px headlines with 7+ lines dominated the first screen on phones. */
    #article-title {
        font-size: 1.625rem;
        line-height: 1.3;
    }

    /* A fixed 300px hero crops the composition on narrow screens; keep the 16:9 frame instead. */
    #article-image {
        height: auto;
        aspect-ratio: 16 / 9;
    }

    /* Back / share buttons keep the recommended 44px touch target. */
    #article button {
        min-width: 2.75rem;
        min-height: 2.75rem;
    }
}

/* Fallback for older in-app browsers that support text-fill-color but not background-clip: text. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    body .text-gradient {
        color: #22d3ee;
        -webkit-text-fill-color: #22d3ee;
    }
}