/*
 * ÇandName CSS modülü: Bölümler ve kartlar
 * Ana sayfa bölümleri, kart ızgaraları, kategori sütunları, video bandı.
 * Bu dosya diğer CSS dosyalarından bağımsızdır; hata yalnızca bu alanı etkiler.
 * Yükleme sırası: inc/assets.php
 */

/* ------------------------------------------------------------------
   7. Sections, cards, grids
------------------------------------------------------------------ */
.section { padding: 56px var(--gutter) 0; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border-bottom: 2px solid var(--line); }
.section-head h2, .section-head .section-title { margin: 0 0 -2px; font-size: calc(26px * var(--fs, 1)); font-weight: 700; padding-bottom: 10px; border-bottom: 2px solid var(--green); }
.section-head--red .section-title { border-bottom-color: var(--red); }
.section-head > a { color: var(--green); font-size: calc(13px * var(--fs, 1)); font-weight: 600; white-space: nowrap; }
.section-head > a:hover { text-decoration: underline; }

.home-layout { display: grid; gap: 32px; align-items: start; grid-template-columns: minmax(0, 1fr); }
/* Mobile: the sidebar (authors box etc.) comes before the latest posts. */
@media (max-width: 899px) { .home-layout > .home-sidebar { order: -1; } .home-layout { gap: 20px; } }
@media (min-width: 900px) { .home-layout { grid-template-columns: minmax(0, 3fr) minmax(280px, 1fr); } }

.cards { display: grid; align-items: start; gap: 32px 24px; margin-top: 28px; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.cards--news { gap: 24px; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }
.cards--video { gap: 24px; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }

/* Grids that follow candname_grid_plan(): the column count only jumps between numbers that divide the box count (no lonely box in the last row). */
.grid-plan[data-w] { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .grid-plan[data-m="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .grid-plan[data-w="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .grid-plan[data-w="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1250px) { .grid-plan[data-w="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.card { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* Card picture (1.44.0): the box is as tall as the picture (width = column, height follows), so an older 4:3 / square picture with text is shown whole and no empty strip is left under it. 16:9 pictures look exactly as before. Only the empty placeholder and video thumbnails keep a fixed 16:9 box. */
.card-media { position: relative; display: block; overflow: hidden; border-radius: 3px; background: linear-gradient(135deg, #d9e6dd, #efe6cf); }
.card-media img { display: block; width: 100%; height: auto; }
.card-media .ph, .ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--green); }
.card-media .ph { height: auto; aspect-ratio: 16 / 9; }
.card-media .ph svg { stroke-width: 1.5; width: 30px; height: 30px; opacity: 0.8; }
.card-media .ph i { opacity: 0.8; }
.play i { margin-inline-start: 3px; }
.eyebrow { font-size: calc(12px * var(--fs, 1)); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; color: var(--red); }
a.eyebrow:hover { color: var(--red); text-decoration: underline; }
.card-title { font-weight: 600; font-size: calc(19px * var(--fs, 1)); line-height: 1.25; }
.card-title a:hover { color: var(--green); text-decoration: underline; }
.card--grid .eyebrow { align-self: flex-start; }
.card-kicker { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: calc(12px * var(--fs, 1)); }
.card-author { color: var(--muted); font-weight: 500; }
.card-kicker .sep { color: var(--muted); }

.card--news { background: var(--surface); border-radius: 4px; overflow: hidden; gap: 0; }
.card--news .card-media { border-radius: 0; }
.card--news .card-title { padding: 10px; font-size: calc(17px * var(--fs, 1)); line-height: 1.3; }

.card--video .card-media { aspect-ratio: 16 / 9; background: linear-gradient(135deg, #2c4a3a, #3a403c); }
.card--video .card-media img { height: 100%; object-fit: contain; opacity: 0.85; }
.card--video .card-title { font-size: calc(17px * var(--fs, 1)); line-height: 1.3; }
.card--video .card-title a, .card--video .card-title a:hover { color: #fff; }
.play {
	position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px;
	display: flex; align-items: center; justify-content: center; border-radius: 50%;
	background: var(--gold); color: var(--ink); pointer-events: none;
}

.cols { display: grid; gap: 24px; align-items: start; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
.col-box { background: var(--surface); border-radius: 4px; border-top: 3px solid var(--green); padding: 12px 12px 4px; min-width: 0; }
.col-box h2, .col-box .col-title { font-size: calc(20px * var(--fs, 1)); font-weight: 700; margin-bottom: 12px; }
.col-box .col-title a:hover { color: var(--green); }
.col-box ul { list-style: none; margin: 0; padding: 0; }
.col-box li a { display: block; padding: 12px 0; border-top: 1px solid var(--line-soft); line-height: 1.4; }
.col-box li a:hover { color: var(--green); text-decoration: underline; }

.band-dark { margin-top: 56px; background: var(--ink); color: #fff; padding: 48px var(--gutter); }
.band-dark .section-head { border-bottom-color: #3a403c; }
.band-dark .section-head .section-title { border-bottom-color: var(--gold); }
.band-dark .section-head > a { color: var(--gold); }

/* Customizer-driven home sections */
.home-layout--single { grid-template-columns: minmax(0, 1fr); }