/* =========================================================
   Comfyo — homepage
   ========================================================= */

.comfyo-home{
	background: var(--c-cream);
	overflow-x: hidden;
}

/*
 * `:where(section)` deliberately contributes zero specificity here, so this
 * stays a true fallback default — every component below (`.comfyo-hero`,
 * `.comfyo-home-trust`, etc.) is a single class selector of the exact same
 * specificity as `.comfyo-home` alone, and without :where() the compound
 * `.comfyo-home section` (class+type) selector would always outrank those
 * single-class component rules regardless of source order, silently
 * overriding every section's own padding back to this default. That bug is
 * why the hero/trust bar previously rendered far taller than their own
 * authored padding: 5.5rem 1.5rem was winning over both, unnoticed.
 */
.comfyo-home :where(section){
	width: 100%;
	padding: 3rem 1.5rem;
}

.comfyo-eyebrow{
	display: inline-block;
	font-family: var(--font-sans);
	font-size: 0.8rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--c-accent);
	margin-bottom: 1rem;
}
.comfyo-eyebrow--onaccent{
	color: var(--c-blush);
}

.comfyo-section-head{
	max-width: 640px;
	margin: 0 auto 1.75rem;
	text-align: left;
}
.comfyo-section-head--center{
	text-align: center;
}
.comfyo-section-head h2{
	font-size: clamp(1.8rem, 3vw, 2.4rem);
	margin: 0;
	line-height: 1.2;
}

/*
 * Homepage section header (ETAP G.7.3, comfyo_render_section_head() in functions.php) — the ONE pattern
 * for every homepage section: eyebrow → H2 → one-line lead → text-link CTA, stacked on the left edge of
 * the same 1240px column the grid below uses. Replaces the earlier row variant, where a short H2 sat on
 * the far left and its "see all" link on the far right of a 1240px row, reading as two unrelated things.
 */
.comfyo-section-head--home{
	max-width: 1240px;
	margin: 0 auto 2rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.55rem;
}
.comfyo-section-head--home .comfyo-eyebrow{
	margin: 0;
	font-size: 0.72rem;
	letter-spacing: 0.2em;
	color: var(--c-accent-dark);
}
.comfyo-section-head--home h2{
	max-width: 24ch;
	text-wrap: balance;
}
.comfyo-section-head__lead{
	max-width: 52ch;
	margin: 0;
	font-family: var(--font-sans);
	font-size: 0.98rem;
	line-height: 1.6;
	color: var(--c-body);
}
.comfyo-section-head__cta{
	margin-top: 0.4rem;
	font-size: 0.9rem;
}
.comfyo-section-head__cta:focus-visible{
	outline: 2px solid var(--c-accent-dark);
	outline-offset: 3px;
	border-radius: 2px;
}

/*
 * `.comfyo-btn` / `.comfyo-text-link` moved to comfyo-site.css (2026-09-20):
 * these are used well beyond the homepage — the shop/category filter panel's
 * "Pokaż wyniki" button and empty-state CTAs (shop-filters.php, shop-hooks.php)
 * use the exact same classes, but comfyo-shop.css never depended on this
 * file, so on every shop/category/search page those buttons were silently
 * falling back to a generic, unbranded button style with no ink background
 * and no cream text — confirmed live via getComputedStyle before the move.
 * See the "Buttons" section of comfyo-site.css for the real definition.
 */

/* Reveal-on-scroll (JS toggles .is-visible) */
.comfyo-reveal{
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}
.comfyo-reveal.is-visible{
	opacity: 1;
	transform: translateY(0);
}

/* ---------------------------------------------------------
   HERO — moved to comfyo-site.css (2026-09-21) as `.comfyo-campaign-hero`.
   The homepage hero is now the same shared full-bleed campaign banner
   component used by /sklep/ and the 7 category archives (see
   inc/campaign-hero.php), not a homepage-only two-column block — see the
   "CAMPAIGN HERO" section of comfyo-site.css for the real definition.
   --------------------------------------------------------- */

/* ---------------------------------------------------------
   CATEGORIES
   --------------------------------------------------------- */
.comfyo-categories{
	background: var(--c-cream);
}

/*
 * Category cards (ETAP G.7.3). The whole card is one link (photo + name + count), no small "Zobacz →"
 * target to hit. Photo, then the name in the display face with the real product count under it, and a
 * chevron that slides on hover/focus. No floating white box, no lift-off jump on hover.
 * < 1100px: one horizontal, swipeable row with scroll snap (the next card peeks in as the hint) instead
 * of a 2- or 4-column grid that left an orphan seventh card. >= 1100px: all 7 in one row.
 */
.comfyo-cat-grid{
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(9.5rem, 42%);
	gap: 0.85rem;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 1.5rem;
	scrollbar-width: none;
	/* bleed to the screen edges, content still starts on the 1.5rem gutter */
	margin: 0 -1.5rem;
	padding: 0.25rem 1.5rem 0.75rem;
}
.comfyo-cat-grid::-webkit-scrollbar{
	display: none;
}

.comfyo-cat-card{
	display: flex;
	flex-direction: column;
	scroll-snap-align: start;
	text-decoration: none;
	color: var(--c-ink);
	border-radius: 8px;
}
.comfyo-cat-card:focus{
	outline: none;
}
.comfyo-cat-card:focus-visible{
	outline: 2px solid var(--c-accent-dark);
	outline-offset: 4px;
}

.comfyo-cat-card__media{
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 6px;
	background: var(--c-cream-deep);
}
.comfyo-cat-card__media img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 20%;
	display: block;
	transition: transform 0.6s ease;
}

.comfyo-cat-card__body{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.75rem 0.1rem 0;
}
.comfyo-cat-card__text{
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}
.comfyo-cat-card__title{
	font-family: var(--font-sans); /* G.7.4: navigation labels in Jost; Playfair is for the section headings */
	font-weight: 500;
	font-size: 1rem;
	letter-spacing: 0.01em;
	line-height: 1.25;
	color: var(--c-ink);
	transition: color 0.2s ease;
}
.comfyo-cat-card__meta{
	font-family: var(--font-sans);
	font-size: 0.76rem;
	letter-spacing: 0.02em;
	color: var(--c-body);
}
.comfyo-cat-card__arrow{
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.9rem;
	height: 1.9rem;
	border-radius: 50%;
	border: 1px solid var(--c-line);
	color: var(--c-accent-dark);
	transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.comfyo-cat-card__arrow svg{
	width: 0.85rem;
	height: 0.85rem;
	stroke-width: 1.8;
}
@media (hover: hover){
	.comfyo-cat-card:hover .comfyo-cat-card__media img{
		transform: scale(1.04);
	}
	.comfyo-cat-card:hover .comfyo-cat-card__title{
		color: var(--c-accent-dark);
	}
}
.comfyo-cat-card:hover .comfyo-cat-card__arrow,
.comfyo-cat-card:focus-visible .comfyo-cat-card__arrow{
	background: var(--c-ink);
	border-color: var(--c-ink);
	color: var(--c-cream);
	transform: translateX(2px);
}

@media (min-width: 700px){
	.comfyo-cat-grid{
		grid-auto-columns: minmax(10rem, 27%);
		gap: 1.1rem;
	}
}
@media (min-width: 1100px){
	.comfyo-cat-grid{
		grid-auto-flow: row;
		grid-template-columns: repeat(7, minmax(0, 1fr));
		grid-auto-columns: auto;
		gap: 1.1rem;
		max-width: 1240px;
		margin: 0 auto;
		padding: 0;
		overflow: visible;
		scroll-snap-type: none;
	}
	.comfyo-cat-card__title{
		font-size: 1rem;
	}
}
@media (prefers-reduced-motion: reduce){
	.comfyo-cat-card__media img,
	.comfyo-cat-card__arrow{
		transition: none;
	}
}

/* ---------------------------------------------------------
   PRODUCT SPOTLIGHT / DISCOVERY (Komplety + Wybrane dla Ciebie)
   Reuses the exact /sklep/ card (comfyo-shop.css) — only the section
   chrome (background, header row, grid max-width) is defined here.
   --------------------------------------------------------- */
.comfyo-spotlight{
	background: var(--c-cream-deep);
}
.comfyo-discovery{
	background: var(--c-cream);
}

.comfyo-spotlight .woocommerce,
.comfyo-discovery .woocommerce{
	max-width: 1240px;
	margin: 0 auto;
}

/*
 * Astra ships its own unconditional, un-media-queried grid rule for product
 * loops — `.woocommerce ul.products:not(.elementor-grid){grid-template-
 * columns:repeat(4,1fr)}` (astra/assets/css/minified/compatibility/
 * woocommerce/woocommerce-layout-grid.min.css). The `:not()` pseudo-class
 * makes that selector MORE specific than comfyo-shop.css's own responsive
 * `.woocommerce ul.products` rule, so on /sklep/ Astra also enqueues an
 * additional responsive companion stylesheet (tied to is_shop() /
 * is_product_category()) that overrides it back down for mobile — but that
 * companion never loads on this plain page template, so the unconditional
 * 4-column rule was winning here even at 390px. Targeting the dedicated
 * `.comfyo-home-products` class (which Astra's selector doesn't include, so
 * this always wins on selector match) with `!important` (needed because
 * Astra's rule itself carries no media query to lose to) fixes it without
 * touching comfyo-shop.css, which still works correctly on the real shop
 * archive.
 */
.comfyo-home-products{
	grid-template-columns: repeat(2, 1fr) !important;
}
/* Homepage grids always hold exactly 4 cards: 2 x 2 on tablets instead of 3 + one orphan (ETAP G.7.3). */
@media (min-width: 700px){
	.comfyo-home-products{
		grid-template-columns: repeat(2, 1fr) !important;
	}
}
@media (min-width: 1100px){
	.comfyo-home-products{
		grid-template-columns: repeat(4, 1fr) !important;
	}
}

/* The shop archive's own ul.products grid has no side gutter of its own
   (it relies on the archive's container padding) — the homepage sections
   already pad via `.comfyo-home section`, so nothing extra is needed beyond
   the max-width/centering above. */

/* ---------------------------------------------------------
   HOME TRUST BAR — a lean single row, deliberately lighter than the PDP's
   trust block (comfyo-product.css, not loaded here) rather than copied 1:1.
   --------------------------------------------------------- */
.comfyo-home-trust{
	background: var(--c-white);
	border-top: 1px solid var(--c-line);
	border-bottom: 1px solid var(--c-line);
	padding: 1.5rem 1.5rem;
}
.comfyo-home-trust__list{
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 1240px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}
.comfyo-home-trust__list li{
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
}
.comfyo-home-trust__icon{
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 50%;
	background: var(--c-blush);
	color: var(--c-accent-dark);
}
.comfyo-home-trust__icon svg{
	width: 1.2rem;
	height: 1.2rem;
}
.comfyo-home-trust__list strong{
	display: block;
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--c-ink);
	margin-bottom: 0.15rem;
}
.comfyo-home-trust__list span span{
	font-size: 0.85rem;
	color: var(--c-body);
	line-height: 1.45;
}
.comfyo-home-trust__list a{
	color: var(--c-body);
	text-decoration: underline;
}
.comfyo-home-trust__list a:hover{
	color: var(--c-accent);
}

@media (min-width: 700px){
	.comfyo-home-trust__list{
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 1100px){
	.comfyo-home-trust__list{
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Newsletter section removed (was front-end-only: showed a fake "thank you"
   with no backend to actually capture the email — see PROJECT_LOG.md for the
   redesign entry that removed it; the mockup doesn't include one either). */