/**
 * DEV-tony-036: the NFL weekly pages' game cards.
 *
 * Every rule here replaces an inline style that used to be written into the post
 * content by the page generator. Inline styles made the markup unreadable and
 * unrepeatable: sixteen copies of the same declarations per page, eighteen pages, and
 * a size change meant republishing all of them.
 *
 * The markup is core blocks carrying only class names:
 *
 *   .sas-games          the wp:columns row holding two cards
 *   .sas-game           one wp:column, and it IS the card -- see the note below
 *   .sas-game__when     date and kickoff
 *   .sas-game__stakes   divisional / conference / interconference
 *   .sas-game__teams    the wp:columns row inside the card
 *   .sas-game__team     one wp:column: mark above name
 *   .sas-game__at       the column between them
 *   .sas-game__name     the team's name, linked to its team page
 *   .sas-game__read     the paragraph under the teams
 *
 * ⚠️ **The card is the column itself, not a group inside it.** A group makes core
 * inject `wp-block-group__inner-container`, and this site sets `padding:0 20px` on that
 * selector for every group on the site -- 40px of a 429px card, taken off the marks and
 * the names, and not removable for one page without changing a global rule.
 */

/* Two cards to a row. Equal height comes from the flex row: a column stretches to the
   tallest by default, so nothing here sets a height. */
.sas-games {
	margin-bottom: 1.5em;
}

.sas-game {
	padding: 22px 16px;
	background-color: #f7f9fc;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
}

.sas-game__when {
	margin-bottom: 4px;
	font-size: 1.2em;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
}

.sas-game__stakes {
	margin-bottom: 0;
	color: var(--contrast-2);
	font-size: 1em;
	letter-spacing: 0.6px;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
}

/* ⚠️ No `align-items` here: the site ships `.wp-block-columns{align-items:initial
   !important}`, so any value set from this file is dead. It does not matter in practice
   -- every one of the 32 marks is square, so the two halves of a card are the same
   height anyway. */
.sas-game__teams {
	margin-bottom: 0;
}

/* ⚠️ The gap is cancelled here rather than where it is set. Core's block-library CSS
   gives .wp-block-columns `gap: var(--wp--style--block-gap, 2em)`, and this theme does
   not opt into blockGap, so the block's own gap attribute emits no CSS at all --
   measured on the published page, which came out carrying `flex-wrap` and nothing
   else. Zeroing it here is a rule the theme owns, so it holds. */
.sas-game__teams.wp-block-columns {
	gap: 0;
}

/* ⚠️ **These two selectors are deliberately as specific as the rule they beat.** Core
   ships `.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column{flex-basis:0;
   flex-grow:1}` -- three classes -- so a plain `.sas-game__at{flex:0 0 auto}` loses to it
   and the word "at" keeps a third of the card. Measured in the rendered CSS, not assumed.
   Four classes beats it, and it beats the `.is-not-stacked-on-mobile` variant too --
   the row carries that class so the teams stay side by side on a phone. Specificity,
   not load order, because nothing here controls load order. */
.sas-game__teams.wp-block-columns > .wp-block-column.sas-game__team {
	flex: 1 1 0;
	min-width: 0;
	text-align: center;
}

.sas-game__teams.wp-block-columns > .wp-block-column.sas-game__at {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	padding: 0;
	text-align: center;
}

.sas-game__at p {
	margin-bottom: 0;
}

.sas-game__team .wp-block-image,
.sas-game__team figure {
	margin-bottom: 6px;
}

/* The mark grows with its column now that the middle one is out of the way, up to a
   cap so a wide card does not turn into a poster. */
.sas-game__team img {
	width: 100%;
	max-width: 190px;
	height: auto;
}

.sas-game__name {
	margin-bottom: 0;
	font-size: 1.6em;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
}

/* ⚠️ **Two lines for every team, not just the long ones.** At 1.8em a name like Tampa
   Bay Buccaneers wraps and Detroit Lions does not, so the two halves of a card sat at
   different heights. The markup marks which part is the place and which is the
   nickname; making them blocks here is what puts them on their own lines, so the break
   is a style decision and can be undone without touching eighteen pages of content. */
.sas-game__name .sas-game__place,
.sas-game__name .sas-game__nick {
	display: block;
}

.sas-game__read {
	margin-top: 18px;
	margin-bottom: 0;
}

/* One card per row below the two-column breakpoint core already uses for columns. */
@media (max-width: 781px) {
	.sas-game__team img {
		max-width: 150px;
	}

}