/* ============================================================================
 * Fabrikalarımız (page-fabrikalarimiz.php) — two-column factory card grid.
 * Only enqueued on this page; head/breadcrumb/container come from the shared
 * product-archive.css base (product-archive.css comment block explains the
 * >=1601 / 1101-1600 / <=1100 container formulas this page inherits).
 *
 * Card geometry is measured from the client's own Tada.xd "Fabrikalarımız"
 * artboard (native 1920, see the project's XD-provenance convention at
 * tada-theme/assets/css/main.css:299):
 *   - Card 795×670, 30px corner radius, 1px #eaeaea border, white fill.
 *   - Image panel 795×400, all four corners independently rounded 30px — the
 *     image sits flush against the card's top/left/right edges so its top
 *     corners read as one continuous curve with the card, while its bottom
 *     corners float, rounded, over the white body beneath.
 *   - Content padding 30px (confirmed twice: the title's own left inset, and
 *     the Adres pill's width of 735 = 795 − 2×30).
 *   - Info pills (Rectangle 690/694/696 in the source file): native height 60,
 *     radius 30 (= exact half-height, i.e. a true pill — implemented as
 *     border-radius:999px so it stays a pill at any scaled height), white
 *     fill, 1px #eaeaea border. Toplam Üretim Alanı pill is 260 wide, Üretim
 *     Kategorileri is 455 wide (not a 50/50 split — kept as a 260fr/455fr
 *     column ratio), 20px gap between them; the Adres pill is full width
 *     (735 = the two pills' combined span). Each pill's icon sits in a
 *     40×40 #f2f2f2 circle at native size (Font-Awesome-style 24×20
 *     "factory" glyph / a 24×24 category-tree glyph, both recovered as real
 *     XD vector paths — see assets/images/fabrikalarimiz/icon-alan.svg,
 *     icon-kategori.svg provenance below).
 *
 *     Icon/padding/label-size are NOT one continuous vw-clamp across the
 *     whole >=1101 range: the 260:455 pill widths come from real container
 *     math (product-archive.css's 100vw-209px formula for 1101-1600), which
 *     doesn't shrink linearly with vw, so a single clamp either overflowed
 *     "Toplam Üretim Alanı" onto two lines at 1440/1600 or wasted space at
 *     the low end. Two fixed tiers instead: a compact base (28px icon, 13px
 *     label) sized to fit the label on one line at the narrowest real pill
 *     width in 1101-1600, and a >=1601 override restoring the exact native
 *     values (40px icon, 16px label) once the pill is back to its full
 *     ~260px. <=1100 reuses the native tier again (single-column card is
 *     wide enough there); <=767 goes back to compact (narrow mobile pill).
 * Typography (read directly off the XD text layers' own style records, at
 * native/>=1601 size): title Montserrat ExtraBold 32/#000; pill label
 * Montserrat Bold 16/#9e262d; pill value Montserrat Medium 15 (Toplam
 * Üretim Alanı) / Regular 14 (Üretim Kategorileri, Adres), both #000.
 *
 * Icon provenance: icon-alan.svg / icon-kategori.svg are the artboard's own
 * vector icons, recovered by walking the icon group's nested transform chain
 * with full 2×3 affine-matrix composition (a naive tx/ty-only sum, tried
 * first, produced a visibly distorted shape because several ancestor groups
 * carry non-trivial matrices) and re-emitting each path in the icon's own
 * local coordinate space — not hand-drawn. icon-adres.svg has no equivalent
 * XD icon on this artboard (verified: no icon group renders next to any
 * "Adres" label in the source file) — it reuses the theme's own existing
 * location-pin icon (assets/images/footer/icon-location.svg), recoloured to
 * #9e262d, per the task's own fallback priority (XD → existing theme icon
 * system) for exactly this case.
 *
 * Photo provenance: the seven factory photos are real, embedded XD assets —
 * see the doc comment on tada_seed_fabrika_records() in inc/acf.php for the
 * `resources/<uid>` recovery method and per-card visual matching.
 * ==========================================================================*/

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

.factory-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px 40px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.factory-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--tada-white);
	border: 1px solid #eaeaea;
	border-radius: 30px;
	overflow: hidden;
}

/* White, not --tada-gray-100: the image's own border-radius (not this
   wrapper's) rounds its bottom corners, so whatever sits behind those two
   corners is this element's background showing through — it must match the
   card's own white so the photo and the white body below read as one
   continuous section, not a gray sliver at the rounded corners. */
.factory-card__media {
	position: relative;
	width: 100%;
	flex: 0 0 auto;
	overflow: hidden;
	background: var(--tada-white);
}
/* aspect-ratio lives on the <img> itself, not the wrapper: on this Chrome
   build a wrapper-level aspect-ratio silently loses to the replaced child's
   own intrinsic ratio once the flex column stretches its cross size (the
   rendered height matched each photo's individual source ratio instead of
   the declared 795:400 box, confirmed via getBoundingClientRect on the live
   page). Replaced elements resolve aspect-ratio reliably, so it's set here
   instead, with height:auto (not 100%, which would just re-ask the broken
   question of the parent's height) — object-fit:cover still crops for us. */
.factory-card__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 795 / 400;
	object-fit: cover;
	border-radius: 30px;
}

.factory-card__body {
	display: flex;
	flex-direction: column;
	gap: clamp(14px, 1.4vw, 24px);
	padding: clamp(18px, 2.2vw, 30px);
}

.factory-card__title {
	margin: 0;
	font-family: Montserrat, Arial, sans-serif;
	font-weight: 800;
	font-size: clamp(17px, 1.75vw, 32px);
	line-height: 1.2;
	color: var(--tada-black);
}

/* Two pills side by side, 260:455 width ratio (not 50/50 — the source file
   itself sizes "Üretim Kategorileri" wider since its values run longer). */
.factory-card__row {
	display: grid;
	grid-template-columns: 260fr 455fr;
	gap: clamp(10px, 1.3vw, 20px);
	min-width: 0;
}

/* Pill chrome (icon/padding/font) below is deliberately NOT one continuous
   vw-clamp across the whole >=1101 range. The 260:455 pill widths themselves
   come from real container math (product-archive.css's 100vw-209px formula
   for 1101-1600), which does not shrink linearly with vw — a single clamp
   tuned to fit at 1440 still overflowed its pill at the top of that same
   range, and one tuned to fit at 1600 wrapped "Toplam Üretim Alanı" onto two
   lines at 1440/1600. Two fixed tiers instead: this base tier is sized to
   fit the label on one line at the narrowest real pill width in the
   1101-1600 band; the >=1601 override below restores the exact native XD
   values (measured: 40px icon, 16px label) once the pill is back to its
   full native ~260px. Both a bare `align-items:flex-start` (not `center`) so
   a short pill's label/value baselines line up with a taller neighbour pill
   that wrapped to two lines — centering would decouple them once the row's
   shared grid height stretches the shorter pill. */
.factory-card__info {
	display: flex;
	align-items: flex-start;
	gap: 4px;
	min-width: 0;
	min-height: 44px;
	/* padding-left raised from 3px to 8px (measured: icon-to-pill-left gap
	   was 4px vs ~9.5px icon-to-top/bottom — the icon is vertically centred
	   in this row's min-height, giving it extra top/bottom breathing room
	   that plain left padding never had). Top/right/bottom untouched — this
	   grid's `fr` columns (.factory-card__row, `260fr 455fr`) are equivalent
	   to `minmax(auto, Nfr)` per spec, so the label's own text can't be
	   squeezed into wrapping by this — the column would grow instead. */
	padding: 5px 7px 5px 8px;
	background: var(--tada-white);
	border: 1px solid #eaeaea;
	border-radius: 999px;
}
.factory-card__info--adres {
	width: 100%;
}

/* Icon circle: align-self:center (not the container's own align-items,
   which stays flex-start for the text so label/value baselines still match
   the neighbouring pill — see the block comment above) so the icon centres
   in the pill's actual rendered height, including when a taller neighbour
   pill (2-line category text) stretches this one via the shared grid row —
   never anchored to the text's first line. */
.factory-card__info-icon {
	flex: 0 0 auto;
	align-self: center;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	background: #f2f2f2;
	border-radius: 50%;
}
.factory-card__info-icon svg {
	display: block;
	width: 58%;
	height: auto;
}

.factory-card__info-text {
	display: block;
	min-width: 0;
}
.factory-card__info-label {
	display: block;
	font-family: Montserrat, Arial, sans-serif;
	font-weight: 700;
	font-size: 12.5px;
	line-height: 1.3;
	color: #9e262d;
	white-space: normal;
}
.factory-card__info-value {
	display: block;
	margin-top: 2px;
	font-family: Montserrat, Arial, sans-serif;
	font-weight: 500;
	font-size: 12px;
	line-height: 1.4;
	color: var(--tada-black);
	overflow-wrap: break-word;
	white-space: normal;
}
.factory-card__info--adres .factory-card__info-value {
	font-weight: 400;
}

/* Native XD geometry: pill back to its full ~260px width at this size, so
   the native icon/type values (measured off Rectangle 690/694/696 and their
   text layers: 40px icon, 16px label) fit and read correctly — bumped
   slightly further to 44px/16px per this round's explicit "make the icons
   bigger" revision. Padding/gap deliberately stay at the same tight compact-
   tier values (not their own wider native measurement) across this whole
   band: right at 1601 the pill has only just grown past the 1101-1600 tier's
   narrowest point, and widening the chrome immediately re-created the exact
   one-line-wrap problem this round was fixed for (confirmed empirically:
   with wider padding "Toplam Üretim Alanı" wrapped again from 1601-~1670).
   Icon/font instead ease in via clamp() from the compact tier's own values
   up to the enlarged 44px/16px only once the pill has actually grown enough
   (~1920) to afford them — verified with no wrap anywhere in 1601-1920. */
@media (min-width: 1601px) {
	.factory-card__info {
		gap: 4px;
		min-height: 60px;
		padding: 5px 7px 5px 8px;
	}
	.factory-card__info-icon {
		width: clamp(28px, 5.02vw - 52.4px, 44px);
		height: clamp(28px, 5.02vw - 52.4px, 44px);
	}
	.factory-card__info-label {
		font-size: clamp(12.5px, 1.1vw - 5.1px, 16px);
	}
	.factory-card__info-value {
		font-size: clamp(12px, 1.03vw - 4.8px, 15px);
	}
}

/* ============================================================================
 * Responsive. Base rules above already fluidly cover >=1101 via clamp()
 * (matching how .product-card__title already scales with vw in
 * product-archive.css — the same technique, applied here so the card's own
 * geometry — not just its font-size — tracks the real container width
 * instead of jumping between fixed per-tier values).
 *
 * At <=1100 the shared .product-archive__inner container is capped at
 * 1040px (see product-archive.css), so a 2-column card would run as narrow
 * as ~348px at 768px viewport — too tight for the 260:455 pill pair to stay
 * readable on one line each. Rather than invent a one-off breakpoint, the
 * grid drops to a single, full-width column at the theme's own existing
 * 1100 breakpoint (covers both the 1024 and 768 QA viewports at once), which
 * gives every card, and therefore every pill, comfortable room again.
 *
 * True mobile (<=767, the theme's own mobile threshold) keeps that single
 * column and lets the two top pills fall back to auto-fit: side by side
 * when there's room, stacked when there isn't — the Adres pill is always
 * full width.
 * ==========================================================================*/
@media (max-width: 1100px) {
	.factory-grid { grid-template-columns: 1fr; gap: 28px; }
	/* Single, full-width card gives each pill more room than the 1101-1600
	   two-column tier (measured: at 768px viewport the card is ~720px wide,
	   pill1 ~245px), enough to afford the full 44px/16px icon+label — but
	   only with the tight compact-tier padding/gap, not the >=1601 tier's
	   own wider values (confirmed empirically: with wider padding, "Toplam
	   Üretim Alanı" wrapped at exactly 768px — the same one-line-wrap issue
	   fixed at the 1601 seam above, same fix). */
	.factory-card__info { gap: 4px; min-height: 60px; padding: 5px 7px 5px 8px; }
	.factory-card__info-icon { width: 44px; height: 44px; }
	.factory-card__info-label { font-size: 16px; }
	.factory-card__info-value { font-size: 15px; }
	/* Toplam Üretim Alanı only (.factory-card__info--area — set in
	   grid.php): its value is always one short line ("19.000 m²"), so unlike
	   Üretim Kategorileri/Adres it never needs the flex-start "match a taller
	   wrapped neighbour's baseline" behaviour — true vertical centering reads
	   better once the pill has this much headroom. Kategori/Adres keep
	   flex-start untouched. Cascades down through <=767 too (not re-declared
	   there) since nothing below overrides align-items on this pill. */
	.factory-card__info--area { align-items: center; }
}

/* ============================================================================
 * TABLET (769-1100) — iki kolonlu kart grid'i.
 *
 * Yukarıdaki `max-width: 1100px` bloğu bütün tableti tek kolona düşürüyordu;
 * 820px'te bu, 772px genişliğinde 7 kartın alt alta dizilmesi demekti ve sayfa
 * 5328px'e çıkıyordu (ölçüldü). Kart mimarisi aynı kalıyor (görsel → başlık →
 * Toplam Üretim Alanı / Üretim Kategorileri → Adres); yalnızca kartlar tablet
 * genişliğine iki kolon olarak dağıtılıyor. Dış gutter'a dokunulmuyor:
 * .product-archive__inner'ın kendi `min(calc(100% - 48px), 1040px)` kuralı
 * (product-archive.css) diğer kurumsal tablet sayfalarıyla ortak.
 *
 * Bilgi kutuları neden yan yana DEĞİL: brief'in istediği gibi önce iki
 * kolonlu kompakt kullanım denendi. 820px'te kart 376px, kutu 166px, ikon +
 * padding düşünce metne 116px kalıyor — yedi kartın HEPSİNDE hem "Toplam
 * Üretim Alanı" hem "Üretim Kategorileri" etiketi iki satıra sarıyor ve
 * kategori değeri 4 satıra kadar çıkıyor (ölçüldü). Bu, düzeltilmesi istenen
 * "fazla küçük ve sıkışık" görünümün ta kendisi. Kart içinde alt alta
 * geçildiğinde kutu 338px oluyor, metin kolonu ~280px'e çıkıyor: her etiket
 * tek satır, değerler 1-2 satır. Brief'in izin verdiği alternatif bu yüzden
 * seçildi.
 *
 * Görsel oranı 795/400 (=1.99) yerine 16/10: 376px genişliğinde masaüstü oranı
 * 189px'lik ince bir şerit bırakıyordu. Kaynak fotoğrafların kendi oranları
 * 1.75-1.84 arasında, yani 16/10 yatayda ~%10 kırpıyor (her kenardan ~%5) —
 * fabrika binasının ana kütlesi kadrajda kalıyor. Bütün kartlarda tek ve aynı
 * oran; hiçbir görsele ayrı height verilmiyor.
 * ==========================================================================*/
@media (min-width: 769px) and (max-width: 1100px) {
	.factory-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		/* satır 26px / kolon 20px. Kart: 820px'te (772 - 20) / 2 = 376px. */
		gap: 26px 20px;
	}

	/* Yedi kayıt olduğu için son kart tek kalıyor: doğal grid akışında sol
	   (birinci) kolonda kalıyor, sağ kolon boş. Ortalama kuralı YOK —
	   önceki turda denenen `grid-column: 1 / -1` + `justify-self: center`
	   onaylanmadı ve kaldırıldı; son kart üst satırlardaki sol kartlarla
	   aynı X çizgisinde başlamalı. */

	.factory-card__image { aspect-ratio: 16 / 10; }

	.factory-card__body {
		gap: 14px;
		padding: 18px 18px 20px;
	}

	/* 17px: brief'in 16-18px aralığında, font-weight 800 korunuyor. Yedi
	   başlığın hepsi 376px kartta tek satırda kalıyor (ölçüldü), yani aynı
	   satırdaki kartların başlık başlangıçları hizalı. */
	.factory-card__title {
		font-size: 17px;
		line-height: 1.25;
	}

	/* Kutular kart içinde alt alta (yukarıdaki blok komutuna bak). */
	.factory-card__row {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}

	/* Tek kolon = her kutu tam genişlik, dolayısıyla <=1100 tek-kolon tier'ının
	   sıkışık chrome'u yerine daha rahat ikon/padding/tipografi. align-items
	   center: üç kutunun da içeriği artık kendi min-height'ına yakın, üstten
	   hizalama metni tepeye yapıştırıp altta boşluk bırakıyordu. */
	.factory-card__info {
		align-items: center;
		gap: 10px;
		min-height: 54px;
		padding: 8px 14px 8px 8px;
	}
	.factory-card__info-icon { width: 34px; height: 34px; }
	.factory-card__info-label { font-size: 13.5px; }
	.factory-card__info-value { font-size: 13px; }
}

/* ============================================================================
 * Scroll reveal — per-card ordering (Faz 4).
 *
 * Each .factory-card is its own `data-animate="fade-up"` element (see
 * template-parts/fabrikalarimiz/grid.php), not a stagger child, so a card
 * below the fold waits for its own scroll-in instead of queueing behind the
 * six 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 -> 2 columns (cards at x=104.5 / 740)  -> 0 / 100ms
 *   820  -> 2 columns (cards at x=24 / 420)     -> 0 / 100ms
 *   390  -> 1 column  (every card at x=16)      -> no offset at all
 * Both two-column bands are the same rule because the grid switches to a
 * single column at exactly the same 769px seam the two-column tier above
 * starts at, so `min-width: 769px` is precisely "the grid has 2 columns".
 *
 * `:nth-child(even)` is exactly "the right-hand card of a row" here: two
 * equal columns, no card spans or reorders, so odd cards are always the left
 * column. That includes the 7th card — the one left alone on the last row —
 * which stays 0ms and is never singled out with a rule of its own. Nothing
 * here touches layout (only animation-delay), so the last card keeps the
 * plain grid-flow left alignment it already has.
 *
 * 100ms max, far inside the shared 650ms stagger budget. Only the <li>
 * animates: the photo gets no zoom, the pills and their icons get no motion.
 * ==========================================================================*/
@media (min-width: 769px) {
	.tada-anim .factory-grid > .factory-card:nth-child(even) { --tada-anim-delay: 100ms; }
}

@media (max-width: 767px) {
	.factory-grid { gap: 24px; margin-bottom: 28px; }
	.factory-card { border-radius: 22px; }
	.factory-card__image,
	.factory-card__media { border-radius: 22px; }
	.factory-card__row { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
	/* Back to the compact chrome (undoing the <=1100 native bump above) — a
	   ~150-170px mobile pill can't spare a 40px icon the way a full-width
	   single card can; the label may still wrap to two lines here when two
	   pills sit side by side, which is expected on mobile (only "masaüstünde"
	   needs to stay on one line) and never clips since height is min-height. */
	.factory-card__info { gap: 4px; min-height: 44px; padding: 5px 7px 5px 8px; }
	.factory-card__info-icon { width: 28px; height: 28px; }
	.factory-card__info-label { font-size: 12.5px; }
	.factory-card__info-value { font-size: 12px; }
}