/**
 * The article frame (see class-abt-frame.php for when this loads at all).
 *
 * LAYOUT ONLY. Every font and every color in this file is the SITE'S,
 * read from the Elementor design tokens its kit defines — with `inherit`
 * as the fallback, i.e. whatever the theme says. If a rule here ever
 * names a family, a hex value or a brand-ish flourish, it has stopped
 * being a frame and started being our design on someone else's site.
 *
 * Logical properties throughout: this ships to Hebrew (RTL) and English
 * (LTR) articles alike, and `margin-inline-start` is the same rule in both.
 */

/* Hello caps its content column (`.site-main { max-width: 1140px }`, stepped
   per breakpoint, plus 10px side padding), and no grid trick makes a child
   wider than its parent. On framed pages — and ONLY framed pages, hence the
   body class — the theme's container stands down and the article's own grid
   becomes the page structure: gutters from the 1fr columns, measure from the
   middle one, and the hero genuinely edge to edge. `main.site-main` rather
   than `.site-main` so this outweighs the theme's `body:not(...)` selector
   without an !important. */
body.abt-framed main.site-main {
	max-width: none;
	padding-inline: 0;
}

.abt-article {
	/* A three-column grid: a 45rem reading measure in the middle (≈720px,
	   the column their own hand-built articles set — 65–75 characters in
	   both scripts), gutters either side. Everything lands in the middle by
	   default; the hero alone spans all three, which is how it goes
	   full-bleed WITHOUT viewport-width hacks — no 100vw, no scrollbar
	   sliver, and it mirrors itself in RTL for free. */
	display: grid;
	grid-template-columns: 1fr min(45rem, 100% - 2.5rem) 1fr;
	padding-block: 0 3rem;
	/* Body copy exactly as the estate sets it: 15px Assistant, 1px tracking,
	   Hello's 1.5 leading (their kit does not override it), paragraphs .9rem
	   apart — all measured from the reference article, all read through the
	   same tokens so a redecoration follows. */
	font-family: var(--e-global-typography-text-font-family, inherit);
	font-weight: var(--e-global-typography-text-font-weight, inherit);
	font-size: var(--e-global-typography-text-font-size, 1rem);
	letter-spacing: var(--e-global-typography-text-letter-spacing, normal);
	color: var(--e-global-color-text, inherit);
	line-height: var(--e-global-typography-text-line-height, 1.5);
}

.abt-article > * {
	grid-column: 2;
	min-width: 0;
}

/* ---------- generic article content ----------
   Every element selector below sits inside :where(), which contributes ZERO
   specificity. That is not a flourish: the sign-off's cards live INSIDE the
   article wrapper, and on 2026-08-25 the plain `.abt-article figure img`
   rule out-ranked `.abt-related__media img` — so the estate's fixed 150px
   card strips rendered at natural height, every card different. Generic
   rules style prose; a named component must always be able to overrule them
   with a single class. */

/* Headings, per the reference article's own anatomy (elementor-26866):
   section headings are the SECONDARY typography token — carbon 36px, weight
   400, 1px tracking — and small lead-in headings are body-size Assistant in
   bold (their cd800a9 pattern). The spacing is the estate's, not ours: the
   kit zeroes widget margins and their containers run a 10px gap, so the
   whole page is deliberately dense. The first frame shipped 2.25em heading
   margins — five times theirs — and that, not the paragraphs, was the "gap
   between paragraphs" being reported. */

.abt-article :where(h2, h3, h4) {
	color: var(--e-global-color-primary, inherit);
	line-height: 1.3;
	margin-block: 0.625rem;
}

.abt-article :where(h2) {
	font-family: var(--e-global-typography-secondary-font-family, inherit);
	font-size: var(--e-global-typography-secondary-font-size, 2rem);
	font-weight: var(--e-global-typography-secondary-font-weight, 400);
	letter-spacing: var(--e-global-typography-secondary-letter-spacing, normal);
}

.abt-article :where(h3, h4) {
	font-family: var(--e-global-typography-text-font-family, inherit);
	font-size: var(--e-global-typography-text-font-size, 1rem);
	font-weight: 700;
	letter-spacing: var(--e-global-typography-text-letter-spacing, normal);
}

/* ---------- body copy ---------- */

.abt-article :where(p) {
	margin-block: 0 0.9rem;
}

.abt-article :where(a) {
	color: var(--e-global-color-primary, inherit);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.abt-article :where(ul, ol) {
	margin-block: 0 0.9rem;
	padding-inline-start: 1.4em;
}

.abt-article :where(li) {
	margin-block-end: 0.4em;
}

.abt-article :where(blockquote) {
	margin: 1.5em 0;
	padding-inline-start: 1.25em;
	border-inline-start: 3px solid var(--e-global-color-primary, currentColor);
	font-style: italic;
}

/* ---------- images inside the article ---------- */

.abt-article :where(figure) {
	margin: 1.75em 0;
	max-width: 100%;
}

.abt-article :where(figure) img {
	max-width: 100%;
	height: auto;
}

.abt-article :where(figcaption) {
	font-size: 0.85em;
	opacity: 0.7;
	margin-block-start: 0.5em;
}

/* ---------- the hero: full bleed, then the headline under it ---------- */

.abt-article__hero {
	grid-column: 1 / -1;
	margin: 0 0 2rem;
}

.abt-article__hero img {
	display: block;
	width: 100%;
	/* A banner, not a wall: cover-crop tall originals to a cinematic band
	   instead of letting a portrait shot push the headline below the fold. */
	height: clamp(300px, 50vh, 560px);
	object-fit: cover;
}

.abt-article__title {
	/* Their article title is the SECONDARY token — carbon 36px, weight 400 —
	   measured from the reference article (a20834b), not the 40px sign-off
	   heading it was first copied from. */
	font-family: var(--e-global-typography-secondary-font-family, inherit);
	font-weight: var(--e-global-typography-secondary-font-weight, 400);
	color: var(--e-global-color-primary, inherit);
	font-size: var(--e-global-typography-secondary-font-size, 2rem);
	letter-spacing: var(--e-global-typography-secondary-letter-spacing, normal);
	line-height: 1.2;
	margin-block: 0;
}

/* The blue rule and the byline under the title — their 597c606/cd800a9 pair:
   2px of the brand blue at 10% width, start-aligned, 15px of air each side;
   the name in plain body typography. */
.abt-article__rule {
	border-block-start: 2px solid var(--e-global-color-761373a, #86CBE9);
	width: 10%;
	margin-block: 15px;
	margin-inline: 0 auto;
}

.abt-article__byline {
	font-family: var(--e-global-typography-text-font-family, inherit);
	font-size: var(--e-global-typography-text-font-size, 1rem);
	letter-spacing: var(--e-global-typography-text-letter-spacing, normal);
	color: var(--e-global-color-text, inherit);
	margin-block: 0 1.25rem;
}

/* ---------- "כתבות נוספות" — the estate's sign-off ---------- */

/* Not designed here: MEASURED. Every value below is read from the reference
   estate's own sign-off (elementor-26866 / loop template 19735, 2026-08-25):
   the #F3F0EE band, the 105px #86CBE9 divider, the 40px weight-400 heading,
   150px cover-cropped cards with 16px uppercase letter-spaced titles, 40px
   gaps, and the 81%-brightness hover. Their kit variables are referenced
   first with the measured value as fallback, so if the client redecorates,
   framed posts follow; on an estate without these tokens the fallbacks
   reproduce THIS design, which is the moment to re-measure, not to trust. */

/* When the sign-off band is present it CLOSES the page — the wrapper's own
   bottom padding would otherwise reappear as a white strip between the band
   and the footer. Articles without the band keep the 3rem of air. */
.abt-article:has(.abt-related) {
	padding-block-end: 0;
}

.abt-related {
	/* The full-bleed tinted band; its own grid centres the content. */
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: 1fr min(71.25rem, 100% - 2.5rem) 1fr;
	background-color: var(--e-global-color-5ffb89f, #F3F0EE);
	margin-block-start: 3.5rem;
	padding-block: 4em;
}

.abt-related > * {
	grid-column: 2;
	min-width: 0;
}

.abt-related__heading {
	font-family: var(--e-global-typography-primary-font-family, inherit);
	font-weight: 400;
	color: var(--e-global-color-primary, inherit);
	font-size: 40px;
	letter-spacing: 1px;
	line-height: 1.2;
	text-align: start;
	margin-block: 0;
	padding-block-end: 20px;
}

/* Their divider widget, as a pseudo-element: 2px of the brand blue,
   105px long, sitting at the inline start above the heading. */
.abt-related__heading::before {
	content: "";
	display: block;
	width: 105px;
	border-block-start: 2px solid var(--e-global-color-761373a, #86CBE9);
	margin-block-end: 20px;
}

.abt-related__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
}

/* The card, per loop template 18625 — the ARTICLES carousel, not the 150px
   hotel-menu strips template 19735 that a first reading mistook for it:
   350px cover image, 20px to a 29px carbon title, and a bottom-pinned
   "קרא עוד" text button with a hairline underline, the column held to a
   minimum 480px so the buttons of neighbouring cards sit on one line. */

/* `body.abt-framed` is not decoration — it is the whole fix for the client's
   "double underline" on קרא עוד (their spec's separator complaint, run to
   ground 2026-08-25). The card is ONE anchor, and Hello styles content
   anchors twice over: `a, a:visited { text-decoration: underline }` — where
   the pseudo-CLASS carries (0,1,1) — and `.page-content a { … underline }`,
   both LATER in the cascade than this file. A bare `.abt-related__card a`
   ties them at (0,1,1) and loses on order, so the theme's underline rendered
   beneath the CTA's hairline border on every card. (0,2,1) outranks both in
   every link state — the same move the grid opens with against the theme's
   container. Curl never showed it; the cascade only resolves in a browser. */
body.abt-framed .abt-related__card a {
	display: flex;
	flex-direction: column;
	min-height: 480px;
	text-decoration: none;
	color: inherit;
}

.abt-related__media {
	margin: 0 0 20px;
}

.abt-related__media img {
	display: block;
	width: 100%;
	height: 350px;
	object-fit: cover;
	object-position: center center;
	transition-duration: 0.5s;
}

.abt-related__card a:hover img {
	filter: brightness(81%);
}

.abt-related__title {
	font-family: var(--e-global-typography-primary-font-family, inherit);
	font-weight: 400;
	color: var(--e-global-color-primary, inherit);
	font-size: 29px;
	letter-spacing: 1px;
	line-height: 1.3;
	text-align: start;
	margin: 0 0 35px;
}

.abt-related__cta {
	/* Pinned to the card's bottom edge — their space-between column. */
	margin-block-start: auto;
	align-self: flex-start;
	width: fit-content;
	font-family: var(--e-global-typography-accent-font-family, inherit);
	font-weight: var(--e-global-typography-accent-font-weight, 600);
	font-size: var(--e-global-typography-accent-font-size, 15px);
	letter-spacing: var(--e-global-typography-accent-letter-spacing, 1px);
	color: var(--e-global-color-primary, inherit);
	border-block-end: 1px solid #1e1e1e;
}

.abt-related__card a:hover .abt-related__cta {
	color: var(--e-global-color-secondary, inherit);
}

@media (max-width: 1024px) {
	.abt-related__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Same rank as the base rule above, or (0,2,1) beats this override
	   and tablets keep the desktop 480px column. */
	body.abt-framed .abt-related__card a {
		min-height: 0;
	}

	.abt-related__media img {
		height: 380px;
	}

	.abt-related__media {
		margin-block-end: 20px;
	}

	.abt-related__title {
		margin-block-end: 20px;
	}
}

@media (max-width: 767px) {
	.abt-related {
		padding-block: 3em;
	}

	.abt-related__heading {
		font-size: 30px;
		text-align: center;
	}

	.abt-related__heading::before {
		width: 50%;
		margin-inline: auto;
	}

	.abt-related__grid {
		grid-template-columns: 1fr;
	}

	.abt-related__media img {
		height: 300px;
	}

	.abt-related__title {
		font-size: 24px;
		text-align: center;
	}

	.abt-article__title {
		font-size: 30px;
	}

	.abt-article__rule {
		width: 50%;
	}
}

/* ---------- narrow screens ---------- */

@media (max-width: 480px) {
	.abt-article :where(h2) {
		font-size: 28px;
	}

	.abt-article__hero img {
		height: clamp(220px, 40vh, 320px);
	}
}