/**
 * Anika Solutions Grid Block Styles
 *
 * 3-column card grid for displaying Anika solutions with background images.
 * Simplified from multi-column-boxed-content for Anika-specific usage.
 *
 * @package TMW_Core_Child
 * @version 1.0.0
 */

/* Section Container */
.anika-solutions-grid {
	position: relative;
	transition: background-image 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.4s;
	padding-bottom: var(--space-xl);
}

/* Background Image Styling with Lazy Loading */
.anika-solutions-grid[data-has-bg-image="true"].bg-loaded {
	background-image: var(--bg-section-image);
	background-size: 110% 95%;
	background-position: bottom;
	background-repeat: no-repeat;
}

/* Responsive Grid Container */
.anika-solutions-grid .column-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 auto;
	perspective: 1000px;
}

.anika-solutions-grid .section-title,
.anika-solutions-grid .section-subtitle {
	text-align: center;
	max-width: var(--max-width-content-lg);
	margin-left: auto;
	margin-right: auto;
}

/* Card Styling */
.anika-solutions-grid .column-card {
	backdrop-filter: blur(8px);
	padding: var(--space-lg);
	border-radius: var(--radius-card);
	border: 1px solid transparent;
	box-shadow: var(--shadow-default);
	flex-grow: 1;
	transition:
		transform var(--transition-base),
		box-shadow var(--transition-base),
		background-color var(--transition-base),
		border-color var(--transition-base);
}

/* GPU acceleration optimizations - desktop only */
@media (width > 768px) and (hover: hover) and (pointer: fine) {
	.anika-solutions-grid .column-card {
		-webkit-font-smoothing: subpixel-antialiased;
	}
}

/* Card flex sizing - always 3 columns */
.anika-solutions-grid .column-card {
	flex: 1;
	min-width: 0;
	will-change: transform;
}

/* ==========================================================================
   Card Width Expansion on Hover
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {
	.anika-solutions-grid .column-container {
		flex-wrap: nowrap;
		container-type: inline-size;
		container-name: cards-row;
	}

	/* Use flex-grow for true layout expansion - siblings shrink as hovered card grows */
	.anika-solutions-grid .column-card:hover {
		flex-grow: 1.15;
	}
}

/* Lock text width relative to container to prevent re-wrapping */
@media (hover: hover) and (pointer: fine) and (width >= 1200px) {
	.anika-solutions-grid .column-card.has-card-bg .column-title,
	.anika-solutions-grid .column-card.has-card-bg .column-content {
		width: calc(32cqi - var(--space-lg) * 2);
		min-width: calc(32cqi - var(--space-lg) * 2);
	}
}

/* Hover effects for cards with CTAs (non-background-image cards) */
.anika-solutions-grid .column-card.has-cta:not(.has-card-bg):hover,
.anika-solutions-grid .column-card.has-cta:not(.has-card-bg):has(:focus-visible) {
	background-color: rgb(255 255 255 / 96%);
	transform: scale(var(--card-hover-scale, 1.05)) translateZ(0);
}

/* ==========================================================================
   Clickable Cards - Visual indicator for JS-powered card links
   ========================================================================== */
/* Note: Card click handling is done via JavaScript because the .btn-arrow
   has transform: translateY() for hover animation, which creates a containing
   block that prevents CSS stretched link pattern from working. */

.anika-solutions-grid .column-card.has-cta {
	cursor: pointer;
}

/* Focus visible state for keyboard navigation on clickable cards */
.anika-solutions-grid .column-card.has-cta:focus {
	outline: none;
}

.anika-solutions-grid .column-card.has-cta:focus-visible {
	outline: 3px solid var(--color-primary);
	outline-offset: var(--outline-offset);
	box-shadow: var(--shadow-focus);
}

/* Focus visible for cards with background images - use white outline for contrast */
.anika-solutions-grid .column-card.has-card-bg:focus-visible {
	outline-color: var(--color-white);
	box-shadow: 0 0 0 3px rgb(255 255 255 / 30%);
}

/* ==========================================================================
   Card Background Image
   ========================================================================== */

.anika-solutions-grid .column-card.has-card-bg {
	position: relative;
	background-image: var(--card-bg-image);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	min-height: 525px;
	justify-content: flex-end;
	padding: var(--space-md) var(--space-lg);
}

/* Gradient overlay for text readability */
.anika-solutions-grid .column-card.has-card-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgb(0 0 0 / 0%) 0%,
		rgb(0 0 0 / 10%) 40%,
		rgb(0 0 0 / 50%) 100%
	);
	border-radius: var(--radius-card);
	z-index: 1;
	pointer-events: none;
	transition: background var(--transition-base);
}

/* Ensure card content appears above overlay */
.anika-solutions-grid .column-card.has-card-bg > * {
	position: relative;
	z-index: 2;
}

/* Title styling - white, at bottom */
.anika-solutions-grid .column-card.has-card-bg .column-title {
	color: var(--color-white);
	margin-bottom: var(--space-sm);
	text-shadow: 0 2px 4px rgb(0 0 0 / 30%);
	transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
	letter-spacing: -0.1px;
}

/* Editor preview: ensure white title on background image cards */
.editor-styles-wrapper .anika-solutions-grid .column-card.has-card-bg .column-title {
	color: var(--color-white) !important;
}

/* Description styling */
.anika-solutions-grid .column-card.has-card-bg .column-content {
	color: rgb(255 255 255 / 90%);
	margin-bottom: 0;
	flex-grow: 0;
	text-shadow: 0 1px 2px rgb(0 0 0 / 30%);
	transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
	line-height: 1.3em;
}

/* Editor preview: ensure white content on background image cards */
.editor-styles-wrapper .anika-solutions-grid .column-card.has-card-bg .column-content {
	color: rgb(255 255 255 / 90%) !important;
}

/* Arrow link - hidden by default, fades up on hover */
.anika-solutions-grid .column-card.has-card-bg .btn-arrow {
	opacity: 0;
	transform: translateY(10px);
	transition:
		opacity 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
		transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
	pointer-events: none;
	margin-top: var(--space-xs);
	white-space: normal;
	min-height: 3em;
	display: flex;
	align-items: center;
	color: var(--color-white);
	text-shadow: 0 1px 2px rgb(0 0 0 / 30%);
	line-height: 1.2em;
}

/* Arrow icon styling */
.anika-solutions-grid .column-card.has-card-bg .btn-arrow svg {
	filter: brightness(0) invert(1);
}

/* Hide underline on background image cards */
.anika-solutions-grid .column-card.has-card-bg .btn-arrow::before {
	display: none;
}

/* ==========================================================================
   Card Hover Effects - Blue Overlay
   ========================================================================== */

.anika-solutions-grid .column-card.has-card-bg {
	transition:
		box-shadow 1s ease,
		flex-grow 1s ease;
}

.anika-solutions-grid .column-card.has-card-bg::before {
	transition: background 0.4s ease;
}

@media (hover: hover) and (pointer: fine) {
	/* Blue overlay on hover */
	.anika-solutions-grid .column-card.has-card-bg:hover::before {
		background: linear-gradient(
			180deg,
			rgb(0 82 147 / 70%) 0%,
			rgb(0 82 147 / 80%) 40%,
			rgb(0 50 100 / 90%) 100%
		);
	}

	/* Arrow link fades up into place on hover */
	.anika-solutions-grid .column-card.has-card-bg:hover .btn-arrow {
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
	}

	/* Shift title and description up to make room for CTA */
	.anika-solutions-grid .column-card.has-card-bg:hover .column-title,
	.anika-solutions-grid .column-card.has-card-bg:hover .column-content {
		transform: translateY(calc(var(--space-lg) * -1));
	}
}

/* Content Elements */
.anika-solutions-grid .column-title {
	margin-top: 0;
}

.anika-solutions-grid .column-content {
	margin-bottom: var(--space-lg);
	flex-grow: 1;
}

/* Prevent Gutenberg text color from affecting headings */
section.anika-solutions-grid.has-text-color .section-title,
section.anika-solutions-grid.has-text-color .section-subtitle {
	color: inherit;
}

section.anika-solutions-grid.has-text-color .column-title {
	color: var(--color-heading) !important;
}

/* Button positioning */
.anika-solutions-grid .column-card .btn {
	margin-top: auto;
	align-self: flex-start;
}

.anika-solutions-grid[data-has-bg-image="true"] .section-title {
	max-width: var(--max-width-content-md);
	text-wrap: unset;
}

/* Text shadow for section title/subtitle when background image is present */
.anika-solutions-grid[data-has-bg-image="true"] .section-title,
.anika-solutions-grid[data-has-bg-image="true"] .section-subtitle {
	text-shadow: 0 1px 3px rgb(255 255 255 / 80%),
		0 2px 6px rgb(255 255 255 / 60%);
}

.anika-solutions-grid .column-card .column-content ul {
	padding-left: 0;
	margin-left: var(--space-sm) !important;
}

.anika-solutions-grid .column-content li {
	position: relative;
	padding-left: 0.25em;
	margin-bottom: var(--space-xs);
}

/* ==========================================================================
   Responsive - Medium Browsers (768px - 1350px)
   ========================================================================== */

@media (width <= 1350px) and (width > 768px) {
	.anika-solutions-grid .column-card.has-card-bg .column-title {
		font-size: var(--font-size-h5);
	}
}

/* ==========================================================================
   Responsive - Tablet
   ========================================================================== */

@media (width <= 991px) {
	.anika-solutions-grid .column-container {
		flex-wrap: wrap;
		gap: var(--space-sm);
	}

	.anika-solutions-grid .column-card {
		box-shadow: none;
	}

	.anika-solutions-grid .column-card.has-card-bg {
		padding: var(--space-md);
		min-height: 400px;
	}

	/* Show buttons on tablet (no hover capability expected) */
	.anika-solutions-grid .column-card.has-card-bg .btn-arrow {
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
	}

	/* Shift title/content up to accommodate visible button */
	.anika-solutions-grid .column-card.has-card-bg .column-title,
	.anika-solutions-grid .column-card.has-card-bg .column-content {
		transform: translateY(calc(var(--space-lg) * -1));
	}

	/* Blue overlay on tablet (matches desktop hover state) */
	.anika-solutions-grid .column-card.has-card-bg::before {
		background: linear-gradient(
			180deg,
			rgb(0 82 147 / 50%) 0%,
			rgb(0 82 147 / 60%) 40%,
			rgb(0 50 100 / 65%) 100%
		);
	}
}

/* ==========================================================================
   Responsive - Mobile (1-column layout)
   ========================================================================== */

@media (width <= 768px) {
	.anika-solutions-grid .section-subtitle {
		margin-bottom: var(--space-xl);
	}

	.anika-solutions-grid .column-content {
		margin-bottom: var(--space-sm);
	}

	/* Disable 3D perspective on mobile */
	.anika-solutions-grid .column-container {
		perspective: none;
		flex-direction: column;
	}

	/* Force single column on mobile */
	.anika-solutions-grid .column-card {
		transform: none;
		backface-visibility: visible;
		flex: 0 0 100%;
		width: 100%;
	}

	.anika-solutions-grid .column-card .btn {
		align-self: center;
	}

	/* Mobile: Use cover for background */
	.anika-solutions-grid[data-has-bg-image="true"].bg-loaded {
		background-size: cover;
		background-position: center;
	}

	.anika-solutions-grid .column-card.has-card-bg {
		min-height: 220px;
	}

	/* Mobile: Disable hover effects */
	.anika-solutions-grid .column-container:has(.column-card.has-card-bg):hover .column-card.has-card-bg,
	.anika-solutions-grid .column-card.has-card-bg:hover {
		transform: none;
	}
}

@media (width <= 640px) {
	.anika-solutions-grid .column-card.has-card-bg {
		padding: var(--space-xl);
	}
}