/*
 * Mobile legibility guardrails.
 * Loaded after template CSS so every mobile template remains readable on phones.
 */

@media (max-width: 640px) {
    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body[class*="template-mobile-"] {
        font-size: 16px !important;
        line-height: 1.7;
    }

    /* No functional text should fall back to the old 8-11px template values. */
    body[class*="template-mobile-"] .mast a,
    body[class*="template-mobile-"] .mast span,
    body[class*="template-mobile-"] .mast small,
    body[class*="template-mobile-"] .mast b,
    body[class*="template-mobile-"] .mast label,
    body[class*="template-mobile-"] main span,
    body[class*="template-mobile-"] main small,
    body[class*="template-mobile-"] main em,
    body[class*="template-mobile-"] main time,
    body[class*="template-mobile-"] main b,
    body[class*="template-mobile-"] main i {
        font-size: 12px !important;
    }

    body[class*="template-mobile-"] main a,
    body[class*="template-mobile-"] main p,
    body[class*="template-mobile-"] main button,
    body[class*="template-mobile-"] main label {
        font-size: 13px !important;
    }

    body[class*="template-mobile-"] .brand span {
        font-size: 21px !important;
        line-height: 1.25 !important;
    }

    body[class*="template-mobile-"] .mast input {
        font-size: 15px !important;
    }

    body[class*="template-mobile-"] .mast form button {
        font-size: 16px !important;
    }

    body[class*="template-mobile-"] .mast nav a {
        font-size: 16px !important;
        line-height: 1.4 !important;
    }

    body[class*="template-mobile-"] .site-signature {
        font-size: 13px !important;
    }

    body[class*="template-mobile-"] .edition,
    body[class*="template-mobile-"] .index-number {
        font-size: 12px !important;
    }

    body[class*="template-mobile-"] .breadcrumb,
    body[class*="template-mobile-"] .player-page > header,
    body[class*="template-mobile-"] .player-page > header a {
        font-size: 14px !important;
    }

    body[class*="template-mobile-"] .content-section > header small,
    body[class*="template-mobile-"] .page-title small,
    body[class*="template-mobile-"] .detail-top small,
    body[class*="template-mobile-"] .story > small,
    body[class*="template-mobile-"] .home-ranking header small {
        font-size: 12px !important;
    }

    body[class*="template-mobile-"] .content-section > header > a,
    body[class*="template-mobile-"] .home-ranking header span {
        font-size: 13px !important;
    }

    body[class*="template-mobile-"] main .card h3,
    body[class*="template-mobile-"] main [class*="-grid"] h3,
    body[class*="template-mobile-"] main [class$="-list"] h3,
    body[class*="template-mobile-"] main .rail-card h3,
    body[class*="template-mobile-"] main .violet-mix h3 {
        font-size: 16px !important;
        line-height: 1.4 !important;
    }

    body[class*="template-mobile-"] main .editorial-lead h3,
    body[class*="template-mobile-"] main .channel-featured h3,
    body[class*="template-mobile-"] main .popcorn-lead h3,
    body[class*="template-mobile-"] main .violet-lead h3 {
        font-size: 18px !important;
    }

    body[class*="template-mobile-"] main .card p,
    body[class*="template-mobile-"] main [class*="-grid"] p,
    body[class*="template-mobile-"] main [class$="-list"] p,
    body[class*="template-mobile-"] main .rail-card p,
    body[class*="template-mobile-"] main .violet-mix p {
        height: 3.2em !important;
        min-height: 3.2em !important;
        max-height: 3.2em !important;
        font-size: 13px !important;
        line-height: 1.6 !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        white-space: normal !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body[class*="template-mobile-"] main .card small,
    body[class*="template-mobile-"] main [class*="-grid"] small,
    body[class*="template-mobile-"] main [class$="-list"] small,
    body[class*="template-mobile-"] main .rail-card small,
    body[class*="template-mobile-"] main .violet-mix small {
        font-size: 12px !important;
        line-height: 1.45 !important;
    }

    body[class*="template-mobile-"] main [class*="-grid"] figure > span,
    body[class*="template-mobile-"] main [class*="-grid"] figure > b,
    body[class*="template-mobile-"] main [class*="-grid"] figure > em,
    body[class*="template-mobile-"] main .card figure > span,
    body[class*="template-mobile-"] main .card figure > b,
    body[class*="template-mobile-"] main .card figure > em,
    body[class*="template-mobile-"] .rank-badge {
        font-size: 12px !important;
        line-height: 1.35 !important;
    }

    body[class*="template-mobile-"] .catalog-list em,
    body[class*="template-mobile-"] .paper-list > li > a > span,
    body[class*="template-mobile-"] .paper-list > li > a > em,
    body[class*="template-mobile-"] .nightwave-list > li > a > em,
    body[class*="template-mobile-"] .midnight-list > a > span em {
        font-size: 12px !important;
    }

    body[class*="template-mobile-"] .home-ranking li h3 {
        font-size: 16px !important;
        line-height: 1.4 !important;
    }

    body[class*="template-mobile-"] .home-ranking li p {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    body[class*="template-mobile-"] .rank-groups header a {
        font-size: 13px !important;
    }

    body[class*="template-mobile-"] .rank-groups li b {
        font-size: 14px !important;
    }

    body[class*="template-mobile-"] .rank-groups li span {
        font-size: 15px !important;
    }

    body[class*="template-mobile-"] .rank-groups li em {
        font-size: 12px !important;
    }

    body[class*="template-mobile-"] .facts span {
        font-size: 12px !important;
    }

    body[class*="template-mobile-"] .blurb,
    body[class*="template-mobile-"] .credit,
    body[class*="template-mobile-"] .credit a,
    body[class*="template-mobile-"] .vod-subtitle {
        font-size: 14px !important;
        line-height: 1.65 !important;
    }

    body[class*="template-mobile-"] .story p,
    body[class*="template-mobile-"] .detail-description,
    body[class*="template-mobile-"] .vod-content {
        font-size: 15px !important;
        line-height: 1.8 !important;
    }

    body[class*="template-mobile-"] .description-toggle,
    body[class*="template-mobile-"] .primary,
    body[class*="template-mobile-"] .episodes a,
    body[class*="template-mobile-"] .episode-switch a,
    body[class*="template-mobile-"] .episode-switch button,
    body[class*="template-mobile-"] .episode-switch span,
    body[class*="template-mobile-"] .play-share,
    body[class*="template-mobile-"] .pager a,
    body[class*="template-mobile-"] .pager span,
    body[class*="template-mobile-"] .pager b {
        font-size: 14px !important;
    }

    body[class*="template-mobile-"] .primary {
        font-size: 15px !important;
    }

    body[class*="template-mobile-"] .episodes a,
    body[class*="template-mobile-"] .episode-switch a,
    body[class*="template-mobile-"] .episode-switch button,
    body[class*="template-mobile-"] .episode-switch span,
    body[class*="template-mobile-"] .play-share {
        min-height: 42px;
    }

    body[class*="template-mobile-"] .comment-item b,
    body[class*="template-mobile-"] .comment-card b {
        font-size: 14px !important;
    }

    body[class*="template-mobile-"] .comment-item time,
    body[class*="template-mobile-"] .comment-card time,
    body[class*="template-mobile-"] .comment-item footer,
    body[class*="template-mobile-"] .comment-card footer {
        font-size: 12px !important;
    }

    body[class*="template-mobile-"] .comment-item p,
    body[class*="template-mobile-"] .comment-card p {
        font-size: 14px !important;
        line-height: 1.65 !important;
    }

    body[class*="template-mobile-"] .flip-tags a,
    body[class*="template-mobile-"] .flip-tags span,
    body[class*="template-mobile-"] .continue-links a {
        font-size: 13px !important;
    }

    body[class*="template-mobile-"] > footer,
    body[class*="template-mobile-"] > footer p,
    body[class*="template-mobile-"] > footer nav a,
    body[class*="template-mobile-"] > footer small,
    body[class*="template-mobile-"] > footer span,
    body[class*="template-mobile-"] .watch-history-panel {
        font-size: 13px !important;
        line-height: 1.65 !important;
    }

    body[class*="template-mobile-"] > footer a,
    body[class*="template-mobile-"] > footer b,
    body[class*="template-mobile-"] > footer em,
    body[class*="template-mobile-"] > footer i,
    body[class*="template-mobile-"] .watch-history-panel a,
    body[class*="template-mobile-"] .watch-history-panel b,
    body[class*="template-mobile-"] .watch-history-panel em,
    body[class*="template-mobile-"] .watch-history-panel i,
    body[class*="template-mobile-"] .watch-history-panel p,
    body[class*="template-mobile-"] .watch-history-panel small,
    body[class*="template-mobile-"] .watch-history-panel span,
    body[class*="template-mobile-"] .watch-history-panel time {
        font-size: 13px !important;
    }
}