/* ============================================================
   C.R.I. PICKS — Responsive Overrides
   Mobile-first: base styles in cri.css are mobile-ready,
   these handle breakpoints and layout shifts.
   ============================================================ */

/* ==========================================
   MOBILE: < 768px (default / base)
   ========================================== */

/* Show mobile-only elements */
@media (max-width: 767px) {
    body {
        padding-bottom: var(--bottom-nav-height);
    }

    /* Navigation */
    .nav__links {
        display: none;
    }

    .nav__search-btn,
    .nav__hamburger {
        display: flex;
    }

    .nav__actions .btn {
        display: none;
    }

    /* Bottom nav visible */
    .bottom-nav {
        display: block;
    }

    /* Hero search */
    .hero-search {
        padding: var(--space-10) 0 var(--space-8);
    }

    .hero-search__title {
        font-size: 24px;
    }

    .hero-search__input {
        font-size: 16px; /* prevent iOS zoom */
        padding: var(--space-3) var(--space-4) var(--space-3) 44px;
    }

    .hero-search__pills {
        gap: var(--space-2);
    }

    /* Type scale */
    h1, .page-header__title {
        font-size: 22px;
    }

    h2, .section__title {
        font-size: 18px;
    }

    h3 {
        font-size: 16px;
    }

    /* Page content */
    .page-content {
        padding-top: calc(var(--nav-height) + var(--space-4));
        padding-bottom: calc(var(--bottom-nav-height) + var(--space-8));
    }

    /* Container */
    .container {
        padding: 0 var(--space-4);
    }

    /* Grid collapses */
    .grid--2,
    .grid--3,
    .grid--4 {
        grid-template-columns: 1fr;
    }

    .grid--auto {
        grid-template-columns: 1fr;
    }

    /* Intel grid (homepage quick stats) */
    .intel-grid {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    /* Stat grid */
    .stat-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }

    .stat-card {
        padding: var(--space-4);
    }

    .stat-card__value {
        font-size: 22px;
    }

    /* Race card entry row → stacked on mobile */
    .entry-row {
        grid-template-columns: 32px 1fr;
        grid-template-rows: auto auto;
        gap: var(--space-1) var(--space-3);
        padding: var(--space-3) var(--space-4);
    }

    .entry-row__pp {
        grid-row: 1 / 3;
        align-self: center;
    }

    .entry-row__horse {
        grid-column: 2;
    }

    .entry-row__form,
    .entry-row__jockey,
    .entry-row__weight,
    .entry-row__odds {
        grid-column: 2;
    }

    .entry-row__details-mobile {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        font-size: var(--text-xs);
        color: var(--text-secondary);
    }

    /* Race row header */
    .race-row__header {
        padding: var(--space-3) var(--space-4);
        gap: var(--space-3);
    }

    .race-row__info {
        gap: var(--space-2);
    }

    /* Data tables → card layout on mobile */
    .data-table-wrap--mobile-cards .data-table thead {
        display: none;
    }

    .data-table-wrap--mobile-cards .data-table tbody tr {
        display: block;
        padding: var(--space-4);
        margin-bottom: var(--space-3);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        background: var(--bg-card);
    }

    .data-table-wrap--mobile-cards .data-table tbody tr:hover {
        border-color: var(--border-hover);
    }

    .data-table-wrap--mobile-cards .data-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--space-2) 0;
        border-bottom: 1px solid var(--border);
    }

    .data-table-wrap--mobile-cards .data-table td:last-child {
        border-bottom: none;
    }

    .data-table-wrap--mobile-cards .data-table td::before {
        content: attr(data-label);
        font-size: var(--text-xs);
        font-weight: 600;
        color: var(--text-tertiary);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    /* Tabs become scrollable */
    .tabs {
        gap: 0;
        padding-bottom: 1px;
    }

    .tab {
        padding: var(--space-3) var(--space-4);
        font-size: var(--text-xs);
    }

    /* Filter tabs wrap */
    .filter-tabs {
        gap: var(--space-2);
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: var(--space-2);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .filter-tabs::-webkit-scrollbar {
        display: none;
    }

    .filter-tab {
        font-size: var(--text-xs);
        padding: var(--space-2) var(--space-3);
        flex-shrink: 0;
    }

    /* Page header */
    .page-header {
        padding: var(--space-6) 0 var(--space-4);
    }

    /* Section headers */
    .section__header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    /* Search overlay */
    .search-overlay {
        padding-top: 0;
        align-items: flex-start;
    }

    .search-overlay__box {
        width: 100%;
        max-width: 100%;
        border-radius: 0;
        min-height: 100vh;
    }

    /* Footer */
    .footer__inner {
        flex-direction: column;
        text-align: center;
        gap: var(--space-3);
    }

    .footer__links {
        justify-content: center;
        gap: var(--space-4);
    }

    /* Confidence bar */
    .confidence-bar__track {
        width: 60px;
    }

    /* Locked overlay text */
    .locked-overlay__text {
        font-size: var(--text-xs);
    }

    /* Distance chart */
    .distance-bar__label {
        min-width: 40px;
        font-size: 11px;
    }

    .distance-bar__stat {
        min-width: 90px;
        font-size: 11px;
    }

    /* Race day banner */
    .raceday-banner {
        flex-direction: column;
        text-align: center;
        padding: var(--space-4);
    }

    /* Horse profile stat grid */
    .horse-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Horse profile header */
    .horse-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .horse-header__stats {
        width: 100%;
    }
}


/* ==========================================
   Small phones: < 375px
   ========================================== */
@media (max-width: 374px) {
    .stat-grid {
        grid-template-columns: 1fr;
    }

    .hero-search__title {
        font-size: 20px;
    }

    .entry-row {
        padding: var(--space-3);
    }
}


/* ==========================================
   TABLET: 768px - 1024px
   ========================================== */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Navigation adjustments */
    .nav__link {
        padding: var(--space-2);
        font-size: var(--text-xs);
    }

    /* Grid adjustments */
    .grid--3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Intel grid */
    .intel-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .intel-grid > :last-child {
        grid-column: 1 / -1;
    }

    /* Entry row adjustments */
    .entry-row {
        grid-template-columns: 36px 1fr auto auto auto;
    }

    .entry-row__jockey {
        display: none;
    }
}


/* ==========================================
   DESKTOP: 1025px+
   ========================================== */
@media (min-width: 1025px) {
    /* Hero search gets more breathing room */
    .hero-search {
        padding: var(--space-16) 0 var(--space-16);
    }

    .hero-search__title {
        font-size: 40px;
    }

    .hero-search__input {
        font-size: 18px;
        padding: 18px var(--space-6) 18px 56px;
    }

    /* Full entry row on desktop */
    .entry-row {
        grid-template-columns: 36px 1fr 80px 80px 50px 60px;
    }

    /* Data tables are full width with nice hover */
    .data-table td {
        padding: var(--space-3) var(--space-5);
    }

    .data-table th {
        padding: var(--space-3) var(--space-5);
    }

    /* Horse profile layout */
    .horse-profile-layout {
        display: grid;
        grid-template-columns: 1fr 320px;
        gap: var(--space-6);
        align-items: start;
    }

    .horse-profile-sidebar {
        position: sticky;
        top: calc(var(--nav-height) + var(--space-5));
    }

    /* Section spacing */
    .section {
        margin-bottom: var(--space-16);
    }
}


/* ==========================================
   WIDE SCREENS: > 1440px
   ========================================== */
@media (min-width: 1441px) {
    .container {
        padding: 0 var(--space-8);
    }
}


/* ==========================================
   PRINT STYLES
   ========================================== */
@media print {
    .nav,
    .bottom-nav,
    .mobile-menu,
    .mobile-overlay,
    .search-overlay,
    .footer,
    .btn,
    .nav__actions,
    .locked-overlay__cta {
        display: none !important;
    }

    body {
        padding: 0;
        background: white;
        color: black;
        font-size: 12pt;
    }

    .page-content {
        padding-top: 0;
    }

    .card {
        border: 1px solid #ccc;
        box-shadow: none;
        page-break-inside: avoid;
    }

    .data-table {
        font-size: 10pt;
    }

    .data-table th {
        background: #eee;
    }

    .form-dot {
        border: 1px solid #999;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    a {
        color: black;
        text-decoration: underline;
    }

    .locked-overlay__blur {
        filter: none;
    }
}