/**
 * Per-device visibility utilities.
 *
 * Set from the inspector panel that includes/visibility.php adds to every RKL
 * block; that file puts the classes on the block's own wrapper element.
 *
 * Front end only — loading this in the editor would make a block hidden on
 * desktop unselectable on the canvas.
 *
 * The two lines are the homepage breakpoints from base.css: 1024px separates
 * tablet from desktop, 768px separates phone from tablet. The ranges do not
 * overlap, so ticking all three toggles hides the block at every width.
 *
 * !important because these have to beat the block's own root rule: several
 * blocks set `display: flex` or `display: grid` on the same element at the same
 * (0,1,0) specificity, and the load order of a block stylesheet against this
 * one is not something we control.
 */

/* Desktop: above the tablet line. */
@media (min-width: 1025px) { /* BREAKPOINT */
	.rkl-hide-desktop {
		display: none !important;
	}
}

/* Tablet: 768–1024, which the design renders with the mobile layout. */
@media (min-width: 768px) and (max-width: 1024px) { /* BREAKPOINT */
	.rkl-hide-tablet {
		display: none !important;
	}
}

/* Phone: below the tablet line. */
@media (max-width: 767px) { /* BREAKPOINT */
	.rkl-hide-mobile {
		display: none !important;
	}
}

/**
 * Keeping the homepage's column width stable when a block is hidden.
 *
 * The homepage's two-column row is a GreenShift flex container: a main column of
 * RKL blocks and a 298px standings rail. GreenShift gives that column
 * `width: auto` with `flex-grow: 0`, so its width is its widest block's
 * max-content size, clamped to the space the rail leaves. That makes the column
 * width depend on which blocks happen to be in it — and Atkrintamosios was the
 * only block there with wide fixed-width content, so hiding it collapsed the
 * column from 1015px to 450px and took every other block down with it.
 *
 * Growing the column instead pins it to the space the rail leaves, so it is
 * 1015px whatever it contains. Measured on the deployed page: with the board
 * visible nothing moves (1015 either way), with it hidden the column stays 1015
 * instead of dropping to 450, the rail stays 298, no horizontal overflow.
 *
 * `:has()` matches on presence, not on display, so a hidden block does not
 * change what this selects.
 *
 * The selector requires a sibling rail holding `.rkl-standings` on purpose: it
 * must not reach a GreenShift flex *column*, where `flex-grow` would stretch
 * height rather than width. 992px is GreenShift's own breakpoint for this row —
 * below it the row stacks and there is no free space to fill.
 *
 * This is a plaster over a page-layout weakness, not a cure. Deleting the board
 * in the editor collapses the column the same way, and this stylesheet is not
 * loaded there. The durable fix is to set that column to grow in GreenShift, on
 * the page itself.
 */
@media (min-width: 992px) { /* GreenShift's breakpoint for this row */
	div[class*="gsbp-"]:has(> div[class*="gsbp-"] > .rkl-standings)
		> div[class*="gsbp-"]:has(> .rkl-card) {
		flex-grow: 1;
		min-width: 0;
	}
}