/**
 * Akhbar News — Widgets Manager front-end styles.
 * Zones: home, archives, single, sidebar, footer, custom hooks.
 * Designs rely on the shared .hb-card styles + these layout rules.
 */

.wg {
	margin-bottom: 34px;
	--wg-cols: 3;
	--wg-gap: 18px;
	--wg-accent: var(--akhbar-primary, #0e2a47);
	min-width: 0;
}

.wg-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.wg-title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 800;
	position: relative;
	padding-inline-start: 12px;
}

.wg-title::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 4px;
	height: 70%;
	border-radius: 3px;
	background: var(--wg-accent);
}

.wg-more {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	font-weight: 700;
	color: var(--wg-accent);
	text-decoration: none;
	white-space: nowrap;
}

.wg-more .svg-icon {
	width: 14px;
	height: 14px;
}

.wg-more:hover {
	opacity: 0.8;
}

/* Grid designs */
.wg-grid {
	display: grid;
	grid-template-columns: repeat(var(--wg-cols), 1fr);
	gap: var(--wg-gap);
}

.wg-grid--2 {
	grid-template-columns: repeat(2, 1fr);
}

.wg-grid .hb-card,
.wg-vstack .hb-card,
.wg-hscroll .hb-card {
	height: 100%;
}

/* Lead + side */
.wg-lead,
.wg-lead4 {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: var(--wg-gap);
}

.wg-lead4-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}

.wg-lead-side {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Rows */
.wg-rows {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.wg-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--akhbar-card-border, #eceff3);
}

.wg-row:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.wg-row-thumb {
	flex: 0 0 86px;
	width: 86px;
	aspect-ratio: 16 / 10;
	border-radius: 8px;
	overflow: hidden;
	background: #f0f2f5;
}

.wg-row-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.wg-row-body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.wg-row-title {
	margin: 0;
	font-size: 0.98rem;
	font-weight: 700;
	line-height: 1.55;
}

.wg-row-title a {
	color: inherit;
	text-decoration: none;
}

.wg-row-title a:hover {
	color: var(--wg-accent);
}

.wg-row-date {
	font-size: 0.76rem;
	color: var(--akhbar-text-muted, #8a94a3);
}

/* Text-only rows: numbered */
.wg-row--text {
	align-items: flex-start;
}

.wg-row--text .wg-row-title::before {
	content: "";
	display: none;
}

/* Magazine */
.wg-magazine {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: var(--wg-gap);
}

.wg-mag-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wg-gap);
}

.wg-mag-rows {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-top: 12px;
	border-top: 1px solid var(--akhbar-card-border, #eceff3);
}

/* Horizontal cards (scroll) */
.wg-hscroll {
	display: flex;
	gap: var(--wg-gap);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 6px;
}

.wg-hscroll-item {
	flex: 0 0 270px;
	scroll-snap-align: start;
}

/* Vertical stack */
.wg-vstack {
	display: flex;
	flex-direction: column;
	gap: var(--wg-gap);
}

/* Mixed */
.wg-mixed {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: var(--wg-gap);
}

.wg-mixed-rows {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.wg-mixed-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wg-gap);
}

/* Sidebar/footer variants: narrower defaults */
.widget-area .wg {
	--wg-cols: 1;
	margin-bottom: 28px;
}

.widget-area .wg-grid {
	grid-template-columns: 1fr;
}

.site-footer .wg {
	--wg-cols: 1;
	color: inherit;
}

/* Video widget: play badge over media */
.wg--video .hb-media::after,
.wg--video .cu-media::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgba(14, 42, 71, 0.82);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M9 6.5v11l9-5.5z'/%3E%3C/svg%3E");
	background-size: 26px;
	background-repeat: no-repeat;
	background-position: center;
	pointer-events: none;
	transition: background-color 0.2s ease;
}

.wg--video .hb-card:hover .hb-media::after,
.wg--video .cu-card:hover .cu-media::after {
	background-color: var(--wg-accent, #c8102e);
}

/* Ads */
.wg-ad {
	display: block;
	margin-inline: auto;
	text-align: center;
	position: relative;
	padding-top: 16px;
}

.wg-ad .ad-note {
	position: absolute;
	top: 0;
	inset-inline-start: 2px;
	font-size: 10px;
	letter-spacing: 0.4px;
	color: #98a2b0;
	text-transform: uppercase;
}

.wg-html {
	overflow: hidden;
}

/* Breaking widget reuses .breaking-bar styles from the theme. */
.wg-breaking {
	margin-bottom: 24px;
}

/* Mobile design override */
@media (max-width: 639px) {
	.wg-m-list .wg-grid,
	.wg-m-list .wg-mag-grid,
	.wg-m-list .wg-mixed {
		grid-template-columns: 1fr;
	}

	.wg-m-list .wg-lead,
	.wg-m-list .wg-lead4 {
		grid-template-columns: 1fr;
	}

	.wg-m-grid2 .wg-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.wg-m-grid2 .wg-mag-grid,
	.wg-m-grid2 .wg-mixed {
		grid-template-columns: repeat(2, 1fr);
	}

	.wg-hscroll-item {
		flex-basis: 78vw;
	}
}

@media (max-width: 900px) {
	.wg-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.wg-lead,
	.wg-lead4,
	.wg-magazine,
	.wg-mixed {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 639px) {
	.wg-grid:not(.wg-m-grid2 .wg-grid) {
		grid-template-columns: 1fr;
	}

	.wg-grid--2 {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wg-hscroll {
		scroll-behavior: auto;
	}
}

/* =========================================================
 * Custom designs — Design Builder (.ccd system, v2.4.1).
 * Used by akhbar_news_ccd_card() on the site AND by the panel
 * live previews (widgets.css is enqueued on panel pages).
 * Layout vars are printed inline on .cu-custom:
 *   --ccd-accent, --ccd-gap, --ccd-title, --ccd-cols.
 * ======================================================= */

.cu-custom {
	display: flex;
	flex-direction: column;
	gap: calc(var(--ccd-gap, 16px) + 8px);
	min-width: 0;
}

.ccd-grid {
	display: grid;
	grid-template-columns: repeat(var(--ccd-cols, 3), 1fr);
	gap: var(--ccd-gap, 16px);
}

.ccd-rows {
	display: flex;
	flex-direction: column;
	gap: calc(var(--ccd-gap, 16px) * 0.75);
}

.ccd-lead-wrap {
	display: grid;
	grid-template-columns: 1.7fr 1fr;
	gap: var(--ccd-gap, 16px);
	align-items: stretch;
}

.ccd {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: #fff;
	border-radius: 10px;
}

.ccd-media {
	position: relative;
	display: block;
	background: #dfe5ec;
	overflow: hidden;
}

.ccd-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}

.ccd:hover .ccd-media img {
	transform: scale(1.05);
}

.ccd-badge {
	position: absolute;
	top: 10px;
	inset-inline-start: 10px;
	z-index: 2;
	background: var(--ccd-accent, var(--akhbar-primary, #0e2a47));
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: 99px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.ccd-badge--inline {
	position: static;
	align-self: flex-start;
	box-shadow: none;
}

.ccd .cat-badge {
	position: absolute;
	bottom: 10px;
	inset-inline-start: 10px;
	z-index: 2;
	background: var(--ccd-accent, var(--akhbar-primary, #0e2a47));
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: 99px;
}

.ccd-body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 10px 2px 0;
}

.ccd-title {
	margin: 0;
	font-size: var(--ccd-title, 17px);
	font-weight: 800;
	line-height: 1.55;
}

.ccd-title a {
	color: inherit;
	text-decoration: none;
}

.ccd-title a:hover {
	color: var(--ccd-accent, var(--akhbar-primary, #0e2a47));
}

.ccd-meta {
	font-size: 12px;
	color: #8a94a3;
}

.ccd-date::before {
	content: "\25CF";
	font-size: 7px;
	color: var(--ccd-accent, var(--akhbar-primary, #0e2a47));
	margin-inline-end: 5px;
	vertical-align: 2px;
}

.ccd-author::before {
	content: "\2022";
	font-size: 10px;
	color: #c3cddb;
	margin-inline-end: 5px;
	vertical-align: 1px;
}

.ccd-excerpt {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.8;
	color: #5a6675;
}

.ccd-more {
	align-self: flex-start;
	font-size: 12.5px;
	font-weight: 800;
	color: var(--ccd-accent, var(--akhbar-primary, #0e2a47));
	text-decoration: none;
}

.ccd-more:hover {
	text-decoration: underline;
}

/* --- Style variants --- */

.ccd--lead .ccd-title {
	font-size: calc(var(--ccd-title, 17px) + 4px);
}

.ccd--lead .ccd-excerpt {
	font-size: 14.5px;
}

.ccd--row {
	flex-direction: row;
	gap: 12px;
	align-items: flex-start;
	padding-bottom: calc(var(--ccd-gap, 16px) * 0.6);
	border-bottom: 1px solid #edf0f4;
}

.ccd--row:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.ccd--row .ccd-media {
	width: 108px;
	flex: 0 0 108px;
	aspect-ratio: 4 / 3 !important;
	border-radius: 8px;
}

.ccd--row .ccd-body {
	padding: 0;
}

.ccd--row .ccd-title {
	font-size: calc(var(--ccd-title, 17px) - 3px);
}

.ccd--row .ccd-excerpt {
	display: none;
}

.ccd--small .ccd-title {
	font-size: calc(var(--ccd-title, 17px) - 2px);
}

.ccd--small .ccd-body {
	padding: 8px 0 0;
}

.ccd--text .ccd-body {
	padding: 0;
}

.ccd-adsep {
	grid-column: 1 / -1;
	border: 2px dashed #d5dce5;
	border-radius: 10px;
	padding: 6px;
	text-align: center;
	overflow: hidden;
	background: #fbfcfe;
}

.ccd-adsep > * {
	max-width: 100%;
}

/* --- Responsive --- */

@media (max-width: 900px) {
	.ccd-lead-wrap {
		grid-template-columns: 1fr;
	}

	.ccd-grid {
		grid-template-columns: 1fr 1fr;
		grid-template-columns: repeat(min(2, var(--ccd-cols, 3)), 1fr);
	}
}

@media (max-width: 560px) {
	.ccd-grid {
		grid-template-columns: 1fr;
	}

	.ccd-excerpt {
		display: none;
	}
}