/*
 * „Kaip mūsų renginiai atrodo iš arti?" — vertical reels. Tokens live in
 * assets/base.css.
 *
 * The white panel, the head, the 40×40 arrows, the swiper chain and the reveal
 * transition are all shared (.rkl-section-card, .rkl-icon-button, .rkl-swiper,
 * .rkl-reveal). Nothing here redeclares any of them — this file is only the
 * tile, the media, the pill and the caption.
 */

.rkl-reel__empty {
	color: var(--rkl-grey-05);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	margin: 0;
	text-align: center;
}

/*
 * A heading an editor cleared would leave the arrows alone in a
 * `space-between` row, i.e. hard left. `:only-child` so the rule cannot touch
 * the normal case — landmine 70, a rule that exists for one specific sibling is
 * a bug on every instance that sibling is missing from.
 */
.rkl-reel .rkl-section-card__head > .rkl-section-card__arrows:only-child {
	margin-inline-start: auto;
}

/* Track ------------------------------------------------------------------- */

.rkl-reel__viewport {
	cursor: grab;
}

.rkl-reel__viewport.swiper-grabbing {
	cursor: grabbing;
}

.rkl-reel__viewport:focus-visible {
	outline: 2px solid var(--rkl-green-03);
	outline-offset: 2px;
}

/* Tile -------------------------------------------------------------------- */

/*
 * Four tiles share the 1296 track: a 0 basis with grow 1 and `spaceBetween: 8`
 * gives (1296 − 3 × 8) / 4 = 318 each, which is the design's tile.
 *
 * `min-width: 0` because a flex item's automatic minimum is its min-content
 * size — the longest word in a caption would otherwise set a floor and push the
 * fourth tile out of the row.
 *
 * base.css re-asserts `flex-shrink: 0` on every `.swiper-slide` at (0,3,0) and
 * loads after the block stylesheets, so the `1` in `flex: 1 1 0` never takes
 * effect. It does not need to: with a 0 basis the tiles grow into exactly the
 * track width, so there is nothing to shrink. Add a fifth tile and they share
 * the track more narrowly rather than paging — the design has four, and Swiper
 * locks the arrows while everything fits.
 *
 * `max-width: 318px` caps that growth, and it is not made redundant by
 * `rkl-band` on the section. `flex: 1 1 0` with no maximum grows each tile with
 * whatever box the row is in, and this block allows `align: full` — in a wider
 * container (a full-bleed row of someone else's making, the editor canvas) the
 * tiles were measured at ~462 wide on a 1920 screen, which makes the 720/1280
 * media ~821 tall against the design's 318×565. Landmine 60: cap a fractional
 * card width rather than trust the container.
 */
.rkl-reel__tile {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	max-width: 318px;
	min-width: 0;
}

/*
 * Swiper's `spaceBetween: 8` lands as an inline `margin-right: 8px` on *every*
 * slide, the last one included, and the design draws a gap only between tiles.
 * On a growing row that trailing margin is width taken off the tiles: measured,
 * the four came out (1296 − 4 × 8) / 4 = 316 against the frame's 318, and the
 * fourth tile's edge stopped 8px short of the panel.
 *
 * `!important` because it is an inline style being overridden and nothing else
 * reaches one. Safe against the arrow state: the `max-width` above still caps
 * the tile at 318, so Swiper measures 4 × 318 + 3 × 8 = 1296 against a 1296
 * track and keeps both arrows locked — verified after the change. `rkl/star-row`
 * carries the identical rule for the identical reason.
 *
 * Outside the ≤1024 query on purpose: on mobile the fixed 306 tiles keep their
 * 8px gaps between one another, and the space after the last one is the track's
 * own 16px inset rather than 16 + 8 (landmine 71).
 */
.rkl-reel .swiper-slide:last-child {
	margin-inline-end: 0 !important;
}

/*
 * The tile's 8px column sits on this box rather than on the slide, because the
 * reveal does: render.php marks this wrapper with `data-rkl-reveal-child`,
 * because base.css has to reset `transform` on a `.swiper-backface-hidden` slide
 * at (0,4,0) and that cancelled the reveal's own (0,2,1) rise — the tiles faded
 * in without moving. One box in from the slide is outside that selector.
 *
 * `width: 100%` and not an auto inline margin: an auto inline margin on a flex
 * item suppresses `stretch` (landmine 38).
 */
.rkl-reel__inner {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
}

/*
 * Figma media box 318×565 — 720/1280, the reel's own frame.
 *
 * `background: var(--rkl-black)` is the tile's wait state, not decoration: this
 * box is what a visitor looks at until the poster decodes, and it only holds
 * because render.php withholds `data-rkl-img` from the poster. base.css's
 * `img[data-rkl-img].is-loaded { background: none }` cannot reach a background
 * set here — this is the parent — but the `:not(.is-loaded)` rule paints
 * #f9f9f9 on the `<img>` itself at `inset: 0`, which covers this box entirely.
 */
.rkl-reel__media {
	aspect-ratio: 720 / 1280;
	background: var(--rkl-black);
	border-radius: var(--rkl-radius);
	overflow: hidden;
	position: relative;
	width: 100%;
}

.rkl-reel__poster,
.rkl-reel__video {
	display: block;
	height: 100%;
	inset: 0;
	object-fit: cover;
	position: absolute;
	width: 100%;
}

/*
 * `border-radius: inherit` on the poster, and the weight is now historical.
 *
 * It was written to fight base.css's `img[data-rkl-img]:not(.is-loaded)`, which
 * gives every lazy image a 4px radius for its shimmer — against the black media
 * that read as four notched corners until the poster arrived. Hence the
 * (0,3,0) selector: the rule it had to outrank is (0,2,1) and later in the
 * cascade, and a bare `.rkl-reel__poster` at (0,1,0) lost to it.
 *
 * The notched corners were only half of that placeholder's damage here — the
 * other half was a near-white slab over the whole tile — so render.php now
 * withholds `data-rkl-img` altogether and nothing in base.css reaches this
 * element any more. The declaration stays because the media's 8px clip should
 * not be the only thing rounding a poster that fills it; the specificity is
 * left as-is rather than lowered, because lowering it is a change with no
 * benefit and this comment is the only thing that explains the number.
 */
.rkl-reel .rkl-reel__media .rkl-reel__poster {
	border-radius: inherit;
}

/*
 * The video fades in over its poster when it really starts — the `playing`
 * event, a class, and a transition.
 *
 * `transition`, never `animation: … both`: a filling animation leaves the
 * element a permanent stacking context and containing block, final values
 * included (landmines 24 and 35).
 *
 * The hidden start state is gated on `[data-rkl-reel-ready="1"]`, which view.js
 * writes before it touches anything else. With no JavaScript the video keeps its
 * `poster` attribute and stays opaque, so nobody is left looking at an empty box
 * — landmine 35b, a no-JS fallback that is the CSS default is a flash of that
 * fallback for everybody. Both states paint the same poster image, so crossing
 * between them is invisible.
 */
.rkl-reel[data-rkl-reel-ready="1"] .rkl-reel__video {
	opacity: 0;
	transition: opacity 0.3s ease;
}

.rkl-reel[data-rkl-reel-ready="1"] .rkl-reel__video.is-playing {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.rkl-reel[data-rkl-reel-ready="1"] .rkl-reel__video {
		transition: none;
	}
}

/* Sound pill -------------------------------------------------------------- */

/*
 * 32×32 circle, 16px in from the media's bottom and right edges. The frame puts
 * it at 270,517 inside a 318×565 media box: 318 − 270 − 32 = 16 and
 * 565 − 517 − 32 = 16, so it is exactly a 16px inset on both.
 *
 * `border-radius: 50px` is the design's value, not `50%` — on a square box they
 * draw the same circle, and this is what the frame says.
 */
.rkl-reel__sound {
	align-items: center;
	background: var(--rkl-black);
	border: 0;
	border-radius: 50px;
	bottom: 16px;
	color: var(--rkl-white);
	cursor: pointer;
	display: flex;
	height: 32px;
	justify-content: center;
	padding: 0;
	position: absolute;
	right: 16px;
	transition: background-color 0.15s ease, opacity 0.15s ease;
	width: 32px;
}

.rkl-reel__sound:hover {
	opacity: 0.85;
}

/*
 * White focus ring, not the green used elsewhere: this button sits on a video
 * frame that is dark most of the time but can be anything, and white against
 * the pill's own black body is the one combination that always shows.
 */
.rkl-reel__sound:focus-visible {
	outline: 2px solid var(--rkl-white);
	outline-offset: 2px;
}

.rkl-reel__speaker {
	display: block;
	flex: none;
}

/*
 * DELIBERATE DEVIATION FROM THE DESIGN, flagged.
 *
 * The frame only ever draws the muted glyph: assets/icon-speaker-off.svg is the
 * only speaker asset in the Figma file, and an icon is used as exported here,
 * never hand-drawn (landmines 9, 29, 65). So the unmuted state is carried by the
 * pill turning green while the glyph stays put.
 *
 * The missing asset is assets/icon-speaker-on.svg. Once someone exports it, drop
 * it there beside the off glyph and swap the two in view.js; until then this
 * colour is the whole of the unmuted state.
 *
 * The hook is a class view.js adds, not `aria-pressed` — the sound-pill comment
 * in render.php has that reasoning. Here the class means colour and nothing
 * more, which is why the colour alone is enough to carry.
 */
.rkl-reel__sound.is-unmuted {
	background: var(--rkl-green-03);
}

/* Caption ----------------------------------------------------------------- */

/* Subline — Poppins 500 16/1.4. The weight is stated: the theme inherits 300
 * and a missing `font-weight` gets a synthesised 300 (landmine 34). */
.rkl-reel__caption {
	color: var(--rkl-black);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	margin: 0;
}

/* BREAKPOINT: 1024px. */
@media (max-width: 1024px) {
	/*
	 * The 16px inset lives on the SCROLL TRACK, not on the card — landmine 71.
	 *
	 * On the card, the padding insets the scrollport: the first tile is clipped
	 * 16px inside the screen edge and the last one runs flush off the other.
	 * On the track the padding is part of the scrollable content, so the
	 * scrollport stays edge to edge and the padding does what the frame asks —
	 * the first tile rests 16 in, the last stops 16 short.
	 * `scroll-padding-inline` moves the snapport to the same line, so an
	 * uninitialised row (the plain CSS scroller) settles there too.
	 *
	 * .rkl-section-card already drops its own inline padding to 0 at this width
	 * and insets only its head, so nothing here has to undo it.
	 *
	 * Scoped through the block root — (0,2,0) — and that is the whole reason the
	 * inset works. This element is also the `.rkl-swiper`, base.css zeroes that
	 * with `padding: 0` at the same (0,1,0), and base.css is enqueued after the
	 * block stylesheets, so source order handed it the win (the same trap
	 * blocks/matches-line and blocks/player-gallery document). Only
	 * `scroll-padding-inline` survived, which is worse than neither: the snapport
	 * was offset 16px from where the tiles actually sat.
	 */
	.rkl-reel .rkl-reel__viewport {
		padding-inline: var(--rkl-gutter, 16px);
		scroll-padding-inline: var(--rkl-gutter, 16px);
	}

	/*
	 * The mobile frame lays the tile out at a fixed 306 with a 544-tall media —
	 * 306 × 16/9 is 544, and the client named 544 explicitly, so it is set
	 * rather than derived. `aspect-ratio` has to be cleared or it competes with
	 * that height on every tile whose width is not exactly 306, and 400 minus
	 * two 16px gutters leaves 368 of visible track: a phone shows one tile with
	 * the next one peeking in.
	 */
	.rkl-reel__tile {
		flex: 0 0 306px;
		min-width: 306px;
	}

	.rkl-reel__media {
		aspect-ratio: auto;
		height: 544px;
	}
}