/*
 * CSS for the block style variations registered in functions/BlockStyles.php.
 *
 * Loaded through enqueue_block_assets, which fires on the front end and inside
 * the editor iframe, so what the editor shows is what the visitor gets.
 */

/* --- core/columns "Časová os" -------------------------------------------- */

/*
 * Four periods in a row, joined by a hairline through the middle. Mirrors the
 * original #bunky-points .item::after: 1px, black, 20% of the item's width,
 * pulled back by half of that, starting at the item's right edge.
 */
/*
 * The gap is declared here rather than read from --wp--style--block-gap, so the
 * connector's offset and the actual space between items come from one value.
 * Reading the global variable put every connector half a gap too far left.
 */
.wp-block-columns.is-style-timeline {
	--bunky-timeline-gap: 2rem;
	column-gap: var(--bunky-timeline-gap);
}

.wp-block-columns.is-style-timeline > .wp-block-column {
	position: relative;
}

.wp-block-columns.is-style-timeline > .wp-block-column:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 100%;
	width: 20%;
	/* left:100% is where the gap begins, so half of it has to be added back. */
	margin-left: calc(var(--bunky-timeline-gap) / 2 - 10%);
	height: 1px;
	background: #000;
}

/*
 * Stacked, the connector turns vertical. It needs a bigger gap to sit in and a
 * lighter tone — a 1px black stub between two close lines of text reads as a
 * hard divider rather than a connector.
 */
@media (max-width: 781px) {
	.wp-block-columns.is-style-timeline {
		--bunky-timeline-stack-gap: 2.75rem;
		--bunky-timeline-connector: 1rem;

		row-gap: var(--bunky-timeline-stack-gap);
	}

	.wp-block-columns.is-style-timeline > .wp-block-column:not(:last-child)::after {
		top: 100%;
		left: 50%;
		width: 1px;
		height: var(--bunky-timeline-connector);
		margin: calc((var(--bunky-timeline-stack-gap) - var(--bunky-timeline-connector)) / 2) 0 0;
		background: rgba(0, 0, 0, 0.25);
	}
}

/* --- core/gallery "Slider" ----------------------------------------------- */

/*
 * One slide at a time on a scroll-snap track. Adding or removing an image is
 * the gallery block's own flow — there is no slide count to keep in sync.
 */
.wp-block-gallery.is-style-slider {
	flex-wrap: nowrap;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
}

.wp-block-gallery.is-style-slider figure.wp-block-image {
	flex: 0 0 100%;
	width: 100%;
	margin: 0;
	scroll-snap-align: center;
}

.wp-block-gallery.is-style-slider figure.wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-gallery.is-style-slider {
		scroll-behavior: auto;
	}
}

/* --- core/group "Odsadený panel" ----------------------------------------- */

/* A 100px inset on wide screens that collapses to full width below 1024px. */
.wp-block-group.is-style-inset-panel {
	margin-inline: 100px;
}

@media (max-width: 1024px) {
	.wp-block-group.is-style-inset-panel {
		margin-inline: 0;
	}
}