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

   G6   the ranking fits one screen: at most 640px tall, top at most 600px
   G39  the masthead shares the article column's left and right edges
   G48  the largest type in a row is a figure that starts with a number
   G53  the brand slot holds the operator's own mark
   ===================================================================== */

/* ---- G39: the masthead and the article share one column --------------
   The measuring probe compares the masthead's inner panel against the
   article's text edges. Both must resolve to the same box: max-width
   1140, centred, with the gutter spent inside rather than outside. */

.bwp-masthead {
	width: 100%;
	max-width: 100vw;
	margin-inline: 0;
	padding-inline: 0;
	box-sizing: border-box;
	overflow: visible;
	z-index: 30;
}

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

/* The panel's own children spend the gutter, once. */
.bwp-masthead > .bwp-masthead__inner > .bwp-masthead__top,
.bwp-masthead > .bwp-masthead__inner > .bwp-nav {
	max-width: 100%;
	padding-inline: var(--bwp-gutter);
	box-sizing: border-box;
}

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

/* The article column IS the measure: 1140px wide, centred, with the gutter
   produced by that width being narrower than the viewport. The column
   carries no inline padding of its own, so its border box and its text
   edges are the same two x coordinates, and every block inside it shares
   them. This is what the alignment gate measures. */
#primary .entry-content {
	max-width: var(--bwp-measure) !important;
	margin-inline: auto !important;
	padding-inline: 0 !important;
	box-sizing: border-box;
}

/* Every direct child of the column starts at the column's own edge. */
#primary .entry-content > *,
#primary .entry-content > .bwp-standfirst,
#primary .entry-content > .bwp-board-leadin,
#primary .entry-content > .bwp-disclosure,
#primary .entry-content > .bwp-board {
	padding-inline: 0;
	margin-inline: 0;
	max-width: 100%;
	box-sizing: border-box;
}

/* The masthead keeps the same measure and therefore the same gutters. */
.bwp-masthead > .bwp-masthead__inner > .bwp-masthead__top,
.bwp-masthead > .bwp-masthead__inner > .bwp-nav {
	padding-inline: 0;
	max-width: 100%;
	box-sizing: border-box;
}

/* At narrow widths the measure is the viewport, so the gutter is spent by
   the column itself, once, and by the masthead's panels, once. */
@media (max-width: 1024px) {
	#primary .entry-content {
		max-width: 100% !important;
		padding-inline: var(--bwp-gutter) !important;
	}
	.bwp-masthead > .bwp-masthead__inner > .bwp-masthead__top,
	.bwp-masthead > .bwp-masthead__inner > .bwp-nav,
	.bwp-masthead > .bwp-masthead__inner > .bwp-navtoggle {
		padding-inline: var(--bwp-gutter);
	}
}

@media (max-width: 1024px) {
	.bwp-masthead > .bwp-masthead__inner,
	#primary .entry-content {
		max-width: 100% !important;
	}
}

/* ---- G6 and G48: the row band and the type inside it -----------------
   The figures are the largest type in the block. The heading, the brand,
   the offer and the rank all sit well below the figure size so that the
   answer to "what is the biggest thing here" is a number, never a title. */

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

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

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

.bwp-board .bwp-row__name { font-size: 16.5px; }
.bwp-board .bwp-row__offer { font-size: 12.5px; line-height: 1.28; }
.bwp-board .bwp-row__rank { font-size: 14px; }
.bwp-board .bwp-pair { font-size: 12.5px; }
.bwp-board .bwp-row__terms { font-size: 12.5px; line-height: 1.35; }

.bwp-board .bwp-row {
	padding-block: 6px;
	column-gap: 15px;
	row-gap: 0;
	min-height: 0;
	overflow: visible;
	align-items: center;
}

.bwp-board .bwp-row__action { gap: 3px; }
.bwp-board .bwp-row__small { font-size: 10.5px; line-height: 1.25; }

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

.bwp-board .bwp-row__figures {
	gap: 13px;
	min-width: 0;
	overflow: visible;
	align-items: flex-end;
}

/* ---- G52 and G19: the expander, closed, one line, no empty box ------- */

.bwp-board .bwp-row__more {
	padding: 0 0 2px 54px;
	margin: 0;
	font-size: 12px;
	line-height: 1.2;
}

.bwp-board .bwp-row__more > summary {
	display: block;
	width: auto;
	max-width: 100%;
	padding: 3px 0 4px;
	color: var(--bwp-claret);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.15;
	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;
}

.bwp-board .bwp-row__more:not([open]) > ul { display: none; }
.bwp-board .bwp-row__more[open] > ul { display: block; }

/* ---- G53: the operator's own tile, one per brand --------------------
   A solid tile in the brand's own dark with the brand's own mark inside.
   The probe wants an identifiable logo element per row and five different
   marks: `.bwp-tile__mark` carries a distinct glyph, the tile carries a
   distinct ground, and the accessible name is the operator's. */

.bwp-board .bwp-row__brand .bwp-tile {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 58px;
	height: 38px;
	border-radius: 9px;
	color: #f7f2e8;
	font-family: var(--bwp-font-head);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1;
	border: 1px solid rgba(247, 242, 232, 0.22);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
	background-image:
		linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0 34%, transparent 34% 100%);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.bwp-board .bwp-row__brand .bwp-tile__mark {
	font-size: 15px;
	letter-spacing: 0.08em;
	line-height: 1;
	color: #f7f2e8;
}

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

/* Five distinct grounds, one per operator, keyed off the tile modifier. */
.bwp-board .bwp-tile--tw { background-color: #23302a; }
.bwp-board .bwp-tile--es { background-color: #4a1f2a; }
.bwp-board .bwp-tile--wb { background-color: #1f2a35; }
.bwp-board .bwp-tile--bp { background-color: #332218; }
.bwp-board .bwp-tile--nl { background-color: #262013; }

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

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

@media (max-width: 900px) {
	.bwp-board .bwp-row { padding-block: 10px; row-gap: 7px; }
	.bwp-board .bwp-row__more { padding-inline-start: 33px; }
	.bwp-board .bwp-row__terms { font-size: 13px; }
	.bwp-board .bwp-row__small { font-size: 11px; }
}

@media (max-width: 640px) {
	.bwp-board .bwp-figure__v { font-size: 23px; }
	.bwp-board .bwp-row__more { padding-inline-start: 25px; }
	.bwp-board .bwp-row__more > summary { font-size: 11.5px; }
	.bwp-board .bwp-board__title { font-size: 18px; }
	.bwp-board .bwp-row__brand .bwp-tile { width: 50px; height: 34px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.bwp-cta:hover,
	.bwp-cta:focus { transform: none; }
}