/**
 * cards.css — Reusable card components — category cards, generic post cards, Showcase's supporting cards/bottom card-row, category-page card grids, badges.
 *
 * 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
 */

.kwl-badge{
	display: inline-block;
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--badge-color, var(--kwl-accent));
	color: #1a1200;
	position: absolute;
	top: 12px;
	inset-inline-start: 12px;
	z-index: 2;
}

/* Per-channel identity colors — restrained to the small kicker signature
   bar + badges only now (an editorial magazine tints one accent line per
   story, it doesn't recolor the whole headline — see kwl360_section_header()). */
#islamic .kwl-section-kicker, #islamic .kwl-badge{ background: var(--kwl-ch-islamic); }
#islamic .kwl-badge{ background: var(--kwl-ch-islamic-light); color: #14532D; }
#stories .kwl-ai-feature-content .kwl-badge{ background: var(--kwl-ch-stories); color: #fff; }
#ai .kwl-ai-feature-content .kwl-badge{ background: var(--kwl-ch-ai-light); color: #0b4f47; }

/* Muted per-channel accents: a thin top border and a soft icon tint — the
   color identifies the channel without dominating the card, per the
   "calm premium educational magazine" direction (no saturated full-card
   gradients — that read as gaming/AI-generated-template style). */
.kwl-cat-card{
	position: relative; overflow: hidden;
	border-radius: var(--kwl-radius); min-height: 150px;
	background: var(--kwl-white); border: 1px solid var(--kwl-border);
	border-top: 3px solid var(--kwl-accent, #FFBB00);
	box-shadow: var(--kwl-shadow-sm);
	transition: transform .2s var(--kwl-ease), box-shadow .2s var(--kwl-ease), border-color .2s var(--kwl-ease);
}
.kwl-cat-card:hover{ transform: translateY(-3px); box-shadow: var(--kwl-shadow-md); }
.kwl-cat-card-scrim{ position: absolute; inset: 0; pointer-events: none; }
.kwl-cat-card-body{ position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; padding: 16px 18px; }
.kwl-cat-card-top{ display: flex; align-items: center; gap: 9px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--kwl-border); color: inherit; }
.kwl-cat-card-icon{
	flex-shrink: 0; width: 24px; height: 24px; border-radius: 7px; display: flex; align-items: center; justify-content: center;
	background: var(--kwl-light-gray);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 2px rgba(0,0,0,.05);
	transition: transform .25s var(--kwl-ease);
}
.kwl-cat-card:hover .kwl-cat-card-icon{ transform: scale(1.08) rotate(-4deg); }
.kwl-cat-card-name{ font-weight: 800; font-size: .9rem; color: var(--kwl-ink); }
.kwl-cat-card-icon svg{ display: block; }

.kwl-cat-card-details{ margin-bottom: 10px; }
.kwl-cat-card-summary{
	display: flex; align-items: center; justify-content: space-between; gap: 6px; cursor: pointer;
	font-size: .74rem; font-weight: 700; color: var(--kwl-ink-muted); list-style: none;
	padding: 4px 0;
}
.kwl-cat-card-summary::-webkit-details-marker{ display: none; }
.kwl-cat-card-summary-chevron{ display: flex; transition: transform .2s var(--kwl-ease); }
.kwl-cat-card-details[open] .kwl-cat-card-summary-chevron{ transform: rotate(180deg); }
.kwl-cat-card-list{ list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: .78rem; color: var(--kwl-ink-soft); }
.kwl-cat-card-list li{ position: relative; padding-inline-start: 14px; }
.kwl-cat-card-list li::before{ content: ''; position: absolute; inset-inline-start: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .5; }
.kwl-cat-card-cta{
	display: inline-block; align-self: flex-start; border-radius: 999px; padding: 8px 18px; font-size: .76rem; font-weight: 700;
	color: var(--kwl-primary); background: var(--kwl-light-gray); border: 1px solid transparent;
	margin-top: auto;
	transition: background .2s var(--kwl-ease), color .2s var(--kwl-ease);
}
.kwl-cat-card-cta:hover{ background: var(--kwl-primary); color: #fff; }

.kwl-cat-card[data-channel="islamic"] .kwl-cat-card-icon{ background: linear-gradient(135deg, var(--kwl-ch-islamic-light) 0%, #fff 140%); color: var(--kwl-ch-islamic-dark); }
.kwl-cat-card[data-channel="islamic"] .kwl-cat-card-cta{ color: var(--kwl-ch-islamic-dark); }
.kwl-cat-card[data-channel="islamic"]:hover .kwl-cat-card-cta{ background: var(--kwl-ch-islamic); color: #fff; }

.kwl-cat-card[data-channel="discover"] .kwl-cat-card-icon{ background: linear-gradient(135deg, var(--kwl-primary-light) 0%, #fff 140%); color: var(--kwl-primary-dark); }
.kwl-cat-card[data-channel="discover"] .kwl-cat-card-cta{ color: var(--kwl-primary-dark); }
.kwl-cat-card[data-channel="discover"]:hover .kwl-cat-card-cta{ background: var(--kwl-primary); color: #fff; }

.kwl-cat-card[data-channel="stories"] .kwl-cat-card-icon{ background: linear-gradient(135deg, var(--kwl-ch-stories-light) 0%, #fff 140%); color: var(--kwl-ch-stories-dark); }
.kwl-cat-card[data-channel="stories"] .kwl-cat-card-cta{ color: var(--kwl-ch-stories-dark); }
.kwl-cat-card[data-channel="stories"]:hover .kwl-cat-card-cta{ background: var(--kwl-ch-stories); color: #fff; }

.kwl-cat-card[data-channel="ai"] .kwl-cat-card-icon{ background: linear-gradient(135deg, var(--kwl-ch-ai-light) 0%, #fff 140%); color: var(--kwl-ch-ai-dark); }
.kwl-cat-card[data-channel="ai"] .kwl-cat-card-cta{ color: var(--kwl-ch-ai-dark); }
.kwl-cat-card[data-channel="ai"]:hover .kwl-cat-card-cta{ background: var(--kwl-ch-ai); color: #fff; }

.kwl-cat-card[data-channel="teacher"] .kwl-cat-card-icon{ background: linear-gradient(135deg, var(--kwl-ch-teacher-light) 0%, #fff 140%); color: var(--kwl-ch-teacher-dark); }
.kwl-cat-card[data-channel="teacher"] .kwl-cat-card-cta{ color: var(--kwl-ch-teacher-dark); }
.kwl-cat-card[data-channel="teacher"]:hover .kwl-cat-card-cta{ background: var(--kwl-ch-teacher); color: #fff; }

.kwl-cat-card[data-channel="knowledge"] .kwl-cat-card-icon{ background: linear-gradient(135deg, var(--kwl-ch-knowledge-light) 0%, #fff 140%); color: var(--kwl-ch-knowledge-dark); }
.kwl-cat-card[data-channel="knowledge"] .kwl-cat-card-cta{ color: var(--kwl-ch-knowledge-dark); }
.kwl-cat-card[data-channel="knowledge"]:hover .kwl-cat-card-cta{ background: var(--kwl-ch-knowledge); color: #fff; }

.kwl-cat-card[data-channel="games"] .kwl-cat-card-icon{ background: linear-gradient(135deg, var(--kwl-ch-games-light) 0%, #fff 140%); color: var(--kwl-ch-games-dark); }
.kwl-cat-card[data-channel="games"] .kwl-cat-card-cta{ color: var(--kwl-ch-games-dark); }
.kwl-cat-card[data-channel="games"]:hover .kwl-cat-card-cta{ background: var(--kwl-ch-games); color: #fff; }

/* Optional uploaded image: shown at full brightness across the top ~60% of
   the card, with a soft white gradient at the bottom so the card body
   (icon/name/list/button) still sits on a clean, readable white surface —
   editorial-magazine photo treatment, not a full-bleed color wash. */
.kwl-cat-card--has-image{ background-size: cover; background-position: top center; }
.kwl-cat-card--has-image .kwl-cat-card-scrim{
	background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.65) 42%, var(--kwl-white) 62%);
}/* -----------------------------------------------------------------------
   8. Cards — base
   -------------------------------------------------------------------- */
.kwl-card{
	position: relative; background: var(--kwl-white); border-radius: var(--kwl-radius);
	overflow: hidden; border: 1px solid var(--kwl-border);
	transition: transform .35s var(--kwl-ease), box-shadow .35s var(--kwl-ease);
	display: flex; flex-direction: column;
}
.kwl-card-media{ position: relative; display: block; overflow: hidden; aspect-ratio: 16/10; max-height: 280px; background: var(--kwl-light-gray); }

/* Resource Grid (Teacher Library) */
.kwl-resource-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 16px; }

/* Top-3 articles + ad slot: 8/4 split */
.kwl-cat-top-row{ display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--kwl-gutter); margin-bottom: 28px; }
.kwl-cat-top-three{ grid-column: span 8; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--kwl-gutter); }
.kwl-cat-top-card{ display: flex; flex-direction: column; gap: 10px; }
.kwl-cat-top-image{ display: block; width: 100%; height: 100%; aspect-ratio: 4/3; border-radius: var(--kwl-radius-sm); background-size: cover; background-position: center; background-color: var(--kwl-bg-alt, #eee); }
.kwl-cat-top-title{ font-size: .84rem; font-weight: 700; line-height: 1.5; color: var(--kwl-ink); }
.kwl-cat-top-row .kwl-ad-zone{ grid-column: span 4; height: 100%; min-height: 140px; border-radius: var(--kwl-radius); background: var(--kwl-bg-alt, #f3f5f8); display: flex; align-items: center; justify-content: center; }

/* Full-width 6-across strip */
.kwl-cat-strip{ display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--kwl-gutter); margin-bottom: 28px; }
.kwl-cat-strip-card{ display: flex; flex-direction: column; gap: 8px; }
.kwl-cat-strip-image{ display: block; width: 100%; height: 100%; aspect-ratio: 1/1; border-radius: var(--kwl-radius-sm); background-size: cover; background-position: center; background-color: var(--kwl-bg-alt, #eee); }
.kwl-cat-strip-title{ font-size: .76rem; font-weight: 700; line-height: 1.45; color: var(--kwl-ink); }

/* Closing row: 6 equal cards, 140px tall, 20px gaps */
.kwl-showcase-cardrow{ display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; margin-bottom: 20px; }
.kwl-showcase-cardrow-item{ height: 140px; display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--kwl-border); border-radius: 12px; overflow: hidden; }
.kwl-showcase-cardrow-title{
	font-size: .78rem; font-weight: 700; color: var(--kwl-ink); line-height: 1.35;
	display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
	word-break: break-word; max-height: 1.4em; flex-shrink: 0;
}
.kwl-showcase-cardrow-date{ display: flex; align-items: center; gap: 4px; font-size: .68rem; color: var(--kwl-ink-muted); flex-shrink: 0; padding-bottom: 6px; border-bottom: 1px dashed var(--kwl-border); }
.kwl-showcase-cardrow-thumb{
	position: relative; flex: 1 1 auto; min-height: 0; border-radius: 8px; overflow: hidden;
	background: linear-gradient(135deg, var(--kwl-bg-alt, #eee), var(--kwl-border));
	display: flex; align-items: center; justify-content: center;
}
.kwl-showcase-cardrow-thumb.kwl-no-thumb::before{
	content: ''; width: 22px; height: 22px; opacity: .35;
	background: var(--kwl-ink-muted);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='m21 15-5-5L5 21'/%3E%3C/svg%3E") center / 60% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='m21 15-5-5L5 21'/%3E%3C/svg%3E") center / 60% no-repeat;
}
.kwl-showcase-cardrow-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.kwl-showcase-cardrow-thumb .kwl-badge{ position: absolute; bottom: 6px; inset-inline-start: 6px; z-index: 1; --badge-color: var(--kwl-primary); color: #fff; font-size: .62rem; padding: 3px 10px; }
.kwl-showcase-cardrow-skel{ display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }

.kwl-custom-columns{ display: grid; grid-template-columns: repeat(var(--kwl-custom-columns-count, 3), 1fr); gap: var(--kwl-gutter); }
.kwl-custom-column{
	position: relative; aspect-ratio: 4/3; border-radius: var(--kwl-radius); overflow: hidden; display: flex; align-items: flex-end;
	background-size: cover; background-position: center; background-color: var(--kwl-bg-alt, #eee);
}
.kwl-custom-column-scrim{ position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,14,26,.85) 0%, transparent 65%); }
.kwl-custom-column-body{ position: relative; z-index: 1; padding: 16px; color: #fff; }
.kwl-custom-column-channel{ display: block; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; opacity: .85; margin-bottom: 6px; }
.kwl-custom-column-title{ display: block; font-size: .88rem; font-weight: 700; line-height: 1.45; }
.kwl-ai-feature-content .kwl-badge{ position: static; margin-bottom: 12px; display: inline-block; }

.kwl-shroohat-row{ margin-top: 24px; }
.kwl-shroohat-title{ font-size: 1.05rem; margin-bottom: 14px; }
.kwl-shroohat-list{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.kwl-shroohat-item{ display: flex; flex-direction: column; gap: 8px; border-radius: var(--kwl-radius-sm); overflow: hidden; transition: transform .25s var(--kwl-ease); }
.kwl-shroohat-item:hover{ transform: translateY(-3px); }
.kwl-shroohat-thumb{ width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: var(--kwl-radius-sm); }
.kwl-shroohat-item-title{ font-size: .82rem; font-weight: 700; line-height: 1.4; }
.kwl-paired-thumb{ width: 56px; height: 56px; flex-shrink: 0; border-radius: 8px; overflow: hidden; background: var(--kwl-light-gray); }
.kwl-paired-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.kwl-card--tabgrid .kwl-card-media{ aspect-ratio: 4/3; max-height: 160px; }

/* Generic editorial grid (News/Knowledge/Games + fallback archives) */
.kwl-editorial-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap: 18px; margin-bottom: 24px; }

.kwl-timeline{ position: relative; padding-inline-start: 26px; }
.kwl-timeline::before{ content: ''; position: absolute; inset-inline-start: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--kwl-border); }
.kwl-timeline-item{ position: relative; padding-bottom: 26px; }
.kwl-timeline-marker{ position: absolute; inset-inline-start: -26px; top: 2px; display: flex; flex-direction: column; align-items: center; width: 26px; }
.kwl-timeline-dot{ width: 12px; height: 12px; border-radius: 50%; background: var(--kwl-primary); border: 3px solid var(--kwl-white); box-shadow: 0 0 0 2px var(--kwl-primary); }
.kwl-timeline-date{ font-size: .62rem; color: var(--kwl-ink-soft); margin-top: 4px; writing-mode: vertical-rl; display: none; }
.kwl-timeline-content{ display: flex; gap: 14px; background: var(--kwl-white); border: 1px solid var(--kwl-border); border-radius: var(--kwl-radius); padding: 14px; transition: box-shadow .25s var(--kwl-ease); }
.kwl-timeline-content:hover{ box-shadow: var(--kwl-shadow-sm); }
.kwl-timeline-thumb{ width: 84px; height: 84px; flex-shrink: 0; border-radius: var(--kwl-radius-sm); overflow: hidden; background: var(--kwl-light-gray); }
.kwl-timeline-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.kwl-timeline-text .kwl-badge{ position: static; margin-bottom: 6px; font-size: .62rem; padding: 3px 8px; }
.kwl-timeline-title{ font-size: 1rem; margin-bottom: 6px; }
.kwl-single-header .kwl-badge{ position: static; margin-bottom: 12px; }
.kwl-category-band .kwl-badge{ position: static; }

/* Split Mixed block: image-led cards vs title-only tiles, side by side */
.kwl-split-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.kwl-split-image-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.kwl-split-image-card{ display: flex; flex-direction: column; gap: 6px; }
.kwl-split-image-media{ display: block; aspect-ratio: 4/3; border-radius: var(--kwl-radius-sm); overflow: hidden; background: var(--kwl-light-gray); }
.kwl-split-image-title{ font-size: .86rem; font-weight: 700; line-height: 1.4; }
.kwl-split-image-card:hover .kwl-split-image-title{ color: var(--kwl-primary); }
.kwl-split-image-excerpt{ font-size: .76rem; color: var(--kwl-ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }