/* Matches strip. Tokens live in assets/base.css. */

/*
 * The hairlines are drawn inside the band (inset shadows rather than borders)
 * so the strip stays exactly 142px tall, as in the design.
 */
/*
 * Full bleed at every width, whatever the ancestors do.
 *
 * The strip is a dark band that must touch both viewport edges even when it sits
 * inside a padded, max-width container — a theme's `contentSize` (645px here),
 * a Greenshift section with its own padding, or a column. `alignfull` only
 * escapes containers the theme knows about, so the break-out is done in CSS:
 * `50% - 50vw` is exactly the distance from the container's edge to the viewport
 * edge, negative whenever the container is narrower.
 *
 * The width is `--rkl-vw`, which view.js keeps equal to
 * `documentElement.clientWidth` — the viewport *without* the scrollbar. Plain
 * `100vw` includes the scrollbar, which made the strip 15px too wide and put a
 * horizontal scrollbar on every page carrying it. `100vw` stays as the fallback
 * for the moment before the script runs.
 */
/*
 * Where the card row begins: the content column, plus the RUNGTYNĖS panel and
 * the gap after it.
 *
 * The left-hand arrow and gradient hang off this rather than off the viewport
 * edge — mirroring the right-hand pair would put both of them on top of the
 * panel and its two controls. `100%` is the strip, which is the viewport, so
 * the first term is the same expression __inner uses for its own padding.
 */
.rkl-matches-line {
	--rkl-matches-row-start: calc(max(var(--rkl-gutter), (100% - var(--rkl-content)) / 2) + 139px);
	background: var(--rkl-black);
	border-radius: 0;
	box-shadow:
		inset 0 1px 0 var(--rkl-grey-01),
		inset 0 -1px 0 var(--rkl-grey-01);
	font-family: var(--rkl-font);
	margin-inline: calc(50% - var(--rkl-vw, 100vw) / 2);
	max-width: var(--rkl-vw, 100vw);
	overflow: hidden;
	position: relative;
	width: var(--rkl-vw, 100vw);
}

/* An uploaded image is a texture: screened over the dark band, half strength,
   so whatever is chosen reads as treatment rather than as the band itself. */
.rkl-matches-line__bg {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	inset: 0;
	mix-blend-mode: screen;
	opacity: 0.5;
	pointer-events: none;
	position: absolute;
}

/*
 * The bundled default is not a texture — it is the finished band from the Figma
 * library section „Efects and gradients" („Matches line", 2613:86811), the dark
 * field and the arcs already composited at 2x. Painted at full strength, so the
 * strip is the design's artwork rather than a half-strength trace of it over a
 * flat black fill.
 */
.rkl-matches-line__bg--art {
	/*
	 * `100% 100%` because the strip's height is fixed at the design's 142px:
	 * the art only ever has to stretch sideways, and `cover` would instead crop
	 * a quarter off its top and bottom on any viewport wider than 1440. An
	 * upload keeps `cover` above — a photograph must not be distorted.
	 */
	background-size: 100% 100%;
	mix-blend-mode: normal;
	opacity: 1;
}

/*
 * The panel lines up with the content column, which the strip itself escapes.
 *
 * This used to be a hardcoded `padding-left: 48px`, measured from the viewport
 * edge because the strip is full-bleed. The content column is `max-width: 1344px`
 * and centred, so the two only coincided near a 1440px viewport — at a 1905px
 * client width the content started at 281px and this panel at 48px, 233px apart.
 *
 * `100%` here is the viewport width, because that is what the strip is, so
 * `(100% - 1344px) / 2` is the distance from the viewport edge to the content
 * column. `max()` keeps the gutter as the floor for narrower viewports, where the
 * expression goes negative.
 */
.rkl-matches-line__inner {
	align-items: center;
	box-sizing: border-box;
	display: flex;
	gap: 8px;
	min-height: 142px;
	padding: 16px 0 16px max(var(--rkl-gutter), calc((100% - var(--rkl-content)) / 2));
	position: relative;
}

.rkl-matches-line__empty {
	color: var(--rkl-grey-02);
	font-size: 12px;
	margin: 0;
	padding: 0 16px;
}

/* Left panel ------------------------------------------------------------ */

.rkl-matches-line__panel {
	background: var(--rkl-white);
	/* 12px, not the 8px token: the node's panel and cards carry a softer corner. */
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
	box-sizing: border-box;
	display: flex;
	flex: none;
	flex-direction: column;
	height: 110px;
	justify-content: space-between;
	padding: 16px;
	/* Above the lead ramp, which runs underneath it to the viewport edge. */
	position: relative;
	width: 131px;
	z-index: 3;
}

.rkl-matches-line__title {
	color: var(--rkl-black);
	font-family: "Boldonse", var(--rkl-font);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.9;
	margin: 0;
	text-align: center;
	text-transform: uppercase;
	width: 100%;
}

.rkl-mini-field,
.rkl-mini-button {
	align-items: center;
	background: var(--rkl-grey-04);
	border: 1px solid var(--rkl-grey-02);
	border-radius: var(--rkl-radius);
	box-sizing: border-box;
	color: var(--rkl-black);
	display: flex;
	font-size: 10px;
	font-weight: 500;
	gap: 8px;
	height: 24px;
	line-height: 1.5;
	padding: 0 8px;
	position: relative;
	text-decoration: none;
	width: 100%;
}

.rkl-mini-field__select {
	appearance: none;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	font: inherit;
	margin: 0;
	padding: 0 14px 0 0;
	width: 100%;
}

.rkl-mini-field__select:focus-visible,
.rkl-mini-button:focus-visible {
	outline: 2px solid var(--rkl-green-03);
	outline-offset: 1px;
}

.rkl-mini-field__icon {
	height: 10px;
	object-fit: contain;
	pointer-events: none;
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	width: 10px;
}

.rkl-mini-button {
	justify-content: center;
}

.rkl-mini-button img {
	height: 10px;
	object-fit: contain;
	transform: rotate(-90deg);
	width: 10px;
}

/* Card row -------------------------------------------------------------- */

/*
 * The row scrolls horizontally but shows no scrollbar, as in the design.
 * Vertical padding gives the card shadows room; the matching negative margin
 * keeps the strip at its 142px height.
 */
/*
 * The row is a Swiper now (assets/swiper.js), like the news, videos and player
 * rows. The container clips and carries the gutters; the <ul> is only the flex
 * track Swiper translates.
 *
 * No CSS `gap` here — the gutter is Swiper's `spaceBetween: 8`, and declaring
 * both double-counts it and cuts off the last card. The 6px vertical padding with
 * a matching negative margin stays: it is what keeps each card's outer shadow and
 * focus ring from being clipped, and it costs the band nothing.
 */
/*
 * Scoped through the block root on purpose — `.rkl-matches-line` adds a class, so
 * this is (0,2,0).
 *
 * base.css resets `.rkl-swiper { margin: 0; padding: 0 }` at (0,1,0) and loads
 * after the block stylesheets, so a bare `.rkl-matches-line__viewport` loses and
 * both gutters silently vanish. Measured: padding-right came out 0 where 48/16 was
 * written, which also cost the 6px of vertical clearance the card shadows need
 * inside `overflow: hidden`.
 */
.rkl-matches-line .rkl-matches-line__viewport {
	cursor: grab;
	margin: -6px 0;
	min-width: 0;
	padding: 6px 48px 6px 0;
}

.rkl-matches-line__viewport.swiper-grabbing {
	cursor: grabbing;
}

.rkl-matches-line__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Keyboard users get the row as a focus stop. */
.rkl-matches-line__viewport:focus-visible {
	outline: 2px solid var(--rkl-white);
	outline-offset: -2px;
}

/* Hover navigation ------------------------------------------------------- */

/*
 * Figma 2466:41617 („State=Scrolled"): on hover each end of the row grows a
 * gradient into the band's own black with a caret button 16px in from it.
 *
 * Both are absolute inside `.rkl-matches-line`, which is already the block's
 * positioning context and already clips — so the end gradient reaches the
 * viewport edge rather than the content column's, which is what the node shows
 * on a full-bleed band.
 *
 * Scoped through the block root on purpose: `.rkl-icon-button` in base.css is
 * (0,1,0) and that file loads after the block stylesheets, so a bare
 * `.rkl-matches-line__arrow` would lose `transition` to it and the arrow would
 * appear instantly instead of fading.
 */
.rkl-matches-line .rkl-matches-line__fade,
.rkl-matches-line .rkl-matches-line__arrow {
	opacity: 0;
	pointer-events: none;
	position: absolute;
	transition: opacity 0.2s ease;
	z-index: 2;
}

/*
 * Full band height, so each fade carries the strip above and below the cards
 * with it rather than stopping at the row and leaving two lit bars.
 *
 * `rgba(30, 32, 30, 0)` rather than `transparent`, which some engines still
 * interpolate through rgba(0, 0, 0, 0) and leave a grey bruise mid-gradient.
 */
.rkl-matches-line .rkl-matches-line__fade {
	inset-block: 0;
	width: 112px;
}

/*
 * Full strength where it meets the panel, then a long way down to nothing.
 *
 * It starts on the panel's right edge — the 8px gap is part of the fade, not a
 * lit strip in front of it — and runs 176px, two thirds again as far as the
 * node's own gradient. The length is the point: from full black, a short ramp
 * has to lose its alpha fast enough that the falloff itself becomes the thing
 * you look at.
 *
 * The stops hold near-opaque across the arrow, which sits 24px to 64px in, and
 * spend the rest of the distance on the tail. Evenly spaced stops would put the
 * midpoint of the falloff right behind the button.
 */
.rkl-matches-line .rkl-matches-line__fade--start {
	background: linear-gradient(
		to right,
		var(--rkl-black) 0%,
		rgba(30, 32, 30, 0.92) 30%,
		rgba(30, 32, 30, 0.75) 45%,
		rgba(30, 32, 30, 0.5) 60%,
		rgba(30, 32, 30, 0.26) 75%,
		rgba(30, 32, 30, 0.09) 88%,
		rgba(30, 32, 30, 0) 100%
	);
	left: calc(var(--rkl-matches-row-start) - 8px);
	width: 176px;
}

/*
 * The other half of the same curve.
 *
 * `--start` is only the falloff to the right of the panel; on its own the fade
 * arrives at full black out of nowhere. This runs from the viewport edge up to
 * the panel's right edge, where it hands over at exactly the alpha `--start`
 * begins at, so the pair reads as one hump centred on the panel: 0 at the edge
 * of the screen, 100 as it meets RUNGTYNĖS, 0 again a card and a half later.
 *
 * Most of it is behind the panel — 131 of its 179px at this width — so what
 * shows is the band to the panel's left darkening as it approaches it. The
 * stops are the mirror of `--start`'s, so both flanks have the same shape.
 *
 * Two elements rather than one gradient with the peak partway along: a stop
 * position inside a gradient is a percentage of the gradient, so placing the
 * peak at the panel would need the panel's offset expressed as a fraction of an
 * element whose own width depends on that offset.
 */
.rkl-matches-line .rkl-matches-line__fade--lead {
	background: linear-gradient(
		to right,
		rgba(30, 32, 30, 0) 0%,
		rgba(30, 32, 30, 0.09) 12%,
		rgba(30, 32, 30, 0.26) 25%,
		rgba(30, 32, 30, 0.5) 40%,
		rgba(30, 32, 30, 0.75) 55%,
		rgba(30, 32, 30, 0.92) 70%,
		var(--rkl-black) 100%
	);
	left: 0;
	width: calc(var(--rkl-matches-row-start) - 8px);
}

.rkl-matches-line .rkl-matches-line__fade--end {
	background: linear-gradient(to left, var(--rkl-black), rgba(30, 32, 30, 0));
	right: 0;
}

/* Centred on the band, 16px into the row at each end, as the node places them. */
.rkl-matches-line .rkl-matches-line__arrow {
	top: 50%;
	transform: translateY(-50%);
}

.rkl-matches-line .rkl-matches-line__arrow--start {
	left: calc(var(--rkl-matches-row-start) + 16px);
}

.rkl-matches-line .rkl-matches-line__arrow--end {
	right: 16px;
}

/*
 * An end of the row that cannot be paged shows neither its arrow nor its
 * gradient: at rest the row starts at its first card, so the design's frame is
 * the right-hand pair alone, and the left pair arrives once there is something
 * to go back to.
 *
 * `:disabled` is the whole state machine — assets/swiper.js already writes it
 * from `isBeginning`, `isEnd` and `isLocked`, and the division filter's
 * `swiper.update()` re-runs that sync for free. `:has()` is what lets a
 * gradient read its own arrow's state without a second class to keep in step.
 */
@media (hover: hover) and (pointer: fine) {
	.rkl-matches-line:hover .rkl-matches-line__arrow:not(:disabled),
	.rkl-matches-line:focus-within .rkl-matches-line__arrow:not(:disabled) {
		opacity: 1;
		pointer-events: auto;
	}

	.rkl-matches-line:hover:has(.rkl-matches-line__arrow--start:not(:disabled)) :is(.rkl-matches-line__fade--lead, .rkl-matches-line__fade--start),
	.rkl-matches-line:focus-within:has(.rkl-matches-line__arrow--start:not(:disabled)) :is(.rkl-matches-line__fade--lead, .rkl-matches-line__fade--start),
	.rkl-matches-line:hover:has(.rkl-matches-line__arrow--end:not(:disabled)) .rkl-matches-line__fade--end,
	.rkl-matches-line:focus-within:has(.rkl-matches-line__arrow--end:not(:disabled)) .rkl-matches-line__fade--end {
		opacity: 1;
	}
}




/*
 * A class-level `display` beats the user-agent `[hidden]` rule, so hiding a
 * card from JavaScript needs this explicitly.
 */
.rkl-match-card[hidden] {
	display: none;
}

/*
 * `min-height` as well as `height`, and that is not belt-and-braces.
 *
 * The card is a Swiper slide now, and base.css gives every slide `height: auto`
 * at `.rkl-swiper > .swiper-wrapper > .swiper-slide` — specificity (0,3,0), and
 * that file loads after the block stylesheets, so no selector written here can
 * out-rank it on `height` alone. Measured: the card collapsed to its content, 97px
 * instead of 110px. `min-height` is untouched by that rule, so it holds the
 * design's height whatever the slide rule says.
 *
 * base.css needs its `height: auto` — Swiper's stock `height: 100%` resolves
 * against a wrapper sized by its slides and collapses them. So the fix belongs
 * here, on the one card that has a fixed height, not there.
 */
.rkl-match-card {
	align-items: center;
	background: var(--rkl-white);
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
	box-sizing: border-box;
	display: flex;
	flex: none;
	flex-direction: column;
	height: 110px;
	justify-content: space-between;
	min-height: 110px;
	padding: 8px;
	position: relative;
}

.rkl-match-card__label {
	color: var(--rkl-black);
	font-size: 12px;
	line-height: 1.5;
	margin: 0;
	text-align: center;
	white-space: nowrap;
}

.rkl-match-card__body {
	align-items: center;
	display: flex;
	gap: 8px;
}

.rkl-match-card__logo {
	flex: none;
	height: 40px;
	object-fit: contain;
	width: 40px;
}

/* Hover face ------------------------------------------------------------- */

/*
 * Figma 2301:16262 („Matches", Name=Hover): the same 194x110 card, its whole
 * face replaced by the tip-off and the venue on a Grey 04 ground.
 *
 * An overlay rather than a swap of the card's own children: the two faces have
 * different heights (three rows against two lines), and animating between them
 * by opacity alone keeps the card — and so the band — exactly 110px throughout.
 * `border-radius: inherit` follows the card's 12px corner without repeating it.
 */
.rkl-match-card__hover {
	align-items: center;
	background: var(--rkl-grey-04);
	border-radius: inherit;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 8px;
	inset: 0;
	justify-content: center;
	opacity: 0;
	/* A hall whose "address" is its own long name — the feed has several — must
	   not spill past the card's corner while the card keeps its 110px. */
	overflow: hidden;
	padding: 8px;
	pointer-events: none;
	position: absolute;
	transition: opacity 0.2s ease;
}

.rkl-match-card__when {
	color: var(--rkl-black);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	margin: 0;
	text-align: center;
	white-space: nowrap;
}

.rkl-match-card__where {
	color: var(--rkl-black);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;
	margin: 0;
	text-align: center;
}

/* The outgoing face fades on the same curve as the incoming one. */
.rkl-match-card__label,
.rkl-match-card__body,
.rkl-match-card .rkl-chip {
	transition: opacity 0.2s ease;
}

/*
 * Hover states are desktop-only, here and for the band's arrows below.
 *
 * A touch browser reports `:hover` on tap and then keeps it until the next tap
 * elsewhere, so an untouched card would flip to its date face and stay there.
 * `pointer: fine` keeps the gate off hybrid laptops driven by a finger.
 */
@media (hover: hover) and (pointer: fine) {
	.rkl-match-card--has-hover:hover > :not(.rkl-match-card__hover),
	.rkl-match-card--has-hover:focus-within > :not(.rkl-match-card__hover) {
		opacity: 0;
	}

	.rkl-match-card--has-hover:hover .rkl-match-card__hover,
	.rkl-match-card--has-hover:focus-within .rkl-match-card__hover {
		opacity: 1;
	}

	/*
	 * Not while dragging the row. The pointer is over a card for the whole of a
	 * drag, and a face fading in under it reads as a misfire rather than as an
	 * answer to the gesture. (0,4,0), which is what it takes to out-rank the
	 * two rules above.
	 */
	.rkl-matches-line__viewport.swiper-grabbing .rkl-match-card--has-hover .rkl-match-card__hover {
		opacity: 0;
	}

	.rkl-matches-line__viewport.swiper-grabbing .rkl-match-card--has-hover > :not(.rkl-match-card__hover) {
		opacity: 1;
	}
}

/*
 * Score pill: the winner's half is filled, the loser's is outlined.
 *
 * The side decides only the rounding; the fill follows the result. This used to
 * be "home dark, away outlined", which drew the home team as the winner of every
 * game. The Rezultatai table on the Rungtynès page already had it right — see
 * `blocks/matches/partials/results.php` — and this is the same contract, so the
 * two views cannot disagree about who won.
 *
 * An upcoming or forfeited game has no score, so neither half is filled and the
 * pair reads as two outlined boxes.
 */

.rkl-score {
	display: flex;
	flex: none;
}

.rkl-score__home,
.rkl-score__away {
	align-items: center;
	box-sizing: border-box;
	display: flex;
	font-size: 20px;
	font-weight: 500;
	height: 32px;
	justify-content: center;
	line-height: 1.2;
	min-width: 42px;
	padding: 4px 8px;
	white-space: nowrap;
}

/* Rounding is the only thing the side still decides. */
.rkl-score__home {
	border-radius: var(--rkl-radius) 0 0 var(--rkl-radius);
}

.rkl-score__away {
	border-radius: 0 var(--rkl-radius) var(--rkl-radius) 0;
}

/*
 * Outlined is the base state, for the loser and for a game with no score.
 *
 * The outline is an inset shadow, not a border: a border would add 4px and make
 * an outlined half wider than a filled one, so the pair would change width
 * depending on who won.
 */
.rkl-score__home,
.rkl-score__away {
	background: var(--rkl-white);
	box-shadow: inset 0 0 0 2px var(--rkl-black);
	color: var(--rkl-black);
}

/* The winner's half is filled. No inset shadow — the fill is the whole box. */
.rkl-score__home.is-winner,
.rkl-score__away.is-winner {
	background: var(--rkl-black);
	box-shadow: none;
	color: var(--rkl-white);
}

/* Status chips ---------------------------------------------------------- */

.rkl-chip {
	align-items: center;
	border-radius: var(--rkl-radius);
	box-sizing: border-box;
	display: flex;
	font-size: 12px;
	font-weight: 600;
	gap: 4px;
	height: 23px;
	line-height: 1.3;
	margin: 0;
	padding: 0 8px;
	white-space: nowrap;
}

.rkl-chip--live {
	color: #dd2936;
}

.rkl-chip--live img {
	height: 4px;
	width: 4px;
}

.rkl-chip--done {
	color: var(--rkl-grey-05);
}

.rkl-chip--upcoming {
	border: 1px solid var(--rkl-grey-02);
	color: var(--rkl-grey-05);
}

/* Narrow screens -------------------------------------------------------- */

/*
 * Narrow screens keep the design's layout (Figma 2466-19319): the RUNGTYNĖS panel
 * stays beside the cards rather than stacking above them — only the padding
 * tightens. An earlier version turned the panel into a full-width row on top,
 * which is not what the node shows.
 *
 * The list must NOT bleed past the strip here. It used to use
 * `margin: 0 -16px; width: calc(100% + 32px)` to escape the container's padding,
 * which was correct while the strip was inset — but the strip is full-bleed now,
 * so that pushed 32px past the viewport (measured 800px of list inside a 768px
 * strip).
 */
/* BREAKPOINT: 1024px, matching every other homepage block. */
@media (max-width: 1024px) {
	/*
	 * The mobile band is 126px, not 142: the mobile frame clips the 142px instance
	 * by 8px top and bottom, so the vertical padding is 8px rather than 16.
	 *
	 * The gutter comes from the token, so the panel still lines up with the
	 * content column — 16px here. The mobile node places the panel at 8px, which
	 * is an artefact of the designer sliding a 1440px-wide instance left to show
	 * the cards; every other mobile section sits on the 16px gutter and so does
	 * this one.
	 */
	.rkl-matches-line__inner {
		gap: 8px;
		min-height: 126px;
		padding: 8px 0 8px var(--rkl-gutter);
	}

	/*
	 * `margin` is deliberately NOT set here.
	 *
	 * The base rule pairs `padding: 6px 48px 6px 0` with `margin: -6px 0`, so the
	 * 6px gutter that keeps card shadows and focus rings from being clipped costs
	 * the band nothing. The old override reset `margin: 0` while keeping that
	 * padding, so the list contributed 122px instead of 110px and the band
	 * measured 146px — 4px over its own 142px min-height and 20px over the mobile
	 * design. Overriding only the horizontal padding keeps the negative margin
	 * doing its job: 110px row + 8px + 8px = 126px exactly.
	 */
	.rkl-matches-line .rkl-matches-line__viewport {
		padding: 6px var(--rkl-gutter) 6px 0;
	}

}


/* Page chrome ------------------------------------------------------------ */

/*
 * The strip sits flush under the site header.
 *
 * The homepage opens with this band and carries none of the blocks that already
 * correct the theme's page chrome — `tab-panel`, `article`, `hero-banner`,
 * `partners-hero`, `documents` — so it kept the full 178.4px of white that
 * twentytwentyfive puts above the content: 70px of inline `margin-top` on `main`,
 * 70px of inline `padding-top` on its inner group, and two 19.2px block gaps.
 * `!important` on the first two because they are INLINE declarations written by
 * the template's own block spacing, which no selector outranks. Landmine 39.
 *
 * Scoped to `body:has(.rkl-matches-line)`, which is the homepage and nothing else
 * — counted across every rendered page, because `body:has()` cannot tell a first
 * child from a fifth one. Add a page carrying this strip lower down and it gets
 * the reset whether it wants it or not.
 */
body:has(.rkl-matches-line) .wp-site-blocks > main {
	margin-block-start: 0 !important;
}

body:has(.rkl-matches-line) .wp-site-blocks > main > .wp-block-group {
	padding-block-start: 0 !important;
}

/*
 * Gap one: the theme's `h1` is hidden by base.css but is still a preceding
 * sibling, so the entry content keeps the block gap that follows it. Class-based,
 * so no `!important` needed.
 */
body:has(.rkl-matches-line) .wp-block-post-content {
	margin-block-start: 0;
}

/*
 * Gap two, which is this page's alone: GreenShift wrote the homepage content and
 * prints a `<style>` element as the first child of the entry content, so the
 * first real block is `:nth-child(2)` and picks up a block gap of its own.
 *
 * `style:first-child`, not `style` — GreenShift prints one of those elements
 * before many blocks further down the page, and the gaps between those are the
 * design's own spacing. This fires on the leading pair and nowhere else.
 */
body:has(.rkl-matches-line) .wp-block-post-content > style:first-child + * {
	margin-block-start: 0;
}