/**
 * Homepage sections — layout/measurements taken from frydextractsdistro.com
 * (Flatsome) on 2026-09-13: black hero, category cards, blue band +
 * product carousel, magenta brand block, lab-testing text, yellow reviews
 * card, black newsletter with photo background.
 */

.fryd-section { padding-block: 50px; }
.fryd-section__title { text-align: center; margin-bottom: 30px; }

/* ---- Hero: sits under the translucent sticky header (see components.css) */
.fryd-hero {
	background: var(--fryd-color-ink); color: #f1f1f1;
	margin-top: calc(var(--fryd-header-main-height) * -1);
	padding-top: calc(var(--fryd-header-main-height) + 30px);
	padding-bottom: 30px;
	min-height: 800px;
	display: flex; align-items: center;
}
.fryd-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; width: 100%; }
.fryd-hero__text { text-align: center; }
.fryd-hero__text h1 { color: #fff; font-size: clamp(2.5rem, 1.6rem + 2.4vw, 3.5rem); margin-bottom: 0.4em; }
.fryd-hero__lead { font-size: clamp(1.4rem, 1rem + 1.2vw, 2.25rem); line-height: 1.45; margin: 0 0 40px; }
.fryd-hero__promo { position: relative; display: block; text-decoration: none; }
.fryd-hero__promo img { width: 100%; max-width: 510px; margin-inline: auto; }
.fryd-hero__promo-caption {
	margin: -70px 0 0; position: relative;
	background: linear-gradient(180deg, rgba(20, 20, 20, 0.85), rgba(10, 10, 10, 0.95));
	border-radius: var(--fryd-radius-lg); padding: 12px 25px 23px; text-align: center;
}
.fryd-hero__promo-caption h2 { color: #fff; margin: 0; font-size: clamp(2rem, 1.4rem + 1.6vw, 3rem); }
.fryd-hero__promo:hover .fryd-hero__promo-caption h2 { text-decoration: underline; text-decoration-thickness: 2px; }

/* ---- Category cards */
.fryd-cat-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 510px)); justify-content: center; gap: 30px; }
.fryd-cat-card { display: block; text-decoration: none; box-shadow: var(--fryd-shadow-hover); background: #fff; transition: transform var(--fryd-duration) var(--fryd-ease); }
.fryd-cat-card:hover { transform: translateY(-4px); }
.fryd-cat-card__media { aspect-ratio: 1 / 1; overflow: hidden; }
.fryd-cat-card__media img { width: 100%; height: 100%; object-fit: cover; }
.fryd-cat-card h3 { color: var(--fryd-color-accent); text-align: center; font-size: 1.3rem; margin: 0; padding: 14px 10px 18px; }
.fryd-cat-card:hover h3 { text-decoration: underline; }

/* ---- Blue band + carousel */
.fryd-band { padding-block: 40px; color: #fff; text-align: center; }
.fryd-band h2 { color: #fff; margin: 0; }
.fryd-band--blue { background: var(--fryd-color-band-blue); min-height: 245px; display: flex; align-items: center; justify-content: center; }

.fryd-carousel { padding-block: 4px 40px; }
.fryd-carousel__viewport { position: relative; }
.fryd-carousel__track {
	display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 30px) / 4); gap: 30px;
	overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
	list-style: none; margin: 0; padding: 30px 0 10px; scrollbar-width: none;
}
.fryd-carousel__track::-webkit-scrollbar { display: none; }
.fryd-carousel__track > li { scroll-snap-align: start; }
.fryd-carousel__btn {
	/* vertically centred on the square image, not the image + title */
	position: absolute; top: calc(50% - 50px); z-index: 2;
	width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
	background: rgba(255, 255, 255, 0.9); color: #1c1c1c; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	display: flex; align-items: center; justify-content: center;
	transition: opacity var(--fryd-duration) var(--fryd-ease);
}
.fryd-carousel__btn:disabled { opacity: 0; pointer-events: none; }
.fryd-carousel__btn--prev { left: -22px; }
.fryd-carousel__btn--next { right: -22px; }
.fryd-carousel__btn .fryd-icon { width: 18px; height: 18px; }
.fryd-carousel__cta { text-align: center; margin-top: 20px; }

/* ---- Magenta brand block */
.fryd-brand { background: var(--fryd-color-band-magenta); color: #f1f1f1; min-height: 528px; display: flex; align-items: center; padding-block: 60px; }
.fryd-brand__inner { max-width: 900px; }
.fryd-brand h2 { color: #fff; font-size: clamp(2rem, 1.5rem + 1.4vw, 2.5rem); }
.fryd-brand__lead { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem); line-height: 1.6; margin: 0 0 30px; }
.fryd-brand__actions { display: flex; flex-wrap: wrap; gap: 15px; }

/* ---- Lab testing */
.fryd-lab { text-align: center; padding-block: 40px 60px; }
.fryd-lab h2 { font-size: clamp(1.6rem, 1.3rem + 0.8vw, 1.85rem); font-weight: 500; }
.fryd-lab p { max-width: 900px; margin: 0 auto; }

/* ---- Reviews */
.fryd-reviews { background: var(--fryd-color-band-yellow); padding-block: 50px; }
.fryd-reviews__card { display: grid; grid-template-columns: 1fr 1fr; box-shadow: var(--fryd-shadow-hover); min-height: 400px; }
.fryd-reviews__intro { background: #111; padding: 30px; display: flex; }
.fryd-reviews__photo {
	flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
	background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("../img/reviews-bg-800.webp") center / cover no-repeat;
	color: #fff; padding: 30px;
}
.fryd-reviews__photo h2 { color: #fff; font-size: clamp(1.6rem, 1.3rem + 0.8vw, 1.85rem); font-weight: 500; margin-bottom: 0.2em; }
.fryd-reviews__photo p { margin: 0 0 20px; }
.fryd-reviews__photo .fryd-btn { color: #1c1c1c; }
.fryd-reviews__quotes { background: #fff; padding: 30px 50px; display: flex; flex-direction: column; justify-content: center; }
.fryd-reviews__quote { margin: 0; }
.fryd-reviews__quote[hidden] { display: none; }
.fryd-reviews__quote p { font-size: 1.05rem; margin: 0 0 20px; }
.fryd-reviews__quote cite { font-style: normal; display: block; }
.fryd-reviews__name { font-family: var(--fryd-font-script); font-size: 0.95rem; display: block; }
.fryd-reviews__place { font-size: 0.8rem; color: #595959; }
.fryd-reviews__dots { display: flex; gap: 4px; justify-content: center; margin-top: 20px; }
.fryd-reviews__dots button { width: 24px; height: 24px; border: 0; background: none; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.fryd-reviews__dots button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #9a9a9a; }
.fryd-reviews__dots button[aria-current="true"]::before { background: #1c1c1c; }
.fryd-reviews__empty { text-align: center; }
.fryd-reviews__empty p { font-size: 1.05rem; margin: 0 0 8px; }

/* ---- Newsletter */
.fryd-newsletter {
	background: linear-gradient(rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.72)), url("../img/newsletter-bg-1240.webp") center / cover no-repeat, #000;
	color: #f1f1f1; text-align: center; min-height: 429px; display: flex; align-items: center; padding-block: 50px;
	scroll-margin-top: 120px;
}
.fryd-newsletter h2 { color: #fff; }
.fryd-newsletter p { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.35rem); margin: 0 0 25px; }
.fryd-newsletter__form { display: flex; gap: 10px; max-width: 540px; margin-inline: auto; }
.fryd-newsletter__form .fryd-input { flex: 1; min-width: 0; border-radius: var(--fryd-radius-sm); }
.fryd-newsletter__form .fryd-btn { text-transform: uppercase; font-size: 0.95rem; padding-inline: 22px; }
.fryd-newsletter__notice { max-width: 540px; margin: 15px auto 0; color: #fff; }

/* ---- Responsive */
@media (max-width: 849px) {
	.fryd-hero { min-height: 0; padding-bottom: 50px; }
	.fryd-hero__grid { grid-template-columns: 1fr; }
	.fryd-hero__visual { order: -1; }
	.fryd-hero__promo img { max-width: 360px; }
	.fryd-hero__promo-caption { margin-top: -50px; }
	.fryd-cat-cards { grid-template-columns: 1fr; max-width: 510px; margin-inline: auto; }
	.fryd-carousel__track { grid-auto-columns: calc((100% - 15px) / 2); gap: 15px; }
	.fryd-carousel__btn--prev { left: 0; }
	.fryd-carousel__btn--next { right: 0; }
	.fryd-reviews__card { grid-template-columns: 1fr; }
	.fryd-reviews__photo { min-height: 320px; }
	.fryd-reviews__quotes { padding: 30px; }
	.fryd-brand { min-height: 0; text-align: center; }
	.fryd-brand__inner { margin-inline: auto; }
	.fryd-brand__actions { justify-content: center; }
}
@media (max-width: 480px) {
	.fryd-newsletter__form { flex-direction: column; }
	.fryd-section { padding-block: 40px; }
}