/* -------------------------------------------------------
   7. RESPONSIVE BREAKPOINTS
   
   PP table uses horsepage_hide_XXX utility classes.
   RAFI uses targeted column hiding.
   Top grid reflows at tablet/mobile.
   
   Side menu consideration: actual viewport may be 
   ~220px less than window width.
   ------------------------------------------------------- */

/* --- PP table progressive column visibility ---
   
   STRATEGY: Start with minimal columns, ADD more as space allows.
   This guarantees NO horizontal scroll at any width.
   
   ALWAYS visible: Date, SP#, Fin, Expand (▼) button
   
   Show progressively as viewport widens:
     500px+:  + Track, Race Type
     600px+:  + Surface
     700px+:  + Distance
     800px+:  + C1
     900px+:  + Time
    1000px+:  + Entries (In), PP
    1100px+:  + C2, C3
    1200px+:  + Odds
    1300px+:  + Age, Sex
    1500px+:  + Jockey
    1600px+:  + Icons
*/

/* Hide ALL optional columns by default */
.horsepage_hide_1600,
.horsepage_hide_1500,
.horsepage_hide_1300,
.horsepage_hide_1200,
.horsepage_hide_1100,
.horsepage_hide_1000,
.horsepage_hide_900,
.horsepage_hide_800,
.horsepage_hide_700,
.horsepage_hide_600,
.horsepage_hide_500 { display: none !important; }

/* Progressively SHOW columns as viewport grows.
   Each breakpoint is offset +200px to account for the fixed 200px sidebar,
   so the breakpoint fires when the CONTENT AREA (not viewport) is wide enough.
   e.g. min-width:700px → content area is ~500px, enough for Track/Race cols. */
@media (min-width: 700px)  { .horsepage_hide_500  { display: table-cell !important; } }
@media (min-width: 800px)  { .horsepage_hide_600  { display: table-cell !important; } }
@media (min-width: 900px)  { .horsepage_hide_700  { display: table-cell !important; } }
@media (min-width: 1000px) { .horsepage_hide_800  { display: table-cell !important; } }
@media (min-width: 1100px) { .horsepage_hide_900  { display: table-cell !important; } }
@media (min-width: 1200px) { .horsepage_hide_1000 { display: table-cell !important; } }
@media (min-width: 1300px) { .horsepage_hide_1100 { display: table-cell !important; } }
@media (min-width: 1400px) { .horsepage_hide_1200 { display: table-cell !important; } }
@media (min-width: 1500px) { .horsepage_hide_1300 { display: table-cell !important; } }
@media (min-width: 1700px) { .horsepage_hide_1500 { display: table-cell !important; } }
@media (min-width: 1800px) { .horsepage_hide_1600 { display: table-cell !important; } }

/* Font size scaling */
.horsepage_pps_table { font-size: 11px; }
@media (min-width: 600px)  { .horsepage_pps_table { font-size: 12px; } }
@media (min-width: 900px)  { .horsepage_pps_table { font-size: 13px; } }

/* Tighter padding on small screens */
@media (max-width: 599px) {
  .horsepage_pps_table th,
  .horsepage_pps_table td { padding: 6px 2px; font-size: 10px; }
}
@media (max-width: 399px) {
  .horsepage_pp_detail_grid { grid-template-columns: 1fr 1fr; }
}

/* --- Top grid: 3-col → 2-col → 1-col --- */
@media (max-width: 1100px) {
  .horsepage_top {
    grid-template-columns: 1fr 1fr;
  }
  .horsepage_identity   { grid-column: 1; grid-row: 1; }
  .horsepage_stats_col  { grid-column: 2; grid-row: 1; }
  .horsepage_right_col  { grid-column: 1 / -1; grid-row: 2; }
  
  .horsepage_stat_grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 500px) {
  
  .horsepage_top {
    grid-template-columns: 1fr;
    padding: var(--hp-pad-sm);
  }
  .horsepage_identity   { grid-column: 1; grid-row: 1; }
  .horsepage_right_col  { grid-column: 1; grid-row: 2; }
  .horsepage_stats_col  { grid-column: 1; grid-row: 3; overflow: hidden; }
  
  .horsepage_image_block { flex-direction: column; align-items: center; }
  .horsepage_owner_breeder { width: 100%; }
  
  .horsepage_stat_grid {
    grid-template-columns: 1fr 1fr;
  }
  
  /* Stats table: hide S column first (least important) */
  .horsepage_stats_hide_s { display: none; }
  .horsepage_stats_table { font-size: 12px; }
  .horsepage_stats_table th,
  .horsepage_stats_table td { padding: 4px 4px; }
  
  /* Show expand arrows on stats rows when columns start hiding */
  .horsepage_stats_expand { display: table-cell !important; }
  .horsepage_stats_expand_hdr { display: table-cell !important; }
}

@media (max-width: 480px) {
  /* Stats table: hide P column next */
  .horsepage_stats_hide_p { display: none; }
  .horsepage_stats_table { font-size: 11px; }
  .horsepage_stats_table th,
  .horsepage_stats_table td { padding: 3px 2px; }
}

/* --- Owner section: responsive --- */
@media (max-width: 768px) {
  .horsepage_owner_grid {
    grid-template-columns: 1fr;
  }
  .horsepage_checkbox_row {
    flex-direction: column;
  }
}

/* --- RAFI: side-by-side → stacked --- */
@media (max-width: 900px) {
  .horsepage_rafi_body {
    flex-direction: column;
  }
  .horsepage_rafi_left {
    width: 100%;
    min-width: unset;
    border-right: none;
    border-bottom: 1px solid var(--hp-border);
  }
}

/* ============================================================
   MOBILE: 480px and below
   Everything tightens: fonts, padding, gaps.
   Target: look good at 320px minimum.
   ============================================================ */
@media (max-width: 480px) {
  
  /* Top section — single column, minimal padding */
  .horsepage_top {
    padding: 8px;
    gap: 8px;
  }
  
  /* Horse name — must wrap long names, smaller font */
  .horsepage_horse_name {
    font-size: 16px;
    padding: 8px 6px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    letter-spacing: 0;
  }
  
  /* Description, ID, info lines — compact */
  .horsepage_desc {
    font-size: 12px;
    padding: 5px 6px;
  }
  .horsepage_id_row {
    font-size: 11px;
    padding: 4px 6px;
  }
  .horsepage_info_line {
    font-size: 11px;
    padding: 4px 6px;
  }
  
  /* Horse image — smaller, shrinkable */
  .horsepage_horse_img {
    max-width: 70px;
    width: auto;
  }
  .horsepage_image_block {
    gap: 6px;
  }
  
  /* Pedigree line — smaller, wrap */
  .horsepage_pedigree_line {
    font-size: 11px;
    padding: 5px 6px;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  /* Stats R/W/P/S/$ table — ultra compact */
  .horsepage_stats_hide_s { display: none; }
  .horsepage_stats_hide_usd { display: none; }
  .horsepage_stats_table { font-size: 10px; }
  .horsepage_stats_table th,
  .horsepage_stats_table td { padding: 3px 2px; }
  .horsepage_stats_table td:first-child { font-size: 10px; }
  
  /* Stat cards — single column, smaller */
  .horsepage_stat_grid {
    grid-template-columns: 1fr 1fr;
    gap: 4px;
  }
  .horsepage_stat_card {
    padding: 4px 6px;
  }
  .horsepage_stat_card_label {
    font-size: 9px;
  }
  .horsepage_stat_card_value {
    font-size: 13px;
  }
  
  /* Dam section — tighter */
  .horsepage_dam_section {
    padding: 8px;
  }
  .horsepage_dam_name {
    font-size: 14px;
  }
  .horsepage_dam_label {
    font-size: 10px;
  }
  
  /* Owner section — tighter */
  .horsepage_owner_section {
    padding: 8px;
  }
  .horsepage_owner_title {
    font-size: 13px;
    padding: 6px 8px;
  }
  .horsepage_control_label {
    font-size: 11px;
  }
  .horsepage_control_input {
    font-size: 12px;
    padding: 4px;
  }
  
  /* PP table — ultra compact */
  .horsepage_pps_title {
    font-size: 12px;
    padding: 6px 8px;
  }
  .horsepage_pps_table { font-size: 10px; }
  .horsepage_pps_table th { font-size: 9px; padding: 4px 2px; }
  .horsepage_pps_table td { padding: 4px 1px; }
  
  /* PP detail expand cards — smaller grid */
  .horsepage_pp_detail_grid {
    grid-template-columns: 1fr 1fr;
    gap: 4px;
  }
  .horsepage_pp_detail_item {
    padding: 3px 5px;
  }
  .horsepage_pp_detail_label {
    font-size: 8px;
  }
  .horsepage_pp_detail_value {
    font-size: 11px;
  }
  
  /* PP expand button — smaller */
  .horsepage_pp_expand_cell { width: 28px; min-width: 28px; }
  .horsepage_pp_expand_btn { width: 22px; height: 22px; font-size: 10px; }
  
  /* RAFI — tighter */
  .horsepage_rafi_title {
    font-size: 12px;
    padding: 6px 8px;
  }
}

/* ============================================================
   ULTRA NARROW: 360px and below
   Final squeeze for smallest phones.
   ============================================================ */
@media (max-width: 360px) {
  .horsepage_top { padding: 6px; gap: 6px; }
  
  .horsepage_horse_name { font-size: 14px; padding: 6px 4px; }
  .horsepage_desc { font-size: 11px; padding: 4px; }
  .horsepage_id_row { font-size: 10px; padding: 3px 4px; }
  .horsepage_info_line { font-size: 10px; padding: 3px 4px; }
  
  .horsepage_horse_img { max-width: 50px; width: auto; }
  
  .horsepage_pedigree_line { font-size: 10px; padding: 4px; }
  
  .horsepage_stats_table { font-size: 9px; }
  
  .horsepage_stat_grid { grid-template-columns: 1fr 1fr; gap: 3px; }
  .horsepage_stat_card { padding: 3px 4px; }
  .horsepage_stat_card_label { font-size: 8px; }
  .horsepage_stat_card_value { font-size: 12px; }
  
  .horsepage_dam_name { font-size: 13px; }
  
  .horsepage_pps_table { font-size: 9px; }
  .horsepage_pps_table th { font-size: 8px; padding: 3px 1px; }
  .horsepage_pps_table td { padding: 3px 1px; }
  
  .horsepage_pp_detail_grid { grid-template-columns: 1fr; gap: 3px; }
  .horsepage_pp_detail_value { font-size: 10px; }
  
  .horsepage_pp_expand_cell { width: 24px; min-width: 24px; }
  .horsepage_pp_expand_btn { width: 18px; height: 18px; font-size: 9px; }
}