/* ==========================================================================
   עמוד "אריחי פורצלן מורחבים" — template-porcelain.php (Figma 868:10816)
   Milestone 1: HERO · בלוק פתיחה · נתונים
   ========================================================================== */

.porc-page {
	font-family: var(--nzm-header-font);
	background: #fff;
	color: #000;
	overflow-x: clip;
}

.porc-container {
	width: min(1595px, 100% - 48px);
	margin-inline: auto;
}

/* ---------------- A. HERO (style: marble-type stone-hero) ---------------- */
.porc-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;
}

.porc-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	background-color: #2b2b2b;
	background-size: cover;
	background-position: center;
}

.porc-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%);
}

.porc-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: 0.95;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.porc-hero__crumbs-home { display: inline-flex; align-items: center; color: #fff; line-height: 0; }
.porc-hero__crumbs-home svg { display: block; width: 13px; height: 13px; }
.porc-hero__crumbs-sep { opacity: 0.7; }
.porc-hero__crumbs-current { font-weight: 500; }

.porc-hero__content {
	position: relative;
	z-index: 1;
	width: min(1600px, 100% - 48px);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 28px;
}

.porc-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, 0.9);
}

.porc-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, 0.9);
}

.porc-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: #fff;
	color: #000;
	border: 1px solid rgba(255, 255, 255, 0.5);
	padding: 16px 32px;
	font-weight: 500;
	font-size: 20px;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.porc-hero__cta:hover { background: transparent; color: #fff; }
.porc-hero__cta-arrow { display: inline-flex; }
.porc-hero__cta-arrow svg { display: block; }

.porc-hero__scroll-line {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 1px;
	height: 80px;
	background-color: rgba(255, 255, 255, 0.15);
	overflow: hidden;
	z-index: 4;
	pointer-events: none;
}

.porc-hero__scroll-line::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: #fff;
	animation: nzm-scroll-line 2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@media (min-width: 1351px) {
	.porc-hero__crumbs { top: calc(var(--nzm-header-h-desktop, 168px) + 24px); }
}

/* ---------------- B. בלוק פתיחה (טקסט + תמונה) ---------------- */
.porc-intro { padding: clamp(48px, 6vw, 96px) 0; background: #fff; }

.porc-intro__inner {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: clamp(32px, 5vw, 90px);
}

.porc-intro__text { flex: 1 1 50%; text-align: right; }
.porc-intro__media { flex: 1 1 50%; }
.porc-intro__media img { display: block; width: 100%; height: auto; border-radius: 4px; object-fit: cover; }

.porc-intro__heading {
	margin: 0 0 24px;
	font-weight: 300;
	font-size: clamp(32px, 4.3vw, 56px);
	line-height: 1.08;
	color: #000;
}

.porc-intro__body { font-weight: 400; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.45; color: #000; }
.porc-intro__body p { margin: 0 0 14px; }
.porc-intro__body p:last-child { margin-bottom: 0; }

/* ---------------- C. נתונים (Stats) ---------------- */
.porc-stats { padding: clamp(8px, 2vw, 24px) 0 clamp(40px, 5vw, 70px); background: #fff; }

.porc-stats__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.porc-stat {
	border: 1px solid var(--nzm-border-light, rgba(0, 0, 0, 0.15));
	border-radius: 6px;
	padding: 28px 24px;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.porc-stat__value { font-weight: 400; font-size: clamp(34px, 3.8vw, 50px); line-height: 1.1; color: #000; }
.porc-stat__label { font-weight: 400; font-size: clamp(16px, 1.5vw, 18px); line-height: 1.3; color: var(--nzm-text-dark-gray, #3e3e3e); }

/* ---------------- Responsive ---------------- */
@media (max-width: 1024px) {
	.porc-intro__inner { flex-direction: column; align-items: stretch; }
	.porc-intro__text { text-align: right; }
	.porc-stats__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
	.porc-hero__cta { font-size: 17px; padding: 14px 24px; }
}

/* ---------------- Shared section headings ---------------- */
.porc-section-title {
	margin: 0;
	font-weight: 300; /* Ploni Light */
	font-size: clamp(32px, 4.3vw, 56px);
	line-height: 1.12;
	text-align: center;
	color: #000;
}

.porc-section-sub {
	margin: 18px auto 0;
	max-width: 1100px;
	font-weight: 400;
	font-size: clamp(16px, 1.6vw, 21px);
	line-height: 1.36;
	text-align: center;
	color: #000;
}

/* "חומר אחד, כל הבית" — כותרת 60 / sub 22 (שונה מ-56/21 של שאר הסקציות) */
.porc-uses .porc-section-title { font-size: clamp(34px, 4.6vw, 60px); }
.porc-uses .porc-section-sub { font-size: clamp(17px, 1.7vw, 22px); }

/* ---------------- C+D. מותגים ---------------- */
.porc-brands { padding: clamp(48px, 6vw, 90px) 0; background: #fff; }
.porc-brands__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
	margin-top: clamp(32px, 4vw, 56px);
}

.porc-brand {
	display: flex;
	flex-direction: column;
	border: 1px solid #d4d4d4;
	background: #fff;
	overflow: hidden;
}

.porc-brand__media { aspect-ratio: 427 / 349; overflow: hidden; }
.porc-brand__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.porc-brand__body {
	border-top: 2px solid #000;
	padding: 26px 30px 32px;
	text-align: right;
	flex: 1 1 auto;
}

.porc-brand__title {
	margin: 0 0 14px;
	font-weight: 400;
	font-size: clamp(30px, 3.2vw, 42px);
	line-height: 1.2;
	text-align: center;
	color: #000;
}

.porc-brand__desc {
	margin: 0 0 18px;
	font-weight: 400;
	font-size: clamp(17px, 1.6vw, 21px);
	line-height: 1.25;
	color: #000;
}

.porc-brand__bullets {
	margin: 0;
	padding-inline-start: 22px;
	list-style: disc;
}

.porc-brand__bullets li {
	margin-bottom: 8px;
	font-size: clamp(15px, 1.4vw, 18px);
	line-height: 1.45;
	color: #000;
}
.porc-brand__bullets li:last-child { margin-bottom: 0; }

/* ---------------- E. "חומר אחד, כל הבית" ---------------- */
.porc-uses { padding: clamp(48px, 6vw, 90px) 0 clamp(56px, 7vw, 110px); background: #fff; }
.porc-uses .porc-container { width: min(1880px, 100% - 32px); }

.porc-uses__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 13px;
	margin-top: clamp(32px, 4vw, 56px);
}

.porc-use {
	position: relative;
	aspect-ratio: 470 / 680;
	border-radius: 2px;
	overflow: hidden;
	background-color: #d9d9d9;
	background-size: cover;
	background-position: center;
	display: block;
}

.porc-use__overlay {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	top: 45%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 28px 28px 30px;
	color: #fff;
	text-align: right;
	background: linear-gradient(180deg, rgba(11, 11, 11, 0) 0%, rgba(11, 11, 11, 0.72) 55%, #0b0b0b 100%);
}

.porc-use__title {
	margin: 0 0 8px;
	font-weight: 300;
	font-size: clamp(26px, 2.9vw, 38px);
	line-height: 1.2;
}

.porc-use__desc {
	margin: 0;
	font-weight: 300;
	font-size: clamp(16px, 1.6vw, 21px);
	line-height: 1.25;
}

/* ---------------- Responsive (C/D/E) ---------------- */
@media (max-width: 1024px) {
	.porc-brands__grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
	.porc-uses__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

@media (max-width: 560px) {
	.porc-use__title { font-size: 20px; }
	.porc-use__desc { font-size: 14px; }
	.porc-brand__body { padding: 22px 22px 26px; }
}

/* ---------------- F. היתרונות שעושים את ההבדל ---------------- */
.porc-adv { padding: clamp(40px, 5vw, 80px) 0; background: #fff; }
.porc-adv__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: 40px 18px;
	margin-top: clamp(36px, 4vw, 60px);
}
.porc-adv__card { flex: 0 1 196px; max-width: 236px; text-align: right; }
.porc-adv__icon { min-height: 84px; display: flex; align-items: flex-end; justify-content: flex-start; margin-bottom: 16px; }
.porc-adv__icon img { display: block; width: auto; height: auto; max-height: 74px; max-width: 110px; color: #1d1d1b; }
.porc-adv__title { margin: 0; font-weight: 500; font-size: clamp(20px, 2vw, 26px); line-height: 1.16; color: #000; }
.porc-adv__text { margin: 12px 0 0; font-weight: 400; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.45; color: #000; }

@media (min-width: 1025px) and (max-width: 1400px) {
	.porc-adv__grid { justify-content: center; gap: 40px 32px; }
	.porc-adv__card { flex: 0 0 calc(33.333% - 24px); max-width: calc(33.333% - 24px); }
}
@media (max-width: 1024px) {
	.porc-adv__grid { justify-content: center; gap: 36px 20px; }
	.porc-adv__card { flex: 0 0 calc(50% - 10px); max-width: calc(50% - 10px); }
	.porc-adv__icon { min-height: 64px; }
	.porc-adv__icon img { max-height: 56px; }
}

/* ---------------- G. FAQ ---------------- */
.porc-faq { padding: clamp(40px, 5vw, 70px) 0 clamp(56px, 7vw, 100px); background: #fff; }
.porc-faq__title { margin-bottom: clamp(28px, 3vw, 44px); }
.porc-faq__list { width: min(800px, 100%); margin-inline: auto; }

.porc-faq__item { border-bottom: 1px solid var(--nzm-border-light, rgba(0, 0, 0, 0.15)); }

.porc-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 4px;
	cursor: pointer;
	list-style: none;
	font-weight: 500;
	font-size: clamp(17px, 1.5vw, 22px);
	line-height: 1.3;
	color: #000;
	text-align: right;
}
.porc-faq__q::-webkit-details-marker { display: none; }
.porc-faq__q-text { flex: 1 1 auto; }
.porc-faq__icon { flex: 0 0 auto; display: inline-flex; color: #000; transition: transform 0.25s ease; }
.porc-faq__item[open] .porc-faq__icon { transform: rotate(45deg); }

.porc-faq__a {
	padding: 0 4px 24px;
	font-weight: 400;
	font-size: clamp(15px, 1.4vw, 18px);
	line-height: 1.55;
	color: var(--nzm-text-dark-gray, #3e3e3e);
	text-align: right;
}
.porc-faq__a p { margin: 0 0 10px; }
.porc-faq__a p:last-child { margin-bottom: 0; }