/* =============================================================================
   Bogdanbor Child — Főoldal (homepage)
   ============================================================================= */

/* .container, .section-eyebrow, .section-header, .section-title, .btn-primary
   are defined globally in assets/css/typography.css. */

/* -----------------------------------------------------------------------------
   Page wrapper — offset for fixed header
   ----------------------------------------------------------------------------- */
.page-fooldal {
	padding-top: var(--header-height, 100px);
}

/* =============================================================================
   SECTION 1 — Hero
   ============================================================================= */
.fooldal-hero {
	padding:    10rem 0 9rem;
	text-align: center;
	background: #faf9f7;
}

.fooldal-hero__inner {
	max-width: 760px;
}

.fooldal-hero__title {
	font-family:    var( --font-serif );
	font-size:      var( --text-hero );
	font-weight:    400;
	letter-spacing: 0.02em;
	line-height:    1.15;
	color:          #1a1a1a;
	margin:         0 0 1.75rem;
}

.fooldal-hero__title em {
	font-style: italic;
	color:      #7b3b2f;
}

.fooldal-hero__lead {
	font-size:     var( --text-md );
	line-height:   var( --leading-relaxed );
	color:         #666;
	max-width:     540px;
	margin:        0 auto 2.75rem;
}

@media (max-width: 600px) {
	.fooldal-hero {
		padding: 6rem 0 5rem;
	}
}

/* =============================================================================
   SECTION 2 — Intro
   ============================================================================= */
.fooldal-intro {
	padding:       7rem 0;
	border-top:    1px solid rgba(0, 0, 0, 0.06);
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.fooldal-intro__inner {
	max-width: 680px;
	margin:    0 auto;
	text-align: center;
}

.fooldal-intro__title {
	font-family:    var( --font-serif );
	font-size:      clamp(1.5rem, 3vw, 2.25rem);
	font-weight:    400;
	letter-spacing: 0.03em;
	color:          #1a1a1a;
	margin-bottom:  2rem;
}

.fooldal-intro__body {
	text-align: left;
}

.fooldal-intro__body p {
	font-size:     1rem;
	line-height:   1.95;
	color:         #555;
	margin-bottom: 1.125rem;
}

.fooldal-intro__body p:last-child {
	font-style:    italic;
	color:         #7b3b2f;
	margin-bottom: 0;
}

@media (max-width: 600px) {
	.fooldal-intro {
		padding: 5rem 0;
	}
}

/* =============================================================================
   SECTION 3 — Featured products
   ============================================================================= */
.fooldal-featured {
	padding:    7rem 0;
	background: #faf9f7;
}

.fooldal-featured__header {
	text-align: center;
}

.no-products {
	text-align: center;
	color:      #999;
	padding:    4rem 0;
	font-size:  0.9375rem;
}

/* Grid — 3 columns, matches borok page */
.fooldal-featured__grid {
	display:               grid;
	grid-template-columns: repeat(3, 1fr);
	gap:                   2.5rem;
	list-style:            none;
	margin:                0;
	padding:               0;
}

/* -----------------------------------------------------------------------------
   Product card — editorial borderless style
   ----------------------------------------------------------------------------- */
.fooldal-featured .product-card {
	display:        flex;
	flex-direction: column;
	margin:         0;
	padding:        0;
	list-style:     none;
}

/* Image area — aspect-ratio on the img itself is the most reliable approach.
   No height:100% required; no two-pass layout; no sub-pixel blurriness. */
.fooldal-featured .product-card__image-link {
	display:  block;
	overflow: hidden;
}

.fooldal-featured .product-card__image {
	display:    block;
	margin:     0;
	overflow:   hidden;
	background: #e8e4de; /* warm linen — visible while image loads */
}

.fooldal-featured .product-card__image img {
	display:          block;
	width:            100%;
	height:           auto;
	aspect-ratio:     2 / 3;
	object-fit:       cover;
	object-position:  center top; /* preserve wine bottle top / label area */
	transition:       transform 0.55s ease;
}

.fooldal-featured .product-card:hover .product-card__image img {
	transform: scale(1.04);
}

/* Body */
.fooldal-featured .product-card__body {
	display:        flex;
	flex-direction: column;
	flex:           1;
	padding:        1.5rem 0 0;
}

.fooldal-featured .product-card__category {
	font-family:    var( --font-ui );
	font-size:      var( --text-micro );
	letter-spacing: var( --tracking-widest );
	text-transform: uppercase;
	color:          #7b3b2f;
	margin:         0 0 0.5rem;
}

.fooldal-featured .product-card__title {
	font-family: var( --font-serif );
	font-size:   var( --text-md );
	font-weight: 400;
	line-height: var( --leading-snug );
	margin:      0 0 0.75rem;
}

.fooldal-featured .product-card__title a {
	color:           #1a1a1a;
	text-decoration: none;
	transition:      color 0.25s;
}

.fooldal-featured .product-card__title a:hover,
.fooldal-featured .product-card__title a:focus-visible {
	color: #7b3b2f;
}

.fooldal-featured .product-card__description {
	font-size:   0.875rem;
	line-height: 1.75;
	color:       #6c6660; /* was #888 — 3.36:1 on #faf9f7, now ≥4.5:1 (WCAG 1.4.3) */
	margin:      0 0 1.25rem;
	flex:        1;
}

/* Footer — price stacked above button */
.fooldal-featured .product-card__footer {
	display:        flex;
	flex-direction: column;
	gap:            0.875rem;
	padding-top:    1.25rem;
	border-top:     1px solid rgba(0, 0, 0, 0.06);
	margin-top:     auto;
}

.fooldal-featured .product-card__price,
.fooldal-featured .product-card__price .woocommerce-Price-amount,
.fooldal-featured .product-card__price .price,
.fooldal-featured .product-card__price bdi {
	font-family:     var( --font-serif );
	font-size:       0.9375rem;
	color:           #1a1a1a;
	text-decoration: none;
}

/* Add-to-cart / Read more — override Blocksy + WooCommerce blue defaults */
.fooldal-featured .product-card__footer a.button,
.fooldal-featured .product-card__footer button.button,
.fooldal-featured .product-card__footer .btn-cart {
	display:          block;
	width:            100%;
	box-sizing:       border-box;
	padding:          0.625rem 1rem;
	background:       transparent;
	border:           1px solid #1a1a1a;
	border-radius:    0;
	color:            #1a1a1a;
	font-family:      var( --font-ui );
	font-size:        var( --text-micro );
	font-weight:      400;
	letter-spacing:   var( --tracking-widest );
	text-transform:   uppercase;
	text-align:       center;
	text-decoration:  none;
	white-space:      nowrap;
	cursor:           pointer;
	transition:
		background-color 0.25s ease,
		color            0.25s ease,
		border-color     0.25s ease;
}

.fooldal-featured .product-card__footer a.button:hover,
.fooldal-featured .product-card__footer a.button:focus-visible,
.fooldal-featured .product-card__footer button.button:hover,
.fooldal-featured .product-card__footer .btn-cart:hover {
	background-color: #1a1a1a;
	color:            #ffffff;
	outline:          none;
}

/* Added-to-cart state */
.fooldal-featured .product-card__footer a.button.added,
.fooldal-featured .product-card__footer button.button.added {
	background-color: #7b3b2f;
	border-color:     #7b3b2f;
	color:            #ffffff;
}

/* Hide the "View cart" link WooCommerce appends after adding */
.fooldal-featured .added_to_cart {
	display: none;
}

@media (max-width: 1024px) {
	.fooldal-featured__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.fooldal-featured {
		padding: 5rem 0;
	}

	.fooldal-featured__grid {
		grid-template-columns: 1fr;
	}
}

/* =============================================================================
   SECTION 4 — CTA banner
   ============================================================================= */
.fooldal-cta {
	padding:    8rem 0;
	text-align: center;
}

.fooldal-cta__eyebrow {
	margin-bottom: 1rem;
}

.fooldal-cta__title {
	font-family:    var( --font-serif );
	font-size:      clamp(1.75rem, 3.5vw, 3rem);
	font-weight:    400;
	letter-spacing: var( --tracking-wide );
	color:          #1a1a1a;
	margin:         0 0 2.5rem;
}

@media (max-width: 600px) {
	.fooldal-cta {
		padding: 5rem 0;
	}
}