/**
 * Product Solution Tabs block styles.
 *
 * Card grid styling intentionally mirrors the existing .is-style-boxed
 * pattern (see global SCSS), with two differences for this context:
 *   - background uses --wp--preset--color--neutral instead of --light-color
 *   - .product-grid forces equal-height rows via CSS grid rather than
 *     letting flex columns shrink-wrap, since these cards have variable
 *     content (summary length, presence/absence of bullet list)
 */

.momentive-product-solution-tabs {

	.tabs-row {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.75rem;
		margin-bottom: 2rem;
	}

	.tab {
		display: inline-flex;
		align-items: center;
		gap: 0.6rem;
		padding: 0.85rem 1rem;
		border: 1px solid var(--menu-border-color);
		border-radius: 1rem;
		background: var(--light-color, #fff);
		color: var(--text-color);
		font-size: clamp( 1rem, 2vw, 1.375rem );
		font-weight: 600;
		cursor: pointer;
		transition: background-color .2s ease, color .2s ease, border-color .2s ease;

		&:hover, &.is-active {
			border-color: var(--solution);
			background: var(--solution);
			color: var(--light-color, #fff);
		}
		
		&:hover .tab-icon, &.is-active .tab-icon {
			color: var(--light-color, #fff);
		}

		&[data-tab=data-analytics], &[data-tab=donor-management], &[data-tab=community] {
			display: none;
		}
	}

	.tab-icon {
		width: 1.5rem;
		height: 1.5rem;
		flex-shrink: 0;
		color: var(--solution);
	}

	/* ── Mobile dropdown ──────────────────────────────────────────────────
	 *
	 * Hidden by default (desktop-first); shown below 640px in place of
	 * .tabs-row, matching the breakpoint already used by .product-grid
	 * above rather than introducing a separate one.
	 */

	.tabs-dropdown {
		display: none;
		position: relative;
		margin-bottom: 2rem;
	}

	.dropdown-current {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 0.85rem 1.25rem;
		border: 1px solid var(--menu-border-color);
		border-radius: 1rem;
		background: var(--light-color, #fff);
		color: var(--text-color);
		font-size: 1rem;
		font-weight: 600;
		cursor: pointer;
	}

	.dropdown-chevron {
		flex-shrink: 0;
		transition: transform .2s ease;
	}

	.dropdown-current[aria-expanded="true"] .dropdown-chevron {
		transform: rotate( 180deg );
	}

	.dropdown-options {
		position: absolute;
		top: calc(100% + 0.5rem);
		left: 0;
		right: 0;
		z-index: 10;
		background: var(--light-color, #fff);
		border: 1px solid var(--menu-border-color);
		border-radius: 1rem;
		padding: 0.5rem;
		box-shadow: var(--wp--preset--shadow--card);
		max-height: 70vh;
		overflow-y: auto;

		&[hidden] {
			display: none;
		}
	}

	.dropdown-option {
		display: flex;
		align-items: center;
		gap: .75rem;
		width: 100%;
		padding: .75rem .5rem;
		border: none;
		background: none;
		text-align: left;
		font-size: 1rem;
		font-weight: 500;
		color: var(--text-color);
		cursor: pointer;
		border-radius: 0.5rem;
		margin: .125rem 0;
		&:hover, &.is-active {
			background: var(--solution);
			.dropdown-option-icon {
				color: var(--light-color);
			}
		}
	}

	.dropdown-option-icon {
		width: 1.375rem;
		height: 1.375rem;
		flex-shrink: 0;
		color: var(--solution);
	}

	@media (max-width: 960px) {
		.tabs-row {
			display: none;
		}

		.tabs-dropdown {
			display: block;
		}
	}


	.panel-empty {
		color: var(--text-color-muted, #777);
		font-style: italic;
	}

	/* ── Card grid ────────────────────────────────────────────────────────
	 *
	 * Grid (rather than the flex .wp-block-columns the editor markup uses
	 * elsewhere) so every card in a row matches height automatically,
	 * including across rows of varying card content.
	 */

	.product-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 2rem;

		@media (max-width: 960px) {
			grid-template-columns: repeat(2, 1fr);
		}

		@media (max-width: 640px) {
			grid-template-columns: 1fr;
		}
	}
	
	
	.product-card, .product-card.wp-block-column {
		position: relative;
		border: 1px solid transparent;
		background: var(--wp--preset--color--neutral);
		border-radius: 1.5rem;
		display: flex;
		flex-direction: column;
		padding: 1.5rem 1.25rem;
		transition: box-shadow .3s ease, border-color .3s ease;

		&:hover {
			box-shadow: var(--wp--preset--shadow--card);
			border-color: var(--menu-border-color);
		}
	}

	.card-heading {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		margin-bottom: 1.75rem;
	}

	.card-icon {
		display: inline-flex;
		width: 2.75rem;
		height: 2.75rem;
		flex-shrink: 0;
		background: var(--light-color);
		border-radius: .75rem;
		overflow: hidden;
		svg {
			width: 100%;
			height: 100%;
			color: var(--product);
		}
	}
	
	@supports (corner-shape: squircle) {
		.card-icon {
			border-radius: 1.75rem;
			corner-shape: squircle;
		}
	}

	.wp-block-heading {
		margin: 0;
		font-size: var(--wp--preset--font-size--large);
		letter-spacing: -0.02em;

		a {
			color: var(--text-color);
			text-decoration: none;

			&:after {
				content: '';
				position: absolute;
				inset: 0;
			}
		}
	}

	.card-summary {
		margin-bottom: 1rem;
		line-height: 1.3;
		font-size: var(--wp--preset--font-size--small);
		p:first-child {
			margin-top: 0;
		}

		ul {
			margin: 0.75rem 0 0;
			padding-left: 1.1rem;
		}

		li {
			margin-bottom: 0.4rem;
		}
	}

	.read-more {
		margin: auto 0 0 !important;

		a {
			text-decoration: none;
			transition: color .3s ease;
			&:after {
				content: '\2192';
				border: none;
				transform: none;
				top: -0.125em;
				transition: transform .3s ease;
			}
		}
	}
	.product-card:hover .read-more a {
		color: color-mix(in srgb, var(--secondary-color), black 10%);
		&:after {
			transform: translateX(.25rem);
		}
	}
}