/**
 * Elcogen Quick Links Widget Styles
 *
 * @package Elcogen_Elementor_Widgets
 */

/* Root Container */
.elcogen-quick-links {
	width: 100%;
	box-sizing: border-box;
}

/* Header Section */

.elcogen-quick-links__title {
	margin: 0;
	padding: 0;
}

.elcogen-quick-links__accent-bar-wrapper {
	/* Styling now controlled by universal .elcogen-accent-bar-wrapper class in global CSS */
}

.elcogen-quick-links__accent-bar {
	/* Styling now controlled by universal .elcogen-accent-bar class in global CSS */
}

.elcogen-quick-links__subtitle {
	margin: 0;
	padding: 0;
}

/* Grid Layout */
.elcogen-quick-links__grid {
	display: grid;
}

/* Desktop: Smart grid layout - avoids single card in row */
@media (min-width: 64.0625rem) {
	.elcogen-quick-links__grid {
		display: flex;
		flex-wrap: wrap;
	}

	.elcogen-quick-links__card {
		flex: 1 1 30%;
		min-width: 0;
	}

	/* 1 card: Full width */
	.elcogen-quick-links__grid--count-1 .elcogen-quick-links__card {
		flex: 1 1 100%;
	}

	/* 2 cards: Each takes 50% (full width with gap) */
	.elcogen-quick-links__grid--count-2 .elcogen-quick-links__card {
		flex: 1 1 48%;
	}

	/* 3 cards: Each takes ~33.333% (equal width) */
	.elcogen-quick-links__grid--count-3 .elcogen-quick-links__card {
		flex: 1 1 30%;
	}

	/* 4 cards: 2+2 layout (avoid 3+1) */
	.elcogen-quick-links__grid--count-4 .elcogen-quick-links__card {
		flex: 1 1 48%;
	}

	/* 5 cards: 3+2 layout */
	.elcogen-quick-links__grid--count-5 .elcogen-quick-links__card {
		flex: 1 1 30%;
	}
	.elcogen-quick-links__grid--count-5 .elcogen-quick-links__card:nth-child(4),
	.elcogen-quick-links__grid--count-5 .elcogen-quick-links__card:nth-child(5) {
		flex: 1 1 48%;
	}

	/* 6 cards: 3+3 layout */
	.elcogen-quick-links__grid--count-6 .elcogen-quick-links__card {
		flex: 1 1 30%;
	}

	/* 7 cards: 3+2+2 layout (avoid 3+3+1) */
	.elcogen-quick-links__grid--count-7 .elcogen-quick-links__card {
		flex: 1 1 30%;
	}
	.elcogen-quick-links__grid--count-7 .elcogen-quick-links__card:nth-child(4),
	.elcogen-quick-links__grid--count-7 .elcogen-quick-links__card:nth-child(5),
	.elcogen-quick-links__grid--count-7 .elcogen-quick-links__card:nth-child(6),
	.elcogen-quick-links__grid--count-7 .elcogen-quick-links__card:nth-child(7) {
		flex: 1 1 48%;
	}

	/* 8 cards: 3+3+2 layout (avoid 3+3+1+1) */
	.elcogen-quick-links__grid--count-8 .elcogen-quick-links__card {
		flex: 1 1 30%;
	}
	.elcogen-quick-links__grid--count-8 .elcogen-quick-links__card:nth-child(7),
	.elcogen-quick-links__grid--count-8 .elcogen-quick-links__card:nth-child(8) {
		flex: 1 1 48%;
	}

	/* 9 cards: 3+3+3 layout */
	.elcogen-quick-links__grid--count-9 .elcogen-quick-links__card {
		flex: 1 1 30%;
	}

	/* 10 cards: 3+3+2+2 layout (avoid 3+3+3+1) */
	.elcogen-quick-links__grid--count-10 .elcogen-quick-links__card {
		flex: 1 1 30%;
	}
	.elcogen-quick-links__grid--count-10 .elcogen-quick-links__card:nth-child(7),
	.elcogen-quick-links__grid--count-10 .elcogen-quick-links__card:nth-child(8),
	.elcogen-quick-links__grid--count-10 .elcogen-quick-links__card:nth-child(9),
	.elcogen-quick-links__grid--count-10 .elcogen-quick-links__card:nth-child(10) {
		flex: 1 1 48%;
	}
}

/* Card Styles */
.elcogen-quick-links__card {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-baseline-08);
	text-decoration: none;
	transition: var(--transition-background);
	border-left: 1px solid var(--color-cobalt-blue-400);

	/* Card Background & Styling */
	background-color: var(--card-bg-color, #ffffff);
	border-radius: var(--card-border-radius, 0px) !important;
	padding: var(--card-padding-top, 0px) var(--card-padding-right, 0px) var(--card-padding-bottom, 0px) var(--card-padding-left, 0px);
}

.elcogen-quick-links__card:hover {
	background-color: var(--card-hover-bg-color, transparent);
}

.elcogen-quick-links__card-image {
	width: 8.875rem;
	height: 5rem;
}

.elcogen-quick-links__card-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.elcogen-quick-links__card-content {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-baseline-04);
	flex: 1;
}

.elcogen-quick-links__card-title {
	margin: 0;
	padding: 0;
	font-family: var(--font-family-headings), sans-serif; /* Cairo */
	font-weight: var(--font-weight-semibold); /* 600 - Semi-bold */
	font-size: 2.375rem; /* 38px - Desktop */
	line-height: 2.4375rem; /* 39px - Desktop */
	color: var(--color-text-primary);
}

/* Mobile: Smaller card title size */
@media (max-width: 767px) {
	.elcogen-quick-links__card-title {
		font-size: 1.5625rem; /* 25px - Mobile */
		line-height: 1.5625rem; /* 25px - Mobile */
	}
}

/* Card title styling when logo is present - Cairo Bold 25px/39px */
.elcogen-quick-links__card--has-logo .elcogen-quick-links__card-title {
	font-family: var(--font-family-headings), sans-serif; /* Cairo */
	font-weight: var(--font-weight-bold); /* 700 - Bold */
	font-size: var(--font-size-h5); /* 25px (1.5625rem) */
	line-height: var(--line-height-h5); /* 39px (2.4375rem) */
}

.elcogen-quick-links__card-description {
	margin: 0;
	padding: 0;

	/* Card Description Styling */
	color: var(--card-desc-color, inherit);
	font-family: var(--card-desc-font-family, inherit);
	font-size: var(--card-desc-font-size, inherit);
	font-weight: var(--card-desc-font-weight, inherit);
	line-height: var(--card-desc-line-height, inherit);
	letter-spacing: var(--card-desc-letter-spacing, inherit);
	margin-top: var(--card-desc-top-spacing, 0px);
}

.elcogen-quick-links__card-footer {
	display: flex;
	justify-content: flex-end;
	width: 100%;
	margin-top: auto;
}

.elcogen-quick-links__card-button {
	flex-shrink: 0;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: var(--transition-transform);

	/* Card Button Styling */
	background-color: var(--card-button-bg-color, var(--color-dark-neutral));
	width: var(--card-button-size, 40px);
	height: var(--card-button-size, 40px);
}

.elcogen-quick-links__card-button svg {
	display: block;
	width: 1.5rem;
	height: 1.5rem;

	/* Card Button Icon Color */
	stroke: var(--card-button-icon-color, var(--color-white));
}

.elcogen-quick-links__card:hover .elcogen-quick-links__card-button {
	transform: translateX(var(--spacing-baseline-04));
}

/**
 * Available CSS Variables for Card Styling
 *
 * You can define these variables in your design tokens or custom CSS to control
 * the appearance of quick link cards without modifying the widget PHP code.
 *
 * Card Container:
 * --card-bg-color: Background color of the card (default: #ffffff)
 * --card-hover-bg-color: Background color on hover (default: transparent)
 * --card-border-radius: Border radius for card corners (default: 0px)
 * --card-padding-top: Top padding (default: 0px)
 * --card-padding-right: Right padding (default: 0px)
 * --card-padding-bottom: Bottom padding (default: 0px)
 * --card-padding-left: Left padding (default: 0px)
 *
 * Card Title:
 * --card-title-color: Text color (default: inherit)
 * --card-title-font-family: Font family (default: inherit)
 * --card-title-font-size: Font size (default: inherit)
 * --card-title-font-weight: Font weight (default: inherit)
 * --card-title-line-height: Line height (default: inherit)
 * --card-title-letter-spacing: Letter spacing (default: inherit)
 * --card-title-text-transform: Text transform (default: none)
 *
 * Card Description:
 * --card-desc-color: Text color (default: inherit)
 * --card-desc-font-family: Font family (default: inherit)
 * --card-desc-font-size: Font size (default: inherit)
 * --card-desc-font-weight: Font weight (default: inherit)
 * --card-desc-line-height: Line height (default: inherit)
 * --card-desc-letter-spacing: Letter spacing (default: inherit)
 * --card-desc-top-spacing: Top margin/spacing (default: 0px)
 *
 * Card Button:
 * --card-button-bg-color: Button background color (default: transparent)
 * --card-button-icon-color: Icon/SVG color (default: currentColor)
 * --card-button-size: Button width and height (default: 40px)
 *
 * Example Usage:
 * :root {
 *   --card-bg-color: #f9f9f9;
 *   --card-hover-bg-color: #efefef;
 *   --card-border-radius: 8px;
 *   --card-padding-top: 20px;
 *   --card-padding-right: 20px;
 *   --card-padding-bottom: 20px;
 *   --card-padding-left: 20px;
 *   --card-title-color: #333;
 *   --card-title-font-size: 18px;
 *   --card-title-font-weight: 700;
 *   --card-desc-color: #666;
 *   --card-desc-font-size: 14px;
 *   --card-desc-top-spacing: 12px;
 *   --card-button-bg-color: #007bff;
 *   --card-button-icon-color: #ffffff;
 *   --card-button-size: 48px;
 * }
 */