/* league-shortcodes.css -- ft.es / ft.club / ft.fr (byte-identical on the 3 parents)
 *
 * Display for the three blog shortcodes [league_matchday], [league_versus] and
 * [match], rendered by functions/shortcodes_home.php. Enqueued from functions.php
 * only on a singular post/page whose content actually contains one of the three,
 * so every other page on the site carries zero extra bytes.
 *
 * Why this file exists: both shortcodes used to render <table class="siresults">,
 * the widget table shared with the rankings and results blocks. Restyling them
 * there meant changing values other pages depend on. The markup moved to its own
 * .ft-lg-* names instead, so siresults keeps every value it has today.
 *
 * Tokens come from ft-components.css, which is enqueued unconditionally and is
 * declared as this file's dependency, so WP guarantees it loads first. Only the
 * PHP differs between the 3 sites (team-name column, URL affix, round and date
 * labels); this stylesheet does not.
 */

.ft-lg {
	color: var(--ft-ink);
	line-height: 1.4;
	margin: 26px 0 30px;
	-webkit-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}
.ft-lg + .ft-lg { margin-top: 34px; }

/* ── Block title ───────────────────────────────────────────────────────────
   .ft-lg-round is the matchday label ("Jornada 12"), .ft-lg-pair is the fixed
   pairing of a versus block ("Real Madrid vs FC Barcelona"). Same navy rule. */
.ft-lg-round,
.ft-lg-pair {
	display: block;
	color: var(--ft-cheapest);
	padding-bottom: 9px;
	border-bottom: 2px solid var(--ft-cheapest);
}
.ft-lg-round {
	font-size: .74em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .11em;
}
/* ft.fr round labels carry markup: "12<sup>e</sup> journee" */
.ft-lg-round sup,
.ft-lg-meta sup { font-size: .7em; text-transform: none; letter-spacing: 0; }

.ft-lg-pair { font-size: 1.05em; font-weight: 700; }
.ft-lg-pair i {
	font-style: normal;
	font-weight: 400;
	font-size: .8em;
	color: var(--ft-muted);
	padding: 0 6px;
}

/* ── Group heading ─────────────────────────────────────────────────────────
   .ft-lg-day is the date band in a matchday block, .ft-lg-meta the "round, date"
   line above each meeting in a versus block. The hairline fills the leftover
   width, so the label length sets where the rule starts.
   The label MUST stay wrapped in its own <span>: these are flex containers, and
   the ft.fr round labels contain a <sup>, which would otherwise be promoted to a
   second flex item and get pushed off by the gap ("11 e journee"). */
.ft-lg-day,
.ft-lg-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 18px 0 2px;
	font-size: .7em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var(--ft-muted);
}
.ft-lg-day::after,
.ft-lg-meta::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--ft-rule);
}

/* ── One fixture ───────────────────────────────────────────────────────────
   <a> when the event page exists, <div> when it does not. The non-link row
   simply omits the 4th child; the empty grid track keeps both aligned. */
.ft-lg-row {
	display: grid;
	grid-template-columns: 1fr 74px 1fr 18px;
	align-items: center;
	gap: 10px;
	padding: 13px 8px;
	margin: 0 -8px;
	border-bottom: 1px solid var(--ft-rule);
	border-radius: 3px;
	transition: background .14s ease;
}
.ft-lg a.ft-lg-row,
.ft-lg a.ft-lg-row:hover,
.ft-lg a.ft-lg-row:focus { text-decoration: none; }
.ft-lg a.ft-lg-row:hover,
.ft-lg a.ft-lg-row:focus-visible { background: var(--ft-answer-bg); }
.ft-lg a.ft-lg-row:focus-visible { outline: 2px solid var(--ft-link); outline-offset: 1px; }

/* Colours sit on the spans, not on the <a>: the themes carry their own
   .entry-content a rules and this way there is nothing to out-specify. */
.ft-lg-home,
.ft-lg-away {
	font-size: .95em;
	color: var(--ft-ink);
}
.ft-lg-home { text-align: right; }
.ft-lg-away { text-align: left; }

.ft-lg-time {
	text-align: center;
	font-size: .84em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--ft-cheapest);
	background: var(--ft-surface);
	border: 1px solid var(--ft-rule);
	border-radius: 3px;
	padding: 4px 0;
}
/* kick-off not known yet: still shown, but reads as pending and not as broken */
.ft-lg-time.is-tbc { color: var(--ft-muted); }

.ft-lg-go {
	text-align: right;
	font-size: 1.1em;
	color: var(--ft-rule);
	transition: color .14s ease, transform .14s ease;
}
.ft-lg a.ft-lg-row:hover .ft-lg-go,
.ft-lg a.ft-lg-row:focus-visible .ft-lg-go {
	color: var(--ft-link);
	transform: translateX(2px);
}

@media only screen and (max-width: 560px) {
	.ft-lg-row { grid-template-columns: 1fr 64px 1fr; gap: 7px; padding: 12px 6px; }
	.ft-lg-go { display: none; }
	.ft-lg-home, .ft-lg-away { font-size: .88em; }
	.ft-lg-time { font-size: .78em; }
}

@media (prefers-reduced-motion: reduce) {
	.ft-lg-row, .ft-lg-go { transition: none; }
}


/* ════════════════════════════════════════════════════════════════════════════
   [match] -- one fixture as a card, rendered by ft_match_shortcode().

   Separate names from .ft-lg-* on purpose: the league blocks are a LIST, tuned
   to stay readable at ten rows in a row, while this is a single object a post
   points at, so it can afford a border, a price and a CTA. Sharing the classes
   would have meant one of the two compromising.

   NOT .ft-mc-*: mailchimp.css already owns that prefix (.ft-mc-alerts and the
   price strip), and this block sits directly above a mailchimp form.

   The whole card is one <a> with a span that LOOKS like a button. No nested
   anchor, so no invalid markup and one tap target on mobile. When the fixture
   has no event page the <a> becomes a <div class="ft-match-card is-flat"> and
   the CTA span is not emitted at all.
   ════════════════════════════════════════════════════════════════════════════ */

.ft-match {
	margin: 26px 0 30px;
	-webkit-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}

.ft-match-card {
	display: block;
	padding: 16px 18px;
	border: 1px solid var(--ft-rule);
	border-top: 3px solid var(--ft-cheapest);
	border-radius: 4px;
	background: #fff;
	color: var(--ft-ink);
	transition: box-shadow .14s ease, border-color .14s ease;
}
/* Colours live on the child spans, never on the <a>: the themes carry their own
   .entry-content a rules and this way there is nothing to out-specify. */
.ft-match a.ft-match-card,
.ft-match a.ft-match-card:hover,
.ft-match a.ft-match-card:focus { text-decoration: none; }
.ft-match a.ft-match-card:hover,
.ft-match a.ft-match-card:focus-visible {
	border-color: var(--ft-blue);
	box-shadow: 0 2px 10px rgba(0,0,0,.07);
}
.ft-match a.ft-match-card:focus-visible { outline: 2px solid var(--ft-link); outline-offset: 2px; }

/* ── Competition line ──────────────────────────────────────────────────────
   Competition then round, the round set off by a dot separator drawn in CSS so
   the PHP never has to decide whether a separator is needed. */
.ft-match-comp {
	display: block;
	font-size: .7em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--ft-cheapest);
}
.ft-match-comp i {
	font-style: normal;
	font-weight: 600;
	color: var(--ft-muted);
}
.ft-match-comp i::before { content: "\00b7"; padding: 0 7px; color: var(--ft-rule); }
/* ft.fr superscripts the matchday ordinal: "12e journee" */
.ft-match-comp sup { font-size: .7em; text-transform: none; letter-spacing: 0; }

/* ── Teams ─────────────────────────────────────────────────────────────────
   The headline of the card, so it is the one thing set large. Left aligned and
   inline rather than a 3 column grid: team names differ wildly in length and a
   centred grid leaves a ragged gutter on exactly the pairings that matter. */
.ft-match-teams {
	display: block;
	margin: 7px 0 10px;
	font-size: 1.25em;
	font-weight: 700;
	line-height: 1.25;
	color: var(--ft-ink);
}
.ft-match-vs {
	font-weight: 400;
	font-size: .78em;
	color: var(--ft-muted);
	padding: 0 7px;
}

/* ── Date and venue ────────────────────────────────────────────────────────*/
.ft-match-meta {
	display: block;
	font-size: .85em;
	line-height: 1.6;
	color: var(--ft-answer-ink);
}
.ft-match-when,
.ft-match-where { display: block; }
.ft-match-when i,
.ft-match-where i {
	color: var(--ft-muted-light);
	margin-right: 5px;
	font-size: .92em;
}

/* Date tbc / Postponed / Cancelled. Same red-on-pale treatment the listing rows
   use, but as a pill so it cannot be mistaken for part of the date. */
.ft-match-flag {
	display: inline-block;
	margin-left: 7px;
	padding: 1px 7px;
	border-radius: 3px;
	background: #fdecec;
	color: #b3261e;
	font-size: .85em;
	font-weight: 600;
	white-space: nowrap;
}

/* ── Price and CTA ─────────────────────────────────────────────────────────*/
.ft-match-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 13px;
	padding-top: 12px;
	border-top: 1px solid var(--ft-rule);
}
.ft-match-price {
	font-size: .88em;
	color: var(--ft-muted);
}
.ft-match-price b {
	font-size: 1.5em;
	font-weight: 700;
	color: var(--ft-cheapest);
	margin-left: 3px;
}
/* No live price: says so in the muted voice, never as a fake price. */
.ft-match-price.is-soon {
	font-style: italic;
	color: var(--ft-muted-light);
}

/* Matched to the strip's "Create alert" button (.ft-strip-btn in mailchimp.css:
   14px / 700 / 9px 16px), because the two stack directly on top of each other
   and have to read as the same control.

   14px and NOT an em: an em would track whatever font-size the surrounding post
   content sets and drift away from the strip. line-height is pinned for the same
   reason, and the chevron gets line-height 1 so its larger glyph cannot inflate
   the line box and make this button taller than the one below it. */
.ft-match-cta {
	display: inline-block;
	padding: 9px 16px;
	border-radius: 3px;
	background: var(--ft-cta);
	color: #fff;
	font-size: 14px;
	line-height: 1.45;
	font-weight: 700;
	white-space: nowrap;
	transition: background .14s ease;
}
.ft-match-cta i {
	font-style: normal;
	font-size: 1.15em;
	line-height: 1;
	padding-left: 3px;
}
.ft-match a.ft-match-card:hover .ft-match-cta,
.ft-match a.ft-match-card:focus-visible .ft-match-cta { background: #a71d1d; }

/* Nothing on sale yet: the link still goes somewhere useful, so it stays a
   button, but not the buy-red one. Red here would promise a checkout the page
   cannot deliver, which is the same reason the listing rows swap btn_buy for
   btn_soon. Set off the same condition as .ft-match-price.is-soon. */
.ft-match-cta.is-soon {
	background: transparent;
	color: var(--ft-link);
	border: 1px solid var(--ft-rule);
	padding: 8px 15px;   /* 1px off every side, so the border keeps the same box */
	font-weight: 600;
}
.ft-match a.ft-match-card:hover .ft-match-cta.is-soon,
.ft-match a.ft-match-card:focus-visible .ft-match-cta.is-soon {
	background: var(--ft-answer-bg);
	border-color: var(--ft-answer-border);
}

/* The muted card. Two cases reach it: no event page to link to, and a match
   that has already been played. The played one may still carry a link (a past
   fixture with sitemap = 0 keeps a live page), so this only tones the card
   down, it does not remove the hover affordance. A played card also has no
   .ft-match-foot at all, so it simply ends after the venue line. */
.ft-match-card.is-flat { border-top-color: var(--ft-rule); background: var(--ft-surface); }

@media only screen and (max-width: 560px) {
	.ft-match-card { padding: 14px 14px; }
	.ft-match-teams { font-size: 1.1em; }
	.ft-match-foot { gap: 10px; }
	.ft-match-cta { flex: 1 1 auto; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
	.ft-match-card, .ft-match-cta { transition: none; }
}