/* ==========================================================================
   עמוד "סוגי השיש הנפוצים" — template-stone-types.php (Figma 868:13211)
   HERO + שורות סוג-שיש (מוצרים נבחרים + קישור לקטגוריה) + טבלת השוואה
   ========================================================================== */

.st-page { font-family: var(--nzm-header-font); background: #fff; color: #000; overflow-x: clip; }
.st-container { width: min(1600px, 100% - 48px); margin-inline: auto; }

/* ---------------- HERO (style: stone-hero) ---------------- */
.st-hero {
	position: relative; isolation: isolate; width: 100%;
	min-height: 100vh; min-height: 100dvh;
	display: flex; flex-direction: column; justify-content: center; align-items: center;
	padding-block: clamp(96px, 12vw, 140px);
	color: #fff; text-align: center; overflow: hidden;
}
.st-hero__bg { position: absolute; inset: 0; z-index: -2; background-color: #2b2b2b; background-size: cover; background-position: center; }
.st-hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 45%, rgba(0,0,0,0.7) 100%); }
.st-hero__crumbs {
	position: absolute; top: calc(var(--nzm-header-h-mobile, 72px) + 18px);
	inset-inline-start: max(24px, calc((100vw - 1826px) / 2 + 50px));
	font-size: clamp(13px, 1vw, 15px); color: #fff; opacity: .95; z-index: 2;
	display: inline-flex; align-items: center; gap: 8px;
}
.st-hero__crumbs-home { display: inline-flex; align-items: center; color: #fff; line-height: 0; }
.st-hero__crumbs-home svg { display: block; width: 13px; height: 13px; }
.st-hero__crumbs-sep { opacity: .7; }
.st-hero__crumbs-current { font-weight: 500; }
.st-hero__content { position: relative; z-index: 1; width: min(1600px, 100% - 48px); display: flex; flex-direction: column; align-items: center; gap: 26px; }
.st-hero__title { margin: 0; font-weight: 300; font-size: clamp(40px, 6vw, 80px); line-height: 1.05; text-shadow: 0 4px 40px rgba(0,0,0,.9); }
.st-hero__lead { margin: 0; max-width: 1060px; font-weight: 300; font-size: clamp(20px, 2.5vw, 32px); line-height: 1.2; text-shadow: 0 4px 40px rgba(0,0,0,.9); }
.st-hero__scroll-line { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 1px; height: 80px; background-color: rgba(255,255,255,.15); overflow: hidden; z-index: 4; pointer-events: none; }
.st-hero__scroll-line::after { content: ""; position: absolute; inset: 0; background-color: #fff; animation: nzm-scroll-line 2s cubic-bezier(.65,0,.35,1) infinite; }
@media (min-width: 1351px) { .st-hero__crumbs { top: calc(var(--nzm-header-h-desktop, 168px) + 24px); } }

/* ---------------- שורת סוג-שיש ---------------- */
.st-row { padding: clamp(40px, 5vw, 72px) 0; background: #fff; }
.st-row--alt { background: #fafafa; }
.st-row__inner { display: flex; flex-direction: row; align-items: center; gap: clamp(32px, 4vw, 76px); }
/* שורות לסירוגין: רגיל = טקסט ימין/מוצרים שמאל; alt = מוצרים ימין/טקסט שמאל */
.st-row--alt .st-row__inner { flex-direction: row-reverse; }
.st-row__text { flex: 0 0 37%; max-width: 587px; text-align: right; }
.st-row__products { flex: 1 1 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

.st-row__title { margin: 0 0 18px; font-weight: 300; font-size: clamp(32px, 4.3vw, 56px); line-height: 1.07; color: #000; }
.st-row__desc { margin: 0 0 22px; font-weight: 400; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.45; color: #000; }
.st-row__features { margin: 0 0 26px; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }
.st-row__features li { position: relative; padding-inline-start: 18px; font-weight: 400; font-size: clamp(16px, 1.5vw, 21px); line-height: 1.3; color: #000; }
.st-row__features li::before { content: "•"; position: absolute; inset-inline-start: 0; }
.st-row__link { display: inline-flex; align-items: center; gap: 12px; border: 1px solid #000; padding: 15px 28px; font-weight: 500; font-size: clamp(16px, 1.5vw, 20px); color: #000; text-decoration: none; transition: background-color .2s ease, color .2s ease; }
.st-row__link:hover { background: #000; color: #fff; }
.st-row__link-arrow { display: inline-flex; }

/* product card */
.st-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.st-card__media { aspect-ratio: 295 / 417; overflow: hidden; background: #eee; }
.st-card__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.st-card:hover .st-card__img { transform: scale(1.04); }
.st-card__caption { background: #f9f9f9; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; text-align: right; }
.st-card__name { font-weight: 400; font-size: clamp(18px, 1.6vw, 24px); line-height: 1.2; color: #000; }
.st-card__type { font-weight: 400; font-size: clamp(14px, 1.2vw, 18px); color: #656565; }

/* ---------------- טבלת השוואה ---------------- */
.st-compare { padding: clamp(48px, 6vw, 90px) 0; background: #fff; }
.st-compare__title { margin: 0; font-weight: 300; font-size: clamp(32px, 4.3vw, 56px); line-height: 1.12; text-align: center; color: #000; }
.st-compare__sub { margin: 16px auto clamp(28px, 3vw, 44px); max-width: 950px; font-weight: 400; font-size: clamp(16px, 1.6vw, 21px); line-height: 1.36; text-align: center; color: #000; }
.st-compare__scroll { overflow-x: auto; }
.st-compare__table { width: 100%; border-collapse: collapse; min-width: 760px; text-align: right; }
.st-compare__table th, .st-compare__table td { padding: 16px 18px; border-bottom: 1px solid var(--nzm-border-light, rgba(0,0,0,.12)); font-size: clamp(14px, 1.2vw, 17px); line-height: 1.35; vertical-align: middle; }
.st-compare__table thead th { background: #1a1a1a; color: #fff; font-weight: 500; border-bottom: 0; }
.st-compare__table thead th:first-child { border-start-start-radius: 8px; }
.st-compare__table thead th:last-child { border-start-end-radius: 8px; }
.st-compare__table tbody tr:nth-child(even) { background: #fafafa; }
.st-compare__type { font-weight: 500; color: #000; white-space: nowrap; }

/* ---------------- Responsive ---------------- */
@media (max-width: 1024px) {
	.st-row__inner,
	.st-row--alt .st-row__inner { flex-direction: column; align-items: stretch; gap: 28px; }
	.st-row__text { flex-basis: auto; max-width: none; }
	/* מובייל: שורה אחת של מוצרים עם גלילה הצידה */
	.st-row__products {
		display: flex;
		grid-template-columns: none;
		gap: 14px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
		margin-inline: -4px;
		padding: 0 4px 10px;
	}
	.st-row__products > .st-card {
		flex: 0 0 62%;
		max-width: 280px;
		scroll-snap-align: start;
	}
}
@media (max-width: 560px) {
	.st-row__features { grid-template-columns: 1fr; }
	.st-row__link { width: 100%; justify-content: center; }
}

/* דירוג כוכבים בטבלת ההשוואה */
.st-compare__stars { white-space: nowrap; }
.st-stars { display: inline-flex; align-items: center; gap: 3px; }
.st-star { display: block; width: 18px; height: 17px; flex: 0 0 auto; }

/* HERO — טקסט נוסף + pills (קישורי עוגן לשורות) */
.st-hero__text2 { margin: -6px 0 0; max-width: 1000px; font-weight: 400; font-size: clamp(16px, 1.6vw, 21px); line-height: 1.4; color: #fff; text-shadow: 0 4px 40px rgba(0,0,0,.9); }
.st-hero__pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }
.st-hero__pill {
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid #d7d7d7; border-radius: 30px;
	padding: 11px 24px; min-height: 44px; box-sizing: border-box;
	font-weight: 400; font-size: clamp(16px, 1.4vw, 21px); line-height: 1;
	color: #fff; text-decoration: none; white-space: nowrap;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.st-hero__pill:hover, .st-hero__pill:focus-visible { background: #fff; color: #000; border-color: #fff; opacity: 1; }

/* גלילה חלקה לעוגני השורות + קיזוז ההדר הקבוע */
.st-row { scroll-margin-top: clamp(84px, 12vh, 150px); }
html { scroll-behavior: smooth; }