/**
 * Al Reda Components — centralized visual system for the custom Elementor
 * widgets (product/project cards, grids, showcase, WhatsApp CTA, contact
 * block). One shared stylesheet instead of styling every widget instance
 * separately from Elementor's own controls.
 *
 * Brand tokens per CLAUDE.md §5 — do not hardcode these hex values anywhere
 * else; add new component styles against these variables.
 */

:root {
	--alreda-blue: #075099;
	--alreda-blue-soft: #1D568D;
	--alreda-blue-hover: #06447F;
	--alreda-yellow: #FAB409;
	--alreda-yellow-hover: #EAB326;
	--alreda-navy: #13202D;
	--alreda-navy-deep: #11293D;
	--alreda-steel: #647785;
	--alreda-surface: #F3F5F6;
	--alreda-surface-raised: #FFFFFF;
	--alreda-text-primary: #17212B;
	--alreda-text-secondary: #647785;
	--alreda-border: #E1E6E9;
}

/* ---------- Layout: grids ---------- */

.alreda-product-grid,
.alreda-projects-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

@media (min-width: 700px) {
	.alreda-product-grid.alreda-grid-cols-3,
	.alreda-projects-grid.alreda-grid-cols-3 {
		grid-template-columns: repeat(3, 1fr);
	}
	.alreda-product-grid.alreda-grid-cols-4,
	.alreda-projects-grid.alreda-grid-cols-4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ---------- Cards (product + project share the same skeleton) ---------- */

.alreda-product-card,
.alreda-project-card {
	display: flex;
	flex-direction: column;
	background: var(--alreda-surface-raised);
	border: 1px solid var(--alreda-border);
	border-radius: 6px;
	overflow: hidden;
}

.alreda-card-media {
	position: relative;
	display: block;
	background: var(--alreda-surface);
}

.alreda-card-media.alreda-ratio-square { aspect-ratio: 1 / 1; }
.alreda-card-media.alreda-ratio-portrait { aspect-ratio: 3 / 4; }
.alreda-card-media.alreda-ratio-landscape { aspect-ratio: 16 / 10; }

.alreda-card-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.alreda-card-body {
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.alreda-card-category {
	font-size: 0.8rem;
	color: var(--alreda-text-secondary);
}

.alreda-card-title {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.4;
}

.alreda-card-title a {
	color: var(--alreda-text-primary);
	text-decoration: none;
}

.alreda-card-title a:hover {
	color: var(--alreda-blue);
}

.alreda-card-price {
	color: var(--alreda-blue);
	font-weight: 700;
}

.alreda-card-price .alreda-request-quote {
	color: var(--alreda-text-primary);
	font-weight: 600;
}

.alreda-card-excerpt {
	margin: 0;
	color: var(--alreda-text-secondary);
	font-size: 0.9rem;
	line-height: 1.6;
}

.alreda-card-cta {
	margin-block-start: 8px;
	align-self: flex-start;
}

/* ---------- Badges (availability). Always paired with text, never color-only. ---------- */

.alreda-badge {
	position: absolute;
	inset-block-start: 10px;
	inset-inline-start: 10px;
	background: var(--alreda-surface-raised);
	color: var(--alreda-text-primary);
	border: 1px solid var(--alreda-border);
	border-radius: 4px;
	font-size: 0.75rem;
	padding: 4px 10px;
}

.alreda-badge--out-of-stock {
	color: #B3261E;
	border-color: #B3261E;
}

.alreda-badge--made-to-order {
	color: var(--alreda-blue);
	border-color: var(--alreda-blue);
}

/* ---------- Buttons ---------- */

.alreda-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 20px;
	border-radius: 4px;
	font-weight: 600;
	text-decoration: none;
	border: 2px solid transparent;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.alreda-btn--filled {
	background: var(--alreda-yellow);
	color: var(--alreda-navy);
}

.alreda-btn--filled:hover {
	background: var(--alreda-yellow-hover);
	color: var(--alreda-navy);
}

.alreda-btn--outline {
	background: transparent;
	border-color: var(--alreda-blue);
	color: var(--alreda-blue);
}

.alreda-btn--outline:hover {
	background: var(--alreda-blue);
	color: #fff;
}

.alreda-btn--large {
	padding: 14px 28px;
	font-size: 1.05rem;
}

.alreda-whatsapp-cta-wrap {
	display: flex;
}

.alreda-whatsapp-icon {
	width: 18px;
	height: 18px;
	display: inline-block;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 3C9 3 3.3 8.6 3.3 15.5c0 2.6.8 5 2.1 7L3 29l6.7-2.3c1.9 1 4.1 1.6 6.3 1.6 7 0 12.7-5.6 12.7-12.5S23 3 16 3zm0 22.6c-2 0-3.9-.5-5.5-1.5l-.4-.2-4 1.3 1.3-3.9-.2-.4a10.2 10.2 0 0 1-1.6-5.4C5.6 9.8 10.3 5.2 16 5.2S26.4 9.8 26.4 15.5 21.7 25.6 16 25.6zm5.8-7.5c-.3-.2-1.9-.9-2.2-1-.3-.1-.5-.2-.7.2-.2.3-.8 1-1 1.2-.2.2-.4.2-.7.1-.3-.2-1.4-.5-2.6-1.6-1-.9-1.6-2-1.8-2.3-.2-.3 0-.5.1-.6.1-.1.3-.4.5-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5 0-.2-.7-1.7-1-2.3-.3-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.4s1.1 2.8 1.2 3c.1.2 2.2 3.4 5.4 4.7.7.3 1.3.5 1.8.7.7.2 1.4.2 1.9.1.6-.1 1.9-.8 2.1-1.5.3-.7.3-1.4.2-1.5-.1-.2-.3-.2-.6-.4z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 3C9 3 3.3 8.6 3.3 15.5c0 2.6.8 5 2.1 7L3 29l6.7-2.3c1.9 1 4.1 1.6 6.3 1.6 7 0 12.7-5.6 12.7-12.5S23 3 16 3zm0 22.6c-2 0-3.9-.5-5.5-1.5l-.4-.2-4 1.3 1.3-3.9-.2-.4a10.2 10.2 0 0 1-1.6-5.4C5.6 9.8 10.3 5.2 16 5.2S26.4 9.8 26.4 15.5 21.7 25.6 16 25.6zm5.8-7.5c-.3-.2-1.9-.9-2.2-1-.3-.1-.5-.2-.7.2-.2.3-.8 1-1 1.2-.2.2-.4.2-.7.1-.3-.2-1.4-.5-2.6-1.6-1-.9-1.6-2-1.8-2.3-.2-.3 0-.5.1-.6.1-.1.3-.4.5-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5 0-.2-.7-1.7-1-2.3-.3-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.4s1.1 2.8 1.2 3c.1.2 2.2 3.4 5.4 4.7.7.3 1.3.5 1.8.7.7.2 1.4.2 1.9.1.6-.1 1.9-.8 2.1-1.5.3-.7.3-1.4.2-1.5-.1-.2-.3-.2-.6-.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Product Showcase (single product hero) ---------- */

.alreda-product-showcase {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}

@media (min-width: 900px) {
	.alreda-product-showcase {
		grid-template-columns: 1.1fr 1fr;
		align-items: start;
	}
}

.alreda-showcase-main {
	background: var(--alreda-surface);
	border: 1px solid var(--alreda-border);
	border-radius: 6px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

.alreda-showcase-main-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.alreda-showcase-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-block-start: 12px;
}

.alreda-showcase-thumb {
	width: 72px;
	height: 72px;
	padding: 0;
	border: 2px solid var(--alreda-border);
	border-radius: 4px;
	overflow: hidden;
	background: none;
	cursor: pointer;
}

.alreda-showcase-thumb:hover,
.alreda-showcase-thumb.is-active {
	border-color: var(--alreda-blue);
}

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

.alreda-showcase-info {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.alreda-showcase-title {
	margin: 0;
	font-size: 1.8rem;
	line-height: 1.3;
	color: var(--alreda-text-primary);
}

.alreda-showcase-price {
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--alreda-blue);
}

.alreda-showcase-short-desc,
.alreda-showcase-description {
	color: var(--alreda-text-secondary);
	line-height: 1.7;
}

.alreda-showcase-description h2 {
	font-size: 1.1rem;
	color: var(--alreda-text-primary);
	margin-block-end: 8px;
}

.alreda-showcase-cta {
	align-self: flex-start;
	margin-block: 6px;
}

.alreda-showcase-info .alreda-badge {
	position: static;
	display: inline-block;
	align-self: flex-start;
}

/* ---------- Contact block ---------- */

.alreda-contact-block {
	color: var(--alreda-text-primary);
}

.alreda-contact-title {
	margin: 0 0 12px;
	font-size: 1.3rem;
}

.alreda-contact-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.alreda-contact-block--inline .alreda-contact-list {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 20px;
}

.alreda-contact-list a {
	color: var(--alreda-text-primary);
	text-decoration: none;
	border-bottom: 1px solid var(--alreda-border);
}

.alreda-contact-list a:hover {
	color: var(--alreda-blue);
	border-color: var(--alreda-blue);
}

/* ---------- Editor placeholder ---------- */

.alreda-widget-placeholder {
	padding: 24px;
	border: 1px dashed var(--alreda-steel);
	color: var(--alreda-text-secondary);
	text-align: center;
	border-radius: 6px;
}

/* ---------- Team (فريق العمل) ---------- */

.alreda-team-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 700px) {
	.alreda-team-grid { gap: 24px; }
	.alreda-team-grid.alreda-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
	.alreda-team-grid.alreda-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
}

.alreda-team-card {
	display: flex;
	flex-direction: column;
	background: var(--alreda-surface-raised);
	border: 1px solid var(--alreda-border);
	border-radius: 6px;
	overflow: hidden;
}

.alreda-team-card .alreda-card-media {
	overflow: hidden;
	color: var(--alreda-steel);
	border-block-end: 3px solid var(--alreda-blue);
}

.alreda-team-card .alreda-card-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
}

.alreda-team-silhouette {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	width: 45%;
	height: auto;
	opacity: 0.45;
	transform: translate(-50%, -50%);
}

[dir="rtl"] .alreda-team-silhouette {
	transform: translate(50%, -50%);
}

.alreda-team-role {
	margin: 0;
	color: var(--alreda-blue);
	font-size: 0.9rem;
	font-weight: 600;
}

.alreda-team-card--empty {
	border-style: dashed;
}

.alreda-team-card--empty .alreda-card-media {
	border-block-end-color: var(--alreda-border);
}

.alreda-team-card--empty .alreda-card-title,
.alreda-team-card--empty .alreda-team-role {
	color: var(--alreda-text-secondary);
}