/* Keep the established horse page palette and tables, with mobile type and spacing
   independent of the legacy global rem reductions. Desktop rules stay unchanged. */
@media screen and (max-width: 800px) {
    .horse-detail-page {
        padding-top: 100px;
        padding-bottom: 32px;
        font-size: 15px;
        line-height: 1.6;
    }

    .horse-detail-page .content__page {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0 18px;
    }

    .horse-detail-page .content__page > article {
        min-width: 0;
        margin: 0;
        padding: 0;
    }

    .horse-detail-page .horse-hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        padding: 18px;
    }

    .horse-detail-page .horse-hero__name { display: block; min-width: 0; }
    .horse-detail-page .horse-hero__name h1 {
        font-size: 26px;
        line-height: 1.3;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .horse-detail-page .horse-hero__en {
        display: block;
        margin-top: 5px;
        font-size: 15px;
        line-height: 1.5;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .horse-detail-page .horse-hero__en:empty { display: none; }
    .horse-detail-page .horse-hero__tags { gap: 6px; }
    .horse-detail-page .horse-hero__tag { padding: 3px 8px; font-size: 12px; line-height: 1.5; }

    .horse-detail-page .horse-hero__actions { padding: 12px 0 18px; }
    .horse-detail-page .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        height: auto;
        max-width: 100%;
        margin: 0 0 14px;
        padding: 10px 14px;
        font-size: 14px;
        line-height: 1.5;
        letter-spacing: 0;
        white-space: normal;
        touch-action: manipulation;
    }
    .horse-detail-page .horse-hero__actions .btn { width: 100%; margin: 0; }

    .horse-detail-page .horse-tabs { margin: 0 0 20px; }
    .horse-detail-page .horse-tabs__nav { flex-wrap: nowrap; }
    .horse-detail-page .horse-tabs__item a { min-height: 44px; padding: 12px 16px; font-size: 15px; line-height: 1.4; }
    .horse-detail-page :is(.btn, .horse-tabs__item a, .horse-link):focus-visible { outline: 2px solid #35658e; outline-offset: 3px; }
    .horse-detail-page #tab-overview > .row { display: block; width: 100%; max-width: none; margin: 0; }
    .horse-detail-page #tab-overview > .row > .column { float: none; width: 100%; padding: 0; }

    .horse-detail-page .horse-detail__table-wrap { max-width: 100%; margin-bottom: 0; }
    .horse-detail-page .datatable { font-size: 14px; line-height: 1.65; }
    .horse-detail-page .datatable :is(th, td) { padding: 10px 12px; vertical-align: top; overflow-wrap: anywhere; }
    .horse-detail-page #basic-info-body th { width: 30%; }
    .horse-detail-page #basic-info-body td { width: auto; }
    .horse-detail-page #basic-info-body small { display: inline-block; margin-top: 4px; color: #606770; font-size: 11px; line-height: 1.5; font-weight: 400; }

    .horse-detail-page #pedigree-simple { margin: 24px 0 0; }
    .horse-detail-page #pedigree-simple .pedigree-simple__title { margin: 0 0 10px; padding-bottom: 8px; font-size: 16px; line-height: 1.5; }
    .horse-detail-page #pedigree-simple .pedigree-simple__table { margin: 0; font-size: 13px; line-height: 1.5; }
    .horse-detail-page #pedigree-simple .pedigree-simple__table td { height: 60px; padding: 10px 8px !important; overflow-wrap: anywhere; }

    .horse-detail-page .entry__content { margin-top: 32px; }
    .horse-detail-page .entry__content h2 { margin: 32px 0 12px; font-size: 21px; line-height: 1.4; }
    .horse-detail-page .entry__content > h2:first-child { margin-top: 0; }
    .horse-detail-page .alert-box { margin: 0 0 16px; padding: 12px 14px; font-size: 14px; line-height: 1.65; }

    /* Preserve the existing fixed race column and horizontally scrollable results. */
    .horse-detail-page .career-detail-view .career-detail-table { font-size: 12px; line-height: 1.5; }
    .horse-detail-page .career-detail-view .career-detail-table :is(th, td) { padding: 8px 6px !important; }
    .horse-detail-page .career-detail-view .race-info-meta { color: #606770; font-size: 11px; line-height: 1.4; }
    .horse-detail-page .career-detail-view .race-info-name { margin-top: 4px; line-height: 1.45; }
    .horse-detail-page .career-detail-view .race-info-name__cn { font-size: 13px; line-height: 1.45; }
    .horse-detail-page .career-detail-view .race-info-name__en { color: #606770; font-size: 11px; line-height: 1.45; }
    .horse-detail-page .career-detail-view .race-level-tag { padding: 1px 4px; font-size: 11px; line-height: 1.4; }
    .horse-detail-page .horse-detail__results-scroll { margin-bottom: 0; }
}

@media screen and (max-width: 360px) {
    .horse-detail-page .content__page { padding-inline: 14px; }
    .horse-detail-page .horse-hero { padding: 16px; }
    .horse-detail-page .horse-hero__name h1 { font-size: 24px; }
    .horse-detail-page .datatable :is(th, td) { padding: 9px; }
}