/* ELT Learn — interaction states only.
   Everything else (color, type, spacing) lives in theme.json.
   Every value below references a theme.json preset/custom var — no literals. */

.wp-block-button__link,
.is-style-card,
.is-style-feature-card,
.is-style-logo-tile,
.is-style-accreditation-tile {
	transition:
		transform var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease-standard),
		box-shadow var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease-standard),
		border-color var(--wp--custom--motion--duration-base) var(--wp--custom--motion--ease-standard);
}

/* Cards (services) */
.is-style-card {
	background: var(--wp--preset--color--gray-50);
	border: 1px solid var(--wp--preset--color--gray-300);
	border-radius: var(--wp--custom--radius--xl);
	padding: var(--wp--preset--spacing--space-10);
}
.is-style-card:hover {
	box-shadow: var(--wp--custom--shadow--card-hover);
	border-color: var(--wp--preset--color--cyan-400);
	transform: translateY(-5px);
}

/* Feature cards (e.g. "Why ELT" 2x2 grid) */
.is-style-feature-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--gray-300);
	border-radius: var(--wp--custom--radius--xl);
	padding: var(--wp--preset--spacing--space-9);
}
.is-style-feature-card:hover {
	box-shadow: var(--wp--custom--shadow--card-hover-sm);
	transform: translateY(-5px);
}

/* Media zoom (e.g. "Who we serve" segmented row) — image scales on hover, card itself stays put */
.elt-media-zoom .wp-block-image img {
	transition: transform var(--wp--custom--motion--duration-slow) var(--wp--custom--motion--ease-standard);
}
.elt-media-zoom:hover .wp-block-image img {
	transform: scale(1.08);
}

/* Client logo tiles — white cards holding one logo. object-fit:contain keeps wide marks
   (e.g. American Express) from being cropped; the tile fills its carousel slot so all 3 match. */
.is-style-logo-tile {
	width: 100%;
	min-height: 208px;
	box-sizing: border-box;
	border-radius: var(--wp--custom--radius--lg);
	padding: var(--wp--preset--spacing--space-6);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--gray-200);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.is-style-logo-tile .wp-block-post-featured-image,
.is-style-logo-tile img {
	margin: 0;
	/* `min()` with 100%: the absolute cap is the design ceiling, but a flex item with a fixed
	   height won't shrink below its aspect-ratio width on its own (min-width: auto resolves to
	   the replaced element's content size), so wide marks would spill out of the tile on the
	   narrower slots. min-width: 0 lets it shrink; object-fit: contain letterboxes what's left. */
	max-width: min(360px, 100%);
	min-width: 0;
	/* A fixed height (rather than max-height) keeps the tile from collapsing while the lazy image
	   is still loading, and gives every logo the same optical size. `object-fit` needs the
	   !important: the featured-image block always emits `object-fit: cover` inline, which would
	   otherwise crop wide marks (e.g. American Express) to the 360px box. */
	height: 140px;
	width: auto;
	object-fit: contain !important;
}
.is-style-logo-tile:hover {
	box-shadow: var(--wp--custom--shadow--tile-hover);
	border-color: var(--wp--preset--color--gray-300);
	transform: translateY(-2px);
}

/* Clients carousel arrows */
.elt-carousel-arrow {
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.elt-carousel-arrow:not(:disabled):hover {
	box-shadow: var(--wp--custom--shadow--tile-hover);
	border-color: var(--wp--preset--color--gray-300);
	transform: translateY(-2px);
}
/* The arrows only show while the carousel is hovered (or has keyboard focus inside it), so the
   logo strip reads as an uninterrupted band at rest. Scoped to pointers that can hover: on touch
   there is no hover state, so they stay visible there. */
@media (hover: hover) {
	.elt-carousel-arrow {
		opacity: 0;
		transition:
			opacity var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease-standard),
			box-shadow 0.2s ease,
			transform 0.2s ease,
			border-color 0.2s ease;
	}
	.elt-carousel:hover .elt-carousel-arrow,
	.elt-carousel:focus-within .elt-carousel-arrow {
		opacity: 1;
	}
	/* Keeps the dimmed end-of-track state readable once revealed (this selector outranks the
	   two above, which is what makes disabled win over plain visible). */
	.elt-carousel:hover .elt-carousel-arrow:disabled,
	.elt-carousel:focus-within .elt-carousel-arrow:disabled {
		opacity: 0.4;
	}
}

/* Accreditation tiles (on dark background) — just the seal/logo, sized to fit (like the design). */
.is-style-accreditation-tile {
	border-radius: var(--wp--custom--radius--lg);
	padding: var(--wp--preset--spacing--space-4);
	display: flex;
	align-items: center;
	justify-content: center;
}
.is-style-accreditation-tile .wp-block-post-featured-image {
	margin: 0;
}
.is-style-accreditation-tile img {
	width: auto;
	height: auto;
	max-height: 54px;
	max-width: 150px;
	object-fit: contain;
}
.is-style-accreditation-tile:hover {
	transform: translateY(-2px);
}

/* CTA band — full-bleed navy strip (padding/width come from the section wrapper, like the
   other full-width sections), not a rounded card. */
.is-style-cta-dark {
	background: var(--wp--preset--color--navy-700);
}
.is-style-cta-dark .wp-block-button__link {
	white-space: nowrap;
}
.is-style-cta-dark .wp-block-button__link:hover {
	box-shadow: var(--wp--custom--shadow--cta-hover-lg);
	transform: translateY(-2px);
}
.is-style-cta-dark .forminator-input {
	transition: border-color 0.2s ease, background 0.2s ease;
}
.is-style-cta-dark .forminator-input:focus {
	border-color: var(--wp--preset--color--cyan-400);
	background: rgba(255, 255, 255, 0.14);
}
.is-style-cta-dark .forminator-button-submit {
	transition: transform 0.2s ease;
}
.is-style-cta-dark .forminator-button-submit:hover {
	transform: translateY(-2px);
}

/* Testimonial / quote */
.is-style-quote {
	border-left: 3px solid var(--wp--preset--color--cyan-400);
	padding-left: var(--wp--preset--spacing--space-8);
}
/* Round initials avatar next to the attribution line. */
.elt-avatar {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Header navigation — medium (500) weight with a teal hover, matching the design. */
header .wp-block-navigation .wp-block-navigation-item__content {
	font-weight: 500;
	transition: color 0.2s ease;
}
header .wp-block-navigation .wp-block-navigation-item__content:hover,
header .wp-block-navigation .wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--cyan-600);
}

/* Buttons */
.wp-block-button__link:hover {
	box-shadow: var(--wp--custom--shadow--cta-hover);
	transform: translateY(-2px);
}

/* Ghost / arrow links */
.is-style-ghost .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--cyan-600);
	padding-left: 0;
}
.is-style-ghost .wp-block-button__link:hover {
	box-shadow: none;
	transform: none;
	gap: var(--wp--preset--spacing--space-2);
}

/* ============================================================================
   Language Training (inner-page) hovers
   ============================================================================ */

/* Feature/media image zoom on hover. */
.elt-media-frame img {
	transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.elt-media-frame:hover img {
	transform: scale(1.06);
}

/* Delivery / icon cards — lift + cyan border on hover. */
.is-style-icon-card {
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.is-style-icon-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--wp--custom--shadow--tile-hover);
	border-color: var(--wp--preset--color--cyan-400);
}

/* Language pills — cyan tint on hover. */
.is-style-pill {
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.is-style-pill:hover {
	background: rgba(53, 193, 222, 0.16);
	border-color: var(--wp--preset--color--cyan-400);
	color: var(--wp--preset--color--white);
}

/* Industries — cell tint on hover. */
.elt-seg-cell {
	transition: background 0.25s ease;
}
.elt-seg-cell:hover {
	background: var(--wp--preset--color--gray-50);
}

/* Outline button on dark (hero secondary action). */
.is-style-outline-light .wp-block-button__link {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.28);
	color: var(--wp--preset--color--white);
	transition: background 0.2s ease;
}
.is-style-outline-light .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.16);
	box-shadow: none;
	transform: none;
}

/* ============================================================================
   Languages page — finder interactions
   ============================================================================ */
.is-style-language-card {
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.is-style-language-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--wp--custom--shadow--card-hover-sm);
	border-color: var(--wp--preset--color--cyan-400);
}
.elt-finder-input {
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.elt-finder-input:focus {
	border-color: var(--wp--preset--color--cyan-400);
	box-shadow: 0 0 0 3px rgba(53, 193, 222, 0.16);
}
/* Hidden by the finder search filter. */
.elt-lang-finder .wp-block-post.is-hidden { display: none; }

/* ============================================================================
   Our Work / Clients page — client logo hover
   ============================================================================ */
.elt-client-logo {
	transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.elt-client-logo:hover {
	box-shadow: var(--wp--custom--shadow--tile-hover);
	border-color: var(--wp--preset--color--gray-300);
	transform: translateY(-3px);
}

/* ============================================================================
   Careers page — role row hover
   ============================================================================ */
.elt-role-row {
	transition: border-color var(--wp--custom--motion--duration-base) var(--wp--custom--motion--ease-standard), transform var(--wp--custom--motion--duration-base) var(--wp--custom--motion--ease-standard);
}
.elt-role-row:hover {
	border-color: var(--wp--preset--color--cyan-400);
	transform: translateX(4px);
}

/* ============================================================================
   Careers page — apply form (Forminator) field states
   ============================================================================ */
.elt-apply-card .forminator-input,
.elt-apply-card .forminator-textarea {
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.elt-apply-card .forminator-input:focus,
.elt-apply-card .forminator-textarea:focus {
	border-color: var(--wp--preset--color--cyan-400);
	box-shadow: 0 0 0 3px rgba(53, 193, 222, 0.16);
}
.elt-apply-card .forminator-button-submit {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.elt-apply-card .forminator-button-submit:hover {
	transform: translateY(-2px);
	box-shadow: var(--wp--custom--shadow--cta-hover);
}

/* ============================================================================
   Blog / Insights page
   ============================================================================ */
.elt-blog-cat-pill {
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.elt-blog-cat-pill:not(.is-active):hover {
	border-color: var(--wp--preset--color--cyan-400);
	color: var(--wp--preset--color--cyan-600);
}
.is-style-blog-card {
	transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.is-style-blog-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--wp--custom--shadow--card-hover-sm);
	border-color: var(--wp--preset--color--gray-400);
}
.is-style-blog-card .wp-block-post-featured-image img {
	transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.is-style-blog-card:hover .wp-block-post-featured-image img {
	transform: scale(1.06);
}
.is-style-featured-post-card {
	transition: box-shadow 0.3s ease;
}
.is-style-featured-post-card:hover {
	box-shadow: var(--wp--custom--shadow--card-hover);
}

/* ============================================================================
   Single blog post — sidebar interactions
   ============================================================================ */
.elt-toc-list a {
	transition: color 0.2s ease;
}
.elt-toc-list a:hover,
.elt-toc-list a.is-active {
	color: var(--wp--preset--color--cyan-600);
}
.is-style-outline-share .wp-block-button__link {
	transition: border-color 0.2s ease, color 0.2s ease;
}
.is-style-outline-share .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--cyan-400);
	color: var(--wp--preset--color--cyan-600);
	box-shadow: none;
	transform: none;
}