/* Homepage custom CSS (auto-loaded; served at /api/config/custom.css).
 * NOTE: hard-refresh (Ctrl+Shift+R) to pick up changes — the browser caches it. */

/* THREE-COLUMN LAYOUT.
 * Existing groups fill the left two columns; the World Cup group is pinned to
 * the third (right) column, full height. The groups live in #layout-groups
 * (the deployed image's container id — NOT #services). Scoped to wide screens
 * so phones/tablets keep the normal single-column stack. */
@media (min-width: 1024px) {
  #layout-groups {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    column-gap: 0.5rem;
  }
  #layout-groups > .services-group {
    grid-column: 1 / 3;            /* existing groups -> left two columns */
    max-width: 100%;
  }
  #layout-groups > .services-group:has(#worldcup) {
    grid-column: 3 / 4;           /* World Cup -> right column */
    grid-row: 1 / span 99;        /* full height */
    margin: 0;
  }
}

/* The World Cup tile is an <iframe> rendering the rich panel (grouped fixtures
 * + standings + bracket). Size it to a tall sidebar; the panel scrolls
 * internally (and the bracket scrolls horizontally). */
.services-group:has(#worldcup) iframe {
  width: 100% !important;
  /* Fallback height (no !important) so custom.js can size it inline to match
   * the left column's height. JS inline style wins over this rule. */
  height: 820px;
  border: 0;
  border-radius: 8px;
  background: #171c28;
}