/* =============================================================
   Snuffle Pets — homepage (front-page.php)
   Blueprint sectie 3. Mobile-first, desktop vanaf 768px.
   Rootfont 62.5%: 1.4rem = 14px. Alleen tokens uit main.css.
   ============================================================= */

/* ---------- 3.1 Categorie-iconenslider (alleen desktop) ---------- */

.sc-home-cats { display: none; }

@media (min-width: 768px) {
	.sc-home-cats { display: block; margin: 20px 0; }
}

/* Homepage-modifier: 6 tegels per viewport op tablet, 8 op desktop. */
.sc-carousel--cats .sc-carousel__track > * { flex: 0 0 calc(16.666% - 12.5px); }

@media (min-width: 1170px) {
	.sc-carousel--cats .sc-carousel__track > * { flex-basis: calc(12.5% - 13.125px); }
}

.sc-cattile {
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-align: center;
}
.sc-cattile:hover { color: var(--sc-text); }

.sc-cattile__media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	width: 100%;
	border-radius: var(--sc-radius-m);
	background: var(--sc-brand-light);
	color: var(--sc-brand);
	overflow: hidden;
	transition: box-shadow .2s ease-out;
}
.sc-cattile__media img { width: 100%; height: 100%; object-fit: cover; }
.sc-cattile:hover .sc-cattile__media { box-shadow: var(--sc-shadow-card); }

.sc-cattile__label { font-size: 1.3rem; font-weight: 600; line-height: 1.3; }
.sc-cattile:hover .sc-cattile__label { text-decoration: underline; }

.sc-cattile--sale .sc-cattile__media { background: var(--sc-sale); color: #fff; }
.sc-cattile--sale .sc-cattile__label { color: var(--sc-sale); }

/* ---------- 3.2 Hero: promoslider ---------- */

.sc-home-hero { margin: 16px 0 48px; }

@media (min-width: 768px) {
	.sc-home-hero { margin-top: 0; }
}

/* Slide 90% breed: de volgende slide piept ~10% in beeld. */
.sc-carousel--hero .sc-carousel__track { gap: 10px; padding: 0 0 5px; }
.sc-carousel--hero .sc-carousel__track > * { flex: 0 0 90%; }

.sc-hero-slide {
	position: relative;
	display: flex;
	align-items: center;
	aspect-ratio: 2.2 / 1;
	min-height: 150px;
	border-radius: var(--sc-radius-m);
	overflow: hidden;
	padding: 16px 20px;
	color: #fff;
}
.sc-hero-slide:hover { color: #fff; }

@media (min-width: 768px) {
	.sc-hero-slide { aspect-ratio: 4.5 / 1; min-height: 0; padding: 24px 48px; }
}

/* Gradiënten in merktinten, per slide-onderwerp. */
.sc-hero-slide--zomer { background: linear-gradient(105deg, var(--sc-cta) 15%, var(--sc-accent)); }
.sc-hero-slide--gadgets { background: linear-gradient(105deg, var(--sc-brand-dark), var(--sc-brand) 80%); }
.sc-hero-slide--club { background: linear-gradient(105deg, var(--sc-accent), var(--sc-warning)); color: var(--sc-text); }
.sc-hero-slide--club:hover { color: var(--sc-text); }

/* Subtiel pootmotief rechtsonder. */
.sc-hero-slide__paw {
	position: absolute;
	right: -28px;
	bottom: -42px;
	color: #fff;
	opacity: .14;
	pointer-events: none;
}
.sc-hero-slide__paw .sc-icon { width: 140px; height: 140px; }
.sc-hero-slide--club .sc-hero-slide__paw { color: var(--sc-text); opacity: .08; }

@media (min-width: 768px) {
	.sc-hero-slide__paw .sc-icon { width: 220px; height: 220px; }
}

.sc-hero-slide__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	max-width: 85%;
}
@media (min-width: 768px) {
	.sc-hero-slide__content { gap: 7px; max-width: 65%; }
}

.sc-hero-slide__kicker {
	font-size: 1.1rem;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: .08em;
	opacity: .9;
}

.sc-hero-slide__title {
	font-family: var(--sc-font-heading);
	font-weight: 700;
	font-size: 2rem;
	line-height: 1.1;
}
@media (min-width: 768px) {
	.sc-hero-slide__title { font-size: clamp(2.4rem, 2.8vw, 3.4rem); }
}

.sc-hero-slide__sub { display: none; font-size: 1.5rem; opacity: .92; }
@media (min-width: 768px) {
	.sc-hero-slide__sub { display: block; }
}

.sc-hero-slide__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 5px;
	padding: 8px 16px;
	border-radius: var(--sc-radius-pill);
	background: #fff;
	color: var(--sc-text);
	font-weight: 700;
	font-size: 1.2rem;
	line-height: 1;
	transition: transform .2s ease-out;
}
.sc-hero-slide:hover .sc-hero-slide__cta { transform: translateX(3px); }

@media (min-width: 768px) {
	.sc-hero-slide__cta { padding: 11px 22px; font-size: 1.4rem; margin-top: 8px; }
}

/* ---------- 3.2 Sidebanners (2 kolommen, ratio 2,2:1) ---------- */

.sc-home-banners {
	display: grid;
	grid-template-columns: 1fr;
	gap: 5px;
	margin-top: 5px;
}
@media (min-width: 768px) {
	.sc-home-banners { grid-template-columns: 1fr 1fr; }
}

.sc-home-banner {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	aspect-ratio: 2.2 / 1;
	border-radius: var(--sc-radius-m);
	overflow: hidden;
	padding: 18px 24px;
	color: #fff;
}
.sc-home-banner:hover { color: #fff; }

.sc-home-banner--club { background: linear-gradient(115deg, var(--sc-brand) 25%, var(--sc-brand-dark)); }
.sc-home-banner--shipping { background: linear-gradient(115deg, var(--sc-success), var(--sc-brand)); }

.sc-home-banner__icon {
	position: absolute;
	right: -18px;
	bottom: -24px;
	color: #fff;
	opacity: .15;
	pointer-events: none;
}
.sc-home-banner__icon .sc-icon { width: 150px; height: 150px; }

.sc-home-banner__title {
	position: relative;
	font-family: var(--sc-font-heading);
	font-weight: 700;
	font-size: 2.2rem;
	line-height: 1.15;
}
.sc-home-banner__sub {
	position: relative;
	margin-top: 4px;
	max-width: 80%;
	font-size: 1.3rem;
	opacity: .92;
}
.sc-home-banner__cta {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 10px;
	font-weight: 700;
	font-size: 1.3rem;
}
.sc-home-banner:hover .sc-home-banner__cta { text-decoration: underline; }

/* ---------- 3.3 Pills-blok "Voor wie shop je?" (alleen mobiel) ---------- */

@media (min-width: 768px) {
	.sc-home-pills { display: none; }
}

.sc-home-pills__list { display: flex; flex-wrap: wrap; gap: 8px; }

.sc-home-pills__pill { padding: 10px 16px; font-size: 1.3rem; }
.sc-home-pills__pill--sale { background: var(--sc-sale); }
.sc-home-pills__pill--sale:hover { background: var(--sc-sale); opacity: .9; }

/* ---------- 3.5 Communicatierij: 4 staande banners (3:4) ---------- */

.sc-home-promo__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
}
@media (min-width: 768px) {
	.sc-home-promo__grid { grid-template-columns: repeat(4, 1fr); }
}

.sc-promotile {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	aspect-ratio: 3 / 4;
	border-radius: var(--sc-radius-m);
	overflow: hidden;
	padding: 16px;
	color: #fff;
}
.sc-promotile:hover { color: #fff; }

@media (min-width: 992px) {
	.sc-promotile { padding: 20px; }
}

.sc-promotile--hond { background: linear-gradient(160deg, var(--sc-brand), var(--sc-brand-dark)); }
.sc-promotile--kat { background: linear-gradient(160deg, var(--sc-sale), var(--sc-cta)); }
.sc-promotile--cadeau { background: linear-gradient(160deg, var(--sc-warning), var(--sc-accent)); color: var(--sc-text); }
.sc-promotile--cadeau:hover { color: var(--sc-text); }
.sc-promotile--nieuwsbrief { background: linear-gradient(160deg, var(--sc-info), var(--sc-brand)); }

.sc-promotile__bigicon {
	position: absolute;
	top: 6%;
	right: -12%;
	opacity: .16;
	pointer-events: none;
}
.sc-promotile__bigicon .sc-icon { width: 130px; height: 130px; }

.sc-promotile__kicker {
	position: relative;
	font-size: 1.1rem;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: .08em;
	opacity: .85;
}
.sc-promotile__title {
	position: relative;
	font-family: var(--sc-font-heading);
	font-weight: 700;
	font-size: 2rem;
	line-height: 1.15;
	margin-top: 2px;
}
.sc-promotile__sub {
	position: relative;
	margin-top: 4px;
	font-size: 1.25rem;
	opacity: .92;
}
.sc-promotile__cta {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 10px;
	padding: 7px 14px;
	border-radius: var(--sc-radius-pill);
	background: #fff;
	color: var(--sc-text);
	font-weight: 700;
	font-size: 1.2rem;
	line-height: 1;
	transition: transform .2s ease-out;
}
.sc-promotile:hover .sc-promotile__cta { transform: translateX(3px); }

/* ---------- 3.7 UGC-blok #snuffelenco ---------- */

.sc-home-ugc__title { text-align: center; font-size: 2rem; margin-bottom: 18px; }
@media (min-width: 768px) {
	.sc-home-ugc__title { font-size: 2.2rem; }
}

.sc-home-ugc__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}
@media (min-width: 768px) {
	.sc-home-ugc__grid { grid-template-columns: repeat(6, 1fr); }
}

.sc-ugctile {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	border-radius: var(--sc-radius-m);
	overflow: hidden;
	color: #fff;
}
.sc-ugctile .sc-icon { width: 42%; height: 42%; opacity: .4; }

.sc-ugctile--t1 { background: linear-gradient(135deg, var(--sc-brand), var(--sc-brand-dark)); }
.sc-ugctile--t2 { background: linear-gradient(135deg, var(--sc-accent), var(--sc-cta)); }
.sc-ugctile--t3 { background: linear-gradient(135deg, var(--sc-info), var(--sc-brand)); }
.sc-ugctile--t4 { background: linear-gradient(135deg, var(--sc-sale), var(--sc-warning)); }
.sc-ugctile--t5 { background: linear-gradient(135deg, var(--sc-success), var(--sc-brand-dark)); }
.sc-ugctile--t6 { background: linear-gradient(135deg, var(--sc-cta-hover), var(--sc-sale)); }

.sc-ugctile__user {
	position: absolute;
	left: 8px;
	bottom: 8px;
	padding: 3px 9px;
	border-radius: var(--sc-radius-pill);
	background: var(--sc-overlay);
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.4;
}

.sc-home-ugc__foot { text-align: center; margin-top: 18px; }

/* ---------- 3.8 Adviesblok (blogteasers) ---------- */

.sc-home-blog__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px 15px;
}
@media (min-width: 768px) {
	.sc-home-blog__grid { grid-template-columns: repeat(4, 1fr); gap: 24px; }
}

.sc-blogteaser { display: block; }
.sc-blogteaser:hover { color: var(--sc-text); }

.sc-blogteaser__media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	border-radius: var(--sc-radius-m);
	overflow: hidden;
	background: var(--sc-brand-light);
	color: var(--sc-brand);
	transition: box-shadow .2s ease-out;
}
.sc-blogteaser__media img { width: 100%; height: 100%; object-fit: cover; }
.sc-blogteaser:hover .sc-blogteaser__media { box-shadow: var(--sc-shadow-card); }

.sc-blogteaser h3 { font-size: 1.8rem; margin: 10px 0 0; }
.sc-blogteaser:hover h3 { text-decoration: underline; }

/* ---------- 3.9 Merkenblok ---------- */

.sc-home-brands__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}
@media (min-width: 768px) {
	.sc-home-brands__grid { grid-template-columns: repeat(6, 1fr); gap: 16px; }
}

.sc-home-brands__foot { text-align: center; margin-top: 20px; }

/* ---------- 3.10 SEO-tekstblok ---------- */

.sc-home-seo {
	background: var(--sc-bg-alt);
	padding: 44px 0 52px;
}
.sc-home-seo h2 { margin-bottom: 24px; }

.sc-home-seo__cols { display: grid; grid-template-columns: 1fr; gap: 0 48px; }
@media (min-width: 768px) {
	.sc-home-seo__cols { grid-template-columns: 1fr 1fr; }
}

.sc-home-seo h4 { margin: 18px 0 6px; }
.sc-home-seo__col h4:first-child { margin-top: 0; }
@media (max-width: 767px) {
	.sc-home-seo__col + .sc-home-seo__col h4:first-child { margin-top: 18px; }
}

.sc-home-seo p { margin: 0 0 14px; }
.sc-home-seo p a { text-decoration: underline; }
.sc-home-seo p a:hover { color: var(--sc-brand); }