/**
 * hero.css — Homepage hero — the 330/700/330 grid and its two article-list columns (slider mechanics live in slider.css).
 *
 * Part of the KWL360 split stylesheet. Load order lives in
 * functions.php; responsive.css loads next-to-last so its rules
 * reliably win the cascade against every file before it.
 * @package KWL360
 */

/* Defensive: any image inside a card/media wrapper is always forced to fill
   and crop its container, regardless of the source file's real dimensions —
   this matters most right after a theme change, before WordPress has
   generated this theme's registered crop sizes for pre-existing uploads. */
.kwl-card-media img,
.kwl-hero-list-thumb img,
.kwl-slide-media,
.kwl-split-image-media img,
.kwl-paired-thumb img,
.kwl-shroohat-thumb,
.kwl-timeline-thumb img{ width: 100%; height: 100%; object-fit: cover; }/* -----------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------- */
.kwl-hero{ padding: 0; }

.kwl-hero-grid{
	display: grid; grid-template-columns: 33fr 70fr 33fr; column-gap: 20px; row-gap: 0;
	max-width: 1400px; margin: 20px auto 60px; padding: 0; align-items: stretch;
	background: #FFFFFF; border-radius: 18px;
	box-shadow: 0 8px 30px rgba(0,0,0,.08);
	font-family: 'Tajawal', 'Cairo', sans-serif;
}
.kwl-hero-grid.kwl-hero-no-sidebar{ grid-template-columns: 1fr; }

/* Right & left columns share one list-card system — only the thumbnail
   shape and card height differ (per spec: right=80x80/78px tall,
   left="featured"=120x68/100px tall). */
.kwl-hero-right{ height: 100%; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.kwl-hero-right-title{
	margin: 0 0 4px; padding: 8px 14px; border-radius: 8px; display: inline-block;
	font-size: .9rem; font-weight: 800; color: #fff; flex-shrink: 0;
	background: var(--kwl-primary);
}
.kwl-hero-left{
	height: 100%; display: grid; grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(2, 1fr); gap: 10px;
}
.kwl-hero-grid-card{
	position: relative; display: block; border-radius: 10px; overflow: hidden;
	background-color: var(--kwl-bg-alt, #eee);
}
.kwl-hero-grid-card-image{
	position: absolute; inset: 0; background-size: cover; background-position: center;
	transition: transform .4s var(--kwl-ease);
}
.kwl-hero-grid-card:hover .kwl-hero-grid-card-image{ transform: scale(1.06); }
.kwl-hero-grid-card-scrim{ position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6,12,26,.78) 0%, rgba(6,12,26,.1) 55%, transparent 100%); }
.kwl-hero-grid-card-title{ position: absolute; z-index: 1; bottom: 0; inset-inline: 0; padding: 10px; color: #fff; font-size: .74rem; font-weight: 700; line-height: 1.4; }
.kwl-hero-list-card{
	width: 100%; height: 78px; flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 10px;
	border-radius: 12px; transition: .3s ease;
}
.kwl-hero-list-card:hover{ transform: translateY(-4px); background: var(--kwl-bg-alt, #f8f9fb); }
.kwl-hero-list-card--featured{ height: 100px; }
.kwl-hero-list-thumb{ flex-shrink: 0; border-radius: 10px; overflow: hidden; background: var(--kwl-bg-alt, #eee); }
.kwl-hero-list-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.kwl-hero-list-card:hover .kwl-hero-list-thumb img{ transform: scale(1.05); }
.kwl-hero-list-thumb--square{ width: 80px; height: 80px; }
.kwl-hero-list-thumb--wide{ width: 120px; height: 68px; }
.kwl-hero-list-text{ display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kwl-hero-list-title{
	font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--kwl-ink);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kwl-hero-list-meta{ font-size: 13px; color: var(--kwl-ink-muted); }

/* Center: the 700x430 slider */
.kwl-hero-slider{
	position: relative; width: 100%; aspect-ratio: 700 / 430;
	border-radius: 18px; overflow: hidden; background: var(--kwl-ink);
}