/**
 * Gaya Cosmetics — באנר ראשי (הירו)
 *
 * התמונה היא רקע נקי בלבד; הכותרת, תת-הכותרת, הכפתור והכוכבים הם טקסט אמיתי
 * שיושב מעליה בשכבה מוחלטת. כל הגדלים ב-vw כדי שהטקסט יתכווץ ויתרחב באותו יחס
 * שבו התמונה עצמה מתכווצת — כך היחס בין הטקסט לתמונה נעול בכל רוחב מסך,
 * בדיוק כמו שהיה כשהטקסט היה צרוב בקובץ.
 *
 * מבנה: front-page-template.php · שדות: inc/custom/hero-fields.php
 * @package Gaya Cosmetics
 */

/* ------------------------------------------------------------------
   הסקשן — נקודות הכיול
   ------------------------------------------------------------------ */

.gaya-hero {
	--gaya-hero-accent: #4c312f;         /* כותרת, תת-כותרת וכפתור · נדרס ב-style inline משדה ה-ACF */
	--gaya-hero-on-accent: #eee6da;      /* טקסט על הכפתור המלא — קרם המותג על החום */
	--gaya-hero-stars: #B49270;          /* הכוכבים בלבד נשארים בגוון הזהב */

	/* כיול מיקום גוש הטקסט מול התמונה. אם תמונת רקע חדשה מזיזה את המוצרים —
	   משנים כאן, לא בכל כלל בנפרד. */
	--gaya-hero-pad-inline: 6%;          /* דסקטופ: מרווח מקצה התמונה */
	--gaya-hero-max-width: 42%;          /* דסקטופ: רוחב מרבי לגוש הטקסט */
	--gaya-hero-pad-block-end: 4.5%;       /* מובייל: מרחק מתחתית התמונה */
	--gaya-hero-mobile-max-width: 88%;   /* מובייל: רוחב מרבי לגוש הטקסט */

	position: relative;
}

.gaya-hero .gaya-hero__slide {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
}

/* ------------------------------------------------------------------
   תמונת הרקע
   ------------------------------------------------------------------ */

.gaya-hero .gaya-hero__media {
	display: block;
}

/* ה-CSS של המתאם כופה על ‎.homepage-banners img‎ ערך aspect-ratio (במובייל
 * ‎5/6 עם !important‎). תמונת רקע חדשה ביחס אחר הייתה נמתחת. הכלל הזה ספציפי
 * יותר (0,2,1 מול 0,1,1) ומחזיר את היחס האמיתי של הקובץ. */
.gaya-hero .gaya-hero__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: auto !important;
	transform: none !important;
}

/* ------------------------------------------------------------------
   שכבת הטקסט
   ------------------------------------------------------------------ */

.gaya-hero .gaya-hero__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	padding-inline: var(--gaya-hero-pad-inline);
	/* התמונה שמתחת נשארת לחיצה כשמוגדר קישור על כל הבאנר */
	pointer-events: none;
	/* ltr רק כדי ש-flex-start/flex-end יהיו חד-משמעיים; הטקסט עצמו חוזר ל-rtl */
	direction: ltr;
}

.gaya-hero .gaya-hero__slide--right .gaya-hero__overlay  { justify-content: flex-end; }
.gaya-hero .gaya-hero__slide--center .gaya-hero__overlay { justify-content: center; }
.gaya-hero .gaya-hero__slide--left .gaya-hero__overlay   { justify-content: flex-start; }

.gaya-hero .gaya-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;   /* ב-rtl זהו הצד הימני */
	direction: rtl;
	max-width: var(--gaya-hero-max-width);
	text-align: right;
	pointer-events: auto;
}

.gaya-hero .gaya-hero__slide--center .gaya-hero__inner {
	align-items: center;
	text-align: center;
}

/* ------------------------------------------------------------------
   טיפוגרפיה
   ------------------------------------------------------------------ */

.gaya-hero .gaya-hero__title {
	margin: 0;
	font-family: "Tubic-Sans", "Heebo", sans-serif;
	font-weight: 700;
	font-size: clamp(18px, 2.15vw, 44px);
	line-height: 1.15;
	letter-spacing: 0.01em;
	color: var(--gaya-hero-accent);
}

.gaya-hero .gaya-hero__subtitle {
	margin: 0.55em 0 0;
	font-family: "Tubic-Sans", "Heebo", sans-serif;
	font-weight: 400;
	font-size: clamp(16px, 1.95vw, 40px);
	line-height: 1.35;
	color: var(--gaya-hero-accent);
}

/* ------------------------------------------------------------------
   כפתור
   ------------------------------------------------------------------ */

.gaya-hero .gaya-hero__cta {
	display: inline-block;
	margin-top: 1.5em;
	padding: 0.62em 2.1em;
	border: 1px solid var(--gaya-hero-accent);
	border-radius: 0;
	font-family: "Tubic-Sans", "Heebo", sans-serif;
	font-weight: 500;
	font-size: clamp(14px, 1.5vw, 30px);
	line-height: 1.25;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.gaya-hero .gaya-hero__cta--solid {
	background-color: var(--gaya-hero-accent);
	color: var(--gaya-hero-on-accent);
}

.gaya-hero .gaya-hero__cta--solid:hover {
	background-color: transparent;
	color: var(--gaya-hero-accent);
}

.gaya-hero .gaya-hero__cta--outline {
	background-color: transparent;
	color: var(--gaya-hero-accent);
}

.gaya-hero .gaya-hero__cta--outline:hover {
	background-color: var(--gaya-hero-accent);
	color: var(--gaya-hero-on-accent);
}

.gaya-hero .gaya-hero__cta:focus-visible {
	outline: 2px solid var(--gaya-hero-accent);
	outline-offset: 3px;
}

/* ------------------------------------------------------------------
   5 כוכבים + דירוג
   ------------------------------------------------------------------ */

.gaya-hero .gaya-hero__rating {
	display: flex;
	align-items: center;
	gap: 0.6em;
	margin-top: 1.2em;
	font-size: clamp(12px, 1.05vw, 20px);
	color: var(--gaya-hero-stars);
}

.gaya-hero .gaya-hero__stars {
	position: relative;
	display: inline-block;
	flex: none;
	line-height: 0;
	/* מילוי חלקי תמיד נמדד משמאל לימין, כמו בכל תצוגת דירוג */
	direction: ltr;
}

.gaya-hero .gaya-hero__star {
	display: inline-block;
	width: 1.35em;
	height: 1.35em;
	vertical-align: middle;
}

.gaya-hero .gaya-hero__stars-track {
	display: block;
	opacity: 0.3;
}

.gaya-hero .gaya-hero__stars-fill {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	display: block;
	width: var(--gaya-hero-star-fill, 100%);
	overflow: hidden;
	white-space: nowrap;
}

.gaya-hero .gaya-hero__rating-text {
	font-weight: 500;
}

/* ------------------------------------------------------------------
   קישור על כל הבאנר (רק כשאין כפתור)
   ------------------------------------------------------------------ */

.gaya-hero .gaya-hero__link {
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* ------------------------------------------------------------------
   מובייל — הטקסט ממורכז בחלק התחתון של התמונה
   ------------------------------------------------------------------ */

@media (max-width: 768px) {

	.gaya-hero .gaya-hero__slide .gaya-hero__overlay {
		align-items: flex-end;
		justify-content: center;
		padding-inline: 6%;
		padding-block-end: var(--gaya-hero-pad-block-end);
	}

	.gaya-hero .gaya-hero__slide .gaya-hero__inner {
		align-items: center;
		max-width: var(--gaya-hero-mobile-max-width);
		text-align: center;
	}

	/* בתמונת המובייל המוצרים תופסים את החלק העליון ונשאר פס ריק בתחתית.
	 * הגדלים כאן מכוילים כך שכל הגוש — כותרת בשתי שורות, תת-כותרת, כפתור
	 * וכוכבים — נכנס לתוך הפס הריק ולא מטפס על המוצרים. */
	.gaya-hero .gaya-hero__title {
		font-size: clamp(16px, 4.6vw, 30px);
	}

	.gaya-hero .gaya-hero__subtitle {
		margin-top: 0.4em;
		font-size: clamp(14px, 4.05vw, 26px);
	}

	.gaya-hero .gaya-hero__cta {
		margin-top: 0.95em;
		padding: 0.6em 1.8em;
		font-size: clamp(12px, 3.5vw, 22px);
	}

	.gaya-hero .gaya-hero__rating {
		justify-content: center;
		margin-top: 0.9em;
		font-size: clamp(9px, 2.7vw, 16px);
	}
}

@media (prefers-reduced-motion: reduce) {

	.gaya-hero .gaya-hero__cta {
		transition: none;
	}
}