/**
 * GRIDIRON — composable field blocks.
 *
 * HARD CEILING: 200 LINES. Currently 148.
 *
 * A plugin stylesheet is allowed only for what an attribute structurally cannot
 * reach. If this file passes 200 lines, the design has leaked back out of the
 * editor and into CSS, which is the exact failure this architecture corrects.
 *
 * Deliberately tiny, and it must stay that way.
 *
 * A field block renders ONE element carrying ONE value, so everything about it
 * that a buyer might want to change — size, colour, weight, spacing, radius,
 * shadow — is a Stepfox attribute on that element and belongs in the theme's
 * generator, not here. The only things in this file are the ones an attribute
 * genuinely cannot express, because they target a CHILD the block owns rather
 * than the block itself:
 *
 *   · fitting an <img> inside the box the buyer sized
 *   · tabular figures on a ticking clock
 *   · a link inheriting the colour set on its parent field
 *
 * If this file starts growing flex, grid or colour rules, the design has leaked
 * back out of the editor and into a stylesheet, which is the exact failure this
 * whole architecture exists to correct.
 */

/* ---------------------------------------------------------------- images --
 * The theme sizes the FIELD (a div). WordPress prints width/height attributes
 * on the <img> from the attachment, so without this the crest renders at its
 * natural 600px inside a 128px box, or at some arbitrary intrinsic size.
 * `contain` rather than `cover`: a crest must never be cropped. */
.sfgi-f-crest,
.sfgi-f-player-photo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.sfgi-f-crest img,
.sfgi-f-crest a,
.sfgi-f-player-photo img,
.sfgi-f-player-photo a {
	display: block;
	width: 100%;
	height: 100%;
}

.sfgi-f-crest img {
	object-fit: contain;
}

/* A player portrait fills its square and is anchored on the face, which sits
 * above centre in the 600px source tile. */
.sfgi-f-player-photo img {
	object-fit: cover;
	object-position: 50% 22%;
}

/* ----------------------------------------------------------------- links --
 * A field's colour is set on the field. Core gives descendant links their own
 * colour, so without this a linked club name ignores the buyer's choice — the
 * `isLink` lesson, one level down. */
.sfgi-f a {
	color: inherit;
	text-decoration: none;
}

.sfgi-f a:hover {
	color: inherit;
}

/* ------------------------------------------------------------- countdown --
 * gridiron/game-kickoff in countdown format renders ONE element containing
 * one string ("6d 09h"), which is exactly the one-element rule working as
 * intended: its size, face and colour are the theme's responsiveStyles, not
 * this file's business. An earlier version of this stylesheet styled
 * .sfgi-cd-cell tiles that the block never emits — dead rules that matched
 * nothing, the same class of drift this architecture exists to prevent.
 * Tabular figures are the one thing an attribute cannot set, so that a
 * ticking clock does not jitter as the digits change. */
.sfgi-f-kickoff.is-countdown {
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------- empty and loops --
 * A field with nothing to say must take up no room, or a card grows a gap
 * wherever a game has no broadcaster or a club has no seed. */
.sfgi-f.is-empty {
	display: none;
}

/* Loop items are transparent by design: the CARD inside them is the thing the
 * buyer styles, so the wrapper must not add a box of its own. */
.sfgi-loop-item {
	display: contents;
}

/* …except when the loop itself is the flex rail (the ticker), where the item
 * has to remain a real flex child. */
.sfgi-loop--sides > .sfgi-loop-item,
.sfgi-scroll > .sfgi-loop-item {
	display: block;
}

/* ------------------------------------------------------ editor preview --
 * In the canvas a field is wrapped by useBlockProps and then by the span the
 * preview injects, so the size the buyer sets lands on the OUTER div while the
 * crest inside stays at its intrinsic size — the block looked correct on the
 * front end and tiny in the editor. display:contents removes the span from the
 * box tree so the field is sized by the block it belongs to. */
.sfgi-ed-field > span {
	display: contents;
}

.sfgi-ed-field {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1em;
	min-height: 1em;
}

.sfgi-ed-field > .sfgi-f-crest,
.sfgi-ed-field > .sfgi-f-player-photo {
	width: 100%;
	height: 100%;
}

/* ------------------------------------------------------- editor: loop rows --
 * The loop's own responsiveStyles — grid-template-columns, gap, flex-direction —
 * land on the loop element. On the front end the CARDS are its grid items,
 * because each .sfgi-loop-item between them is display:contents. The canvas has
 * two wrappers in the same position: the block-list layout div holding the live
 * card, and one preview div per extra row. Both must vanish from the box tree
 * for the same reason, or the whole loop collapses into a single block-level
 * column and a two-column grid of cards renders as one card per line.
 *
 * This is also why the extra rows must start at item 2. With these wrappers
 * transparent, a preview of item 1 alongside the live item 1 would put both
 * copies' fields on the SAME flex line — which is exactly what "No No data data
 * for for this this field field" was, in an earlier attempt at this. */
.sfgi-ed-loop-inner,
.sfgi-ed-row {
	display: contents;
}

/* A read-only preview row must read like the front end, and the front end simply
 * omits a field with nothing to say. "No data for this field yet" is a message
 * for the person editing the LIVE card — it tells them the block is there and
 * which row has no value — so it stays on that one and is dropped from the
 * copies, where nine of them would be noise. */
.sfgi-ed-row .sfgi-ed-empty {
	display: none;
}

.sfgi-ed-loading,
.sfgi-ed-empty {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	color: var( --wp--preset--color--muted, #8b97ad );
}

/* ------------------------------------------------------------ name fields --
 * A club or player name must never break INSIDE the word.
 *
 * `min-width: 0` is the standard flex trick that lets a sibling scroll
 * container work, and it is correct on a container. Applied to a text field in
 * a narrow table cell it lets the box shrink to nothing, and the browser then
 * breaks the only word it has — "Patriots" rendered as eight stacked letters in
 * the cup group table. No attribute can express "wrap between words but never
 * inside one", so it lives here, once, for every name field. */
.sfgi-f-name,
.sfgi-f-player-name {
	overflow-wrap: normal;
	word-break: keep-all;
	hyphens: none;
}