/**
 * BRN Updates - "BRN Honeycomb Stats" widget.
 *
 * Structural CSS only. Colors, sizes and spacing all come from the widget's
 * style sections, whose selectors carry the element wrapper and therefore
 * outrank everything here. The values below are only the fallbacks that keep
 * the shape sane before a control has been touched.
 *
 * The grid columns and each hexagon's cell are *not* here: they depend on the
 * per-device row pattern, so the widget generates them itself and prints them
 * inline. See class-brn-honeycomb.php.
 */

.brn-hc {
	display: flex;
	justify-content: center;
	width: 100%;
}

.brn-hc__grid {
	--brn-hc-hgap: 6px;
	--brn-hc-vgap: 0px;

	display: grid;
	/* Overwritten per device by the generated CSS; this is only what a widget
	 * with no usable row pattern falls back to. */
	grid-template-columns: repeat(2, 1fr);
	align-items: start;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/* Every cell spans two half-hexagon columns, so half the horizontal gap on each
 * side leaves exactly one gap between neighbours in a row — and, since the gap
 * may be negative, exactly one overlap when the design calls for the hexagons
 * to touch. The row offset arrives as margin-block-start from the generated
 * CSS, where it can be applied to the lower rows only. */
.brn-hc__cell {
	min-width: 0;
	margin-inline: calc(var(--brn-hc-hgap) / 2);
}

.brn-hc__item {
	--brn-hc-transition: 0.3s;

	position: relative;
	display: block;
	width: 100%;
	/* Replaced by the generated CSS with the ratio the SVG viewBox was built
	 * for, so the shape is never drawn under a non-uniform scale. */
	aspect-ratio: 100 / 115;
	color: inherit;
	text-decoration: none;
	transition: transform var(--brn-hc-transition) ease;
}

.brn-hc__item:hover,
.brn-hc__item:focus,
.brn-hc__item:focus-visible {
	text-decoration: none;
}

/* preserveAspectRatio is "none" on the SVG, which would normally distort the
 * stroke; vector-effect on the path keeps its weight constant instead. The
 * outline sits on the viewBox edge, so half of it falls outside — overflow has
 * to stay visible or the hexagon renders with four clipped sides. */
.brn-hc__shape {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}

/* Miter, not round: the corners are cut by the path itself when the Corner
 * Radius control asks for it, so the join must not quietly round them a second
 * time at radius 0. Hexagon corners are 120 degrees, far too blunt for a miter
 * to spike. */
.brn-hc__shape-path {
	fill: transparent;
	stroke: #f2b01e;
	stroke-width: 1.5px;
	stroke-linejoin: miter;
	transition-property: stroke, fill, stroke-width;
	transition-duration: var(--brn-hc-transition, 0.3s);
	transition-timing-function: ease;
}

/* Stacked from the top, so the icon sits up against the apex with the number
 * and caption below it. The Vertical Alignment control owns this; the value
 * here only matches its default, for pages whose generated CSS has not been
 * rebuilt yet. */
.brn-hc__content {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	box-sizing: border-box;
	/* A hexagon narrows towards its points, so content is held off the sloping
	 * edges by default. The Content Padding control owns the real value. */
	padding: 12% 16%;
	text-align: center;
}

.brn-hc__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	line-height: 1;
	color: #1b62a8;
	transition: color var(--brn-hc-transition, 0.3s) ease;
}

.brn-hc__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* A figure reads left to right even on an RTL page — "4.8K" must not come out
 * as "K4.8" — so the whole group is isolated as its own LTR run. Isolation
 * keeps that decision from leaking into the Hebrew caption below it. */
.brn-hc__number {
	display: block;
	direction: ltr;
	unicode-bidi: isolate;
	line-height: 1.1;
	color: #0b2a4a;
	transition: color var(--brn-hc-transition, 0.3s) ease;
}

/* Prefix and suffix ride along with whatever the number is styled as; they are
 * part of the same figure, not decoration around it. */
.brn-hc__affix,
.brn-hc__counter {
	display: inline;
	font: inherit;
	color: inherit;
}

/* The counter's text is replaced frame by frame, and digits are not all the
 * same width in every face — without tabular figures the number jitters
 * sideways as it counts. */
.brn-hc__counter {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}

/* The caption is the part that can outgrow its hexagon, and a hexagon has no
 * room to give. Clipping keeps a long line from spilling over the outline and
 * colliding with the row below. */
.brn-hc__title,
.brn-hc__description {
	display: block;
	max-width: 100%;
	overflow: hidden;
	line-height: 1.35;
	transition: color var(--brn-hc-transition, 0.3s) ease;
}

.brn-hc__title {
	font-weight: 700;
	color: #0b2a4a;
}

.brn-hc__description {
	color: #33475b;
}

/* The clipPath the widget prints for its own outline lives in an SVG with no
 * drawing of its own. It is taken out of the flow rather than hidden with
 * `display: none`, which some browsers read as a reason to stop resolving the
 * clip references inside it. */
.brn-hc__defs {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

/* The backdrop behind the content — the hexagon's background colour, and the
 * picture if it has one — cut to the hexagon.
 *
 * The clip itself arrives from the generated CSS, which is the only place that
 * knows the id of the <clipPath> the widget printed for its own shape — the
 * outline is built from the Shape, Height Ratio and Corner Radius controls, so
 * there is no fixed path a stylesheet could hold. Until that rule lands the
 * backdrop is simply a rectangle behind a transparent hexagon, which is the
 * right thing for it to fall back to.
 *
 * The colour lives here rather than on the SVG's fill because the outline is
 * painted over the backdrop: a filled path would cover the picture. */
.brn-hc__media {
	position: absolute;
	inset: 0;
	display: block;
	overflow: hidden;
	background-color: transparent;
	pointer-events: none;
	transition: background-color var(--brn-hc-transition, 0.3s) ease;
}

/* The photograph rides on its own element inside the clipped one, because
 * `clip-path` is applied before `transform`: a zoom on the clipped element
 * would scale the hexagon's outline along with the picture and leave it
 * overhanging its neighbours. Everything that moves or filters the image
 * therefore belongs here, and the clip stays on the parent. */
.brn-hc__media-image {
	position: absolute;
	inset: 0;
	display: block;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	transform-origin: center;
	transition-property: transform, filter, opacity;
	transition-duration: var(--brn-hc-transition, 0.3s);
	transition-timing-function: ease;
}

/* The wash between the picture and the content. It sits on the clipped parent
 * rather than on the image, so a zoom never drags the overlay along with it and
 * a greyscale never drains it. Transparent until the Overlay control says
 * otherwise. */
.brn-hc__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--brn-hc-overlay, transparent);
	transition: background-color var(--brn-hc-transition, 0.3s) ease;
}

/* The button, laid out exactly as the standalone BRN Button widget's is: an
 * icon badge pinned to one physical side, the label taking what is left, and a
 * counterweight at the far end so the centred label sits on the button's
 * middle. The values here are only the fallbacks that keep the shape sane
 * before a control has been touched. */
.brn-hc__button {
	--brn-hc-btn-icon-size: 12px;
	--brn-hc-btn-icon-box: 24px;
	--brn-hc-btn-icon-radius: 50%;
	--brn-hc-btn-icon-gap: 6px;

	position: relative;
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	max-width: 100%;
	flex: 0 0 auto;
	padding: 4px;
	border-radius: 100px;
	background-color: #1b62a8;
	color: #fff;
	text-decoration: none;
	transition-property: background, background-color, color, border-color, box-shadow;
	transition-duration: var(--brn-hc-transition, 0.3s);
	transition-timing-function: ease;
}

.brn-hc__button:hover,
.brn-hc__button:focus {
	text-decoration: none;
}

/* Driven per breakpoint by the Width control's own selectors; this class is
 * only a floor for pages still serving generated CSS from before the button
 * existed. */
.brn-hc__button--full {
	width: 100%;
}

.brn-hc__button-text {
	flex: 1 1 auto;
	min-width: 0;
	text-align: center;
}

/* The counterweight opposite the badge. Its width carries the gap as well as
 * the badge, which is why the gap is a margin on the badge rather than a
 * `column-gap` on the button: a container gap would still show up beside a
 * spacer that is not there, and knock the label off centre again. */
.brn-hc__button-balance {
	flex: 0 0 auto;
	width: calc(var(--brn-hc-btn-icon-box) + var(--brn-hc-btn-icon-gap));
}

/* Which side of the badge the label sits on follows the physical corner alone —
 * the direction flip below swaps the flex order, but the badge stays put, so
 * the gap stays on the same side of it either way. */
.brn-hc__button--icon-left .brn-hc__button-icon {
	margin-right: var(--brn-hc-btn-icon-gap);
}

.brn-hc__button--icon-right .brn-hc__button-icon {
	margin-left: var(--brn-hc-btn-icon-gap);
}

.brn-hc__button-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	box-sizing: border-box;
	width: var(--brn-hc-btn-icon-box);
	height: var(--brn-hc-btn-icon-box);
	border-radius: var(--brn-hc-btn-icon-radius);
	background-color: rgba(255, 255, 255, 0.16);
	font-size: var(--brn-hc-btn-icon-size);
	line-height: 1;
	transition-property: background, background-color, color, border-color;
	transition-duration: var(--brn-hc-transition, 0.3s);
	transition-timing-function: ease;
}

.brn-hc__button-icon i {
	font-size: inherit;
	line-height: 1;
}

.brn-hc__button-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* Which physical corner the badge sits in.
 *
 * The badge is first in the DOM, so the flex direction is what decides the side
 * it lands on — and since `row` follows the page direction, RTL needs the
 * opposite value to keep "Left" meaning the left of the screen. */
.brn-hc__button--icon-left {
	flex-direction: row;
}

.brn-hc__button--icon-right {
	flex-direction: row-reverse;
}

[dir="rtl"] .brn-hc__button--icon-left,
.rtl .brn-hc__button--icon-left {
	flex-direction: row-reverse;
}

[dir="rtl"] .brn-hc__button--icon-right,
.rtl .brn-hc__button--icon-right {
	flex-direction: row;
}

@media (prefers-reduced-motion: reduce) {
	.brn-hc__item,
	.brn-hc__shape-path,
	.brn-hc__icon,
	.brn-hc__number,
	.brn-hc__title,
	.brn-hc__description,
	.brn-hc__media,
	.brn-hc__media::after,
	.brn-hc__media-image,
	.brn-hc__button,
	.brn-hc__button-icon {
		transition: none;
	}
}