/**
 * Kleyman — PRESS / MEDIA page, full redesign v3.
 *
 * One unified card system for every article (.kleyman-pr-card) — no
 * separate "lead article" template. The only variation is structural
 * (.kleyman-pr-card--wide spans two grid columns for the first item),
 * never a different visual language, per the brief's explicit "לא עוד
 * כתבה אחת ענקית למעלה... גריד כתבות אחיד".
 *
 * Scoped under .kleyman-pr-* so nothing here collides with the older
 * .kleyman-press-featured / .kleyman-press-grid / .kleyman-press-card
 * rules in inner-pages.css, or with the About page's .kleyman-ab-*
 * namespace. Reuses the same custom properties, radii, shadows and ease
 * curve already defined in main.css's :root — no new design tokens.
 *
 * Enqueued only on the Press page (functions.php, is_page('press')).
 *
 * @package Kleyman
 */

.kleyman-pr .kleyman-container { max-width: 1480px; }
.kleyman-pr h1, .kleyman-pr h2, .kleyman-pr h3 { margin: 0; }
.kleyman-pr p { margin: 0; }

.kleyman-pr-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   01 — HERO — compact navy. No watermark, no outlet marquee (both removed
   per the brief) — just eyebrow / title / subtitle, on-grid.
   ========================================================================== */
.kleyman-pr-hero {
	position: relative;
	background: var(--kleyman-dark);
	color: #fff;
	padding-block: 124px 64px;
	min-height: 0;
	/* No overflow/transform/filter here — this section sits ABOVE the
	   sticky header in source order but must never create a new stacking
	   or containing-block context that could trap it (see main.css's
	   body:not(.home) .kleyman-header sticky rule). */
}
.kleyman-pr-hero__inner { position: relative; z-index: 1; }
.kleyman-pr-hero .kleyman-breadcrumbs { margin-bottom: 22px; }
.kleyman-pr-hero .kleyman-breadcrumbs a,
.kleyman-pr-hero .kleyman-breadcrumbs span { color: rgba(255,255,255,.6); }
.kleyman-pr-hero__eyebrow { display: block; font-size: 16px; font-weight: 600; letter-spacing: .05em; color: var(--kleyman-green); margin-bottom: 16px; }
/* Oct 2026 QA: main hero heading centered on every inner page — see the
   matching comment on .kleyman-ab-hero__title (about.css). Eyebrow and
   subtitle stay right-aligned as before, only the H1. */
.kleyman-pr-hero__title { font-size: clamp(38px, 4.6vw, 60px); font-weight: 700; line-height: 1.1; color: #fff; text-align: center; }
.kleyman-pr-hero__title-accent { color: var(--kleyman-green); }
.kleyman-pr-hero__subtitle { margin-top: 16px; margin-inline: auto; text-align: center; font-size: clamp(16px, 1.1vw, 18px); line-height: 1.6; color: rgba(255,255,255,.78); max-width: 52ch; }

/* ==========================================================================
   02 — ARTICLE GRID — one card template, used by every item. 3-column
   bento: the first card spans 2 columns on row 1, the rest fall into a
   regular 3-up flow — a deliberate, edited composition rather than either
   a boring uniform matrix or visual chaos.
   ========================================================================== */
.kleyman-pr-grid-section { padding-block: 64px 0; }

.kleyman-pr-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px 28px;
	align-items: stretch;
}
.kleyman-pr-card--wide { grid-column: span 2; }

.kleyman-pr-card {
	display: flex;
	flex-direction: column;
	border-radius: var(--kleyman-radius-lg);
	transition: transform .4s var(--kleyman-ease);
}
.kleyman-pr-card:hover { transform: translateY(-6px); }

.kleyman-pr-card__media {
	display: block;
	position: relative;
	aspect-ratio: 16 / 10;
	border-radius: var(--kleyman-radius-md);
	overflow: hidden;
	background: var(--kleyman-light);
	box-shadow: 0 2px 10px rgba(12, 22, 58, .06);
	transition: box-shadow .4s var(--kleyman-ease);
}
.kleyman-pr-card--wide .kleyman-pr-card__media { aspect-ratio: 16 / 8.5; }
.kleyman-pr-card:hover .kleyman-pr-card__media { box-shadow: 0 24px 48px rgba(12, 22, 58, .18); }

.kleyman-pr-card__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: top center;
	transition: transform .6s var(--kleyman-ease);
	/* A very light, uniform tonal correction — not a filter that hides
	   anything, just brings disparate source screenshots (different
	   outlets, different compression/quality) into one consistent,
	   slightly deeper, more "asset-like" register instead of looking like
	   raw browser captures sitting side by side. */
	filter: saturate(1.04) contrast(1.02);
}
.kleyman-pr-card:hover .kleyman-pr-card__media img { transform: scale(1.045); }

/* Soft bottom shade on every card image — gives the crop a deliberate,
   designed edge (a vignette, not a raw rectangle) and doubles as a safety
   net for any image whose own lower edge runs into busy source-site chrome,
   quietly knocking it back rather than requiring a manual re-crop per item. */
.kleyman-pr-card__shade {
	position: absolute;
	inset: auto 0 0 0;
	height: 42%;
	background: linear-gradient(to top, rgba(10, 18, 46, .32), transparent);
	pointer-events: none;
}

/* Typographic fallback — used for every item (Oct 2026 QA round 3: all 5
   uploaded "article" assets turned out to be raw full-page screenshots,
   so all 5 now render through this one branded tile instead — see the
   note at the top of page-press.php). Deep navy-to-ink gradient, a thin
   brand-green accent line (echoes the hero/section language elsewhere on
   the page) and a large, very low-opacity "ק" mark as a quiet brand
   texture — never a stock icon, never a placeholder-gray box. */
.kleyman-pr-card__typographic {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	width: 100%; height: 100%;
	background: linear-gradient(155deg, var(--kleyman-dark) 0%, #0a1437 100%);
	padding: 24px;
	text-align: center;
}
.kleyman-pr-card__typographic::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: var(--kleyman-green);
}
.kleyman-pr-card__typographic-mark {
	position: absolute;
	top: 52%; left: 50%;
	transform: translate(-50%, -50%);
	font-size: 190px;
	font-weight: 700;
	line-height: 1;
	color: rgba(255,255,255,.05);
	pointer-events: none;
	user-select: none;
}
.kleyman-pr-card--wide .kleyman-pr-card__typographic-mark { font-size: 280px; }
.kleyman-pr-card__typographic-source {
	position: relative;
	z-index: 1;
	font-size: clamp(20px, 2vw, 28px);
	font-weight: 700;
	color: rgba(255,255,255,.92);
	letter-spacing: .01em;
}
.kleyman-pr-card--wide .kleyman-pr-card__typographic-source { font-size: clamp(24px, 2.4vw, 34px); }

.kleyman-pr-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding-top: 22px;
}
.kleyman-pr-card__meta {
	display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
	font-size: 13px; color: var(--kleyman-text-muted);
}
.kleyman-pr-card__source { font-weight: 700; color: var(--kleyman-dark); }
.kleyman-pr-card__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--kleyman-text-muted); opacity: .6; }
.kleyman-pr-card__sponsored {
	display: inline-block;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--kleyman-text-muted);
	border: 1px solid var(--kleyman-border);
	border-radius: 100px;
	padding: 2px 9px;
}

.kleyman-pr-card__title {
	margin-top: 10px;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.4;
}
.kleyman-pr-card--wide .kleyman-pr-card__title { font-size: clamp(22px, 2vw, 28px); line-height: 1.3; }
.kleyman-pr-card__title a {
	color: var(--kleyman-dark);
	/* Underline-reveal on hover: a thin line grows in from the background,
	   the "line motion" micro-interaction asked for, without a layout shift
	   (background-image, not border/text-decoration). */
	background-image: linear-gradient(var(--kleyman-dark), var(--kleyman-dark));
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0% 1.5px;
	padding-bottom: 2px;
	transition: background-size .4s var(--kleyman-ease);
}
.kleyman-pr-card:hover .kleyman-pr-card__title a { background-size: 100% 1.5px; }

.kleyman-pr-card__series { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--kleyman-text-muted); }

.kleyman-pr-card__excerpt {
	margin-top: 10px;
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--kleyman-text-muted);
}
.kleyman-pr-card--wide .kleyman-pr-card__excerpt { font-size: 15.5px; max-width: 56ch; }

.kleyman-pr-card__link {
	display: inline-flex; align-items: center; gap: 7px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--kleyman-border);
	font-size: 13.5px; font-weight: 700; color: var(--kleyman-blue);
	/* pushed to the bottom of the card so same-row cards' action areas
	   line up regardless of how long each title/excerpt runs */
	margin-top: auto;
	transition: gap .3s var(--kleyman-ease), color .3s var(--kleyman-ease);
}
/* Oct 2026 QA fix: the arrow SVG is authored pointing right (like every
   other arrow icon on the site — main.css's .kleyman-area__arrow,
   category-pages.css's .kleyman-a2-tile__arrow, etc.) and needs the same
   static scaleX(-1) mirror so it points toward the reading-start (left)
   side, matching RTL "forward" direction. This card's link was shipped
   without that mirror, so the arrow pointed the wrong way.
   The hover "motion" (arrow nudging away from the text) now comes purely
   from the gap 7px→10px change below — simpler and avoids composing a
   second transform on an already-mirrored element, which is exactly the
   kind of thing that's easy to get backwards twice. */
.kleyman-pr-card__link svg { transform: scaleX(-1); }
.kleyman-pr-card:hover .kleyman-pr-card__link { color: var(--kleyman-green); gap: 10px; }

@media (max-width: 1024px) {
	.kleyman-pr-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 24px; }
	.kleyman-pr-card--wide { grid-column: span 2; }
}

@media (max-width: 720px) {
	.kleyman-pr-grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
	.kleyman-pr-card--wide { grid-column: span 1; }
	.kleyman-pr-card--wide .kleyman-pr-card__media { aspect-ratio: 16 / 10; }
	.kleyman-pr-card--wide .kleyman-pr-card__title { font-size: 19px; }
	.kleyman-pr-card--wide .kleyman-pr-card__excerpt { font-size: 14.5px; }
}

/* ==========================================================================
   03 — MINIMAL CONTACT LINE — plain white text line, no card/background.
   Real white space before the shared footer, set once here so it can never
   double up with another section's own bottom spacing.
   ========================================================================== */
.kleyman-pr-contact-line { padding-block: 72px 112px; background: #fff; }
.kleyman-pr-contact-line__text {
	text-align: center;
	font-size: clamp(17px, 1.4vw, 20px);
	font-weight: 600;
	color: var(--kleyman-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
}
.kleyman-pr-contact-line__label { color: var(--kleyman-text-muted); font-weight: 600; }
.kleyman-pr-contact-line__sep { color: var(--kleyman-border); font-weight: 400; }
.kleyman-pr-contact-line__text a {
	color: var(--kleyman-blue);
	font-weight: 700;
	transition: color .3s var(--kleyman-ease);
}
.kleyman-pr-contact-line__text a:hover { color: var(--kleyman-green); }

@media (max-width: 640px) {
	.kleyman-pr-hero { padding-block: 128px 44px; }
	.kleyman-pr-grid-section { padding-block: 44px 0; }
	.kleyman-pr-grid { gap: 32px; }
	.kleyman-pr-contact-line { padding-block: 48px 72px; }
	.kleyman-pr-contact-line__text { flex-direction: column; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
	.kleyman-pr-card,
	.kleyman-pr-card__media,
	.kleyman-pr-card__media img,
	.kleyman-pr-card__title a,
	.kleyman-pr-card__link,
	.kleyman-pr-card__link svg {
		transition: none !important;
	}
}


/* Oct 2026 — video press item (plays inline, with sound). */
.kleyman-pr-card__media--video { background: #000; }
.kleyman-pr-card__media--video video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }
.kleyman-pr-card:has(.kleyman-pr-card__media--video):hover { transform: none; }