/**
 * Ocean Partnership Widget Styles
 *
 * @package    Oceanprosperity_Core
 * @subpackage Oceanprosperity_Core/public/css
 */

/* Container */
.op-partnership-widget {
	width: 100%;
}

.op-partnership-container {
	display: flex;
	flex-direction: column;
	gap: 40px;
	width: 100%;
}

/* Layout Base */
.op-partnership-layout {
	width: 100%;
}

/* Main Heading */
.op-partnership-main-heading {
	margin-bottom: 30px;
	font-size: 24px;
	font-weight: 600;
}

/* Subsections */
.op-partnership-subsection {
	width: 100%;
}

.op-partnership-sponsor-section{
	width: auto;
}

.op-partnership-subsection:last-child {
	margin-bottom: 0;
}

/* Headings */
.op-partnership-heading {
	margin-bottom: 20px;
	font-size: 18px;
	font-weight: 600;
}

/* Partnership Grid - Flex Layout */
.op-partnership-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: center;
	justify-content: flex-start;
}

/* Partnership Items */
.op-partnership-item {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 15px;
	background: #ffffff;
	border-radius: 8px;
}

.op-partnership-item img {
	max-width: 150px;
	width: 100%;
	height: auto;
	object-fit: contain;
}

/* Layout 1: Sponsor Featured + Partners + Collaborators */
.op-partnership-layout-1 .op-partnership-flex-container {
	display: flex;
	flex-direction: row;
	gap: 20px;
	align-items: flex-start;
}

.op-partnership-layout-1 .op-sponsor-featured {
	flex: 0 0 auto;
	min-width: 300px;
	max-width: 400px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 30px;
	border-radius: 12px;
}

.op-partnership-layout-1 .op-sponsor-featured img {
	max-width: 100%;
	width: 100%;
	height: auto;
}

.op-partnership-layout-1 .op-partnership-right-section {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Layout 2: Partners + Collaborators (No Sponsors) */
.op-partnership-layout-2 {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

/* Layout 3: Sponsor Featured + Collaborators (No Partners) */
.op-partnership-layout-3 .op-partnership-flex-container {
	display: flex;
	flex-direction: row;
	gap: 40px;
	align-items: flex-start;
}

.op-partnership-layout-3 .op-sponsor-featured {
	flex: 0 0 auto;
	min-width: 300px;
	max-width: 400px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 30px;
	border-radius: 12px;
}

.op-partnership-layout-3 .op-sponsor-featured img {
	max-width: 100%;
	width: 100%;
	height: auto;
}

.op-partnership-layout-3 .op-partnership-right-section {
	flex: 1;
}

/* Layout 4: Partners Only */
.op-partnership-layout-4 {
	width: 100%;
}

/* Layout 5: Sponsor Featured + Partners (No Collaborators) */
.op-partnership-layout-5 .op-partnership-flex-container {
	display: flex;
	flex-direction: row;
	gap: 40px;
	align-items: flex-start;
}

.op-partnership-layout-5 .op-sponsor-featured {
	flex: 0 0 auto;
	min-width: 300px;
	max-width: 400px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 30px;
	border-radius: 12px;
}

.op-partnership-layout-5 .op-sponsor-featured img {
	max-width: 100%;
	width: 100%;
	height: auto;
}

.op-partnership-layout-5 .op-partnership-right-section {
	flex: 1;
}

/* Fallback Layout */
.op-partnership-layout-fallback {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

/* Grid Specific Styles */
.op-partnership-grid-partners,
.op-partnership-grid-collaborators,
.op-partnership-grid-sponsors {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

/* Layout 1 and Fallback: Partners max 4 columns */
.op-partnership-layout-1 .op-partnership-grid-partners,
.op-partnership-layout-fallback .op-partnership-grid-partners {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	max-width: 100%;
}

/* Limit to 4 columns maximum */
.op-partnership-layout-1 .op-partnership-grid-partners,
.op-partnership-layout-fallback .op-partnership-grid-partners {
	grid-template-columns: repeat(4, 1fr);
}

/* Layout 1 and Fallback: Collaborators max 5 columns */
.op-partnership-layout-1 .op-partnership-grid-collaborators,
.op-partnership-layout-fallback .op-partnership-grid-collaborators {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	max-width: 100%;
}

/* Layout 2: Partners and Collaborators grids */
.op-partnership-layout-2 .op-partnership-grid-partners,
.op-partnership-layout-4 .op-partnership-grid-partners {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	max-width: 100%;
}

.op-partnership-layout-2 .op-partnership-grid-collaborators,
.op-partnership-layout-4 .op-partnership-grid-collaborators {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	max-width: 100%;
}

/* Layout 3: Collaborators grid */
.op-partnership-layout-3 .op-partnership-grid-collaborators {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	max-width: 100%;
}

/* Layout 5: Partners grid */
.op-partnership-layout-5 .op-partnership-grid-partners {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	max-width: 100%;
}

/* Layout 6: Collaborators Only */
.op-partnership-layout-6 {
	width: 100%;
}

.op-partnership-layout-6 .op-partnership-grid-collaborators {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	max-width: 100%;
}

/* Responsive Styles */
@media (max-width: 1024px) {
	.op-partnership-layout-1 .op-partnership-flex-container,
	.op-partnership-layout-3 .op-partnership-flex-container,
	.op-partnership-layout-5 .op-partnership-flex-container {
		flex-direction: column;
	}

	.op-partnership-layout-1 .op-sponsor-featured,
	.op-partnership-layout-3 .op-sponsor-featured,
	.op-partnership-layout-5 .op-sponsor-featured {
		max-width: 100%;
		width: 100%;
	}

	/* Reduce columns on tablets */
	.op-partnership-layout-1 .op-partnership-grid-partners,
	.op-partnership-layout-2 .op-partnership-grid-partners,
	.op-partnership-layout-4 .op-partnership-grid-partners,
	.op-partnership-layout-5 .op-partnership-grid-partners,
	.op-partnership-layout-fallback .op-partnership-grid-partners {
		grid-template-columns: repeat(3, 1fr);
	}

	.op-partnership-layout-1 .op-partnership-grid-collaborators,
	.op-partnership-layout-2 .op-partnership-grid-collaborators,
	.op-partnership-layout-3 .op-partnership-grid-collaborators,
	.op-partnership-layout-4 .op-partnership-grid-collaborators,
	.op-partnership-layout-6 .op-partnership-grid-collaborators,
	.op-partnership-layout-fallback .op-partnership-grid-collaborators {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width: 768px) {
	.op-partnership-container {
		gap: 30px;
	}

	.op-partnership-main-heading {
		font-size: 20px;
		margin-bottom: 20px;
	}

	.op-partnership-heading {
		font-size: 16px;
		margin-bottom: 15px;
	}

	.op-partnership-grid {
		gap: 15px;
	}

	.op-partnership-item {
		padding: 12px;
	}

	.op-partnership-item img {
		max-width: 120px;
	}

	.op-partnership-layout-1 .op-sponsor-featured,
	.op-partnership-layout-3 .op-sponsor-featured,
	.op-partnership-layout-5 .op-sponsor-featured {
		min-width: 250px;
		padding: 20px;
	}

	/* Reduce columns on mobile */
	.op-partnership-layout-1 .op-partnership-grid-partners,
	.op-partnership-layout-2 .op-partnership-grid-partners,
	.op-partnership-layout-4 .op-partnership-grid-partners,
	.op-partnership-layout-5 .op-partnership-grid-partners,
	.op-partnership-layout-fallback .op-partnership-grid-partners {
		grid-template-columns: repeat(2, 1fr);
	}

	.op-partnership-layout-1 .op-partnership-grid-collaborators,
	.op-partnership-layout-2 .op-partnership-grid-collaborators,
	.op-partnership-layout-3 .op-partnership-grid-collaborators,
	.op-partnership-layout-4 .op-partnership-grid-collaborators,
	.op-partnership-layout-6 .op-partnership-grid-collaborators,
	.op-partnership-layout-fallback .op-partnership-grid-collaborators {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 480px) {
	.op-partnership-container {
		gap: 20px;
	}

	.op-partnership-main-heading {
		font-size: 18px;
	}

	.op-partnership-heading {
		font-size: 14px;
	}

	.op-partnership-grid {
		gap: 10px;
		justify-content: center;
	}

	.op-partnership-item {
		padding: 10px;
	}

	.op-partnership-item img {
		max-width: 100px;
	}

	.op-partnership-layout-1 .op-sponsor-featured,
	.op-partnership-layout-3 .op-sponsor-featured,
	.op-partnership-layout-4 .op-sponsor-featured,
	.op-partnership-layout-5 .op-sponsor-featured {
		min-width: 200px;
		padding: 15px;
	}

	/* Single column on very small screens */
	.op-partnership-layout-1 .op-partnership-grid-partners,
	.op-partnership-layout-2 .op-partnership-grid-partners,
	.op-partnership-layout-4 .op-partnership-grid-partners,
	.op-partnership-layout-5 .op-partnership-grid-partners,
	.op-partnership-layout-fallback .op-partnership-grid-partners {
		grid-template-columns: repeat(2, 1fr);
	}

	.op-partnership-layout-1 .op-partnership-grid-collaborators,
	.op-partnership-layout-2 .op-partnership-grid-collaborators,
	.op-partnership-layout-3 .op-partnership-grid-collaborators,
	.op-partnership-layout-4 .op-partnership-grid-collaborators,
	.op-partnership-layout-6 .op-partnership-grid-collaborators,
	.op-partnership-layout-fallback .op-partnership-grid-collaborators {
		grid-template-columns: repeat(3, 1fr);
	}
}