/**
 * Image Buttons Block
 * Grid of clickable image cards with expandable content panels.
 * Features header content at top, cards with visible text overlay, and slider on laptop/tablet/mobile.
 * 
 * KEY FEATURES:
 * - Click-to-expand content panels (accordion behavior on desktop)
 * - Slick slider on laptop/tablet/mobile with progress bar
 * - Text overlay visible on cards (icon + title)
 * - Two background variations: light (white) and dark (gradient blue)
 * - Featured first card (larger, expanded by default on desktop)
 * 
 * Variations:
 * - .image-buttons--light (white background)
 * - .image-buttons--dark (gradient blue background)
 */

/* ==========================================================================
   BASE STYLES (Mobile First)
   ========================================================================== */

.image-buttons {
	padding-top: var(--section-margins);
	padding-bottom: var(--section-margins);
	overflow: hidden;
}

/*---*\
    HEADER SECTION
\*---*/

.image-buttons__header {
	display: flex;
	flex-direction: column;
	gap: 32px;
	margin-bottom: 40px;
}

.image-buttons__header-text h2 {
	font-family: var(--font-heading);
	font-size: var(--font-size-h2);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-heading);
	margin: 0;
}

.image-buttons__header-text p {
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-body);
}

.image-buttons__header-text p:last-child {
	margin-bottom: 0;
}

.image-buttons__header-cta {
	display: flex;
	align-items: flex-start;
}

/*---*\
    CARDS CONTAINER
\*---*/

.image-buttons__cards {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/*---*\
    INDIVIDUAL CARD
\*---*/

.image-buttons__card {
	position: relative;
	border-radius: var(--border-radius);
	overflow: hidden;
	height: 186px;
	cursor: pointer;
}

.image-buttons__card-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.image-buttons__card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.is-expanded .image-buttons__card-image img {
	filter: grayscale(100%);
}

.image-buttons__card-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		to bottom,
		rgba(0, 35, 54, 0) 50%,
		rgba(0, 35, 54, 0.68) 100%
	);
	pointer-events: none;
}

/*---*\
    CARD INFO (Icon + Label - Always Visible)
\*---*/

.image-buttons__card-info {
	display: flex;
	align-items: center;
	gap: 10px;
	z-index: 2;
	transition:
		opacity var(--transition-medium) var(--transition-ease),
		visibility var(--transition-medium) var(--transition-ease);
	filter: brightness(0) invert(1);
	/* min-width: 341px; */
	width: 100%;
}

.image-button-media__container .image-buttons__card-info.full-image {
	min-width: 341px;
}

.image-buttons__card-info.card-icons__card-icon i {
	font-size: 40px;
	color: var(--color-bg-light-blue);
}

.image-buttons__card-content-info.card-icons__card-icon i {
	font-size: 40px;
	color: var(--color-bg-light-blue);
}

.image-buttons__card-info span {
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-heading);
	color: var(--color-bg-light-blue);
}

.image-buttons__card-info img {
	max-width: max-content;
	width: 100%;
	height: auto;
	height: 30px;
	object-fit: contain;
}

.image-button-media__container {
	position: absolute;
	bottom: 12px;
	left: 12px;
	right: 60px;
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.image-button-media__container .image-buttons__card-info.fixed-width {
	max-width: 250px;
}

.image-buttons__card-title {
	font-family: var(--font-body);
	font-size: 24px;
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-heading);
	color: var(--color-text-inverse) !important;
	margin: 0;
	z-index: 2;
	transition:
		opacity var(--transition-medium) var(--transition-ease),
		visibility var(--transition-medium) var(--transition-ease);
}

/*---*\
    TOGGLE BUTTON (Plus/Minus Icon)
\*---*/

.image-buttons__card-toggle {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 68px;
	height: 65px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: transparent;
	border: none;
	outline: none;
	z-index: 3;
	cursor: pointer;
	transition: background-color var(--transition-medium) var(--transition-ease);
	padding-top: 25px;
	padding-left: 30px;
}

.image-buttons__card-toggle img {
	position: absolute;
	bottom: -1px;
	right: -1px;
	width: 100%;
	z-index: -1;
}

.image-buttons__card-toggle .icon-plus,
.image-buttons__card-toggle .icon-minus {
	font-size: 12px;
	color: var(--color-primary);
	transition: opacity var(--transition-medium) var(--transition-ease);
	display: none;
}

.image-buttons__card-toggle .icon-arrow-right {
	font-size: 12px;
	color: var(--color-primary);
	transition: opacity var(--transition-medium) var(--transition-ease);
	display: block;
}

@media (min-width: 1600px) {
	.image-buttons__card-toggle .icon-plus,
	.image-buttons__card-toggle .icon-minus {
		font-size: 12px;
		color: var(--color-primary);
		transition: opacity var(--transition-medium) var(--transition-ease);
		display: block;
	}

	.image-buttons__card-toggle .icon-arrow-right {
		display: none;
	}
}

/*---*\
    EXPANDABLE CONTENT PANEL
\*---*/

.image-buttons__card-content {
	position: absolute;
	left: 32px;
	right: 80px;
	bottom: 0;
	max-height: calc(100% - 64px);
	padding: 26px;
	background-color: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	border: 1px solid var(--color-primary-hover);
	border-radius: var(--border-radius);
	transform: translateY(100%);
	opacity: 0;
	visibility: hidden;
	transition:
		transform var(--transition-medium) var(--transition-ease),
		opacity var(--transition-medium) var(--transition-ease),
		visibility var(--transition-medium) var(--transition-ease);
	z-index: 2;
	display: flex;
	flex-direction: column;
}

.image-buttons__card-content-inner {
	flex: 1;
	min-height: 0;
	overflow: hidden;
}

.image-buttons__card-content-info {
	display: inline-grid;
	margin-bottom: 10px;
}

.is-expanded .image-buttons__card-content-info.fixed-width {
	max-width: 250px;
}

.is-expanded .image-buttons__card-content-info.full-image {
	max-width: 420px;
	width: 100%;
}

.image-buttons__card-content-info i {
	font-size: 24px;
	color: var(--color-secondary);
}

.image-buttons__card-content-info span {
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-heading);
	color: var(--color-secondary);
}

.image-buttons__card-content-info img {
	width: 100%;
	height: auto;
}

.image-buttons__card-content-title {
	font-family: var(--font-body);
	font-size: var(--font-size-h5);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-heading);
	color: var(--color-heading);
	margin: 0 0 10px;
}

.image-buttons__card-description {
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-body);
	color: var(--color-text-primary);
	margin: 0 0 10px;
	max-height: 81px;
	overflow-y: auto;
	padding-right: 12px;
}

.image-buttons__card-description::-webkit-scrollbar-track {
	background-color: #9f9f9f;
}

.image-buttons__card-description::-webkit-scrollbar {
	width: 5px;
	background-color: #9f9f9f;
}

.image-buttons__card-description::-webkit-scrollbar-thumb {
	background-color: #436577;
}

.image-buttons__card-link {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-body);
	font-size: var(--btn-font-size);
	font-weight: var(--font-weight-semibold);
	color: var(--color-primary) !important;
	text-decoration: none;
	border-bottom: 1px solid var(--color-primary);
	padding-bottom: 2px;
	flex-shrink: 0;
	width: fit-content;
	margin-top: 8px;
	transition:
		color var(--transition-fast) var(--transition-ease),
		border-color var(--transition-fast) var(--transition-ease);
}

.image-buttons__card-link::after {
	font-size: 16px;
}

.image-buttons__card-link i {
	font-size: 18px;
	transition: transform var(--transition-fast) var(--transition-ease);
	top: -3px;
	position: relative;
}

/* .image-buttons__card-link:hover {
    background: transparent!important;
    padding: 0 0 2px 0!important;
} */

/*---*\
    FEATURED CARD
\*---*/

.image-buttons__card--featured {
	height: 186px;
}

/*---*\
    EXPANDED STATE (via JS click)
\*---*/

.image-buttons__card.is-expanded .image-buttons__card-content {
	transform: translateY(0);
	opacity: 1;
	visibility: visible;
	bottom: 32px;
}

.image-buttons__card.is-expanded .image-buttons__card-info,
.image-buttons__card.is-expanded .image-buttons__card-title {
	opacity: 0;
	visibility: hidden;
}

.image-buttons__card.is-expanded .image-buttons__card-toggle .icon-plus {
	display: none;
}

.image-buttons__card.is-expanded .image-buttons__card-toggle .icon-minus {
	display: block;
}

/*---*\
    SLIDER NAVIGATION
\*---*/

.image-buttons__nav {
	display: flex;
	align-items: center;
	gap: 32px;
	margin-top: 24px;
}

.image-buttons__progress {
	flex: 1;
	height: 4px;
	background-color: #d9d9d9;
	border-radius: 2px;
	overflow: hidden;
}

.image-buttons__progress-bar {
	height: 100%;
	width: 33%;
	background-color: var(--color-secondary);
	border-radius: 2px;
	transition: width var(--transition-medium) var(--transition-ease);
}

.bg-light-blue .image-buttons__progress-bar,
.bg-light-gray .image-buttons__progress-bar,
.bg-navy .image-buttons__progress-bar,
.bg-medium-blue .image-buttons__progress-bar,
.bg-gradient-blue .image-buttons__progress-bar {
	background-color: var(--color-bg-light);
}

.image-buttons__arrows {
	display: flex;
	align-items: center;
	gap: 16px;
}

.image-buttons__arrow {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-text-inverse);
	border: 1px solid var(--color-primary);
	border-radius: var(--border-radius);
	cursor: pointer;
	transition:
		background-color var(--transition-fast) var(--transition-ease),
		border-color var(--transition-fast) var(--transition-ease);
}

.image-buttons__arrow i {
	font-size: 16px;
	color: var(--color-primary);
	transition: color var(--transition-fast) var(--transition-ease);
}

.image-buttons__arrow:hover {
	background-color: var(--color-secondary-medium);
	color: var(--color-white);
	border-color: var(--color-secondary-medium);
}

.image-buttons__arrow:hover i {
	color: var(--color-white);
}

.image-buttons--dark .image-buttons__header-text h2,
.image-buttons--dark .image-buttons__header-text p {
	color: var(--color-text-inverse);
}

.image-buttons--dark .image-buttons__arrow {
	background-color: var(--color-text-inverse);
	border-color: var(--color-primary);
}

.image-buttons--dark .image-buttons__arrow:hover {
	background-color: var(--color-secondary-medium);
	color: var(--color-white);
	border-color: var(--color-secondary-medium);
}

.image-buttons--dark .image-buttons__arrow:hover i {
	color: var(--color-white);
}

.image-buttons--dark .image-buttons__progress {
	background-color: rgba(255, 255, 255, 0.3);
}

/* ==========================================================================
   TABLET (min-width: 768px)
   ========================================================================== */

@media (min-width: 768px) {
	.image-buttons__header {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.image-buttons__header-text {
		max-width: 815px;
		gap: 16px;
	}

	.image-buttons__header-cta {
		flex-shrink: 0;
		align-items: center;
	}

	.image-buttons__cards {
		flex-direction: row;
		gap: 32px;
	}

	.image-buttons__card {
		flex: 1;
		height: 328px;
	}

	.image-buttons__card--featured {
		height: 328px;
	}

	/* .image-buttons__card-info {
        bottom: 60px;
        left: 32px;
    } */

	.image-buttons__card-info span {
		font-size: 16px;
	}

	.image-buttons__card-title {
		bottom: 16px;
		left: 32px;
		font-size: var(--font-size-h5);
	}

	.image-buttons__card-toggle {
		width: 68px;
		height: 65px;
	}
}

/* ==========================================================================
   DESKTOP (min-width: 1025px)
   General layout improvements for laptop-sized screens.
   Slider remains active here; static grid is at 1600px+.
   ========================================================================== */

@media (min-width: 1200px) {
	.image-buttons__header-text {
		max-width: 100%;
		width: 100%;
	}

	.image-buttons__header-text.has-cta {
		max-width: 1400px;
	}

	.image-buttons__cards {
		gap: var(--content-gap);
		justify-content: center;
	}

	.image-buttons__card {
		height: 538px;
	}

	.image-buttons__card--featured {
		height: 538px;
	}

	.image-buttons__card-content {
		right: 56px;
	}

	/*---*\
        HOVER STATES
    \*---*/

	.image-buttons__card-link:hover {
		color: var(--color-primary-hover);
		border-color: var(--color-primary-hover);
	}

	.image-buttons__card-link:hover i {
		transform: translateX(4px);
	}
}

/* ==========================================================================
   LARGE DESKTOP (min-width: 1600px)
   Static grid mode: no slider, fixed-width cards, expand on hover.
   Only applies when <=4 cards (JS removes slider and adds grid behavior).
   ========================================================================== */

@media (min-width: 1600px) {
	/*---*\
        FIXED-WIDTH CARD SIZING
        - Non-active cards: 373px width
        - Featured/expanded cards: 573px width
        - 32px gap between cards
        - Matches Figma design specifications
    \*---*/

	.image-buttons__card {
		min-width: 373px;
		max-width: 373px;
		flex: none;
		transition:
			min-width var(--transition-medium) var(--transition-ease),
			max-width var(--transition-medium) var(--transition-ease);
	}

	.image-buttons__card--featured {
		min-width: 573px;
		flex: none;
	}

	.image-buttons__card:not(.image-buttons__card--featured) {
		min-width: 373px;
		max-width: 373px;
		flex: none;
	}

	/*---*\
        EXPANDED WIDTH STATE (Large Desktop Only)
        When a card is expanded, it grows to featured size
    \*---*/

	.image-buttons__card.is-expanded {
		min-width: 573px;
		flex: 1.53;
	}

	.image-buttons__cards.has-expanded
		.image-buttons__card:not(.is-expanded):not(
			.image-buttons__card--featured
		) {
		min-width: 373px;
		max-width: 373px;
		flex: none;
	}

	.image-buttons__cards.has-expanded
		.image-buttons__card--featured:not(.is-expanded) {
		min-width: 373px;
		max-width: 373px;
		flex: none;
	}

	/*---*\
        SLIDER NAV HIDDEN (unless >4 cards triggers slider via JS class)
    \*---*/

	.image-buttons__nav {
		display: none;
	}

	.image-buttons--has-slider .image-buttons__nav {
		display: flex;
	}
}

/* ==========================================================================
   SLICK SLIDER OVERRIDES
   ========================================================================== */

.image-buttons__cards.slick-initialized {
	display: block;
}

.image-buttons__cards.slick-initialized .slick-list {
	overflow: visible;
}

.image-buttons__cards.slick-initialized .slick-track {
	display: flex;
	gap: 24px;
}

.image-buttons__cards.slick-initialized .image-buttons__card {
	flex: none;
	min-width: 280px;
}

@media (min-width: 768px) {
	.image-buttons__cards.slick-initialized .slick-track {
		gap: 32px;
	}

	.image-buttons__cards.slick-initialized .image-buttons__card {
		min-width: 573px;
	}
}

@media (min-width: 1600px) {
	.image-buttons:not(.image-buttons--has-slider)
		.image-buttons__cards.slick-initialized {
		display: flex;
	}

	.image-buttons:not(.image-buttons--has-slider)
		.image-buttons__cards.slick-initialized
		.slick-list,
	.image-buttons:not(.image-buttons--has-slider)
		.image-buttons__cards.slick-initialized
		.slick-track {
		display: contents;
	}

	.image-buttons:not(.image-buttons--has-slider)
		.image-buttons__cards.slick-initialized
		.image-buttons__card {
		width: auto;
	}

	.image-buttons--has-slider
		.image-buttons__cards.slick-initialized
		.slick-track {
		gap: var(--content-gap);
	}

	/* Override slick inline min-width for slider cards at large desktop */
	.image-buttons--has-slider
		.image-buttons__cards.slick-initialized
		.image-buttons__card {
		min-width: 373px !important;
		flex: none;
		transition: min-width var(--transition-medium) var(--transition-ease);
	}

	.image-buttons--has-slider
		.image-buttons__cards.slick-initialized
		.image-buttons__card.is-expanded {
		min-width: 573px !important;
		max-width: 573px !important;
		flex: 1.53 !important;
	}

	.image-buttons--has-slider .image-buttons__card--featured {
		flex: none;
		min-width: 0;
	}

	.image-buttons__cards.slick-initialized .slick-list {
		overflow: hidden;
	}

	.image-buttons__card:not(.is-expanded) .icon-minus {
		display: none;
	}
}

/* ==========================================================================
   FOCUS STATES (Accessibility)
   ========================================================================== */

.image-buttons__card-link:focus {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

.image-buttons__card-toggle:focus {
	outline: 2px solid var(--color-primary);
	outline-offset: -2px;
}

.image-buttons__card:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

.image-buttons__arrow:focus {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

.solutions-cards__content {
	display: flex;
	flex-direction: column;
	gap: var(--paragraph-spacing);
	margin-top: 30px;
}
.solutions-cards__cta {
	/* display: flex; */
	justify-content: flex-start;
	margin-top: var(--spacing-sm);
	margin-bottom: 20px;
}

@media (min-width: 768px) {
	.solutions-cards__cta {
		flex-shrink: 0;
		margin-top: 0;
	}
}

@media (min-width: 1200px) {
	.solutions-cards__content {
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
		gap: var(--content-gap);
		margin-top: 60px;
	}

	.solutions-cards__content-text {
		flex: 1;
		max-width: 70%;
	}

	.solutions-cards__cta {
		padding-top: 5rem;
	}

	.image-buttons__card-image img {
		object-position: 76%;
	}
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
	.image-buttons__card {
		height: auto;
		min-height: 200px;
		page-break-inside: avoid;
	}

	.image-buttons__card-content {
		position: relative;
		transform: none;
		opacity: 1;
		visibility: visible;
		left: 0;
		right: 0;
		bottom: auto;
		max-height: none;
	}

	.image-buttons__card-toggle,
	.image-buttons__nav {
		display: none;
	}
}