/* ==========================================================================
   תן לי — "אודות תן לי" (/about/, page-templates/about.php)
   Loaded ONLY on this page — see tenli_enqueue_about_assets() in
   inc/about-page.php — so no other page's weight changes.
   Mobile-first throughout: base rules are the small-screen layout; the
   @media (min-width: 1024px) block at the bottom adds the desktop treatment
   (matches the breakpoint the rest of the theme already standardizes on).
   Reuses tokens from main.css (--color-navy, --color-teal, --tint-*-bg/fg,
   --font-heading, --gutter, --container-max) and the shared .about__inner
   rule main.css already lists alongside .benefits__inner etc.
   ========================================================================== */

.about-hero { background: var(--tint-navy-bg); padding-block: 32px 40px; }
.about-hero__inner { display: flex; flex-direction: column; gap: 32px; }
.about-hero__title { font-size: 30px; line-height: 1.2; margin-block: 14px 12px; }
.about-hero__subtitle { font-family: var(--font-heading); font-weight: 700; font-size: 18px; color: var(--color-teal); margin-block-end: 14px; }
.about-hero__intro { font-size: 16px; line-height: 1.7; color: var(--color-text); max-width: 62ch; }
.about-hero__actions { display: flex; flex-direction: column; gap: 12px; margin-block-start: 24px; }
.about-hero__actions .btn { width: 100%; text-align: center; justify-content: center; }

/* z-index on a flex item takes effect without needing position — this puts
   the whole diagram (and whichever node is being dragged out of it, see
   .is-dragging below) above .about-hero__content's text/buttons, since a
   dragged node can be pulled all the way over onto that side of the hero. */
.about-hero__visual { display: flex; align-items: center; justify-content: center; z-index: 2; }
.about-hero__diagram { position: relative; width: 100%; max-width: 320px; aspect-ratio: 1; }
.about-hero__hub {
	position: absolute; top: 50%; left: 50%;
	--icon-y: 16px; --icon-scale: 0.85;
	transform: translate(-50%, -50%) translateY(var(--icon-y)) scale(var(--icon-scale));
	opacity: 0;
	width: 84px; height: 84px; border-radius: 50%;
	background: var(--color-white);
	box-shadow: 0 8px 24px rgba(44, 52, 126, 0.18);
	display: flex; align-items: center; justify-content: center;
	z-index: 2;
}
.about-hero__hub.is-visible { opacity: 1; --icon-y: 0px; --icon-scale: 1; }
.about-hero__hub img { width: 44px; height: 44px; object-fit: contain; }
.about-hero__node {
	position: absolute;
	--icon-y: 16px; --icon-scale: 0.85;
	/* --drag-x/--drag-y: driven per-frame by about.js (drag + spring
	   release), always 0px at rest — see the drag-interaction block below. */
	--drag-x: 0px; --drag-y: 0px;
	transform: translate(var(--drag-x), var(--drag-y)) translateY(var(--icon-y)) scale(var(--icon-scale));
	opacity: 0;
	width: 56px; height: 56px; border-radius: 50%;
	background: var(--color-white);
	border: 1px solid rgba(44, 52, 126, 0.12);
	box-shadow: 0 4px 14px rgba(5, 39, 72, 0.08);
	display: flex; align-items: center; justify-content: center;
	color: var(--color-navy);
	z-index: 2;
	touch-action: none;
	-webkit-user-select: none; user-select: none;
}
.about-hero__node.is-visible { opacity: 1; --icon-y: 0px; --icon-scale: 1; }
.about-hero__node svg { width: 24px; height: 24px; pointer-events: none; }
.about-hero__node--user { top: 4%; inset-inline-start: 4%; }
.about-hero__node--doc { top: 4%; inset-inline-end: 4%; }
.about-hero__node--shield { bottom: 4%; inset-inline-start: 4%; color: var(--color-teal); }
.about-hero__node--agent { bottom: 4%; inset-inline-end: 4%; }
/* overflow:visible — a line being dragged (about.js) can extend well past
   the diagram's own 320x320 box (all the way to the edge of .about-hero),
   and SVG clips its own viewport by default. */
.about-hero__diagram svg.about-hero__lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; }
.about-hero__lines line { stroke: rgba(44, 52, 126, 0.28); stroke-width: 1.5; stroke-dasharray: 4 5; }
@media (prefers-reduced-motion: no-preference) {
	.about-hero__hub, .about-hero__node { transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
	.about-hero__hub:hover { --icon-y: -5px; --icon-scale: 1.08; }
}
@media (prefers-reduced-motion: reduce) {
	.about-hero__hub { opacity: 1; transform: translate(-50%, -50%); }
	.about-hero__node { opacity: 1; transform: none; }
}

/* ---- hero node drag interaction (desktop mouse only — see about.js) ----
   Replaces the previous hover-lift on these 4 nodes: while draggable=true
   (JS gates this on hover:hover + pointer:fine + motion-ok), the node shows
   a grab cursor instead. .is-dragging turns off the CSS transition above
   because about.js is driving --drag-x/--drag-y on every animation frame,
   both while the mouse is held (rubber-band follow) and during the spring
   release afterward — a parallel CSS transition would fight that per-frame
   control and make the motion stutter. */
.about-hero__node[data-draggable="true"] { cursor: grab; }
.about-hero__node.is-dragging { cursor: grabbing; transition: none !important; z-index: 3; }

/* ---- generic card grid, reused by "מהי תן לי", "מה תן לי מציעה", "עקרונות התוכן" ---- */
.about-section { padding-block: 48px; }
.about-section__title { font-size: 24px; line-height: 1.3; text-align: center; margin-block-end: 14px; }
.about-section__lede { font-size: 15.5px; line-height: 1.7; color: var(--color-text); opacity: 0.8; text-align: center; max-width: 62ch; margin-inline: auto; margin-block-end: 32px; }

.about-card-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.about-card {
	background: var(--color-bg-light);
	border-radius: 16px;
	padding: 24px 22px;
}
.about-card__icon {
	display: flex; align-items: center; justify-content: center;
	width: 48px; height: 48px; border-radius: 50%;
	background: var(--color-white);
	color: var(--color-teal);
	margin-block-end: 14px;
	--icon-y: 16px; --icon-scale: 0.85;
	transform: translateY(var(--icon-y)) scale(var(--icon-scale));
	opacity: 0;
}
.about-card__icon.is-visible { opacity: 1; --icon-y: 0px; --icon-scale: 1; }
.about-card__icon svg { width: 24px; height: 24px; }
.about-card h3 { font-size: 17px; margin-block-end: 8px; }
.about-card p { font-size: 14.5px; line-height: 1.65; color: var(--color-text); opacity: 0.82; }
@media (prefers-reduced-motion: no-preference) {
	.about-card__icon { transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
	.about-card:hover .about-card__icon { --icon-y: -5px; --icon-scale: 1.08; }
}
@media (prefers-reduced-motion: reduce) {
	.about-card__icon { opacity: 1; transform: none; }
}

.about-disclaimer {
	margin-block-start: 28px;
	padding: 16px 18px;
	background: var(--tint-navy-bg);
	border-inline-start: 4px solid var(--color-navy);
	border-radius: 0 12px 12px 0;
	font-size: 14px; line-height: 1.65; color: var(--color-text);
}

/* ---- "למה הקמנו את תן לי" ---- */
.about-why { background: var(--color-bg-light); }
.about-why__inner { display: grid; grid-template-columns: 1fr; gap: 32px; }
.about-why__title { text-align: start; margin-inline-end: auto; }
.about-why__text p { font-size: 15.5px; line-height: 1.75; color: var(--color-text); margin-block-end: 16px; }
.about-why__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; background: var(--color-white); border-radius: 16px; padding: 24px; }
.about-why__list li { position: relative; padding-inline-start: 26px; font-size: 15px; color: var(--color-navy); font-weight: 600; }
.about-why__list li::before {
	content: '';
	position: absolute; inset-inline-start: 0; top: 6px;
	width: 9px; height: 9px; border-radius: 50%;
	background: var(--color-teal);
}

/* ---- "כך תן לי עוזרת" — reuses the homepage .process visual language ---- */
.about-process { background: var(--color-navy); color: var(--color-white); }
.about-process .about-section__title { color: var(--color-white); }
.about-process__steps { display: grid; gap: 20px; margin-block-end: 28px; }
.about-process__step { background: rgba(255, 255, 255, 0.06); border-radius: 12px; padding: 20px; }
.about-process__num {
	display: inline-flex; align-items: center; justify-content: center;
	width: 32px; height: 32px; border-radius: 50%;
	background: var(--color-teal); color: var(--color-white);
	font-family: var(--font-heading); font-weight: 700; font-size: 13px;
	margin-block-end: 10px;
}
.about-process__step h3 { color: var(--color-white); font-size: 16px; margin-block-end: 6px; }
.about-process__step p { color: var(--color-white); opacity: 0.82; font-size: 14px; line-height: 1.6; }
.about-process__notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; border-block-start: 1px solid rgba(255, 255, 255, 0.16); padding-block-start: 20px; }
.about-process__notes li { font-size: 13px; color: var(--color-white); opacity: 0.75; padding-inline-start: 16px; position: relative; }
.about-process__notes li::before { content: '•'; position: absolute; inset-inline-start: 0; opacity: 0.7; }

/* ---- "תחומי הביטוח בתן לי" ---- */
.about-domains__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.about-domains__card {
	display: block;
	background: var(--color-white);
	border: 1px solid var(--color-bg-light);
	border-radius: 14px;
	padding: 18px 14px;
	text-align: center;
	text-decoration: none;
}
a.about-domains__card { cursor: pointer; }
span.about-domains__card { cursor: default; }
.about-domains__card img {
	width: 44px; height: 44px; margin-block-end: 10px;
	--icon-y: 16px; --icon-scale: 0.85;
	transform: translateY(var(--icon-y)) scale(var(--icon-scale));
	opacity: 0;
}
.about-domains__card img.is-visible { opacity: 1; --icon-y: 0px; --icon-scale: 1; }
.about-domains__card strong { display: block; font-family: var(--font-heading); font-size: 14px; color: var(--color-navy); margin-block-end: 4px; }
.about-domains__card span.about-domains__text { display: block; font-size: 12px; color: var(--color-text); opacity: 0.75; line-height: 1.5; }
@media (prefers-reduced-motion: no-preference) {
	a.about-domains__card { transition: border-color 0.15s ease, transform 0.15s ease; }
	.about-domains__card img { transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
	a.about-domains__card:hover img { --icon-y: -5px; --icon-scale: 1.1; }
}
@media (prefers-reduced-motion: reduce) {
	.about-domains__card img { opacity: 1; transform: none; }
}
a.about-domains__card:hover { border-color: var(--color-teal); transform: translateY(-2px); }

/* ---- "איך תן לי פועלת" (שקיפות) ---- */
.about-transparency { background: var(--tint-navy-bg); }
.about-transparency__list { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 10px; max-width: 68ch; margin-inline: auto; }
.about-transparency__list li { display: flex; gap: 10px; font-size: 14.5px; line-height: 1.6; color: var(--color-text); }
.about-transparency__list li svg { flex: none; width: 18px; height: 18px; color: var(--color-navy); margin-block-start: 2px; }
.about-transparency__statement { max-width: 68ch; margin-inline: auto; background: var(--color-white); border-radius: 14px; padding: 20px; font-size: 15px; line-height: 1.7; color: var(--color-navy); font-weight: 600; text-align: center; }

/* ---- "מי מופיע באינדקס" ---- */
.about-listing__steps { list-style: none; margin: 0 0 24px; padding: 0; counter-reset: about-listing; display: flex; flex-direction: column; gap: 4px; max-width: 60ch; margin-inline: auto; }
.about-listing__steps li {
	counter-increment: about-listing;
	display: flex; align-items: flex-start; gap: 14px;
	padding: 14px 0;
	border-block-end: 1px solid var(--color-bg-light);
	font-size: 15px; color: var(--color-text);
}
.about-listing__steps li:last-child { border-block-end: none; }
.about-listing__steps li::before {
	content: counter(about-listing);
	flex: none;
	display: flex; align-items: center; justify-content: center;
	width: 28px; height: 28px; border-radius: 50%;
	background: var(--color-bg-light); color: var(--color-navy);
	font-family: var(--font-heading); font-weight: 700; font-size: 13px;
}

/* ---- team ---- */
.about-team { background: var(--color-bg-light); }
.about-team__intro { text-align: center; max-width: 62ch; margin: 0 auto 32px; font-size: 15.5px; line-height: 1.7; color: var(--color-text); }
.about-team__grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.about-team__card {
	background: var(--color-white);
	border-radius: 18px;
	padding: 28px 24px;
	text-align: center;
	box-shadow: 0 2px 14px rgba(5, 39, 72, 0.05);
}
.about-team__photo { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; margin: 0 auto 16px; display: block; }
.about-team__name { font-size: 17px; color: var(--color-navy); margin-block-end: 4px; }
.about-team__role {
	display: inline-block;
	font-size: 12.5px; font-weight: 700; color: var(--color-text); opacity: 0.7;
	padding-block-end: 10px;
	margin-block-end: 12px;
	border-block-end: 2px solid var(--color-teal);
}
.about-team__bio { font-size: 14px; line-height: 1.65; color: var(--color-text); opacity: 0.85; }

/* ---- content principles ---- */
.about-principles { background: var(--color-white); }

/* ---- stats ---- */
.about-stats__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 480px; margin-inline: auto; }
.about-stats__card { text-align: center; padding: 20px 12px; }
.about-stats__number { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 32px; color: var(--color-navy); }
.about-stats__counter { font-variant-numeric: tabular-nums; }
.about-stats__label { font-size: 13px; color: var(--color-text); opacity: 0.75; }

/* ---- double CTA ---- */
.about-cta { display: grid; grid-template-columns: 1fr; gap: 20px; }
.about-cta__card { border-radius: 18px; padding: 28px 24px; }
.about-cta__card h3 { font-size: 20px; margin-block-end: 10px; }
.about-cta__card p { font-size: 14.5px; line-height: 1.65; margin-block-end: 20px; color: var(--color-text); }
.about-cta__card--user { background: var(--color-bg-light); }
.about-cta__card--supplier { background: var(--color-navy); color: var(--color-white); }
.about-cta__card--supplier h3 { color: var(--color-white); }
.about-cta__card--supplier p { color: var(--color-white); opacity: 0.85; }
.about-cta__actions { display: flex; flex-direction: column; gap: 10px; }
.about-cta__actions .btn { width: 100%; text-align: center; justify-content: center; }

/* ---- FAQ — same row-accordion look as the shared .faq__list/.faq__item
   base (and .ins-faq__list on the insurance pages), just constrained to
   this page's narrower content column. ---- */
.about-faq__list { max-width: 720px; margin-inline: auto; display: flex; flex-direction: column; gap: 0; }
.about-faq__list .faq__item {
	display: block;
	min-height: 0;
	background: transparent;
	border-radius: 0;
	padding: 0;
	border-block-end: 1px solid rgba(44, 52, 126, 0.14);
}
.about-faq__list .faq__item:first-child { border-block-start: 1px solid rgba(44, 52, 126, 0.14); }
.about-faq__list .faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 4px;
}
.about-faq__list .faq__item summary::after {
	content: '';
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	border-inline-end: 2px solid var(--color-navy);
	border-block-end: 2px solid var(--color-navy);
	transform: rotate(45deg);
}
.about-faq__list .faq__item[open] summary::after { transform: rotate(-135deg); }
@media (prefers-reduced-motion: no-preference) {
	.about-faq__list .faq__item summary::after { transition: transform 0.2s ease; }
}
.about-faq__list .faq__item p { margin: 0; padding: 0 4px 20px; color: var(--color-text); opacity: 0.85; font-size: 15px; line-height: 1.7; }

@media (prefers-reduced-motion: reduce) {
	.about-hero__lines { display: none; }
}

/* ---- icon reveal stagger — small per-item delay so icons in the same row
   float in one after another instead of popping together ---- */
@media (prefers-reduced-motion: no-preference) {
	.about-hero__node--doc, .about-hero__node--agent { transition-delay: 0.08s; }
	.about-hero__node--shield { transition-delay: 0.16s; }
	.about-card-grid .about-card:nth-child(2) .about-card__icon { transition-delay: 0.06s; }
	.about-card-grid .about-card:nth-child(3) .about-card__icon { transition-delay: 0.12s; }
	.about-card-grid .about-card:nth-child(4) .about-card__icon { transition-delay: 0.18s; }
	.about-card-grid .about-card:nth-child(5) .about-card__icon { transition-delay: 0.24s; }
	.about-domains__grid .about-domains__card:nth-child(2) img { transition-delay: 0.06s; }
	.about-domains__grid .about-domains__card:nth-child(3) img { transition-delay: 0.12s; }
	.about-domains__grid .about-domains__card:nth-child(4) img { transition-delay: 0.18s; }
	.about-domains__grid .about-domains__card:nth-child(5) img { transition-delay: 0.24s; }
	.about-domains__grid .about-domains__card:nth-child(6) img { transition-delay: 0.3s; }

	/* the stagger delay above is only for the scroll-reveal entrance — hover
	   response must stay instant, so force it back to 0 regardless of which
	   nth-child rule otherwise wins on specificity */
	.about-card:hover .about-card__icon,
	a.about-domains__card:hover img,
	.about-hero__hub:hover {
		transition-delay: 0s !important;
	}
}

/* ==========================================================================
   Tablet / desktop
   ========================================================================== */
@media (min-width: 700px) {
	.about-hero__title { font-size: 36px; }
	.about-card-grid { grid-template-columns: repeat(2, 1fr); }
	.about-domains__grid { grid-template-columns: repeat(3, 1fr); }
	.about-process__steps { grid-template-columns: repeat(2, 1fr); }
	.about-team__grid { grid-template-columns: repeat(2, 1fr); }
	.about-team__grid .about-team__card:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: 360px; margin-inline: auto; }
	.about-cta { grid-template-columns: repeat(2, 1fr); }
	.about-hero__actions { flex-direction: row; }
	.about-hero__actions .btn { width: auto; }
}

@media (min-width: 1024px) {
	.about-hero { padding-block: 56px 64px; }
	.about-hero__inner { flex-direction: row-reverse; align-items: center; gap: 56px; }
	.about-hero__content { flex: 1 1 0; min-width: 0; }
	.about-hero__visual { flex: 0 0 360px; }
	.about-hero__title { font-size: 42px; }
	.about-hero__actions { flex-direction: row; }

	.about-section { padding-block: 72px; }
	.about-card-grid { grid-template-columns: repeat(4, 1fr); }
	.about-why__inner { grid-template-columns: 1.1fr 0.9fr; align-items: start; }
	.about-process__steps { grid-template-columns: repeat(4, 1fr); }
	.about-domains__grid { grid-template-columns: repeat(6, 1fr); }
	.about-offer .about-card-grid { grid-template-columns: repeat(5, 1fr); }

	.about-team__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
	.about-team__grid .about-team__card:last-child:nth-child(odd) { grid-column: auto; max-width: none; margin-inline: 0; }

	.about-cta { grid-template-columns: repeat(2, 1fr); gap: 28px; }
	.about-cta__actions { flex-direction: row; }
	.about-cta__actions .btn { width: auto; }
}