/* Community Orgs Grid — zen grid
   Selectors are scoped under .cog-grid and use !important on the
   properties themes most commonly override via generic "a" / "p" /
   "svg" rules (color, text-decoration, and — importantly — icon size).
   Icon sizing in particular is locked down hard: some themes apply
   their own svg width/height rules that otherwise blow icons up. */

.cog-grid {
	display: grid;
	grid-template-columns: repeat(var(--cog-columns, 3), 1fr);
	gap: 4rem 3rem;
	max-width: 1800px;
	margin: 0 auto;
	padding: 0.5rem 1rem;
}

/* Cards are wider now (250px logos), so drop to 2 columns sooner than
   before — around the point 3 columns would start feeling cramped. */
@media (max-width: 1200px) {
	.cog-grid {
		grid-template-columns: repeat(min(2, var(--cog-columns, 3)), 1fr);
	}
}

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

.cog-grid .cog-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 2rem 1.25rem;
	border-radius: 12px;
	transition: background-color 0.2s ease;
}

.cog-grid .cog-card:hover {
	background-color: rgba(0, 0, 0, 0.035) !important;
}

.cog-grid .cog-logo-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 120px;
	margin-bottom: 0.85rem;
}

/* Logo: shown whole, at its own aspect ratio — no circular crop, no
   forced square. Capped to a 250 x 120 max box. */
.cog-grid .cog-logo {
	display: block;
	width: auto;
	height: auto;
	max-width: 250px;
	max-height: 120px;
	border-radius: 4px !important;
	object-fit: contain;
	background: transparent;
	border: none !important;
	box-shadow: none !important;
}

.cog-grid .cog-logo-placeholder {
	width: 100px;
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(0, 0, 0, 0.28) !important;
	border-radius: 4px;
	background-color: rgba(0, 0, 0, 0.03);
}

.cog-grid .cog-name {
	margin: 0 0 0.3rem !important;
	font-size: 0.95rem !important;
	font-weight: 500 !important;
	line-height: 1.35 !important;
	color: #2b2b2b !important;
}

/* Website — plain readable text, not an icon. */
.cog-grid a.cog-website {
	display: inline-block;
	margin-bottom: 0.55rem;
	font-size: 0.8rem !important;
	color: #7a7a7a !important;
	text-decoration: none !important;
	border-bottom: 1px solid transparent !important;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.cog-grid a.cog-website:hover,
.cog-grid a.cog-website:focus {
	color: #2b2b2b !important;
	border-bottom-color: currentColor !important;
}

/* Social icons — small, secondary, locked to a fixed pixel size so a
   theme's own svg/icon rules can't inflate them. */
.cog-grid .cog-icons {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.7rem;
}

.cog-grid a.cog-icon {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 22px !important;
	height: 22px !important;
	padding: 0 !important;
	margin: 0 !important;
	line-height: 1 !important;
	border-radius: 50%;
	color: #8a8a8a !important;
	text-decoration: none !important;
	border-bottom: none !important;
	box-shadow: none !important;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.cog-grid a.cog-icon:hover,
.cog-grid a.cog-icon:focus {
	color: #2b2b2b !important;
	background-color: rgba(0, 0, 0, 0.05);
}

.cog-grid a.cog-icon svg {
	width: 13px !important;
	height: 13px !important;
	max-width: 13px !important;
	max-height: 13px !important;
	display: block !important;
	stroke: currentColor;
	fill: none;
	flex-shrink: 0;
}

.cog-empty {
	text-align: center;
	color: rgba(0, 0, 0, 0.5);
}
/* Logo carousel. Width follows the containing Enfold section/column. */
.cog-slider {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 12px 0 !important;
}
.cog-slider .cog-slider-viewport {
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    direction: ltr !important;
    scroll-behavior: auto !important;
    scrollbar-width: thin;
}
.cog-slider .cog-slider-track,
.cog-slider .cog-slider-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    width: max-content !important;
    max-width: none !important;
    margin: 0 !important;
}
.cog-slider .cog-slider-group {
    flex: 0 0 auto !important;
    gap: 48px !important;
    padding: 8px 48px 8px 0 !important;
    box-sizing: border-box !important;
}
.cog-slider .cog-slider-item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 165px !important;
    width: 165px !important;
    height: 110px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
}
.cog-slider .cog-slider-item a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 165px !important;
    height: 110px !important;
    border: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
.cog-slider img.cog-slider-logo {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 165px !important;
    max-height: 110px !important;
    object-fit: contain !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}
.cog-slider .cog-slider-name {
    font-size: 14px !important;
    line-height: 1.4 !important;
    color: inherit !important;
}
.cog-slider button.cog-slider-toggle {
    display: block;
    width: auto !important;
    margin: 10px 0 0 auto !important;
    padding: 5px 9px !important;
    background: transparent !important;
    color: inherit !important;
    border: 1px solid currentColor !important;
    border-radius: 3px !important;
    font: inherit !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    cursor: pointer;
}
.cog-slider a:focus-visible,
.cog-slider button:focus-visible,
.cog-slider .cog-slider-viewport:focus-visible {
    outline: 2px solid currentColor !important;
    outline-offset: -2px !important;
}
.cog-slider [hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
    .cog-slider .cog-slider-clone,
    .cog-slider .cog-slider-toggle { display: none !important; }
}