/*
 * FRENKEL — archives, cards, grid, filters, related, pagination.
 * Shared by CPT archives and the related strips on singles.
 */

.cf-archive { margin-block: var(--cf-section-y); }
.cf-archive__head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	margin-block-end: var(--cf-section-y);
}
.cf-archive__title { margin: 0; }

/* Filters */
.cf-filters { display: flex; flex-wrap: wrap; gap: 1rem; }
.cf-filter {
	font-size: var(--cf-small);
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--cf-dark);
	opacity: .55;
}
.cf-filter.is-active,
.cf-filter:hover {
	opacity: 1;
	text-decoration: underline;
	text-underline-offset: .25em;
}

/* Grid */
.cf-grid { display: grid; gap: var(--cf-gap); }
.cf-grid--projects,
.cf-grid--press,
.cf-grid--related { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cf-grid--wr,
.cf-grid--services { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cf-grid--careers { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Centered archive head (careers) */
.cf-archive__head--center {
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.cf-archive__sub {
	margin: .5rem 0 0;
	font-family: var(--cf-font-display);
	font-size: var(--cf-h3);
}

/* Card */
.cf-card { display: block; color: inherit; text-decoration: none; }
.cf-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 4;
	background: var(--cf-greige);
}
.cf-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 1s var(--cf-ease);
}
.cf-card__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: .2rem;
	padding: 1rem;
	color: var(--cf-cream);
	background: #6F5D4559;
	opacity: 0;
	transition: opacity .7s var(--cf-ease);
}
.cf-card:hover .cf-card__overlay,
.cf-card:focus-visible .cf-card__overlay { opacity: 1; }
.cf-card__title {
	font-family: var(--cf-font-latin);
	font-size: 1.125rem;
	transition: transform .7s var(--cf-ease);
	letter-spacing: .12em;
	text-transform: uppercase;
}
.cf-card:hover .cf-card__title { transform: none; }
.cf-card__sub { font-size: var(--cf-small); opacity: .85; }

/* Caption below the media (press / careers). */
.cf-card__caption { display: block; padding-block-start: .75rem; }
.cf-card__caption .cf-card__title {
	display: block;
	font-size: 1.05rem;
	transform: none;
	text-align: center;
}
.cf-card__meta {
	display: block;
	font-size: var(--cf-small);
	letter-spacing: .06em;
	text-transform: uppercase;
	text-align: center;
}

/* The press card shows the outlet, not the headline: the logo on hover and the
 * source name below it are the whole label by design.
 *
 * Taken out of the layout rather than display: none, because the title is the
 * only thing naming this link — the meta line underneath is just the outlet, so
 * display: none would leave every press link announced as “Forbes”, “Ynet” and so
 * on, with nothing to tell them apart. This is invisible but still read out.
 *
 * No !important needed: .cf-card--press .cf-card__title outranks the base
 * .cf-card__title rule on its own.
 */
.cf-card--press .cf-card__title {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Press source logo + careers use a wider ratio. */
.cf-card--press .cf-card__media,
.cf-card--career .cf-card__media { aspect-ratio: 1/1; }
.cf-card__logo {
	position: absolute;
	width: 100%;
	bottom: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 4px 8px;
	background-color: #D6D2CD80;
	transform: translateY(100%);
	transition: transform .7s var(--cf-ease);
}
.cf-card__logo img { height: 30px; width: auto; display: block; margin: 10px; }
.cf-card--press:hover .cf-card__logo{
	transform: translateY(0);
}
	/* Watch & Read video badge. */
.cf-card__badge {
	position: absolute;
	inset-block-start: 8px;
	inset-inline-end: 8px;
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	background: rgba(96, 92, 84, .8);
	color: var(--cf-cream);
	border-radius: 50%;
	font-size: 13px;
}

/* Related */
.cf-related {
	padding-block: var(--cf-section-y);
	box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.15);
	background: #ffffff;
}
.cf-related__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	margin-block-end: var(--cf-gap);
}
.cf-related__title { margin: 0; }

/* Pagination */
.cf-pagination { margin-block-start: var(--cf-section-y); }
.cf-pagination ul.page-numbers {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .25rem;
	justify-content: center;
}
.cf-pagination .page-numbers {
	display: inline-block;
	padding: .5rem .9rem;
	text-decoration: none;
	color: var(--cf-dark);
}
.cf-pagination .current { text-decoration: underline; text-underline-offset: .25em; }

/* Portfolio archive page: the whole pager runs a weight lighter than the body.
   Scoped to that page's own wrapper class rather than .cf-pagination, so the
   press and search pagers keep the default weight. Both .page-numbers in the
   selector are real: the outer one is the <ul> paginate_links() wraps the set
   in, the inner one is each link or span.
   Current and non-current share the weight on purpose — the current page is
   marked by the underline in the rule above, not by being heavier. Split this
   into two rules if they ever need to differ.
   300 is a face FRENKEL Futura actually ships (300/400/500), so this renders
   rather than snapping to the nearest weight. */
.portfolio_archive_page .page-numbers .page-numbers { font-weight: 300; }

.cf-empty { padding-block: var(--cf-section-y); text-align: center; opacity: .7; }

/* Responsive */
@media (max-width: 1024px) {
	.cf-grid--projects,
	.cf-grid--press,
	.cf-grid--wr,
	.cf-grid--services,
	.cf-grid--related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.cf-grid--careers { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
	.cf-grid--projects,
	.cf-grid--press,
	.cf-grid--wr,
	.cf-grid--services,
	.cf-grid--related { grid-template-columns: 1fr; }
}

/* On phones the related strip becomes a swipeable carousel instead of a long
   stack: same markup, just a scroll-snap track. Native scrolling means no JS
   and no extra controls — the peeking next card is the affordance.
   Declared last so it wins over the stacking rules above. */
@media (max-width: 782px) {
	.cf-grid--related {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 78%;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		overscroll-behavior-inline: contain;
		/* Snap to the container's inner edge, not the padding box. */
		scroll-padding-inline: var(--cf-gutter);
		scrollbar-width: none;
	}
	.cf-grid--related::-webkit-scrollbar { display: none; }
	.cf-grid--related > * { scroll-snap-align: start; }
}

/* --- Elementor loop grid (related projects, flip-box cards) ---------------
 * The card height comes from `aspect-ratio: 1/1` set in Elementor's custom CSS
 * on the flip box — but a flip box positions its layers absolutely, so that
 * height never becomes a content contribution for the grid row. The row
 * collapses (~210px), the cards spill out of the section, and the footer rides
 * up over them.
 *
 * Putting the ratio on the grid item is what fixes it: row sizing does see an
 * aspect-ratio on the item itself. Everything between the item and the flip box
 * then just fills that height.
 */
.elementor-loop-container > .e-loop-item {
	aspect-ratio: 1 / 1;
	/* Grid items are min-width:auto; a wide background image would otherwise
	   refuse to shrink and push the column past the viewport. */
	min-width: 0;
}

.elementor-loop-container > .e-loop-item > .e-con,
.elementor-loop-container > .e-loop-item .e-con-inner,
.elementor-loop-container > .e-loop-item .elementor-widget-flip-box,
.elementor-loop-container > .e-loop-item .elementor-flip-box {
	height: 100%;
	min-height: 0;
}

/*
 * [frenkel_portfolio_grid] — column count comes from the shortcode as an inline
 * custom property, so one rule serves every variation. Declared after the
 * .cf-grid--projects breakpoints above so it wins at equal specificity.
 */
.cf-grid--shortcode {
	grid-template-columns: repeat(var(--cf-grid-cols, 4), minmax(0, 1fr));
}

@media (max-width: 1024px) {
	.cf-grid--shortcode {
		grid-template-columns: repeat(min(var(--cf-grid-cols, 4), 2), minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.cf-grid--shortcode {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --- Theme grid widgets --------------------------------------------------
 * Press Grid and Portfolio Grid (inc/elementor/). Column count and gap arrive
 * as custom properties from each widget's own responsive controls, so unlike
 * .cf-grid--shortcode this carries no breakpoints of its own: the editor sets
 * the count per device and Elementor emits the media queries. Declared after
 * the .cf-grid--press / .cf-grid--projects breakpoints above so it wins at
 * equal specificity at every width.
 */
.cf-grid--widget {
	grid-template-columns: repeat(var(--cf-grid-cols, 4), minmax(0, 1fr));
}

/*
 * The heading row. It owns the space above the grid in every combination —
 * heading alone, heading plus a top-positioned button, or a button alone — so
 * the widget's "Space Below" control has one place to write to.
 */
.cf-press-grid__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 1rem;
	margin-block-end: var(--cf-press-head-gap, var(--cf-section-y));
}
.cf-press-grid__title { margin: 0; }

/*
 * The button. Centred by default; each position override below says where it
 * goes. The justify-content matters in two places — when the button is its own
 * block below the grid, and when the heading row stacks on a phone — and is
 * simply inert while it is a flex item in that row.
 */
.cf-press-grid__more {
	display: flex;
	justify-content: center;
}
.cf-press-grid > .cf-press-grid__more {
	margin-block-start: var(--cf-section-y);
}

.cf-press-grid--bottom-left > .cf-press-grid__more { justify-content: flex-start; }
.cf-press-grid--bottom-right > .cf-press-grid__more { justify-content: flex-end; }

/*
 * Top — Right: the heading takes the free space, so the button lands on the
 * far edge and the heading's own alignment control still works inside what is
 * left. With no heading at all the row's justify-content puts it right anyway.
 */
.cf-press-grid--top-right .cf-press-grid__head {
	justify-content: flex-end;
	/* Centred rather than on the baseline: a 56px-tall button sitting on the
	   heading's baseline hangs below it. */
	align-items: center;
}
.cf-press-grid--top-right .cf-press-grid__title { flex: 1 1 auto; }
.cf-press-grid--top-right .cf-press-grid__more { justify-content: flex-end; }

/*
 * Top — Center: centred on the container, not on whatever is left of the row
 * beside the heading, which is what a flex row would give. Three tracks, with
 * the heading in the first and the button in the middle one.
 */
.cf-press-grid--top-center .cf-press-grid__head {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
}
.cf-press-grid--top-center .cf-press-grid__title { grid-column: 1; }
.cf-press-grid--top-center .cf-press-grid__more { grid-column: 2; }

/*
 * With a pager above it the button takes a smaller step, not a second full
 * section gap.
 */
.cf-pagination + .cf-press-grid__more { margin-block-start: var(--cf-gap); }

/*
 * The button is a fixed 200px wide, so on a phone there is no room for it
 * beside a heading: the row stacks and the button keeps its horizontal intent
 * on a line of its own.
 */
@media (max-width: 600px) {
	.cf-press-grid--top-center .cf-press-grid__head,
	.cf-press-grid--top-right .cf-press-grid__head {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}
}