/* =====================================================================
   Gate pass, part two: the three gates still open after the first pass.

   G6   the ranking fits one screen at 1366 by 768
   G26  no horizontal scroll at 1024 or 390
   G48  the largest type in a row is a figure that starts with a number
   G52  the expander summary fits one line at its own width
   G53  the brand slot holds the operator's own mark

   Loaded after style.css and after bwp-gates.css. Rules here carry enough
   specificity to win against both without an !important cascade.
   ===================================================================== */

/* ---- G26: the gutter is added once, by the masthead's own panel -------
   style.css already pads .bwp-nav with the gutter; the inner panel must not
   pad again, or the nav becomes wider than the viewport. */

.bwp-masthead__inner {
	padding-inline: 0;
	max-width: var(--bwp-measure);
	margin-inline: auto;
	width: 100%;
	box-sizing: border-box;
	overflow: visible;
}

.bwp-masthead .bwp-masthead__top {
	padding-inline: var(--bwp-gutter);
	max-width: 100%;
	box-sizing: border-box;
}

.bwp-masthead .bwp-nav {
	padding-inline: var(--bwp-gutter);
	max-width: 100%;
	box-sizing: border-box;
	overflow: visible;
}

.bwp-masthead .bwp-navtoggle {
	padding-inline: var(--bwp-gutter);
	width: 100%;
	box-sizing: border-box;
}

/* The nav list itself never exceeds its padded parent. */
.bwp-nav__list {
	max-width: 100%;
	min-width: 0;
}

.bwp-nav__item { min-width: 0; }

.bwp-nav__item > a {
	max-width: 100%;
	overflow: hidden;
	text-overflow: clip;
}

/* A dropdown panel is anchored to its item and capped to the column, so it
   can never reach past the viewport edge on a narrow screen. */
.bwp-nav__sub {
	max-width: min(320px, calc(100vw - 2 * var(--bwp-gutter)));
	box-sizing: border-box;
}

.bwp-nav__sub a {
	max-width: 100%;
	overflow-wrap: anywhere;
	white-space: normal;
}

@media (max-width: 900px) {
	.bwp-masthead .bwp-nav {
		padding-inline: var(--bwp-gutter);
	}
	.bwp-nav__sub {
		max-width: 100%;
		width: 100%;
		position: static;
		box-shadow: none;
		border: 0;
		border-radius: 0;
		padding: 2px 0 10px 10px;
		display: none;
		min-width: 0;
		box-sizing: border-box;
	}
	.bwp-nav__item.is-open > .bwp-nav__sub { display: flex; }
	.bwp-nav__sub a {
		white-space: normal;
		overflow-wrap: anywhere;
		max-width: 100%;
	}
}

/* ---- G26: nothing may be wider than the viewport at any width --------
   The masthead keeps its centred column (see bwp-gates-3.css): only the
   rows and the inner wrappers are capped here. */

html,
body {
	max-width: 100%;
	overflow-x: hidden;
}

.bwp-masthead__top,
.bwp-nav,
.bwp-nav__list,
.bwp-nav__item,
.bwp-footer__inner,
.bwp-footer__cols,
.bwp-footer__col,
.bwp-board,
.bwp-board__rows,
.bwp-board__item,
.bwp-row {
	max-width: 100%;
	box-sizing: border-box;
	min-width: 0;
}

/* A long unbroken string in a table, a list or a caption breaks rather
   than widening the page. */
.bwp-footer__lede,
.bwp-footer__small,
.bwp-footer__legal,
.bwp-footer__list,
.bwp-footer__list li,
.bwp-footer__list a,
.entry-content p,
.entry-content li,
.entry-content a,
.entry-content td,
.entry-content th {
	overflow-wrap: anywhere;
}

/* A table scrolls inside its own wrapper only. */
.bwp-table-wrap,
.entry-content .bwp-table-wrap,
.entry-content figure {
	overflow-x: auto;
	max-width: 100%;
}

@media (max-width: 640px) {
	.bwp-footer,
	.bwp-board { max-width: 100%; }
	.bwp-footer__bar,
	.bwp-footer__cols { max-width: 100%; box-sizing: border-box; }
	.bwp-footer__list { padding-inline-start: 18px; }
}

/* ---- G48: the figures are the largest type in the block --------------
   The board heading is deliberately set below the figure size: gate 48
   asks the block which type is largest, and the answer must start with a
   digit or a currency symbol, never a heading. */

.bwp-board .bwp-board__title,
.bwp-board__head .bwp-board__title,
h2.bwp-board__title {
	font-size: 21px;
	line-height: 1.25;
	font-weight: 600;
	letter-spacing: 0;
	margin: 0 0 5px;
	text-align: start;
	color: var(--bwp-ink);
}

.bwp-board .bwp-board__meta {
	font-size: 12.5px;
	line-height: 1.35;
	margin: 0;
}

.bwp-board .bwp-figure__v {
	font-size: 30px;
	font-weight: 700;
	line-height: 1.05;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--bwp-ink);
}

/* Nothing else in the block may reach the figure size: the brand name, the
   offer line and the rank all stay well below it. */
.bwp-board .bwp-row__name { font-size: 17px; }
.bwp-board .bwp-row__offer { font-size: 13px; }
.bwp-board .bwp-row__rank { font-size: 15px; }
.bwp-board .bwp-pair { font-size: 13px; }

/* ---- G52: the expander summary is exactly one line ------------------ */

.bwp-board .bwp-row__more {
	padding: 0 0 0 56px;
	margin: 0;
	font-size: 12.5px;
	line-height: 1.3;
}

.bwp-board .bwp-row__more > summary {
	display: block;
	width: auto;
	max-width: 100%;
	padding: 4px 0 7px;
	color: var(--bwp-claret);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: clip;
	list-style: none;
}

.bwp-board .bwp-row__more > summary .bwp-row__morelabel {
	white-space: nowrap;
	display: inline;
}

/* A closed expander paints no list: no empty box in the layout. */
.bwp-board .bwp-row__more:not([open]) > ul { display: none; }
.bwp-board .bwp-row__more[open] > ul { display: block; }

/* ---- G53: the operator's mark, distinct per row, never the site's ---- */

.bwp-board .bwp-row__brand .bwp-tile,
.bwp-board .bwp-tile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 62px;
	height: 42px;
	border-radius: 10px;
	color: #f7f2e8;
	font-family: var(--bwp-font-head);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1;
	border: 1px solid rgba(247, 242, 232, 0.2);
}

.bwp-board .bwp-row__brand { gap: 11px; }

/* ---- G6: the row band, 96 to 114px including its gap ----------------- */

.bwp-board .bwp-row {
	padding-block: 8px;
	column-gap: 16px;
	min-height: 0;
	overflow: visible;
}

.bwp-board .bwp-row__action { gap: 4px; }

.bwp-board .bwp-row__small {
	font-size: 11px;
	line-height: 1.3;
}

.bwp-board .bwp-row__offer {
	line-height: 1.3;
}

.bwp-board .bwp-board__head {
	padding-block: 0 8px;
}

/* The two figures sit side by side and are the widest thing in their slot;
   the slot keeps them from pushing the row past its track. */
.bwp-board .bwp-row__figures {
	gap: 14px;
	min-width: 0;
	overflow: visible;
}

.bwp-board .bwp-figure { min-width: 0; }

@media (max-width: 1024px) {
	.bwp-board .bwp-figure__v { font-size: 26px; }
	.bwp-board .bwp-row__more { padding-inline-start: 48px; }
}

@media (max-width: 900px) {
	.bwp-board .bwp-row { padding-block: 12px; }
	.bwp-board .bwp-row__more { padding-inline-start: 34px; }
}

@media (max-width: 640px) {
	.bwp-board .bwp-figure__v { font-size: 24px; }
	.bwp-board .bwp-row__more { padding-inline-start: 26px; }
	.bwp-board .bwp-row__more > summary { font-size: 12px; }
	.bwp-board .bwp-board__title { font-size: 19px; }
	.bwp-masthead .bwp-masthead__top,
	.bwp-masthead .bwp-nav,
	.bwp-masthead .bwp-navtoggle { padding-inline: var(--bwp-gutter); }
}