/**
 * Haber kartı (`template-parts/content/card.php`): ana sayfa haber bölümü,
 * haber listeleri ve haber detayındaki "Diğer Haberler" aynı bileşeni
 * kullanır. Temel kart kuralları base.css'tedir (`.dj-post-card`); burada
 * özet ve dar ekran (tablet / mobil) kart düzeni durur. Kurallar `.dj-news`
 * kapsamındadır: ana sayfada bölümün kendisi, haber listelerinde kart
 * ızgarasının sarmalayıcısı bu sınıfı taşır.
 *
 * Bu kurallar home.css'ten olduğu gibi taşındı (ana sayfa görünümü aynı).
 *
 * @package Dijitsu
 */

/*
 * Kategori etiketi: her genişlikte görselin altında, başlığın üstünde küçük
 * gri metin (tablet düzeninin konumu); görselin üstünde katman ya da ayrılmış
 * boşluk yoktur. Kategori arşivine bağlantıdır: hover / odakta mürekkep rengi,
 * klavye odağında halka. Masaüstünde kart düzeni: görsel / etiket / başlık /
 * (özet) / tarih; tablet ve mobil kendi bloklarında aynı sırayı kurar.
 */
.dj-news .dj-post-card {
	grid-template-rows: auto auto 1fr auto;
}

.dj-news .dj-post-card.dj-post-card--excerpt {
	grid-template-rows: auto auto auto 1fr auto;
}

.dj-news .dj-post-card__media {
	margin-bottom: var(--dj-space-20);
}

.dj-news .dj-post-card__tag {
	position: static;
	justify-self: start;
	min-height: 0;
	margin: 0;
	padding: 0;
	border-radius: 0;
	background: none;
	color: var(--dj-muted);
	font-size: var(--dj-fs-14);
	font-weight: var(--dj-fw-medium);
	line-height: 1.3;
}

@media (hover: hover) {
	.dj-news .dj-post-card__tag:hover {
		background: none;
		color: var(--dj-ink);
	}
}

.dj-news .dj-post-card__tag:focus-visible {
	background: none;
	color: var(--dj-ink);
	outline: 2px solid var(--dj-focus);
	outline-offset: 2px;
}

/*
 * Başlık: masaüstünde `--dj-fs-28` (1440'ta 21, 1920'de 28 px); ağırlık ve
 * satır aralığı oranı base.css'teki gibi (bold, 1.278). En fazla 2 satır ve
 * 2 satırlık sabit alan: tek satırlık başlıkta da özet ve tarih aynı
 * satırdaki kartlarla aynı hizada kalır, kartlar eşit yükseklikte.
 */
.dj-news .dj-post-card__title {
	display: -webkit-box;
	height: calc(2em * 1.278);
	margin-top: var(--dj-space-8);
	overflow: hidden;
	font-size: var(--dj-fs-28);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

@media (max-width: 1023px) {
	.dj-news .dj-post-card__title {
		font-size: var(--dj-fs-22);
	}
}

@media (max-width: 767px) {
	.dj-news .dj-post-card__media {
		margin-bottom: var(--dj-space-20);
	}

	/*
	 * Her haber bağımsız bir kart: görsel üstte tam genişlik, içerik altta.
	 * Görsel oranı üç kartta da aynıdır (16:10) ve `cover` ile doldurulur —
	 * küçük listeleme görünümü yerine okunur bir kart. Kategori fotoğrafın
	 * üzerine binmez; içerik bloğunun ilk satırıdır.
	 */
	.dj-news .dj-post-card {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto auto auto;
		grid-template-areas:
			"media"
			"tag"
			"title"
			"meta";
		align-content: start;
		height: auto;
		border: 1px solid var(--dj-line);
		border-radius: var(--dj-radius-md);
		overflow: hidden;
	}

	/*
	 * Kare oran korunur (kaynaklar ~0.925; daha yatay bir oran ürünlerin
	 * üst/alt ucunu keserdi). Görsel yüksekliği kartın iç payı kadar
	 * (12) azalır: sahne kartın içine alınır ve kendi köşesini taşır.
	 */
	.dj-news .dj-post-card__media {
		grid-area: media;
		aspect-ratio: 1;
		margin: 12px 12px 0;
		border-radius: var(--dj-radius-sm);
		background: var(--dj-surface);
	}

	.dj-news .dj-post-card__media img {
		object-fit: cover;
		object-position: center;
	}

	.dj-news .dj-post-card__tag {
		grid-area: tag;
		position: static;
		justify-self: start;
		min-height: 0;
		margin: 12px 12px 0;
		padding: 0;
		border-radius: 0;
		background: none;
		color: var(--dj-muted);
		font-size: var(--dj-fs-14);
		font-weight: var(--dj-fw-medium);
		line-height: 1.3;
	}

	.dj-news .dj-post-card__title {
		grid-area: title;
		height: auto;
		margin: 6px 12px 0;
		font-size: 1.125rem; /* 18 px */
		line-height: 1.32;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	/*
	 * Meta sakin bir satırdır: tarih öne alınır, yazar adı dar kadrajda
	 * görsel gürültü yarattığı için basılmaz. Veri ve işaretleme yerinde
	 * kalır; yalnız bu kadrajdaki sunum değişir.
	 */
	.dj-news .dj-post-card__meta {
		grid-area: meta;
		display: flex;
		margin: 6px 12px 14px;
		font-size: var(--dj-fs-14);
		color: var(--dj-muted);
	}

	.dj-news .dj-post-card__meta > span {
		display: none;
	}
}

@media (min-width: 768px) and (max-width: 1199px) {
	/*
	 * Kategori fotoğrafın üstünde değil, içerik bloğunun ilk satırıdır;
	 * görsel kutuyu tamamen doldurur ve kartın köşe yarıçapına oturur.
	 */
	.dj-news .dj-post-card {
		border: 1px solid var(--dj-line);
		border-radius: var(--dj-radius-md);
		overflow: hidden;
		grid-template-rows: auto auto 1fr auto;
	}

	.dj-news .dj-post-card__media {
		aspect-ratio: 4 / 3;
		margin-bottom: 0;
		border-radius: 0;
		background: var(--dj-surface);
	}

	.dj-news .dj-post-card__media img {
		object-fit: cover;
		object-position: center;
	}

	.dj-news .dj-post-card__tag {
		position: static;
		justify-self: start;
		min-height: 0;
		margin: var(--dj-space-20) var(--dj-space-20) 0;
		padding: 0;
		border-radius: 0;
		background: none;
		color: var(--dj-muted);
		font-size: var(--dj-fs-14);
		font-weight: var(--dj-fw-medium);
		line-height: 1.3;
	}

	.dj-news .dj-post-card__title {
		height: calc(2em * 1.3);
		margin: var(--dj-space-8) var(--dj-space-20) 0;
		font-size: var(--dj-fs-20);
		line-height: 1.3;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.dj-news .dj-post-card__meta {
		align-self: end;
		margin: var(--dj-space-12) var(--dj-space-20) var(--dj-space-20);
		font-size: var(--dj-fs-14);
		color: var(--dj-muted);
	}
}

/*
 * Kart özeti (widget'ta "Özeti göster", varsayılan açık): başlık ile tarih
 * arasında, gövde ölçüsünde, en fazla iki satır. Esneyen satıra gerilmez
 * (`align-self: start`; gerilen kutuda kesilen satır görünür kalıyordu);
 * tarih kartın altında kalır, kartlar eşit yükseklikte.
 */
.dj-post-card--excerpt {
	grid-template-rows: auto auto 1fr auto;
}

.dj-post-card__excerpt {
	align-self: start;
	display: -webkit-box;
	margin: var(--dj-space-12) 0;
	overflow: hidden;
	color: var(--dj-muted);
	font-size: max(1rem, var(--dj-fs-16-fluid));
	line-height: var(--dj-lh-normal);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

@media (max-width: 767px) {
	.dj-news .dj-post-card.dj-post-card--excerpt {
		grid-template-areas:
			"media"
			"tag"
			"title"
			"excerpt"
			"meta";
		grid-template-rows: auto auto auto auto auto;
	}

	.dj-news .dj-post-card__excerpt {
		grid-area: excerpt;
		margin: 6px 12px 0;
		font-size: var(--dj-m-fs-body);
	}
}

@media (min-width: 768px) and (max-width: 1199px) {
	.dj-news .dj-post-card.dj-post-card--excerpt {
		grid-template-rows: auto auto auto 1fr auto;
	}

	.dj-news .dj-post-card__excerpt {
		margin: var(--dj-space-8) var(--dj-space-20) 0;
	}
}