/* Shared mobile preview cards. Desktop keeps the full-width image layout.
   The original-layout opt-out is used only by the comparison preview. */
@media (max-width: 767px) {
    html:not([data-mobile-card-layout="original"]) :is(#simulation-section, #student-section, #teacher-section) > div > div:last-child {
        grid-auto-rows: auto;
        gap: .75rem;
    }

    html:not([data-mobile-card-layout="original"]) :is(#simulation-section, #student-section, #teacher-section) > div > div:last-child > a:is(.home-sim-preview-card, .home-article-preview-card) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
        grid-template-areas: "image title" "image meta";
        align-content: center;
        column-gap: .75rem;
        row-gap: .4rem;
        min-height: 6.75rem;
        height: auto;
        padding: .75rem;
        border-radius: 1rem;
        transition-property: box-shadow, border-color, transform;
    }

    html:not([data-mobile-card-layout="original"]) :is(#student-section, #teacher-section) > div > div:last-child > a.home-article-preview-card {
        grid-template-areas: "image title" "image question" "image meta";
    }

    html:not([data-mobile-card-layout="original"]) #simulation-section a.home-sim-preview-card > div:has(> h3) {
        grid-area: title;
        display: block;
        min-width: 0;
        margin: 0;
    }

    html:not([data-mobile-card-layout="original"]) #simulation-section a.home-sim-preview-card > div:has(> h3) > span {
        display: inline-block;
        margin-top: .3rem;
    }

    html:not([data-mobile-card-layout="original"]) .home-sim-preview-image,
    html:not([data-mobile-card-layout="original"]) .home-article-preview-media {
        grid-area: image;
        align-self: center;
        min-width: 0;
        width: 100%;
        margin: 0;
        border: 0;
        border-radius: .55rem;
        overflow: hidden;
    }

    html:not([data-mobile-card-layout="original"]) .home-sim-preview-image,
    html:not([data-mobile-card-layout="original"]) .home-article-preview-media img {
        height: auto;
        aspect-ratio: 8 / 5;
        object-fit: contain;
    }

    /* The selected section already identifies articles and teacher guides. */
    html:not([data-mobile-card-layout="original"]) .home-article-preview-label {
        display: none;
    }

    html:not([data-mobile-card-layout="original"]) :is(#simulation-section, #student-section, #teacher-section) > div > div:last-child > a:is(.home-sim-preview-card, .home-article-preview-card) h3 {
        grid-area: title;
        min-width: 0;
        min-height: 0;
        margin: 0;
        font-size: 1rem;
        line-height: 1.45;
        display: block;
        overflow: visible;
        -webkit-line-clamp: unset;
        line-clamp: unset;
        overflow-wrap: anywhere;
    }

    html:not([data-mobile-card-layout="original"]) :is(#student-section, #teacher-section) > div > div:last-child > a.home-article-preview-card p {
        grid-area: question;
        min-width: 0;
        /* Reserve two description lines so one-line cards keep the same rhythm. */
        min-height: 3.1em;
        margin: 0;
        font-size: .875rem;
        line-height: 1.55;
    }

    html:not([data-mobile-card-layout="original"]):not([data-theme="dark"]) :is(#simulation-section, #student-section, #teacher-section) > div > div:last-child > a:is(.home-sim-preview-card, .home-article-preview-card) h3 {
        color: #0f172a;
    }

    html:not([data-mobile-card-layout="original"]) :is(#simulation-section, #student-section, #teacher-section) > div > div:last-child > a:is(.home-sim-preview-card, .home-article-preview-card) > div:last-child {
        grid-area: meta;
        margin: 0;
        padding: 0;
        border: 0;
    }

    html:not([data-mobile-card-layout="original"]) :is(#simulation-section, #student-section, #teacher-section) > div > div:last-child > a:is(.home-sim-preview-card, .home-article-preview-card) > div:last-child > span {
        font-size: .75rem;
        line-height: 1.5;
        white-space: normal;
        overflow: visible;
        overflow-wrap: anywhere;
        text-overflow: clip;
    }

    html:not([data-mobile-card-layout="original"]) :is(#simulation-section, #student-section, #teacher-section) > div > div:last-child > a:is(.home-sim-preview-card, .home-article-preview-card) > div:last-child > :is(svg, i) {
        display: none;
    }

    @media (hover: none) {
        html:not([data-mobile-card-layout="original"]) :is(#simulation-section, #student-section, #teacher-section) > div > div:last-child > a:hover {
            transform: none;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        html:not([data-mobile-card-layout="original"]) :is(.home-sim-preview-card, .home-article-preview-card) {
            transition: none;
        }
    }
}