/* ============================================================================
 * Kataloglar (page-kataloglar.php) — catalog cover card grid. Only enqueued
 * on this page; head/breadcrumb/container come from the shared
 * product-archive.css base (see that file's own comment block for the
 * >=1601 / 1101-1600 / <=1100 container width formulas this page inherits).
 *
 * PROVENANCE NOTE: this page has no XD artboard — it was skipped entirely
 * from the original Tada.xd reference (see tasks/ + CLAUDE.md Section 2).
 * The only visual source is a single reference screenshot supplied with the
 * build task, not an inspectable XD/design-reference geometry export. Measurements
 * below are read off that screenshot as closely as possible (card box
 * ~361x451 -> simplified to a clean 4:5 cover ratio, ~30px column gap) and
 * are NOT pixel-exact XD values — TODO: confirm gap/radius/title size
 * against a real design handoff once one exists, per the Render
 * Verification Workflow.
 * ==========================================================================*/

.product-archive--kataloglar .product-archive__empty {
	margin: 0 0 40px;
}

.katalog-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 56px 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.katalog-card {
	min-width: 0;
}

.katalog-card__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
	color: inherit;
}
a.katalog-card__link:focus-visible {
	outline: 3px solid var(--tada-yellow);
	outline-offset: 4px;
	border-radius: 18px;
}

/* Cover: fixed 4:5 portrait box, image object-fit:cover so a wider/shorter
   source (e.g. the theme's own 16:9 placeholder.svg) fills it without
   distortion instead of leaving letterboxed gaps. */
.katalog-card__media {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 5;
	background: var(--tada-gray-100);
	border-radius: 16px;
	overflow: hidden;
}
.katalog-card__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Hover/focus: reused verbatim from the sitewide .product-card system
   (assets/css/pages/product-archive.css, ".product-card__image"/
   ".product-card__title" hover rules) — same transition timing, same scale
   factor, same "title turns Tada red" behaviour, same hover/pointer-fine +
   reduced-motion gating. Not a new hover design. The scale lives on the
   image only, inside .katalog-card__media's own overflow:hidden box (see
   above), so the zoom can never spill past the card's rounded corners or
   shift the grid geometry. */
@media (hover: hover) and (pointer: fine) {
	.katalog-card__image {
		transition: transform .4s cubic-bezier(.4, 0, .2, 1);
	}
	a.katalog-card__link:hover .katalog-card__image,
	a.katalog-card__link:focus-visible .katalog-card__image {
		transform: scale(1.07);
	}
	a.katalog-card__link:hover .katalog-card__title,
	a.katalog-card__link:focus-visible .katalog-card__title {
		color: var(--tada-red-active);
	}
}
@media (prefers-reduced-motion: reduce) {
	.katalog-card__image { transition: none; }
	a.katalog-card__link:hover .katalog-card__image,
	a.katalog-card__link:focus-visible .katalog-card__image { transform: none; }
}

.katalog-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 24px 0 0;
	max-width: 100%;
	min-height: 2.6em;
	text-align: center;
	font-family: Montserrat, Arial, sans-serif;
	font-weight: 700;
	font-size: clamp(15px, 1.05vw, 18px);
	line-height: 1.3;
	color: var(--tada-black);
	transition: color .25s cubic-bezier(.4, 0, .2, 1);
}

/* Already Tada red at rest (matches product-card__weight's own always-red
   treatment) — no separate hover shade invented for it; the shared image
   zoom + title color-shift above already carry the hover feedback. */
.katalog-card__view {
	display: block;
	margin: 12px 0 0;
	text-align: center;
	font-family: Montserrat, Arial, sans-serif;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.2;
	color: var(--tada-red-active);
}

/* ============================================================================
 * Responsive — tablet + mobil.
 * ==========================================================================*/
@media (max-width: 1100px) {
	.katalog-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
	.katalog-card__title { font-size: 16px; margin-top: 20px; }
}

@media (max-width: 767px) {
	.katalog-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
	.katalog-card__media { border-radius: 12px; }
	a.katalog-card__link:focus-visible { border-radius: 12px; }
	.katalog-card__title { font-size: 14px; margin-top: 14px; -webkit-line-clamp: 3; min-height: 3.6em; }
	.katalog-card__view { font-size: 13px; margin-top: 8px; }
}

/* Very small screens only: drop to a single, more readable column — same
   failsafe threshold product-archive.css uses for its own product grid. */
@media (max-width: 360px) {
	.katalog-grid { grid-template-columns: 1fr; gap: 24px; }
	.katalog-card__title { -webkit-line-clamp: 2; min-height: 2.6em; }
}

/* ============================================================================
 * Scroll reveal — per-card ordering (Faz 4).
 *
 * Each .katalog-card is its own `data-animate="fade-up"` element (see
 * template-parts/catalogs/archive.php), not a stagger child, so a card below
 * the fold waits for its own scroll-in instead of queueing behind the row
 * above it. That leaves only the within-a-row offset to express, and the
 * shared keyframe in main.css reads `--tada-anim-delay`, so it is set here,
 * per breakpoint, from the column count this grid ACTUALLY renders — measured
 * live on the page (getComputedStyle grid-template-columns + distinct card
 * left offsets), not assumed:
 *   1440 -> 4 columns (cards at x=104.5 / 419.75 / 735 / 1050.25) -> 0/80/160/240ms
 *   820  -> 2 columns (cards at x=24 / 422)                       -> 0/100ms
 *   390  -> 2 columns (cards at x=16 / 203)                       -> 0/80ms
 * The column tiers below mirror the layout tiers above exactly: >=1101px is
 * the 4-column grid, 768-1100px the tablet 2-column grid, 361-767px the mobile
 * 2-column grid, and <=360px the single-column failsafe — which gets no rule
 * at all, because one column per row means there is no row-mate to offset
 * against.
 *
 * `:nth-child(4n+k)` / `:nth-child(even)` are exactly "the k-th card of a row"
 * here: equal columns, no card spans or reorders, so column position follows
 * source order. Mobile keeps the shortest rhythm (80ms, one step only) — no
 * long chain, per the brief. 240ms max, well inside the shared 650ms stagger
 * budget.
 *
 * Nothing here touches layout — only animation-delay — and only the <li>
 * animates: the cover gets no zoom/rotate, the "Görüntüle" line no bounce.
 * The <a> itself is never a reveal target, so it carries no transform,
 * opacity or will-change of its own at any point, before or after the card
 * animation (main.js's `.is-anim-done` clears those on the <li> too).
 * ==========================================================================*/
@media (min-width: 1101px) {
	.tada-anim .katalog-grid > .katalog-card:nth-child(4n + 2) { --tada-anim-delay: 80ms; }
	.tada-anim .katalog-grid > .katalog-card:nth-child(4n + 3) { --tada-anim-delay: 160ms; }
	.tada-anim .katalog-grid > .katalog-card:nth-child(4n + 4) { --tada-anim-delay: 240ms; }
}

@media (min-width: 768px) and (max-width: 1100px) {
	.tada-anim .katalog-grid > .katalog-card:nth-child(even) { --tada-anim-delay: 100ms; }
}

@media (min-width: 361px) and (max-width: 767px) {
	.tada-anim .katalog-grid > .katalog-card:nth-child(even) { --tada-anim-delay: 80ms; }
}