/* From the Floor — the show-coverage band. Placed with the [from_the_floor]
   shortcode, so it can open the homepage, sit atop the newsroom, or go
   anywhere else content goes.

   Loaded only on a request that is actually going to draw the band (see
   cdc_ftf_assets in functions/from-the-floor.php), so while the section is off
   or in test mode no visitor downloads a byte of this.

   Deliberately short. The band is built out of the homepage's own parts —
   h2.frontpage, h4.frontpage, .ahImage and its .articleDate stamp, ul.authors,
   ul.latest and .latestDate, a.button.more — and this file only adds the
   layout they sit in, plus the three things the band genuinely does
   differently: the show bar, the 16:9 photo, and the coloured pills. */

/* A wash of the brand blue holds the band together as one panel. No border:
   the tint is doing that job, and a rule around it as well would fight the
   show bar's own hard blue edge a few pixels inside it. */
.ftf {
	margin-top: 1em;
	margin-bottom: 1.5em;
	/* The inset and the corner are variables because the booth bar at the foot
	   has to cancel exactly the one and match exactly the other to sit flush
	   inside the panel. Set them here and the narrow override below is the
	   only other place either number appears. */
	--ftf-pad: 18px;
	--ftf-corner: 12px;
	padding: 16px var(--ftf-pad) var(--ftf-pad);
	/* A strip of the foot colour along the top edge. The wash alone left the
	   middle of the band reading as page, and the strip gives the section a
	   coloured edge top and bottom — it mirrors the booth line at the foot. A
	   border rather than a shadow so it follows the rounded corners. */
	border-top: 5px solid var(--ftf-edge);
	border-radius: var(--ftf-corner);
	background: var(--ftf-wash);

	/* The palette. Every colour on the band comes from one of these, and the
	   values here are the house look: CDC blue, the orange booth line. A show
	   with a theme of its own overrides them inline on the section — see
	   cdc_ftf_theme_style() — so this block is also the list of what a theme
	   can reach.

	   ink      show bar, alert bar, button, the "Preview for" label
	   mark     the accent bar on each sub-head
	   stamp    the "2 days ago" date stamps
	   where    the run and venue, on the show bar
	   signal   the icon on the alert bar
	   foot     the booth line
	   edge     the strip along the top of the panel
	   accent   a themed show's third colour: the third trending pill
	   wash     the panel behind it all, and rule its hairlines
	   on-*     the text set on each of those */
	--ftf-ink: var(--cdc-blue);
	--ftf-on-ink: #fff;
	--ftf-mark: var(--ftf-ink);
	--ftf-stamp: var(--ftf-ink);
	--ftf-on-stamp: #fff;
	--ftf-where: rgba(255, 255, 255, 0.88);
	--ftf-signal: #fff;
	--ftf-foot: #fdba74;
	--ftf-on-foot: #111;
	--ftf-edge: var(--ftf-foot);
	--ftf-accent: var(--ftf-foot);
	--ftf-on-accent: var(--ftf-on-foot);
	/* 9%: at 5% the panel read as a pale grey gap between the bars rather than
	   as a panel. Text on it is still black on a near-white. */
	--ftf-wash: rgba(0, 102, 214, 0.09);
	/* Hairlines have to be tinted too: the house #eee is lighter than the wash
	   it would sit on, so it reads as nothing. */
	--ftf-rule: rgba(0, 102, 214, 0.2);
}

/* ---- the homepage's vocabulary, unhooked from the homepage ----

   The band is built out of homepage parts, and in cdcstyle.css every one of
   those is scoped to body.home. The band is placeable now, so anywhere else
   those rules would simply not fire: the sub-heads would lose their accent
   bars, the date stamps their blue, the list its reset.

   These are the same declarations re-scoped to .ftf, so the band carries its
   own copy of the vocabulary wherever it is dropped. Not new design — read
   against cdcstyle.css they should match. This file only loads where the band
   renders, so none of it can reach the rest of the site. */
.ftf h2.frontpage,
.ftf h4.frontpage {
	display: flex;
	width: 100%;
	overflow: hidden;
	font-weight: 700;
	text-transform: uppercase;
}
.ftf h2.frontpage {
	margin-top: 8px;
	font-size: 1.5em;
}
.ftf h2.frontpage span,
.ftf h4.frontpage span {
	flex-shrink: 0;
}
.ftf h2.frontpage:after {
	content: "";
	width: 100%;
	height: 10px;
	margin: 0 0.5em;
	flex-shrink: 0;
	border-bottom: 1px solid #aaa;
	transform: translatey(50%);
}
.ftf h4.frontpage {
	margin: 1.1em 0 0.55em;
	padding-left: 0.6em;
	align-items: center;
	overflow: visible;
	border-left: 3px solid var(--ftf-mark);
	font-size: 0.9rem;
	letter-spacing: 0.09em;
	color: #333;
}
.ftf ul.latest {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
.ftf .latestDate {
	display: inline-block;
	padding: 2px 6px;
	border-radius: 5px;
	background: var(--ftf-stamp);
	font-size: 0.85em;
	font-style: italic;
	color: var(--ftf-on-stamp);
}
/* The stamp on the photo is the same stamp; cdcstyle.css sets it in the house
   blue, site-wide, so the band has to say its colour again. The list's stamps
   need the longer selector: on the homepage `.home div.latest .latestDate`
   (0,3,1) outranks the plain one. */
.ftf .articleDate,
.ftf .ftf-latest ul.latest .latestDate {
	background: var(--ftf-stamp);
	color: var(--ftf-on-stamp);
}
.ftf .ahImage {
	width: 100%;
}
/* !important because cdcstyle.css paints `.content .button` blue with one, and
   the band sits inside .content on every page it is placed on. */
.ftf a.button.more {
	float: right;
	margin: 0 1em 1em 0;
	background-color: var(--ftf-ink) !important;
	color: var(--ftf-on-ink);
}
/* Foundation's hover is a fixed darker blue. A filter darkens whatever the ink
   is instead. */
.ftf a.button.more:hover,
.ftf a.button.more:focus {
	color: var(--ftf-on-ink);
	filter: brightness(0.88);
}
/* The dek's [continue] link, in the band's ink rather than the site's blue. */
.ftf .excerpt a {
	color: var(--ftf-ink);
}
.ftf .authors li span {
	display: inherit;
	padding-top: 6px;
	font-size: 0.9em;
}

/* The one thing a preview says out loud, and only when it has drawn nothing:
   why. A preview that works shows the band and nothing else, so there is no
   banner here telling an editor what they already know. */
.ftf-flag {
	margin: 0 0 0.6em;
	padding: 0.4em 0.9em;
	border-radius: 4px;
	background: #fff4d6;
	border: 1px solid #e5c76b;
	font-family: 'Archivo', sans-serif;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #7a5a00;
}

/* ---- show bar ---- */

/* Not .box-standout-label, though it is the same blue-caps move: that one is
   built to sit centred and overlap the white box below it, and here the box
   below is solid blue. So the label sits just above the bar instead, indented
   to the bar's own inner padding so the caps line up with the show name. The
   sub-1 line-height trims the descender space that would otherwise float it. */
.ftf-live {
	display: block;
	margin: 0 0 1px 20px;
	font-size: 1.4rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 0.78;
	text-transform: uppercase;
	color: var(--ftf-ink);
}
.ftf-showbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 18px;
	margin-bottom: 0.4em;
	padding: 14px 20px;
	border-radius: 8px;
	background: var(--ftf-ink);
	color: var(--ftf-on-ink);
}
/* The show's logo, ahead of the name. A touch taller than the name's line so
   it reads as the mark rather than a word in the row; the bar's own padding
   grows around it. */
.ftf-show-logo {
	display: block;
	width: auto;
	max-width: 200px;
	height: 2.9rem;
	object-fit: contain;
}
/* Any logo, knocked out to white: every pixel's colour to black, then to
   white. Transparency is untouched, so the mark keeps its shape. */
.ftf-show-logo-white {
	filter: brightness(0) invert(1);
}
.ftf-show-name {
	font-family: 'Archivo', sans-serif;
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	line-height: 1.15;
	text-transform: uppercase;
}
.ftf-show-where {
	font-family: 'Archivo', sans-serif;
	font-size: 0.88rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ftf-where);
}

/* ---- two-column body ---- */

.ftf-cols {
	display: grid;
	/* minmax(0, …), not bare fr: a bare fr track will not shrink below its
	   content's minimum width, and the lead photo's natural width is enough to
	   push a phone-width column out past the panel. */
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: 22px;
	/* No margin of its own: the column heads keep the 1.1em top margin every
	   sub-head carries, and that is the gap under the show bar. Both columns
	   have it, so they stay level. */
	margin-top: 0;
}
.ftf-cols > * + * {
	padding-left: 22px;
	border-left: 1px solid var(--ftf-rule);
}
/* Pin the only story filed under a show and there is nothing to put beside it.
   The feature takes the whole band rather than sitting against a column that
   would be a heading and a rule with no list under them. */
.ftf-cols-solo {
	grid-template-columns: minmax(0, 1fr);
}
/* The pills' heading shares its line, so it keeps no margin at all. */
.ftf-trending h4.frontpage {
	margin-top: 0;
}

/* Feature of the day. Headline and byline run the full width of the column,
   then the photo floats left with the dek beside it.

   Stacking the headline above rather than setting it next to the picture is
   what keeps the block shallow: across the whole column it breaks over two
   lines instead of four, and the dek then has a photo-height of space to fill
   rather than a photo-height plus everything the headline pushed down. The
   picture keeps a plain 16:9 — stretching it to fill would hand the crop to
   the layout, which is not a thing to do to a show-floor photo unseen. */
.ftf-feature-body {
	/* Contains the float, so the trending rule below cannot ride up into it. */
	display: flow-root;
}
.ftf-shot {
	float: left;
	width: 48%;
	max-width: 100%;
	margin: 0.2em 16px 0.5em 0;
}
.ftf-shot .ahImage {
	min-height: 0;
}
/* The positioning lines undo a phone rule in cdcstyle.css that turns every
   .ahImage photo full-bleed below 640px — 100vw, centred with a transform,
   !important. Right for a bare article card; inside the tinted panel the photo
   spills out over both its edges. Unconditional, because they are the values
   the photo has at every other width anyway. */
.ftf-shot .ahImage img {
	display: block;
	left: 0;
	transform: none;
	max-width: 100%;
	width: 100% !important;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}
/* It has the full column to itself, so it can afford the size a lead headline
   wants. Set left rather than centred — the same reset .home .feature-row-text
   makes. */
.ftf-feature .entry-title {
	margin: 0 0 0.5em;
	font-size: 1.35rem;
	line-height: 1.25;
	text-align: left;
	text-wrap: balance;
}
/* No max-width: the column is already narrower than a comfortable measure, and
   capping it here only shortened the one thing filling the space. */
.ftf-feature .excerpt {
	margin: 0.4em 0 0;
	font-size: 0.9em;
	line-height: 1.45;
}
/* Beside the photo, above the dek. Its rows are flex boxes, which sit clear of
   a float rather than straddling it, so the byline lands in the column of text
   next to the picture on its own. */
.ftf-feature ul.authors {
	margin: 0 0 0.35em;
}
/* The row is the flex box, not the list — .home ul.authors li centres it for a
   homepage card, where the byline sits under a centred tile. Here it runs
   along the top of a column of text and belongs on the same left edge as the
   dek beneath it. */
.ftf-feature ul.authors li {
	justify-content: flex-start;
	align-items: center;
}
/* One line beside the picture: the 6px the homepage adds sits the name below
   its avatar's centre, which in a 320px column is enough to wrap it. */
.ftf-feature .authors li span {
	padding-top: 0;
}
/* display_author_info() closes with a clear:left div — right for a homepage
   card, where the avatar is the only float. Here it would clear the photo and
   drop the dek underneath it, so the band cancels it. Inline style, hence the
   !important. */
.ftf-feature-body ul.authors + div[style] {
	clear: none !important;
}

/* The list keeps the site ul.latest look, set above, plus the hairlines that
   separate the rows. */
.ftf-latest ul.latest li {
	padding: 6px 0;
	overflow: hidden;
}
.ftf-latest ul.latest li + li {
	border-top: 1px solid var(--ftf-rule);
}
/* The stamp floats instead of taking a line of its own: in a band this is
   three rows of "2 hours ago" above three headlines, and the headline wraps
   back under the stamp for free. */
.ftf-latest .latestDate {
	float: left;
	margin: 1px 6px 0 0;
}
.ftf-latest ul.latest li a {
	line-height: 1.35;
}

/* ---- trending topics ---- */

.ftf-trending {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--ftf-rule);
}
/* h4.frontpage is a full-width flex row by default; here it shares a line. */
.ftf-trending h4.frontpage {
	flex: 0 0 auto;
	width: auto;
	margin-bottom: 0;
}
.ftf-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
/* The one place the band leaves the site's single blue behind: six hues, so a
   row of topics reads as six things rather than one blue block. */
.ftf-pill {
	--pill: var(--ftf-ink);
	--pill-on: #fff;
	padding: 0.45em 1.05em;
	border-radius: 999px;
	background: var(--pill);
	font-family: 'Archivo', sans-serif;
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1.45;
	color: var(--pill-on);
	transition: filter 0.15s;
}
.ftf-pill:hover,
.ftf-pill:focus {
	color: var(--pill-on);
	filter: brightness(0.88);
	text-decoration: none;
}
.ftf-pill b {
	margin-left: 0.45em;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	opacity: 0.72;
}
.ftf-pill-1 { --pill: #0066d6; }
.ftf-pill-2 { --pill: #0f766e; }
.ftf-pill-3 { --pill: #6d28d9; }
.ftf-pill-4 { --pill: #b45309; }
.ftf-pill-5 { --pill: #15803d; }
.ftf-pill-6 { --pill: #a8324a; }
/* A themed show gives up the six house hues for its own three, in turn. */
.ftf-themed .ftf-pill-1,
.ftf-themed .ftf-pill-4 { --pill: var(--ftf-ink);   --pill-on: var(--ftf-on-ink); }
.ftf-themed .ftf-pill-2,
.ftf-themed .ftf-pill-5 { --pill: var(--ftf-stamp); --pill-on: var(--ftf-on-stamp); }
.ftf-themed .ftf-pill-3,
.ftf-themed .ftf-pill-6 { --pill: var(--ftf-accent); --pill-on: var(--ftf-on-accent); }

/* ---- the booth bar ----

   The house line at the foot of the band. It cancels the panel's own inset
   with a negative margin so it runs edge to edge, and takes the panel's corner
   on its bottom two, which is what makes it read as the floor of the section
   rather than a strip sitting under it. Both numbers come from the panel, so
   the narrow override moves them together.

   Orange, alone on a band that is otherwise brand blue: this is the one line
   here that is CDC talking about itself, and in the show bar's blue it would
   read as a second show bar.

   Light enough to be set in black, which is the point — the bar is bright
   rather than heavy, and black on this is 11:1 where white on it would be
   1.7. It also puts daylight between the bar and the fourth trending pill
   (#b45309), which lands directly above it on a band with four topics or
   more; two saturated oranges at the same value read as one object.

   Pitched at a tint rather than a full-strength orange on purpose. This is a
   standing house line that sits under the band at every show, so it has to
   carry a week of looking at without shouting — a saturated bar is right for
   something you see once. Lighter costs nothing in legibility here: black on
   a tint has more contrast than black on the full strength, not less. */
.ftf-booth {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 16px calc(var(--ftf-pad) * -1) calc(var(--ftf-pad) * -1);
	padding: 12px 18px;
	border-radius: 0 0 var(--ftf-corner) var(--ftf-corner);
	background: var(--ftf-foot);
	font-family: 'Archivo', sans-serif;
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.3;
	text-align: center;
	color: var(--ftf-on-foot);
}
/* Never squeezed by a long line — a flex item with an intrinsic size will
   shrink before the text does, and a squashed pin is worse than a wrap. */
.ftf-booth-pin {
	flex-shrink: 0;
	opacity: 0.85;
}

/* ---- the alert bar ----

   A notice to readers, stacked directly on the booth bar so the pair reads as
   one foot to the panel. Built on the booth bar's geometry — flush to the
   sides — and it only takes the panel's bottom corners when it is the last
   thing in the band, which is when there is no booth line under it.

   The brand blue, set in white (5.4:1). It is the same hue as the show bar,
   which is fine at the foot of the band: the booth line under it keeps the
   pair from reading as a second show bar. */
.ftf-alert {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 16px calc(var(--ftf-pad) * -1) 0;
	padding: 12px 18px;
	background: var(--ftf-ink);
	font-family: 'Archivo', sans-serif;
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.4;
	text-align: center;
	color: var(--ftf-on-ink);
}
.ftf-alert:last-child {
	margin-bottom: calc(var(--ftf-pad) * -1);
	border-radius: 0 0 var(--ftf-corner) var(--ftf-corner);
}
.ftf-alert + .ftf-booth {
	margin-top: 0;
}
.ftf-alert-mark {
	flex-shrink: 0;
	color: var(--ftf-signal);
}

/* ---- narrow ----

   Container queries, not media queries. The band is placed now, so the window
   no longer tells you how wide it is: across a homepage row it has about
   1160px, inside the newsroom's content column about 760, and at the same
   viewport those want different layouts. Only the panel's own padding is left
   on a media query — a container cannot resize itself from its own query
   without chasing its tail. */
.ftf {
	container-type: inline-size;
}

/* Two columns need roughly the homepage's full row. Anything less and the
   feature ends up a 230px photo beside a 250px column of four-line headlines,
   so the list drops below the feature and both get the whole width. */
@container (max-width: 860px) {
	.ftf-cols {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}
	.ftf-cols > * + * {
		padding-left: 0;
		padding-top: 16px;
		border-left: 0;
		border-top: 1px solid var(--ftf-rule);
	}
}

/* Phone width: the photo gives up sitting beside the text, and the show bar
   drops a size. */
@container (max-width: 480px) {
	.ftf-live {
		margin-left: 14px;
		font-size: 1.05rem;
	}
	.ftf-showbar {
		padding: 12px 14px;
	}
	.ftf-show-name {
		font-size: 1.15rem;
	}
	.ftf-show-logo {
		height: 2.3rem;
	}
	.ftf-show-where {
		font-size: 0.76rem;
	}
	/* Too narrow to wrap text beside a photo, so it stops floating and the
	   story runs underneath it in full. */
	.ftf-shot {
		float: none;
		width: 100%;
		margin: 0 0 0.7em;
	}
}

@media screen and (max-width: 39.9375em) {
	.ftf {
		--ftf-pad: 12px;
		--ftf-corner: 8px;
		padding: 12px;
	}
	/* Floated right with a right margin, the button sits off-centre in a
	   single phone column. Full width reads as the end of the list. */
	.ftf a.button.more {
		float: none;
		display: block;
		margin: 0.6em 0 0.2em;
		text-align: center;
	}
	/* The line is most of the bar's width at this size, so it stops being a
	   centred label and becomes a paragraph: left-aligned, with the pin held
	   at the top of it rather than adrift beside the middle of two lines. */
	.ftf-alert,
	.ftf-booth {
		align-items: flex-start;
		justify-content: flex-start;
		gap: 8px;
		padding: 11px 12px;
		font-size: 0.88rem;
		text-align: left;
	}
	.ftf-alert-mark,
	.ftf-booth-pin {
		margin-top: 1px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.ftf-pill {
		transition: none;
	}
}