/**
 * Championship History Tabs (.champ-history__tabs)
 *
 * Sits inside .champ-past-winners__table-wrap (the card that overlaps
 * the photo banner above). The card already provides background +
 * shadow + radius via championship.css; this file just handles the
 * tabs-specific tweaks:
 *
 *   - Inset padding around the tabs widget so the tab bar and table
 *     don't sit flush against the card edge.
 *   - Tab bar bottom-border alignment (champ-tabs.css already gives
 *     the bar a 1px bottom border; we just need to make sure it
 *     stretches across the card).
 *   - Reset wp:table figure margins inside the panel (championship.css
 *     resets these for past-winners but only at the wrap level —
 *     inside the panel we need it again).
 *
 * The .champ-tabs primitive provides default tab + panel visibility
 * rules (css/champ-tabs.css). All table cell styling lives in
 * championship.css's `.champ-past-winners .wp-block-table` rules and
 * applies to both panels' tables automatically.
 *
 * @package USA_Ultimate
 */

.champ-past-winners .champ-history__tabs {
    /* Inset the tab bar + tables from the card edges. The card itself
       (.champ-past-winners__table-wrap) provides background + radius +
       shadow; everything inside needs breathing room. Top is smaller
       than horizontal because the tab labels read like a title and want
       to sit close to the card top edge. */
    padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50) 0;
}

.champ-past-winners .champ-history__tabs .champ-tabs__list {
    /* Stretch the underline border (set by champ-tabs.css) edge-to-edge
       inside the card's inset padding. Removing the bottom margin here
       lets the table sit closer to the underline -- the table's own
       <thead> bottom-border (set in championship.css) already provides
       enough visual separation. */
    margin-bottom: var(--wp--preset--spacing--20);
}

.champ-past-winners .champ-history__tabs .champ-tabs__panel {
    /* Strip wp:table figure margins so the table starts at the panel's
       inner edge. championship.css already does this at the
       __table-wrap level, but the panel adds another nesting level
       so we re-apply here. */
    margin: 0;
}

.champ-past-winners .champ-history__tabs .wp-block-table {
    margin: 0;
}

/* Bottom inset for the table inside the panel — matches the top
   padding on the tabs container so the card looks balanced. Applied
   to the panel (not the table) because the table's own border-bottom
   on the last <tr> would create a double-line if we padded the
   table itself. */
.champ-past-winners .champ-history__tabs .champ-tabs__panel {
    padding-bottom: var(--wp--preset--spacing--40);
}

/* When the tables overflow horizontally on narrow viewports, scroll
   *each panel* rather than the whole tabs container. Otherwise the
   tab bar would scroll out of view alongside the table. */
.champ-past-winners .champ-history__tabs .champ-tabs__panel {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Override WP core's `has-fixed-layout` (which forces table-layout:fixed and
   divides the 6 columns — Year, Champion, Runner-Up, Score, Location, Spirit
   Award — into ~50px slices on mobile, wrapping letter-by-letter).
   Restore natural column widths and let the panel scroll horizontally.

   Specificity battle: WP core's `.wp-block-table.has-fixed-layout table`
   is (0,2,1); ours below is (0,3,1) and sits later in the cascade, so it
   wins without !important. `min-width` keeps the whole table wider than
   the panel on narrow viewports so the panel's `overflow-x:auto` actually
   triggers a scrollable rail. */
.champ-past-winners .champ-history__tabs .wp-block-table table {
    table-layout: auto;
    min-width: 560px;
}

.champ-past-winners .champ-history__tabs .wp-block-table th,
.champ-past-winners .champ-history__tabs .wp-block-table td {
    white-space: nowrap;
}