/**
 * About page — "אודות המחדש".
 *
 * Layout (desktop, from Figma node 757:27883):
 *   ┌─────────────────────────────────────────────────────────┐
 *   │ [intro paragraph]    │  [vertical line]   [אודות המחדש] │
 *   ├─────────────────────────────────────────────────────────┤
 *   │ [logo marquee →]     │  [vertical line]   [בין לקוחותינו]│
 *   ├─────────────────────────────────────────────────────────┤
 *   │ [large CTA + phone + email]                              │
 *   └─────────────────────────────────────────────────────────┘
 *
 *   80px top, 150px bottom, 67px gap between blocks (Figma).
 *
 * @package Hamechadesh
 */

/* ==========================================================================
   Container
   ========================================================================== */

.hm-about {
	background-color: var(--hm-color-bg);
	padding-block-start: 80px;
	padding-block-end: 150px;
	overflow-x: clip; /* lets the logo marquee bleed past the container edges
	                     without forcing a horizontal scrollbar on the body */
}

.hm-about__inner {
	display: flex;
	flex-direction: column;
	gap: 67px;
	padding-inline: var(--hm-container-padding);
}

/* ==========================================================================
   Shared title (right column) + intro / clients row layout
   ========================================================================== */

.hm-about__intro,
.hm-about__clients {
	display: flex;
	align-items: center;
	justify-content: flex-start; /* RTL: flex-start = right; title sits at the start */
	gap: 49px;
	width: 100%;
}

/* DOM order matches Figma visual order in RTL:
   1st child = rightmost (the title), 2nd = divider, 3rd = leftmost (body content). */
.hm-about__heading {
	color: var(--hm-color-primary);
	font-family: var(--hm-font-primary);
	font-weight: 900;
	font-size: 55px;
	line-height: 51px;
	letter-spacing: 0;
	text-align: end;
	white-space: nowrap;
	margin: 0;
	flex-shrink: 0;
}

.hm-about__heading-line {
	display: block;
}

/* Vertical divider line — 87px tall, 1px wide, #D9D9D9. */
.hm-about__divider {
	display: block;
	width: 1px;
	height: 87px;
	background-color: #D9D9D9;
	flex-shrink: 0;
}

/* ==========================================================================
   Intro paragraph (left side in RTL)
   ========================================================================== */

.hm-about__intro-text {
	flex: 1;
	min-width: 0;
	max-width: 704px;
	font-family: var(--hm-font-primary);
	font-weight: 300;
	font-size: 16px;
	line-height: 22.115px;
	color: #000;
	text-align: start;
}

.hm-about__intro-text p {
	margin: 0;
}

.hm-about__intro-text p + p {
	margin-top: 22.115px; /* one line-height of vertical rhythm */
}

.hm-about__intro-brand {
	color: inherit;
	text-decoration: underline;
}

.hm-about__intro-brand:hover {
	color: var(--hm-color-link);
}

/* ==========================================================================
   Logo slider — "בין לקוחותינו"

   The track is laid out as two identical sets side-by-side and animated
   with a CSS keyframe that translates by exactly -50% of the track width
   over the cycle. Because each set is a duplicate of the other, the seam
   between them is invisible and the marquee loops seamlessly.

   IMPORTANT: we force `direction: ltr` on the slider container. The
   surrounding page is RTL, but an overflowing flex track inside an RTL
   parent gets anchored to the RIGHT edge of its container — translating
   it -50% then pushes the entire track off the left side of the viewport
   and the marquee breaks. Scoping the slider to LTR also matches the
   Figma source (where the first logo in the stack is the leftmost one)
   and gives us the natural right→left visual flow that feels right
   alongside Hebrew reading direction.
   ========================================================================== */

.hm-about__slider {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	direction: ltr;
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 80px,
		#000 calc(100% - 80px),
		transparent 100%
	);
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 80px,
		#000 calc(100% - 80px),
		transparent 100%
	);
}

.hm-about__slider-track {
	display: flex;
	width: max-content;
	animation: hm-about-marquee 40s linear infinite;
	will-change: transform;
}

.hm-about__slider-track:hover {
	animation-play-state: paused;
}

.hm-about__slider-set {
	display: flex;
	align-items: center;
	gap: 96px;
	padding-inline: 48px;
	list-style: none;
	margin: 0;
	flex-shrink: 0;
}

.hm-about__slider-item {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 104px;
	flex-shrink: 0;
	opacity: 0.6;
}

.hm-about__slider-img {
	display: block;
	width: auto;
	max-height: 104px;
	max-width: 312px;
	object-fit: contain;
}

@keyframes hm-about-marquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.hm-about__slider-track {
		animation: none;
	}
}

/* ==========================================================================
   CTA copy (full-width row)
   ========================================================================== */

.hm-about__cta {
	width: 100%;
	color: var(--hm-color-primary);
	font-family: var(--hm-font-primary);
	font-weight: 300;
	font-size: 55px;
	line-height: 56px;
	text-align: start;
}

.hm-about__cta p {
	margin: 0;
}

.hm-about__cta-line--spacer {
	height: 56px;
	line-height: 56px;
}

.hm-about__cta-bold {
	font-weight: 700;
}

.hm-about__cta-contact {
	unicode-bidi: isolate; /* keeps the phone number & email from being
	                          reordered inside the RTL paragraph */
}

.hm-about__cta-link {
	color: inherit;
	text-decoration: underline;
}

.hm-about__cta-link:hover {
	color: var(--hm-color-link);
}

/* ==========================================================================
   Responsive — tablet
   ========================================================================== */

@media (max-width: 1023px) {
	.hm-about {
		padding-block-start: 56px;
		padding-block-end: 96px;
	}

	.hm-about__inner {
		gap: 48px;
	}

	.hm-about__intro,
	.hm-about__clients {
		gap: 32px;
	}

	.hm-about__heading {
		font-size: 40px;
		line-height: 38px;
	}

	.hm-about__divider {
		height: 70px;
	}

	.hm-about__cta {
		font-size: 36px;
		line-height: 40px;
	}

	.hm-about__cta-line--spacer {
		height: 40px;
		line-height: 40px;
	}

	.hm-about__slider-set {
		gap: 64px;
		padding-inline: 32px;
	}

	.hm-about__slider-item {
		height: 80px;
	}

	.hm-about__slider-img {
		max-height: 80px;
		max-width: 240px;
	}
}

/* ==========================================================================
   Responsive — mobile: stack title above its content row
   ========================================================================== */

@media (max-width: 767px) {
	.hm-about {
		padding-block-start: 40px;
		padding-block-end: 72px;
	}

	.hm-about__inner {
		gap: 40px;
	}

	.hm-about__intro,
	.hm-about__clients {
		flex-direction: column;
		align-items: flex-start; /* RTL flex-start = right; titles & body align right */
		gap: 16px;
	}

	.hm-about__heading {
		font-size: 32px;
		line-height: 30px;
		text-align: start;
	}

	.hm-about__divider {
		display: none;
	}

	.hm-about__intro-text {
		max-width: 100%;
		font-size: 15px;
		line-height: 21px;
	}

	.hm-about__intro-text p + p {
		margin-top: 16px;
	}

	.hm-about__slider {
		align-self: stretch;
		width: 100%;
	}

	.hm-about__slider-set {
		gap: 40px;
		padding-inline: 16px;
	}

	.hm-about__slider-item {
		height: 56px;
	}

	.hm-about__slider-img {
		max-height: 56px;
		max-width: 160px;
	}

	.hm-about__cta {
		font-size: 22px;
		line-height: 28px;
	}

	.hm-about__cta-line--spacer {
		height: 14px;
		line-height: 14px;
	}
}