/**
 * Handmade by Charlie — homepage.
 *
 * Loaded only on the front page (functions.php, guarded by is_front_page()),
 * after archive.css so the home card overrides win.
 *
 * The page itself is standard blocks (tools/hbc-homepage-design.php). This file
 * carries ONLY what blocks cannot express:
 *   - the tiles' square aspect ratio and serif label type
 *   - the comp's exact responsive column counts (4 -> 3 -> 2; WP grid layout
 *     has a fixed columnCount, so the breakpoints live here)
 *   - the terracotta band's 640px stack (core/columns stacks at 782px, the comp
 *     says 640px, so the block sets isStackedOnMobile:false and we stack here)
 *   - the story paragraph's 440px measure (paragraphs have no max-width attr)
 *
 * Breakpoints 900/640 and every value are literal from the canonical comp,
 * Handmade by Charlie.dc.html.
 */

/* --- Category tiles (core/cover: photo replaceable in the editor) --------- */
/* Kadence's content styles give every .wp-block-cover a bottom margin
   (var(--global-md-spacing), ~32px). In the grid that margin is counted into
   the row track, so the gap between rows reads far larger than the 20px
   column gap. The grid's own `gap` is the only spacing we want here. */
.hbc-cat-tile {
	margin: 0 !important;
}
.hbc-cat-tile {
	/* !important on both: the blocks carry inline fallbacks (min-height:280px)
	   and the cover's aspect-ratio otherwise computes `auto` on the front end
	   despite this rule matching unopposed — !important is what makes it stick
	   (verified empirically; without it the tiles collapse to label height).
	   width/height pin the ratio to the grid track: with both grid axes
	   stretching, the ratio resolves against the (content) height instead and
	   the tile floats narrow inside its track. */
	aspect-ratio: 1 / 1 !important;
	min-height: 0 !important;
	width: 100%;
	height: auto !important;
	align-self: start;
	/* Own stacking context (z-index:0, not auto) so the negative-z-index cover
	   layers below stay contained; positioned ancestor for the stretched link;
	   overflow clips the hover zoom. */
	position: relative;
	z-index: 0;
	overflow: hidden;
}
/* The label sits at the cover's bottom with the comp's 12% breathing room
   (padding lives here, not on the block, to keep cover serialization stock).
   Selector carries .wp-block-cover: core's `.wp-block-cover.has-custom-
   content-position .wp-block-cover__inner-container { width:auto }` (0,3,0)
   shrink-wraps the label to min-content otherwise (mid-word wraps on mobile). */
.wp-block-cover.has-custom-content-position.hbc-cat-tile .wp-block-cover__inner-container {
	width: 100%;
	/* 3% (was 12% -> 6%) seats the label right near the photo's bottom edge. */
	padding: 0 14px 3%;
}
.hbc-cat-label .wp-block-button__link {
	/* Body font (Mulish), matching the site's normal text — not the serif. */
	font-family: var(--font-body, system-ui, sans-serif);
	font-weight: 600;
	font-size: 16px;
	line-height: 1.2;
	/* Tighter side padding (was 22px) buys room so long labels
	   ("Nederlandse munten") stay on one line at 4-up desktop width.
	   Vertical padding trimmed ~10% (11px -> 10px) for a slimmer bar. */
	padding: 10px 16px;
	border-radius: 0;
	text-align: center;
	/* Uniform bar width across every tile — all match the widest label
	   ("Nederlandse munten") so the bars line up as a set. Sized for the
	   16px body font. */
	box-sizing: border-box;
	width: 194px;
	max-width: 100%;
	/* Every label on a single line. */
	white-space: nowrap;
	/* Kadence's break-word chops the label mid-word in narrow tiles
	   ("Neder-landse-munte-n"); wrap at spaces only. */
	word-break: normal;
	overflow-wrap: normal;
	hyphens: none;
}

/* Whole tile clickable (stretched link, no markup change). The label's <a>
   gets a ::before that fills the tile. For it to cover the TILE (not just the
   label strip) the tile must be the nearest positioned ancestor, so neutralize
   the cover's inner-container / button wrappers to position:static. Core gives
   the inner-container position:relative z-index:1 to sit above the photo; once
   it's static the label would sink behind the absolutely-positioned cover
   photo, so drop the cover photo/dim layers below it with negative z-index
   (contained by the tile's own stacking context). */
.wp-block-cover.hbc-cat-tile .wp-block-cover__inner-container,
.hbc-cat-tile .wp-block-buttons,
.hbc-cat-tile .wp-block-button {
	position: static;
}
.hbc-cat-tile .wp-block-cover__image-background,
.hbc-cat-tile img.wp-block-cover__image-background {
	z-index: -2;
}
.hbc-cat-tile .wp-block-cover__background {
	z-index: -1;
}
.hbc-cat-label .wp-block-button__link::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Hover affordance for the now-clickable tile (hover-capable devices only):
   the pink label darkens to the theme terracotta and the photo eases up a
   touch, clipped by the tile's overflow. Consistent with the bottom "Shop per
   sieraad" tiles. Motion is neutralized under prefers-reduced-motion below. */
@media (hover: hover) {
	.hbc-cat-label .wp-block-button__link {
		transition: filter 0.3s ease;
	}
	.hbc-cat-tile .wp-block-cover__image-background,
	.hbc-cat-tile img.wp-block-cover__image-background {
		transition: transform 0.4s ease;
	}
	.hbc-cat-tile:hover .hbc-cat-label .wp-block-button__link {
		filter: brightness(1.12);
	}
	.hbc-cat-tile:hover .wp-block-cover__image-background {
		transform: scale(1.04);
	}
}

/* --- "Bekijk alle producten ->" ------------------------------------------- */
.hbc-viewall a {
	color: var(--hbc-ink, #000);
	text-decoration: none;
}
.hbc-viewall a:hover {
	color: var(--hbc-terracotta-dark, #E1981C);
}
/* "Bekijk alle sieraden ->" (Shop per sieraad section only) — plain ink,
   not the shared terracotta .hbc-viewall color. */
.hbc-types .hbc-viewall a {
	color: var(--hbc-ink, #000);
}
.hbc-types .hbc-viewall a:hover {
	color: var(--hbc-terracotta-dark, #E1981C);
}

/* --- Featured product row: 4-up, comp gap 22px ---------------------------- */
.hbc-featured ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
}
/* Canonical home card deltas vs the archive card (16.5px name, ink eyebrow). */
body.home .hbc-featured ul.products li.product .woocommerce-loop-product__title {
	font-size: 16.5px;
}
body.home .hbc-featured ul.products li.product .hbc-card-eyebrow {
	color: var(--hbc-ink, #000);
}

/* --- Over Charlie band ----------------------------------------------------- */
.hbc-about-text {
	max-width: 440px;
}
/* The band's button carries inline white/berry colors (inline style wins in
   every state, so the hover needs !important to register at all). */
.hbc-about-band .wp-block-button__link:hover {
	background-color: #F6EFDF !important;
	color: #E1981C !important;
}

/* --- "Shop per sieraad" (below the band; D&K-style name-under-photo tiles) - */
.hbc-type-img,
.hbc-type-img img {
	width: 100%;
}
.hbc-type-img {
	margin: 0;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
.hbc-type-img a {
	display: block;
	width: 100%;
	height: 100%;
}
.hbc-type-img img {
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Name centered under the photo, snug against it. The 32px gap was the WP
   image block's own bottom margin, so zero that and set the label's own
   spacing. */
.hbc-type-img.wp-block-image,
.hbc-type-tile .hbc-type-img {
	margin-bottom: 0 !important;
}
.hbc-type-label {
	margin: 10px 0 0 !important;
	text-align: center;
	font-family: var(--font-display, Georgia, serif);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
}
.hbc-type-label a {
	color: var(--hbc-ink, #000);
	text-decoration: none;
}
/* Whole type tile clickable, same stretched-link technique as the cover tiles
   above. Needed because the image is wrapped in <a> on some tiles and not on
   others (inconsistent block content), so clickability differed tile to tile.
   The tile is the positioned ancestor and the label's <a> stretches over it.
   On tiles whose image does have its own link, both point at the same category,
   so the overlap is harmless. */
.hbc-type-tile {
	position: relative;
}
.hbc-type-label a::before {
	content: "";
	position: absolute;
	inset: 0;
}
.hbc-type-label a:hover {
	color: var(--hbc-terracotta-dark, #E1981C);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Gentle premium zoom: the photo eases up slightly within its fixed square
   (.hbc-type-img already clips with overflow:hidden). Only on hover-capable
   devices so touch doesn't get a stuck hover state; disabled under
   prefers-reduced-motion. */
.hbc-type-img img {
	transition: transform 0.4s ease;
}
.hbc-type-label a {
	transition: color 0.25s ease;
}
@media (hover: hover) {
	.hbc-type-tile:hover .hbc-type-img img,
	.hbc-type-img a:hover img {
		transform: scale(1.06);
	}
}
@media (prefers-reduced-motion: reduce) {
	.hbc-type-img img,
	.hbc-cat-tile .wp-block-cover__image-background,
	.hbc-cat-tile img.wp-block-cover__image-background {
		transition: none;
	}
	.hbc-type-tile:hover .hbc-type-img img,
	.hbc-type-img a:hover img,
	.hbc-cat-tile:hover .wp-block-cover__image-background {
		transform: none;
	}
}

/* --- Tablet (comp: max-width 900px) ---------------------------------------- */
@media (max-width: 900px) {
	.hbc-cat-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
	.hbc-type-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
		gap: 14px !important;
	}
	.hbc-featured ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.hbc-about-copy {
		padding-left: 32px !important;
		padding-right: 32px !important;
	}
}

/* --- Mobile (comp: max-width 640px) ---------------------------------------- */
@media (max-width: 640px) {
	.hbc-cat-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 14px !important;
	}
	/* Small tiles need a smaller seated label or it swallows the tile. The
	   desktop uniform 194px width is wider than a mobile tile, so let the
	   label size to its content here and wrap if a name is still too long. */
	.hbc-cat-label .wp-block-button__link {
		font-size: 13px;
		padding: 7px 10px;
		width: auto;
		white-space: normal;
	}
	.wp-block-cover.has-custom-content-position.hbc-cat-tile .wp-block-cover__inner-container {
		/* Lower the label proportionally on mobile too (was 10%). */
		padding: 0 8px 6%;
	}
	.hbc-featured ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}
	.hbc-type-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 14px !important;
	}
	.hbc-type-label {
		font-size: 15px;
	}
	/* Band on mobile: stack in one column, interleaved title -> image -> text.
	   The block is a two-column layout (copy | photo) marked
	   is-not-stacked-on-mobile, so it stays side-by-side by default and the
	   photo shrinks to a sliver. We flatten both columns with display:contents
	   so the eyebrow, title, photo, text and button become siblings of the
	   band's flex column, then order them. Padding moves onto the terracotta
	   band since the copy column no longer wraps them. */
	.hbc-about-band {
		padding: 40px 22px !important;
	}
	.hbc-about-cols {
		display: flex !important;
		flex-direction: column !important;
		flex-wrap: nowrap !important;
	}
	.hbc-about-cols > .wp-block-column {
		display: contents !important;
	}
	.hbc-about-copy {
		padding: 0 !important;
	}
	/* display:contents children become direct flex items of .hbc-about-cols,
	   and flex items don't collapse margins the way block boxes do — so each
	   element's own top+bottom margin was stacking with its neighbour's
	   instead of merging, roughly doubling every gap. Fix: zero every
	   element's own margin and drive the rhythm with a single top-margin
	   each, off the --space-* scale. */
	.hbc-about-cols .hbc-eyebrow {
		order: 1;
		margin: 0 !important;
	}
	.hbc-about-cols h2.wp-block-heading {
		order: 2;
		margin: var(--space-3, 12px) 0 0 !important;
	}
	/* Extra ancestor beats the desktop `.hbc-about-photo .hbc-about-photo-slot
	   { min-height:100% }` rule (equal specificity, defined later in file). */
	.hbc-about-band .hbc-about-cols .hbc-about-photo-slot {
		order: 3;
		flex: 0 0 auto !important;
		width: 100%;
		min-height: 240px !important;
		height: 240px !important;
		margin: var(--space-6, 22px) 0 0 !important;
	}
	.hbc-about-cols .hbc-about-text {
		order: 4;
		max-width: none;
		margin: var(--space-6, 22px) 0 0 !important;
	}
	.hbc-about-cols .wp-block-buttons {
		order: 5;
		margin: var(--space-7, 28px) 0 0 !important;
	}
}

/* --- Review fixes (2026-07-10) --------------------------------------------- */
/* Kadence pads the content area ~136px on top; the comp has 56px between the
   header hairline and the tagline, which the first block already carries. */
body.home .content-area {
	margin: 0;
	padding-top: 0;
	padding-bottom: 0;
}
/* Kadence's inner wraps contribute their own spacing on top of the blocks':
   .entry-content-wrap pads 32px top+bottom and main.wrap adds a 24px top
   margin (measured). The comp's rhythm lives in the blocks, so zero these. */
body.home .entry-content-wrap {
	padding-top: 0;
	padding-bottom: 0;
}
body.home main.wrap {
	margin-top: 0;
	margin-bottom: 0;
}
body.home .site-content,
body.home .content-wrap {
	padding-top: 0;
	padding-bottom: 0;
	margin-top: 0;
	margin-bottom: 0;
}
/* The terracotta band closes the page: no gap to the footer, and no footer
   top margin on home (user review). */
body.home .entry-content {
	margin-bottom: 0;
}
body.home .entry-content > .wp-block-group:last-child {
	margin-bottom: 0;
}
body.home .hbc-footer {
	margin-top: 0;
}
body.home .entry-content > .wp-block-group:first-child {
	margin-top: 0;
}
/* The Over Charlie photo fills the band's full height, edge to edge of its
   cell (the comp's image-slot is absolutely inset in a stretched column). */
.hbc-about-cols > .hbc-about-photo {
	align-self: stretch !important;
	display: flex;
}
.hbc-about-photo .hbc-about-photo-slot {
	flex: 1 1 auto;
	min-height: 100% !important;
}

/* A stubborn 32px of height trails the last block inside .entry-content
   (no padding, no margins, 0-height clearfix — source untraceable without
   running the theme through a debugger). The band must sit flush on the
   footer, so compensate explicitly. */
body.home .entry-content {
	margin-bottom: -32px;
}

/* Photo tiles are core/cover blocks. The category labels sit BELOW the photos
   (name-under-photo design), so the photos need no dim overlay for legibility.
   Kill the cover block's dim span entirely — fully transparent, no darkening —
   with !important to beat WordPress's inline dim-ratio / has-background-dim
   styles. (The old group-tile rules — ::before overlay + `> * { position:relative }`
   — must NOT return: the child selector overrode the cover img's
   position:absolute and broke the layout.) */
.hbc-cat-tile .wp-block-cover__background,
.hbc-cat-tile.has-photo .wp-block-cover__background {
	background: transparent !important;
	opacity: 0 !important;
}