/* -----------------------------------------------------------------------
   "הכירו את הצייצנים" category archive (slug: meet).
   A full-bleed hero over a slow-drifting wall of the section's own faces,
   then a full-width feed of social-post style cards, two per row.
   ----------------------------------------------------------------------- */

/* --- Hero ------------------------------------------------------------- */
/* Pulled up by .site-content's own padding so the dark surface meets the
   header with no seam, and stretched past .container to the viewport edges. */
.meet-hero {
	/* The cover's two colours, stated once: the scrim below has to resolve
	   into the bottom one or a seam shows where the collage ends, and the
	   share buttons flip to it on hover. Raised ~5 points of lightness off
	   the original #0d2033/#071624 — the faces behind the headline still
	   sit under a dark cover, just not a near-black one. */
	--meet-cover: #122d47;
	--meet-cover-deep: #0b2339;

	position: relative;
	display: grid;
	place-items: center;
	min-block-size: clamp(340px, 54vh, 520px);
	margin-block-start: calc(-1 * var(--shivuk-space));
	padding-block: clamp(2.1rem, 5.5vw, 3.75rem);
	overflow: hidden;
	text-align: center;
	background: linear-gradient(180deg, var(--meet-cover) 0%, var(--meet-cover-deep) 100%);
	color: #ffffff;
	/* Own stacking context: the negative-z collage and scrim below can never
	   escape behind the page itself. */
	isolation: isolate;
}

/* No thumbnails to build a wall from — the gradient carries the hero alone,
   so it needs less height to look intentional rather than empty. */
.meet-hero--bare {
	min-block-size: clamp(230px, 34vh, 330px);
}

/* --- The collage ------------------------------------------------------ */
/* Columns drifting vertically at different speeds, half of them upward and
   half down, the whole wall tilted and breathing very slowly. The rotation
   leaves bare corners, so it is inset negatively and scaled up to cover them.
   The wall spans the full width of the cover: the columns divide the plane
   evenly (flex: 1 1 0, no width cap), and the count drops at the breakpoints
   below so a phone gets three wide columns rather than eight slivers. */
.meet-collage {
	position: absolute;
	inset: -24% -14%;
	z-index: -2;
	display: flex;
	gap: clamp(0.55rem, 1.3vw, 1.15rem);
	transform: rotate(-6deg) scale(1.08);
	/* The slow breath is what keeps the wall from reading as four separate
	   marquees: it moves the whole plane together, in a different rhythm and
	   on a different axis from the columns themselves. */
	animation: meet-drift 46s ease-in-out infinite alternate;
}

.meet-collage__col {
	flex: 1 1 0;
	min-inline-size: 0;
	overflow: hidden;
}

/* Column count by width. Eight columns across a 1600px screen is a ~200px
   tile — the same size the wall always had — while three across a phone keeps
   the faces large enough to read as faces. */
@media (max-width: 1400px) {
	.meet-collage__col--8 {
		display: none;
	}
}

@media (max-width: 1200px) {
	.meet-collage__col--7 {
		display: none;
	}
}

@media (max-width: 1000px) {
	.meet-collage__col--6 {
		display: none;
	}
}

@media (max-width: 820px) {
	.meet-collage__col--5 {
		display: none;
	}
}

@media (max-width: 560px) {
	.meet-collage__col--4 {
		display: none;
	}
}

/* The track prints its tiles twice and travels exactly half its own height,
   so the second copy lands on the first's mark and the loop is seamless.
   Spacing is margin, not gap: a flex gap would add one extra step that -50%
   doesn't account for, and the seam would show on every lap. */
.meet-collage__track {
	display: flex;
	flex-direction: column;
	block-size: max-content;
	animation: meet-marquee 68s linear infinite;
	will-change: transform;
}

/* Speed, direction, opacity and blur all vary per column, which is what
   gives the wall depth: the dimmer, softer columns read as further back. */
.meet-collage__col--1 {
	opacity: 0.5;
	filter: blur(1.6px);
}

.meet-collage__col--1 .meet-collage__track {
	animation-duration: 82s;
}

.meet-collage__col--2 {
	opacity: 0.86;
}

.meet-collage__col--2 .meet-collage__track {
	animation-duration: 58s;
	animation-direction: reverse;
}

.meet-collage__col--3 .meet-collage__track {
	animation-duration: 71s;
}

.meet-collage__col--4 {
	opacity: 0.58;
	filter: blur(1.1px);
}

.meet-collage__col--4 .meet-collage__track {
	animation-duration: 94s;
	animation-direction: reverse;
}

/* The outer four, on the halves of the cover the wall never used to reach.
   Their speeds are deliberately not repeats of 1–4: eight columns in two
   identical groups of four would read as a pattern, which is the one thing a
   collage must not do. */
.meet-collage__col--5 {
	opacity: 0.72;
	filter: blur(0.6px);
}

.meet-collage__col--5 .meet-collage__track {
	animation-duration: 64s;
}

.meet-collage__col--6 {
	opacity: 0.46;
	filter: blur(1.8px);
}

.meet-collage__col--6 .meet-collage__track {
	animation-duration: 88s;
	animation-direction: reverse;
}

.meet-collage__col--7 {
	opacity: 0.8;
}

.meet-collage__col--7 .meet-collage__track {
	animation-duration: 76s;
}

.meet-collage__col--8 {
	opacity: 0.54;
	filter: blur(1.3px);
}

.meet-collage__col--8 .meet-collage__track {
	animation-duration: 99s;
	animation-direction: reverse;
}

@keyframes meet-marquee {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(0, -50%, 0);
	}
}

@keyframes meet-drift {
	from {
		transform: rotate(-6.5deg) scale(1.06);
	}

	to {
		transform: rotate(-3.5deg) scale(1.13);
	}
}

.meet-collage__tile {
	flex: none;
	display: block;
	inline-size: 100%;
	margin-block-end: clamp(0.55rem, 1.3vw, 1.15rem);
	border-radius: clamp(12px, 1.5vw, 20px);
	overflow: hidden;
	background: rgba(255, 255, 255, 0.06);
	box-shadow: 0 14px 34px rgba(3, 10, 18, 0.5);
	/* Each tile also floats a little on its own, so the columns never look
	   like rigid ladders. Both the shapes and the float timings below cycle
	   every five children — the same number of tiles each copy holds — so the
	   duplicated copy carries identical phases and the loop point stays
	   invisible. */
	animation: meet-float 9s ease-in-out infinite alternate;
}

.meet-collage__tile:nth-child(5n + 1) {
	aspect-ratio: 1;
	animation-duration: 9.5s;
	animation-delay: -0.4s;
}

.meet-collage__tile:nth-child(5n + 2) {
	aspect-ratio: 3 / 4;
	animation-duration: 7.5s;
	animation-delay: -2.6s;
}

.meet-collage__tile:nth-child(5n + 3) {
	aspect-ratio: 4 / 5;
	animation-duration: 11s;
	animation-delay: -1.3s;
}

.meet-collage__tile:nth-child(5n + 4) {
	aspect-ratio: 1;
	animation-duration: 8.2s;
	animation-delay: -3.7s;
}

.meet-collage__tile:nth-child(5n + 5) {
	aspect-ratio: 5 / 6;
	animation-duration: 10.4s;
	animation-delay: -5.1s;
}

@keyframes meet-float {
	from {
		transform: translate3d(0, -6px, 0) scale(0.985);
	}

	to {
		transform: translate3d(0, 6px, 0) scale(1.015);
	}
}

.meet-collage__img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	/* Desaturated and dimmed: the wall is texture behind the headline, not
	   competition for it. The scrim below does the rest. */
	filter: grayscale(0.4) saturate(0.9) brightness(0.76);
}

/* Scrim: legible type over any set of photos, resolving to the page colour at
   the bottom so the feed joins the hero without a visible edge. ::before, so
   the glow below (::after) paints on top of it rather than under it — same
   z-index, later pseudo wins. */
.meet-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(72% 62% at 50% 45%, rgba(11, 32, 52, 0.6), rgba(11, 32, 52, 0.88) 72%),
		linear-gradient(180deg, rgba(13, 34, 54, 0.84) 0%, rgba(13, 34, 54, 0.58) 38%, var(--meet-cover-deep) 100%);
}

/* A wide accent glow behind the headline — the brand colour warming the
   middle of an otherwise cold wall, pulsing far slower than anything else on
   the page so it registers as light rather than motion. */
.meet-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(48% 42% at 50% 46%, rgba(26, 125, 190, 0.4), transparent 70%),
		radial-gradient(38% 46% at 14% 88%, rgba(26, 125, 190, 0.2), transparent 72%);
	mix-blend-mode: screen;
	animation: meet-glow 17s ease-in-out infinite alternate;
}

@keyframes meet-glow {
	from {
		opacity: 0.6;
		transform: scale(1);
	}

	to {
		opacity: 1;
		transform: scale(1.1);
	}
}

/* --- Hero content ----------------------------------------------------- */
.meet-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.meet-hero__title {
	margin: 0;
	font-size: clamp(2.3rem, 1rem + 6vw, 5rem);
	font-weight: 800;
	line-height: 1.03;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.meet-hero__desc {
	margin: 1rem 0 0;
	max-inline-size: 60ch;
	font-size: clamp(1rem, 0.95rem + 0.4vw, 1.2rem);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.82);
	text-wrap: pretty;
}

/* Count and share on one line, split by a hairline above them. */
.meet-hero__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem clamp(1rem, 3vw, 2rem);
	margin-block-start: clamp(1.1rem, 2.4vw, 1.5rem);
	padding-block-start: clamp(0.85rem, 1.8vw, 1.15rem);
	border-block-start: 1px solid rgba(255, 255, 255, 0.18);
}

.meet-hero__count {
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.9);
}

.meet-hero__share {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
}

.meet-hero__share-label {
	font-size: 0.82rem;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.6);
}

/* The shared share buttons are drawn for light surfaces — re-tint them for
   the dark hero. */
.meet-hero .entry-share__btn {
	color: #ffffff;
	border-color: rgba(255, 255, 255, 0.24);
	background: rgba(255, 255, 255, 0.08);
}

.meet-hero .entry-share__btn:hover,
.meet-hero .entry-share__btn:focus-visible {
	color: var(--meet-cover-deep);
	border-color: #ffffff;
	background: #ffffff;
}

/* --- Feed ------------------------------------------------------------- */
.meet-archive__body {
	padding-block-start: clamp(2rem, 5vw, 3.5rem);
}

.meet-feed {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(2rem, 4vw, 3.25rem) clamp(1.5rem, 3vw, 2.5rem);
	align-items: start;
}

@media (max-width: 640px) {
	.meet-feed {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --- The card ---------------------------------------------------------- */
/* No box, no chrome: a large soft-cornered image with the words underneath
   it, the way a modern editorial grid reads. .post-card is inherited for the
   load-more selector's sake (navigation.js lifts .content-area .post-card out
   of the fetched page), so its horizontal layout and hairlines are unwound. */
.meet-card {
	display: flex;
	flex-direction: column;
	gap: clamp(0.9rem, 2vw, 1.2rem);
	padding-block-end: 0;
	border-block-end: 0;
}

.meet-feed .post-card + .post-card {
	margin-block-start: 0;
}

.meet-card__thumb {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: clamp(16px, 2vw, 26px);
	box-shadow: var(--shivuk-shadow-sm);
	transition:
		transform 0.5s var(--shivuk-ease),
		box-shadow 0.5s var(--shivuk-ease);
}

/* The whole frame lifts, not just the picture inside it — one soft movement
   rather than two competing ones. */
.meet-card:hover .meet-card__thumb,
.meet-card:focus-within .meet-card__thumb {
	transform: translateY(-5px);
	box-shadow: var(--shivuk-shadow-md);
}

/* Archives freeze the shared card zoom (body.archive rule in style.css); a
   very slight one comes back here, under the lift. */
body.archive .meet-card:hover .post-card__thumb img {
	transform: scale(1.03);
}

.meet-card .home-thumb-empty {
	display: grid;
	place-items: center;
	inline-size: 100%;
	block-size: 100%;
	color: var(--shivuk-color-border);
}

.meet-card .home-thumb-empty svg {
	inline-size: 36px;
	block-size: 36px;
}

.meet-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	padding-inline: clamp(0.15rem, 0.6vw, 0.4rem);
}

.meet-card__date {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--shivuk-color-muted);
}

.meet-card .entry-title {
	font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem);
	line-height: 1.24;
	letter-spacing: -0.015em;
}

/* The link colour only moves on hover — the title is dark and calm at rest. */
.meet-card .entry-title a {
	transition: color 0.3s var(--shivuk-ease);
}

.meet-card:hover .entry-title a {
	color: var(--shivuk-color-accent);
}

.meet-card .entry-summary {
	font-size: 0.97rem;
	line-height: 1.65;
	color: var(--shivuk-color-muted);
	/* Three lines, so a long excerpt can't set the height of the whole row. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Full-width bands inside the two-column grid. */
.meet-feed__promo,
.meet-feed .load-more {
	grid-column: 1 / -1;
}

.meet-feed__promo {
	margin-block: clamp(0.5rem, 1.5vw, 1rem);
}

/* --- Motion preferences ----------------------------------------------- */
/* Everything stops. The wall stays a collage, just not a moving one. */
@media (prefers-reduced-motion: reduce) {
	.meet-collage,
	.meet-collage__track,
	.meet-collage__tile,
	.meet-hero::after {
		animation: none;
	}

	.meet-card__thumb {
		transition: none;
	}

	.meet-card:hover .meet-card__thumb,
	.meet-card:focus-within .meet-card__thumb {
		transform: none;
	}

	body.archive .meet-card:hover .post-card__thumb img {
		transform: none;
	}
}