/*
 * DG KOF XV HUB — 1.20.0 Responsive Grid Layer
 *
 * Principle: components adapt to the width of their own container, not only
 * to the viewport. This stylesheet is intentionally loaded after the plugin's
 * generated inline CSS so these structural rules are the final responsive layer.
 */

/* Global containment: prevent long content from forcing horizontal overflow. */
.dgkof-hub,
.dgkof-directory,
.dgkof-module,
.dgkof-elementor-module-widget,
.dgkof-player-area,
.dgkof-account-box,
.dgkof-tournament,
.dgkof-tournament-register,
.dgkof-bracket-horizontal {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.dgkof-hub *,
.dgkof-directory *,
.dgkof-module *,
.dgkof-elementor-module-widget *,
.dgkof-player-area *,
.dgkof-account-box *,
.dgkof-tournament *,
.dgkof-tournament-register *,
.dgkof-bracket-horizontal * {
  box-sizing: border-box;
}

/* Dynamic grids. The minimum card width controls readability; the browser
 * decides how many cards fit. This deliberately replaces fixed 3/2/1 layouts. */
.dgkof-hub .dgkof-player-grid,
.dgkof-directory-v2 .dgkof-player-grid,
.dgkof-directory-same-card .dgkof-player-grid,
.dgkof-top5-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)) !important;
  align-items: start !important;
  gap: clamp(12px, 1.5vw, 22px) !important;
  width: 100%;
}

/* Directory v2 / current player cards: container-driven columns.
 * Do not let the legacy admin column setting force three narrow cards.
 * A card gets a real readability floor; when the container becomes smaller,
 * CSS Grid automatically moves cards to the next row. */
.dgkof-directory-v2 .dgkof-player-grid,
.dgkof-hub .dgkof-player-grid,
.dgkof-directory-same-card .dgkof-player-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)) !important;
  width: 100% !important;
  min-width: 0 !important;
  align-items: start !important;
}

/* Fluid filters: each field has a sensible minimum, then the grid wraps. */
.dgkof-directory-filter-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)) !important;
  width: 100%;
}
.dgkof-directory-filter-grid label,
.dgkof-directory-filter-grid input,
.dgkof-directory-filter-grid select {
  min-width: 0 !important;
  max-width: 100% !important;
}
.dgkof-directory-filter-actions {
  flex-wrap: wrap !important;
}
.dgkof-directory-filter-actions button {
  max-width: 100%;
}

/* Generic modules used by the Elementor widgets. */
.dgkof-stats-grid,
.dgkof-category-grid,
.dgkof-hub-columns,
.dgkof-bracket-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important;
}
.dgkof-h2h-head {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  min-width: 0;
}
.dgkof-h2h-head > * {
  min-width: 0;
  overflow-wrap: anywhere;
}
.dgkof-ranking li,
.dgkof-rating-board li {
  min-width: 0;
}
.dgkof-ranking li > *,
.dgkof-rating-board li > * {
  min-width: 0;
  max-width: 100%;
}
.dgkof-ranking li strong,
.dgkof-rating-board li strong {
  overflow-wrap: anywhere;
}

/* DG Score badge remains uniform while allowing its parent to shrink. */
.dgkof-dg-score-badge {
  width: min(132px, 100%);
  max-width: 100%;
  min-width: 0;
}
.dgkof-dg-score-badge-copy em {
  max-width: 100%;
}

/* Elementor columns/containers: widgets must not create horizontal overflow. */
.elementor .dgkof-elementor-module-widget,
.elementor-widget-container .dgkof-elementor-module-widget {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Tables can scroll inside their own component rather than stretching the page. */
.dgkof-table-wrap,
.dgkof-admin-ft-table-wrap,
.dgkof-bracket-scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (prefers-reduced-motion: reduce) {
  .dgkof-responsive-root *,
  .dgkof-responsive-root *::before,
  .dgkof-responsive-root *::after {
    transition: none !important;
  }
}