/* Home page sections. Classes come from the block markup in bin/fixtures/pages.php. */

.haft-eyebrow {
	font-family: var( --haft-font-kod );
	font-size: 0.7rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var( --haft-denim );
	display: flex;
	align-items: center;
	gap: 10px;
}

/*
 * The short rule before the label. Decoration, so it belongs in CSS — as content
 * it would be an em dash the owner has to retype on every edit and a screen
 * reader has to read out.
 */
.haft-eyebrow::before {
	content: "";
	width: 28px;
	height: 1px;
	background: var( --haft-denim );
	opacity: 0.5;
}

.haft-lead {
	font-size: 1.15rem;
	line-height: 1.65;
	max-width: 58ch;
}

.haft-hero .haft-lead {
	font-size: 1.1rem;
	max-width: 44ch;
	color: #3b414f;
}

/*
 * The hero starts right under the header. The container around it already
 * carries Blocksy's 60px of vertical spacing; another 56 on top pushed the
 * headline half a screen down on a laptop and the hoop off the first screen
 * on a phone.
 */
.haft-hero {
	padding: 0 0 40px;
}

/* The mock-up's hero split: copy just wider than the hoop. */
.haft-hero__grid {
	align-items: center;
	gap: 56px;
}

.haft-hero__grid > .wp-block-column:first-child {
	flex-basis: 52.5%;
}

.haft-hero__grid > .wp-block-column:last-child {
	flex-basis: 47.5%;
}

/* The second line of the headline is stitched in thread red, as in the mock-up. */
.haft-akcent {
	color: var( --haft-mulina );
	font-style: normal;
	white-space: nowrap;
}

/*
 * The embroidery hoop. Pure CSS and one inline SVG — no image asset to ship,
 * rescale or art-direct, and it recolours with the palette.
 */
.haft-tamborek {
	position: relative;
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	max-width: 460px;
	margin-inline: auto;
}

.haft-tamborek__obrecz {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 14px solid #c9a267;
	box-shadow:
		inset 0 0 0 3px rgba( 0, 0, 0, 0.12 ),
		0 22px 50px rgba( 23, 26, 33, 0.18 );
}

.haft-tamborek__plotno {
	position: absolute;
	inset: 14px;
	border-radius: 50%;
	background: var( --haft-kreda );
	background-image:
		radial-gradient( rgba( 23, 26, 33, 0.05 ) 1px, transparent 1px );
	background-size: 9px 9px;
}

.haft-tamborek svg {
	width: 74%;
	position: relative;
	z-index: 2;
}

/*
 * The stitch and the needle.
 *
 * Colour and stroke live here rather than as presentation attributes in the
 * fixture, for the same reason the rest of the page's looks do: the fixture's
 * markup ends up in the database, outside git and outside CI. The SVG carries
 * geometry, this file carries how it reads.
 *
 * `stroke-dasharray` is the stitch itself — dash and gap, not a decoration on
 * top of a line. Animating `stroke-dashoffset` from a length longer than the
 * path walks those dashes into place, so the seam appears to be sewn. 900 is
 * simply longer than this path; anything past its length works.
 */
.haft-tamborek__linia {
	fill: none;
	stroke: var( --haft-mulina );
	stroke-width: 5;
	stroke-linecap: round;
	stroke-dasharray: 14 9;
	stroke-dashoffset: 0;
	animation: haft-szyj 3.2s ease forwards;
}

@keyframes haft-szyj {

	from {
		stroke-dashoffset: 900;
	}

	to {
		stroke-dashoffset: 0;
	}
}

.haft-tamborek__igla {
	animation: haft-kluj 2.4s ease-in-out infinite;
}

@keyframes haft-kluj {

	0%,
	100% {
		transform: translateY( 0 );
	}

	50% {
		transform: translateY( -7px );
	}
}

.haft-tamborek__igla line,
.haft-tamborek__igla ellipse {
	fill: none;
	stroke: var( --haft-denim );
	stroke-linecap: round;
}

.haft-tamborek__igla line {
	stroke-width: 3.5;
}

.haft-tamborek__igla ellipse {
	stroke-width: 3;
}

/*
 * On a phone the hoop stands beside the headline instead of under the whole
 * column. The first column gives up its box (display: contents) so its
 * children become grid items: the headline on the left, the hoop beside it on
 * the right, then the lead and the buttons full width. Nothing changes in the
 * page content — only where the grid puts it. Named with the block's class, or
 * WordPress's own `display: flex` wins the tie.
 */
@media ( max-width: 780px ) {
	.wp-block-columns.haft-hero__grid {
		display: grid;
		grid-template-columns: minmax( 0, 1fr ) minmax( 104px, 30% );
		grid-template-rows: auto auto auto;
		column-gap: 20px;
		row-gap: 0;
		align-items: center;
	}

	.haft-hero__grid > .wp-block-column:first-child {
		display: contents;
	}

	/* Named with the grid's class: the desktop size rule below shares the
	   plain selector's weight and comes later, so it would win the tie. */
	.haft-hero__grid h1 {
		grid-column: 1;
		grid-row: 1;
		align-self: start;
		font-size: clamp( 1.5rem, 6.4vw, 2.4rem );
		line-height: 1.08;
		margin: 0;
	}

	/* The column beside the hoop is narrow; a forced single line here would
	   overflow it. */
	.haft-akcent {
		white-space: normal;
	}

	/*
	 * The hoop hangs from the bottom of the headline rather than being
	 * centred on it: level with the first line it read as a second, rounder
	 * headline; level with the last it reads as what the needle is sewing.
	 */
	.haft-hero__grid > .wp-block-column:last-child {
		grid-column: 2;
		grid-row: 1;
		align-self: end;
		flex-basis: auto;
	}

	.haft-hero .haft-lead {
		grid-column: 1 / -1;
		grid-row: 2;
		margin-top: 20px;
	}

	.haft-hero .wp-block-buttons {
		grid-column: 1 / -1;
		grid-row: 3;
	}

	.haft-tamborek {
		width: 100%;
		max-width: none;
		margin: 0;
	}

	/*
	 * A thinner ring at this size. The 14px band is drawn for a 460px hoop;
	 * on a 110px one it was a third of the radius and the canvas inside it
	 * had no room for the stitch.
	 */
	.haft-tamborek__obrecz {
		border-width: 8px;
	}

	.haft-tamborek__plotno {
		inset: 8px;
	}
}

/*
 * No max-width on the headline. It carried a 16ch cap from when the hero was a
 * single full-width column and the measure had to be reined in by hand; now the
 * grid column does that, and the cap only forced "Twoje imię, nasza / igła." to
 * break mid-phrase. The mock-up sets no cap here either, for the same reason.
 */
.haft-hero h1 {
	font-size: clamp( 2.6rem, 5.6vw, 4.5rem );
	margin: 0 0 20px;
}

/*
 * Keep the hero copy against the left margin, as in the mock-up.
 *
 * The !important is not a shortcut — it is the only thing that works. Core's
 * constrained-layout rule is
 * `.is-layout-constrained > :where(...) { margin-left: auto !important }`, so it
 * force-centres any child that carries its own max-width, and no amount of
 * specificity beats !important. Without this the eyebrow stays left while the
 * heading and lead drift to the middle, which reads as a mistake because it is
 * one.
 */
.haft-hero h1,
.haft-hero .haft-lead {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/*
 * No top rule on these two. Each one follows a full-bleed band — the denim strip
 * and the chalk process panel — and those bands already end in a hard edge of
 * their own. The extra hairline drew a second, fainter line a few pixels below
 * the first, which reads as a rendering fault rather than a divider.
 */
.haft-nosniki,
.haft-firmy {
	padding: 64px 0 80px;
}

/*
 * The process section is a chalk panel spanning the full window, as in the
 * mock-up. It carries align="full" in the block markup, which is what lets it
 * escape the content column — core's constrained layout exempts .alignfull from
 * the max-width it gives every other child. Painting a background on a
 * constrained group instead would stop the colour at the column edge and read
 * as a stray card.
 *
 * No rule along its edges: chalk on linen is its own edge, as the product
 * cards are. The hairline only added a second, greyer line beside a colour
 * change that already reads as one.
 */
.haft-proces {
	background: var( --haft-kreda );
	padding: 74px 0;
}

.haft-nosniki h2,
.haft-proces h2,
.haft-firmy h2 {
	font-size: clamp( 1.9rem, 3.6vw, 2.7rem );
	margin: 14px 0 16px;
}

/*
 * The grid, on CSS Grid rather than the loop's own float rules.
 *
 * This is not a preference. WooCommerce marks cards `first` and `last` to break
 * rows, and those classes stay put when the filter hides a card — leaving a
 * `first` in the middle of a row and a gap where a card used to be. Grid works
 * out its own rows from the children that are actually displayed, so the problem
 * stops existing instead of being patched after every click.
 */
.haft-nosniki ul.products {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 258px, 1fr ) );
	gap: 26px;
	margin: 0;
	padding: 0;
	list-style: none;
	float: none;
}

.haft-nosniki ul.products li.product {
	width: auto;
	margin: 0;
	float: none;
	clear: none;
}

/*
 * Hiding a filtered-out card, spelled out at full length on purpose.
 *
 * Blocksy lays the loop out with `[data-products] .product { display: flex }`,
 * which is two class-level selectors — exactly what a plain
 * `.haft-nosniki .haft-ukryty` weighs. A tie is settled by document order and
 * Blocksy's bundle comes last, so the short version applies the class, wins
 * nothing, and leaves every card on screen while the tab bar claims to have
 * filtered. Naming the ul and the li outweighs it outright.
 */
.haft-nosniki ul.products li.product.haft-ukryty {
	display: none;
}

.haft-nosniki__wiecej {
	margin-top: 34px;
	text-align: center;
	font-family: var( --haft-font-display );
	font-weight: 700;
}

/*
 * The steps are divided by a dashed rule, drawn as each column's left border so
 * there is exactly one line between any two — a separate divider element would
 * need removing at the ends and would not survive the columns wrapping on a
 * phone. The first column drops its border for the same reason: nothing sits to
 * its left to divide it from.
 */
.haft-kroki {
	gap: 0;
	margin-top: 36px;
}

.haft-kroki > .wp-block-column {
	padding: 0 26px;
	border-left: 1px dashed var( --haft-szew );
}

.haft-kroki > .wp-block-column:first-child {
	padding-left: 0;
	border-left: none;
}

.haft-kroki h3 {
	font-size: 1.05rem;
	margin: 10px 0 8px;
}

.haft-kroki p {
	font-size: 0.87rem;
	color: #5c6474;
}

/*
 * The step label — "01 / ZAMÓWIENIE" — is thread red, and the selector has to
 * name .haft-kroki to outrank the grey on `.haft-kroki p` above. The label is a
 * paragraph too, so the plain class alone loses to it and the numbers quietly
 * turn the same grey as the body copy they are meant to head.
 */
.haft-kroki .haft-krok__nr {
	font-family: var( --haft-font-kod );
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	color: var( --haft-mulina );
	margin-bottom: 8px;
}

/*
 * Under 780px the four columns become a two-by-two grid: WordPress would
 * stack them in one column, which on a tablet is four short paragraphs down a
 * wide page. The seams follow — one down the middle (the right-hand column's
 * left border) and one across the middle (the lower row's top border), so
 * again there is exactly one line between any two steps. The columns block
 * is a flex row; a grid on top of it is what makes the rows line up — named
 * with the block's class too, or WordPress's own `display: flex`, loaded
 * later, wins the tie and the grid never happens.
 */
@media ( max-width: 780px ) {
	.wp-block-columns.haft-kroki {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0;
	}

	.haft-kroki > .wp-block-column {
		flex-basis: auto;
		padding: 24px 0 24px 24px;
		border-left: 1px dashed var( --haft-szew );
	}

	.haft-kroki > .wp-block-column:nth-child( odd ) {
		padding-left: 0;
		padding-right: 24px;
		border-left: none;
	}

	.haft-kroki > .wp-block-column:nth-child( -n + 2 ) {
		padding-top: 0;
	}

	.haft-kroki > .wp-block-column:nth-child( n + 3 ) {
		border-top: 1px dashed var( --haft-szew );
	}

	.haft-kroki > .wp-block-column:nth-last-child( -n + 2 ) {
		padding-bottom: 0;
	}
}

/*
 * On a phone, one column: a seam above every step but the first, and the
 * same 24px of air on both sides of it — the stacked version read cramped
 * with the seam sitting right under the previous paragraph.
 */
@media ( max-width: 480px ) {
	.wp-block-columns.haft-kroki {
		grid-template-columns: 1fr;
	}

	.haft-kroki > .wp-block-column,
	.haft-kroki > .wp-block-column:nth-child( odd ) {
		padding: 24px 0;
		border-left: none;
		border-top: 1px dashed var( --haft-szew );
	}

	.haft-kroki > .wp-block-column:first-child {
		padding-top: 0;
		border-top: none;
	}

	.haft-kroki > .wp-block-column:last-child {
		padding-bottom: 0;
	}

	.haft-kroki h3 {
		margin: 8px 0 6px;
	}
}

/*
 * The mock-up's denim info strip, under the hero. Full-bleed like the process
 * panel, and for the same reason.
 */
.haft-pasek {
	background: var( --haft-denim );
	color: var( --haft-len );
	padding: 24px;
}

.haft-pasek__lista {
	list-style: none;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0;
	display: flex;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

.haft-pasek__lista li {
	font-family: var( --haft-font-kod );
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	display: flex;
	gap: 8px;
	align-items: center;
}

/*
 * The stitch mark before each item is decoration, so it lives in CSS: a literal
 * "×" typed into the block content would be read out by a screen reader as part
 * of the sentence, and the owner would have to preserve it by hand on every edit.
 */
.haft-pasek__lista li::before {
	content: "×";
	color: var( --haft-mulina );
	font-size: 1rem;
	line-height: 1;
}

/*
 * The strip in motion.
 *
 * home.js wraps the list in a track and appends a copy of it, then marks the
 * strip with this class — so everything below applies only once the copy is
 * there, and a strip without JavaScript keeps the static, spaced-out row above.
 *
 * The track slides by exactly half its own width, which is one list, so the
 * moment the copy reaches the start the animation restarts on an identical
 * frame and the loop shows no seam. The two lists are laid out as one line
 * with a fixed gap, because a seamless loop needs the gap after the last item
 * to equal the gap between any two.
 */
.haft-pasek--ruch {
	overflow: hidden;
	padding-left: 0;
	padding-right: 0;
}

.haft-pasek__tor {
	display: flex;
	width: max-content;
	animation: haft-przesuw 32s linear infinite;
}

.haft-pasek--ruch:hover .haft-pasek__tor {
	animation-play-state: paused;
}

.haft-pasek--ruch .haft-pasek__lista {
	flex: none;
	max-width: none;
	margin: 0;
	padding-right: 56px;
	gap: 56px;
	flex-wrap: nowrap;
	justify-content: flex-start;
}

@keyframes haft-przesuw {

	from {
		transform: translateX( 0 );
	}

	to {
		transform: translateX( -50% );
	}
}

.haft-btn-nic .wp-block-button__link {
	background: var( --haft-mulina );
	color: #fff;
	border-radius: var( --haft-radius );
	font-weight: 700;
}

/*
 * Pressed, the red button deepens rather than turning to ink. Blocksy derives
 * button hover from palette colour 2, which we mapped to ink for the linen page
 * — correct there, wrong here, where it made the accent button go black under
 * the cursor and read as a different control.
 */
.haft-btn-nic .wp-block-button__link:hover,
.haft-btn-nic .wp-block-button__link:focus-visible {
	background: var( --haft-mulina-ciemna );
	color: #fff;
}

/*
 * The outline button is drawn in ink, not accent. Blocksy's outline style takes
 * its text from palette colour 1, which is now our red — so both outline
 * buttons came out red-on-linen beside a solid red one, three reds competing.
 * The mock-up keeps the outline neutral so the red button stays the one asking
 * to be pressed.
 *
 * Only the background colour is set, and that is not a typo. For an outline
 * button Blocksy derives the label and the border from it —
 * `--theme-button-text-initial-color: var(--theme-button-background-initial-color)`
 * — because the fill is the thing it makes transparent. Setting the background
 * to `transparent` therefore paints the text transparent too: the button vanishes
 * until the cursor lands on it, which is exactly what this rule did on its first
 * attempt. Hand it the ink and let its own outline logic hollow the button out.
 */
.wp-block-button.is-style-outline .wp-block-button__link {
	--theme-button-background-initial-color: var( --haft-atrament );
	--theme-button-background-hover-color: var( --haft-atrament );
	--theme-button-text-hover-color: var( --haft-len );
	--theme-button-border-radius: var( --haft-radius );
}

/* The ink button, for the section that asks a company to send a logo. */
.haft-btn-atrament .wp-block-button__link {
	background: var( --haft-atrament );
	color: var( --haft-len );
	border-radius: var( --haft-radius );
	font-weight: 700;
}

.haft-btn-atrament .wp-block-button__link:hover,
.haft-btn-atrament .wp-block-button__link:focus-visible {
	background: var( --haft-denim );
	color: var( --haft-len );
}

/*
 * The section head: title left, its explanation set against the right margin and
 * baselined with it, as in the mock-up.
 */
.haft-sekcja-gora {
	align-items: flex-end;
	margin-bottom: 34px;
	gap: 24px;
}

.haft-sekcja-gora p {
	max-width: 38ch;
	color: #4b525f;
	font-size: 0.95rem;
}

.haft-firmy h2 {
	margin-top: 14px;
}

@media ( prefers-reduced-motion: reduce ) {
	/*
	 * Killing the animations leaves the declared values standing, which is
	 * exactly the resting state we want: dashoffset 0 is the finished seam,
	 * so the stitch arrives sewn instead of never being drawn at all.
	 */
	.haft-tamborek__linia,
	.haft-tamborek__igla {
		animation: none;
	}
}