/* ==========================================================================
   Batch 64 — phone and tablet fixes, loaded after site.css.

   Kept in a file of its own so the fixes from the mobile audit (30 Oct 2026)
   can be read, and undone, as one piece. Nothing here changes the desktop
   layout above 980 px except the ticker and carousel cross-fades, which
   overlapped their text at every width.
   ========================================================================== */

/* -- 1. Ticker under the header: the outgoing line is gone before the next
       one arrives, so the two never sit on top of each other. -------------- */
.ta-slide .item { transition: transform .55s cubic-bezier(.22,.61,.36,1), opacity .2s; }
.ta-slide .item.is-on { transition: transform .55s cubic-bezier(.22,.61,.36,1), opacity .3s .22s; }

/* -- 2. Story carousels: the slide leaving fades out first, the next one
       fades in after it — no moment where two headlines are legible. ------ */
.hx.is-live .hx-slide .hx-copy { opacity: 0; transition: opacity .2s; }
.hx.is-live .hx-slide.is-on .hx-copy { opacity: 1; transition: opacity .35s .3s; }
@media (prefers-reduced-motion: reduce) {
    .hx.is-live .hx-slide .hx-copy, .hx.is-live .hx-slide.is-on .hx-copy { transition: none; }
}

/* -- 3. Header on a phone and a tablet: one row — wordmark, compare, menu. */
@media (max-width: 980px) {
    .ta-nav-inner { gap: 8px; padding: 8px 16px; }
    .nav-toggle { width: 44px; height: 44px; font-size: 20px; }
    .btn-compare-m { height: 44px; }
    .ta-links a, .ta-links .navbtn { min-height: 44px; display: flex; align-items: center; }
}
@media (max-width: 560px) {
    .wordmark { font-size: 17px; gap: 7px; }
    .wordmark .logo-mark { width: 26px; height: 26px; }
    .wordmark .w3 { font-size: 11px; }
    .btn-compare-m { padding: 0 10px; }
}
@media (max-width: 360px) {
    .wordmark { font-size: 15px; }
    .wordmark .w3 { display: none; }
}

/* -- 4. Forms: 16 px text stops iOS zooming the page on focus; controls and
       buttons are at least 44 px tall to tap. ----------------------------- */
@media (max-width: 980px) {
    .ta-form input[type="text"], .ta-form input[type="email"], .ta-form input[type="url"],
    .ta-form input[type="number"], .ta-form input[type="search"], .ta-form input[type="date"],
    .ta-form input[type="password"], .ta-form select, .ta-form textarea,
    .inp, select.inp, .ta-search input, .ta-footer .subform input { font-size: 16px; }
    .ta-form input[type="text"], .ta-form input[type="email"], .ta-form input[type="url"],
    .ta-form input[type="number"], .ta-form input[type="date"], .ta-form input[type="password"],
    .ta-form select, .inp, select.inp, .ta-footer .subform input { height: 46px; }
    .btn { min-height: 44px; }
    .btn-sm { min-height: 40px; }
    .pill { min-height: 40px; }
}

/* -- 5. Small text links get a 44 px tap area without moving anything:
       padding outwards, the same margin inwards. ------------------------- */
@media (max-width: 980px) {
    .breadcrumb a, .tcard .foot .gear-link, .ad-slot .cta a, a.more {
        display: inline-block; padding: 12px 6px; margin: -12px -6px;
    }
    .sec-head a.more, .newsblock .hd a.more { margin: -12px -6px -12px auto; }
    .ta-footer ul a { display: inline-flex; align-items: center; min-height: 40px; }
    .ta-footer ul { line-height: 1.4; }
}

/* -- 6. Carousels on a phone: arrows stay in the top bar, never on the
       headline; on a tablet the copy leaves room for the photo pair. ------ */
@media (max-width: 700px) {
    .hx.is-compact .hx-prev, .hx.is-compact .hx-next { top: 12px; }
    .hx.is-compact .hx-body { padding-top: 68px; }
    .hx-prev, .hx-next { width: 44px; height: 44px; }
    .hx-prev { right: 68px; }
}
@media (min-width: 701px) and (max-width: 1100px) {
    .hx-body { padding-left: 68px; padding-right: 40px; }
    .hx-top { left: 68px; right: 68px; }
    .hx-slide:has(.pair, .cutout) .hx-copy { max-width: 54%; }
    .hx-slide:has(.pair, .cutout) .hx-title { font-size: clamp(24px, 3.6vw, 36px); }
    .hx-bg .pair { right: 3%; gap: 12px; }
    .hx-bg .print { width: min(17vw, 150px); }
    .hx-bg .cutout { width: 36%; right: 3%; }
}

/* -- 7. Tournament calendar: month chips and folded past months. -------- */
.cal-jump { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 14px; margin-bottom: 18px;
            scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.cal-jump .pill { flex: 0 0 auto; gap: 8px; }
.cal-jump .pill .num { font-size: 11px; padding: 1px 6px; border-radius: 999px; background: var(--tint); color: var(--brand); }
.cal-jump .pill.is-past { color: var(--ink-3); }
.cal-month { margin-bottom: 34px; scroll-margin-top: 140px; }
.cal-month > summary { list-style: none; cursor: pointer; align-items: center; min-height: 44px; }
.cal-month > summary::-webkit-details-marker { display: none; }
.cal-month .cal-caret { margin-left: auto; font-size: 20px; color: var(--ink-3); transition: transform .2s; }
.cal-month:not([open]) .cal-caret { transform: rotate(-90deg); }
.cal-month:not([open]) { margin-bottom: 10px; }
.cal-month:not([open]) > summary { margin-bottom: 0; padding: 8px 0; border-bottom: 1px solid var(--line); }
.cal-month:not([open]) > summary h2 { color: var(--ink-3); }