/* Pro Ladder tab — the player-profile grid from concepts/site.html (Playerpage),
   scoped to #page-aligulac. Ladder spans the left; accounts + map top-right;
   replay bottom-right. Cards are iframes; heights are snapped by the module. */

#page-aligulac { padding: 16px; }

#page-aligulac .site-grid {
    display: grid;
    gap: 16px;
    max-width: 1700px;
    margin: 0 auto;
    justify-content: center;
}

/* Grandfathered breakpoint: NOT canonical (480/768/1024). Three cards at
   minmax(381px,...) + gaps + container padding need ~1207px; snapping this
   wide-desktop split down to 1024 would overflow/break the 3-card row, so it
   stays at 1400px. The medium/small splits below ARE snapped to canonical 1024/1023. */
@media (min-width: 1400px) {
    #page-aligulac .site-grid {
        grid-template-columns: minmax(381px, 540px) minmax(381px, 540px) minmax(381px, 540px);
        grid-template-areas:
            "ladder player map"
            "ladder replay replay";
        align-items: start;
    }
    #page-aligulac iframe[data-card="ladder"]   { grid-area: ladder; }
    #page-aligulac iframe[data-card="accounts"] { grid-area: player; }
    #page-aligulac iframe[data-card="map"]      { grid-area: map; }
    #page-aligulac iframe[data-card="replay"]   { grid-area: replay; }
}

@media (min-width: 1024px) and (max-width: 1399px) {
    #page-aligulac .site-grid {
        grid-template-columns: minmax(381px, 540px) minmax(381px, 540px);
        grid-template-areas:
            "ladder ladder"
            "player map"
            "replay replay";
        align-items: start;
    }
    #page-aligulac iframe[data-card="ladder"]   { grid-area: ladder; }
    #page-aligulac iframe[data-card="accounts"] { grid-area: player; }
    #page-aligulac iframe[data-card="map"]      { grid-area: map; }
    #page-aligulac iframe[data-card="replay"]   { grid-area: replay; }
}

@media (max-width: 1023px) {
    #page-aligulac .site-grid { grid-template-columns: minmax(0, 380px); }
}

#page-aligulac .card-frame {
    width: 100%;
    border: 0;
    background: transparent;
    display: block;
    height: 600px;   /* initial; module snaps to content */
}
#page-aligulac .replay-frame { height: 720px; }
#page-aligulac .ladder-frame { height: auto; align-self: stretch; min-height: 760px; }