/**
 * Logo Grid Widget Styles
 *
 * Bordered grid of logos for partner, customer, and integration sections.
 * Uses bordered grid technique: container border-top + border-left,
 * each cell border-right + border-bottom.
 *
 * Figma Specs:
 * - Border: 1px solid #133844 (--color-container-blue)
 * - Cell padding: 32px (--spacing-xl)
 * - Logo max-height: 80px
 * - Desktop + Tablet: 4 columns (configurable)
 * - Mobile: 1 column
 *
 * @package Zededa
 */

/* ==========================================================================
   1. Elementor Kit Specificity Overrides
   [class*="elementor-kit-"] sets global a styles that cascade into widget links.
   ========================================================================== */

[class*="elementor-kit-"] .zededa-logo-grid a {
	text-decoration: none;
	color: inherit;
}

/* ==========================================================================
   2. Grid Wrapper
   Outer container holds one or two sub-grids (main rows + last row).
   Outer border lives here; sub-grids only carry cell borders.
   ========================================================================== */

.zededa-logo-grid-wrapper {
	border-top: var(--border-width-thin) solid var(--logo-grid-border-color, var(--color-container-blue));
	border-left: var(--border-width-thin) solid var(--logo-grid-border-color, var(--color-container-blue));
	box-sizing: border-box;
}

/* ==========================================================================
   3. Grid Layout
   minmax(0, 1fr) prevents columns from expanding beyond the grid container
   when logo images have large intrinsic widths.
   ========================================================================== */

.zededa-logo-grid {
	display: grid;
	width: 100%;
	box-sizing: border-box;
}

/* Column modifiers */
.zededa-logo-grid--cols-1 {
	grid-template-columns: minmax(0, 1fr);
}

.zededa-logo-grid--cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.zededa-logo-grid--cols-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.zededa-logo-grid--cols-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.zededa-logo-grid--cols-5 {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.zededa-logo-grid--cols-6 {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

.zededa-logo-grid--cols-7 {
	grid-template-columns: repeat(7, minmax(0, 1fr));
}

/* ==========================================================================
   3. Cell
   ========================================================================== */

.zededa-logo-grid__cell {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--logo-grid-cell-padding, var(--spacing-xl));
	border-right: var(--border-width-thin) solid var(--logo-grid-border-color, var(--color-container-blue));
	border-bottom: var(--border-width-thin) solid var(--logo-grid-border-color, var(--color-container-blue));
	min-height: 120px;
	box-sizing: border-box;
	overflow: hidden;
}

/* ==========================================================================
   4. Link
   ========================================================================== */

.zededa-logo-grid__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.zededa-logo-grid__link:hover {
	opacity: 0.8;
}

/* ==========================================================================
   5. Logo Image
   Logos scale to fit their cell while keeping aspect ratio.
   max-height caps vertical size; max-width: 100% allows horizontal shrink.
   ========================================================================== */

.zededa-logo-grid__logo {
	max-height: 80px;
	max-width: min(var(--logo-grid-logo-max-width, 200px), 100%);
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
	filter: grayscale(100%);
}

/* ==========================================================================
   6. Dark Container Variant (.zededa-bg-blue)
   White borders and white logos when the grid sits on a blue background.
   ========================================================================== */

.zededa-bg-blue .zededa-logo-grid-wrapper {
	border-color: var(--color-neutral-white);
}

.zededa-bg-blue .zededa-logo-grid__cell {
	border-color: var(--color-neutral-white);
}

.zededa-bg-blue .zededa-logo-grid__logo {
	filter: grayscale(100%) brightness(0) invert(1);
}

/* ==========================================================================
   7. Accessibility
   ========================================================================== */

.zededa-logo-grid a:focus {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.zededa-logo-grid *,
	.zededa-logo-grid *::before,
	.zededa-logo-grid *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ==========================================================================
   8. Responsive: Mobile (max-width: 768px)
   ========================================================================== */

@media (max-width: 768px) {
	.zededa-logo-grid--cols-3,
	.zededa-logo-grid--cols-4,
	.zededa-logo-grid--cols-5,
	.zededa-logo-grid--cols-6,
	.zededa-logo-grid--cols-7 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.zededa-logo-grid__cell {
		padding: var(--spacing-lg);
	}
}