/* =========================================================
   ABOUT BOXES
   One Grid Layout ("About Box"), four styles set by the
   Extra class on each Grid element:

     about-grid about-grid--team     Our Expert Team
     about-grid about-grid--values   Our Core Values
     about-grid about-grid--offer    What We Offer
     about-grid about-grid--facts    Facts (in the founder section)

   Grid Layout classes:
     about-box            Vertical Wrapper
     about-box__icon      Custom Field: about_icon
     about-box__title     Post Title (no link)
     about-box__subtitle  Custom Field: about_subtitle
     about-box__text      Custom Field: about_description

   Team, values and offer match the current website
   (about.php) 1:1: white cards, 40px corners, soft shadow,
   icon tile above the title, lift and sheen on hover.
   The Horizontal Wrapper (icon + title) is stacked by CSS,
   so the Grid Layout itself stays as it is.

   Only the boxes are styled here. Section backgrounds and
   headings are set in WPBakery.
========================================================= */

.about-grid {
	--about-primary: var(--color-primary, #1b4f9b);
	--about-secondary: var(--color-secondary, #2cb8f6);
	--about-text: var(--color-body-text, #4d5156);
	--about-white: var(--color-white, #ffffff);

	--about-card-radius: 40px;
	--about-card-padding: 32px;
	--about-card-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
	--about-card-shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(44, 184, 246, 0.08);
	--about-ease: cubic-bezier(0.4, 0, 0.2, 1);

	--about-icon-light: #5bc9f8;

	--about-title: #1e293b;
	--about-title-dark: #0f172a;
	--about-muted: #64748b;
	--about-light: #94a3b8;
	--about-grey: #4b5563;
}


/* =========================================================
   SHARED – GRID ITEMS
========================================================= */

.about-grid .w-grid-item-h {
	height: 100%;
	background: transparent !important;
	box-shadow: none !important;
	overflow: visible;
}

.about-grid .about-box__text p {
	margin: 0;
}


/* =========================================================
   CARDS – TEAM, VALUES, OFFER
========================================================= */

:is(.about-grid--team, .about-grid--values, .about-grid--offer) .about-box {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	height: 100%;
	padding: var(--about-card-padding) !important;
	box-sizing: border-box;
	overflow: hidden;
	background: var(--about-white) !important;
	border: 0;
	border-radius: var(--about-card-radius);
	box-shadow: var(--about-card-shadow);
	transition: transform 0.4s var(--about-ease), box-shadow 0.4s var(--about-ease);
}

/* Light sheen that passes over the card on hover */
:is(.about-grid--team, .about-grid--values, .about-grid--offer) .about-box::before {
	content: "";
	position: absolute;
	top: 0;
	left: -120%;
	width: 60%;
	height: 100%;
	background: linear-gradient(105deg, transparent 0%, rgba(44, 184, 246, 0.06) 25%, rgba(59, 130, 246, 0.08) 50%, transparent 100%);
	transition: left 0.8s var(--about-ease);
	pointer-events: none;
}

:is(.about-grid--team, .about-grid--values, .about-grid--offer) .about-box:hover {
	transform: translateY(-6px);
	box-shadow: var(--about-card-shadow-hover);
}

:is(.about-grid--team, .about-grid--values, .about-grid--offer) .about-box:hover::before {
	left: 120%;
}

/* Icon and title stacked instead of side by side */
:is(.about-grid--team, .about-grid--values, .about-grid--offer) .about-box > .w-hwrapper {
	--hwrapper-gap: 0 !important;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	width: 100%;
}

/* Icon tile: gradient background, white icon */
:is(.about-grid--team, .about-grid--values, .about-grid--offer) .about-box__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	line-height: 0;
	background: linear-gradient(135deg, var(--about-icon-light), var(--about-secondary));
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

:is(.about-grid--team, .about-grid--values, .about-grid--offer) .about-box__icon img {
	display: block;
	object-fit: contain;
	filter: brightness(0) invert(1);
}

/* Titles in the body font, as on the current site */
:is(.about-grid--team, .about-grid--values, .about-grid--offer) .about-box__title,
:is(.about-grid--team, .about-grid--values, .about-grid--offer) .about-box__title a {
	margin: 0;
	padding: 0;
	font-family: var(--font-family, inherit);
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
}

:is(.about-grid--team, .about-grid--values, .about-grid--offer) .about-box__subtitle,
:is(.about-grid--team, .about-grid--values, .about-grid--offer) .about-box__text {
	margin: 0;
	font-weight: 400;
}


/* =========================================================
   STYLE 1 – OUR EXPERT TEAM
   Centred. Round 80px icon, small subtitle and text.
========================================================= */

.about-grid--team .about-box {
	align-items: center;
	text-align: center;
}

.about-grid--team .about-box > .w-hwrapper {
	align-items: center;
}

.about-grid--team .about-box__icon {
	width: 80px;
	height: 80px;
	margin: 0 0 16px;
	border-radius: 50%;
}

.about-grid--team .about-box__icon img {
	width: 32px;
	height: 32px;
}

.about-grid--team .about-box:hover .about-box__icon {
	transform: scale(1.05);
	box-shadow: 0 8px 20px rgba(44, 184, 246, 0.3);
}

.about-grid--team .about-box__title,
.about-grid--team .about-box__title a {
	margin-bottom: 8px;
	font-size: 18px;
	line-height: 28px;
	color: var(--about-title);
}

.about-grid--team .about-box__subtitle {
	margin-bottom: 12px;
	font-size: 14px;
	line-height: 20px;
	color: var(--about-muted);
}

.about-grid--team .about-box__text {
	font-size: 12px;
	line-height: 1.625;
	color: var(--about-light);
}


/* =========================================================
   STYLE 2 – OUR CORE VALUES
   Centred. Rounded 64px icon tile.
========================================================= */

.about-grid--values .about-box {
	align-items: center;
	text-align: center;
}

.about-grid--values .about-box > .w-hwrapper {
	align-items: center;
}

.about-grid--values .about-box__icon {
	width: 64px;
	height: 64px;
	margin: 0 0 24px;
	border-radius: 24px;
}

.about-grid--values .about-box__icon img {
	width: 24px;
	height: 24px;
}

.about-grid--values .about-box:hover .about-box__icon {
	transform: scale(1.1) rotate(5deg);
	box-shadow: 0 10px 20px rgba(56, 189, 248, 0.4);
}

.about-grid--values .about-box__title,
.about-grid--values .about-box__title a {
	margin-bottom: 12px;
	font-size: 20px;
	line-height: 28px;
	color: var(--about-title) !important;
}

.about-grid--values .about-box__text {
	font-size: 14px;
	line-height: 1.625;
	color: var(--about-muted) !important;
}


/* =========================================================
   STYLE 3 – WHAT WE OFFER
   Left-aligned. Rounded 48px icon tile.
========================================================= */

.about-grid--offer .about-box {
	text-align: left;
}

.about-grid--offer .about-box__icon {
	width: 48px;
	height: 48px;
	margin: 0 0 16px;
	border-radius: 16px;
	background: linear-gradient(135deg, var(--about-secondary), var(--about-icon-light));
}

.about-grid--offer .about-box__icon img {
	width: 20px;
	height: 20px;
}

.about-grid--offer .about-box:hover .about-box__icon {
	transform: scale(1.1);
	box-shadow: 0 8px 16px rgba(14, 165, 233, 0.3);
}

.about-grid--offer .about-box__title,
.about-grid--offer .about-box__title a {
	margin-bottom: 12px;
	font-size: 20px;
	line-height: 28px;
	color: var(--about-title-dark);
}

.about-grid--offer .about-box__text {
	font-size: 16px;
	line-height: 1.625;
	color: var(--about-grey);
}


/* =========================================================
   STYLE 4 – FACTS
   Light tinted boxes with a large number (title) and a
   short label (description). Unchanged.
========================================================= */

.about-grid--facts .about-box {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	height: 100%;
	padding: 16px !important;
	box-sizing: border-box;
	background: rgba(27, 79, 155, 0.04) !important;
	border: 1px solid rgba(27, 79, 155, 0.14);
	border-radius: 6px;
}

.about-grid--facts .about-box__icon {
	margin-bottom: 8px;
	line-height: 0;
}

.about-grid--facts .about-box__icon img {
	display: block;
	width: 40px;
	height: 40px;
	object-fit: contain;
	filter: brightness(0) saturate(100%) invert(25%) sepia(44%) saturate(1864%) hue-rotate(191deg) brightness(95%) contrast(98%);
}

.about-grid--facts .about-box__title,
.about-grid--facts .about-box__title a {
	margin: 0;
	padding: 0;
	font-family: var(--h2-font-family, inherit);
	font-size: clamp(2.25rem, 4vw, 3.25rem);
	font-weight: 600;
	line-height: 1;
	color: var(--about-primary);
	text-decoration: none;
}

.about-grid--facts .about-box__subtitle {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--about-secondary);
}

.about-grid--facts .about-box__text {
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--about-text);
}


/* =========================================================
   SMALL SCREENS
========================================================= */

@media (max-width: 480px) {
	.about-grid {
		--about-card-padding: 24px;
	}
}

@media (max-width: 600px) {
	.about-grid--facts .about-box__title,
	.about-grid--facts .about-box__title a {
		font-size: 2.25rem;
	}
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
	.about-grid .about-box,
	.about-grid .about-box::before,
	.about-grid .about-box__icon {
		transition: none;
	}

	.about-grid .about-box:hover,
	.about-grid .about-box:hover .about-box__icon {
		transform: none;
	}
}