/* Card components. See AUDIT.md §8.
   Only .post-item's shape (image + tag + body + footer link) and the 50px
   icon-circle used by core-feature/why-choose repeat identically enough to
   share a base (.card, .icon-badge, .feature-item below). .contact-card,
   .electricity-dispute-card and .ener-service-data__item are each a genuinely
   different design and are kept as their own components in this same file
   rather than forced into one fake-universal "card". */

/* ---------- shared icon circle ---------- */

.icon-badge {
	position: relative;
	width: 3.125rem;
	/* 50px */
	height: 3.125rem;
	background: var(--accent-color);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}

.icon-badge::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--icon-badge-fill, var(--primary-color));
	border-radius: 50%;
	transform: scale(0);
	transition: all 0.4s ease-in-out;
	z-index: 0;
}

.icon-badge img {
	position: relative;
	width: 100%;
	max-width: 1.5rem;
	/* 24px */
	z-index: 1;
	transition: all 0.4s ease-in-out;
	/* icon is white by default; the badge's resting bg is always yellow, so it
	   needs the dark filter unconditionally. Only a blue fill (the --boxed
	   hover state) removes it again — see below. */
	filter: brightness(0) invert(0);
}

.icon-badge i {
	position: relative;
	color: var(--brand-blue);
	font-size: 1.375rem;
	/* 22px */
	line-height: 1;
	transition: color 0.4s ease-in-out;
	z-index: 1;
}

/* ---------- .feature-item (core-feature-item-royal / why-choose-item-royal) ---------- */

.feature-item {
	width: calc(50% - 0.9375rem);
	/* 15px */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.9375rem;
	/* 15px */
}

.feature-item:hover .icon-badge::before {
	transform: scale(1);
}

.feature-item__content {
	width: calc(100% - 4.0625rem);
	/* 65px */
}

.feature-item__content h3 {
	font-size: 1rem;
	line-height: 1.3em;
	transition: all 0.4s ease-in-out;
}

/* "boxed" modifier — core-feature-item-royal adds a background card around
   the icon+content row; why-choose-item-royal uses the row bare. */
.feature-item--boxed {
	background-color: var(--secondary-color);
	border-radius: var(--card-radius);
	padding: 1.25rem;
	/* 20px */
	transition: all 0.4s ease-in-out;
}

.feature-item--boxed:hover {
	background-color: var(--accent-color);
}

.feature-item--boxed:hover .feature-item__content h3 {
	color: var(--white-color);
}

.feature-item--boxed .icon-badge {
	--icon-badge-fill: var(--primary-color);
}

.feature-item--boxed:hover .icon-badge i {
	color: var(--white-color);
}

.feature-item--boxed:hover .icon-badge img {
	filter: none;
	/* fill is blue on hover here, so the white icon needs no filter */
}

/* bare (non-boxed) variant — why-choose-item-royal: white fill on hover
   instead of the boxed variant's blue fill. Icon stays black either way
   (yellow at rest, white on hover), so .icon-badge img's default filter
   already covers both states — nothing further needed here. */
.feature-item:not(.feature-item--boxed) .icon-badge {
	--icon-badge-fill: var(--white-color);
}

.feature-item:not(.feature-item--boxed):hover .icon-badge i {
	color: #000;
}

@media (max-width: 64rem) {

	/* tablet: 1024px */
	.feature-item__content h3 {
		font-size: 1.25rem;
		/* 20px */
	}
}

@media (max-width: 35rem) {

	/* mobile: 560px */
	.feature-item {
		width: 100%;
	}

	.feature-item__content h3 {
		font-size: 1.125rem;
		/* 18px */
	}
}

/* ---------- .card (post-item: image + tag + body + footer link) ---------- */

.card {
	position: relative;
	border-radius: var(--card-radius);
	min-height: 29.375rem;
	/* 470px */
	height: calc(100% - 1.875rem);
	/* 30px */
	margin-bottom: 1.875rem;
	/* 30px */
	padding: 1.875rem;
	/* 30px */
	overflow: hidden;
}

.card__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.card__media a {
	display: block;
	height: 100%;
	cursor: pointer;
}

.card__media a figure {
	position: relative;
	display: block;
	height: 100%;
}

.card__media a figure::before {
	content: '';
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg, transparent 50%, rgba(0, 59, 122, 0.90) 100%);
	z-index: 1;
}

.card__media a figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all 0.6s ease-in-out;
}

.card:hover .card__media a figure img {
	transform: scale(1.06);
}

.card__body {
	position: relative;
	z-index: 1;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1.875rem;
	/* 30px */
}

.card__tag {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	/* 10px */
}

.card__tag a {
	font-size: 0.875rem;
	/* 14px */
	font-weight: 500;
	line-height: 1.3em;
	color: var(--white-color);
	background-color: var(--divider-color);
	backdrop-filter: blur(0.625rem);
	-webkit-backdrop-filter: blur(0.625rem);
	border-radius: 0.3125rem;
	/* 5px */
	padding: 0.5rem 0.9375rem;
	/* 8px 15px */
	transition: all 0.4s ease-in-out;
}

.card__tag a:hover {
	background-color: var(--accent-color);
	color: var(--white-color);
}

.card__title h2 {
	font-size: 1.375rem;
	/* 22px */
	color: var(--white-color);
}

.card__title h2 a {
	color: inherit;
}

.card__footer {
	border-top: 1px solid var(--dark-divider-color);
	padding-top: 1.25rem;
	/* 20px */
	margin-top: 1.25rem;
	/* 20px */
}

.card__footer .readmore-btn {
	color: var(--white-color);
}

@media (max-width: 64rem) {

	/* tablet: 1024px — old 991px tier */
	.card {
		min-height: 25rem;
		/* 400px */
		padding: 1.25rem;
		/* 20px */
	}

	.card__title h2 {
		font-size: 1.25rem;
		/* 20px */
	}
}

@media (max-width: 35rem) {

	/* mobile: 560px — old 767px tier */
	.card__title h2 {
		font-size: 1.125rem;
		/* 18px */
	}
}

/* ---------- .contact-card (contact.html) ---------- */

.contact-card {
	position: relative;
	min-height: 20.625rem;
	/* 330px */
	padding: 2.125rem;
	/* 34px */
	overflow: hidden;
	border: 1px solid #e4e9e6;
	border-radius: 1.375rem;
	/* 22px */
	background: #f5f7f6;
	transition: transform .3s ease, box-shadow .3s ease;
}

.contact-card:hover {
	transform: translateY(-0.3125rem);
	/* -5px */
	box-shadow: 0 1.25rem 2.8125rem rgba(0, 62, 129, .1);
}

.contact-card--primary {
	border-color: var(--brand-blue);
	background: var(--brand-blue);
	color: #fff;
}

.contact-card__icon {
	display: grid;
	place-items: center;
	width: 3.625rem;
	/* 58px */
	height: 3.625rem;
	margin-bottom: 3.5rem;
	/* 56px */
	border-radius: 50%;
	background: #fff;
	color: var(--brand-blue);
	font-size: 1.25rem;
	/* 20px */
	box-shadow: 0 0.625rem 1.5rem rgba(0, 91, 187, .1);
}

.contact-card--primary .contact-card__icon {
	background: #ffd700;
	color: #003b7a;
}

.contact-card>span {
	display: block;
	margin-bottom: 0.625rem;
	/* 10px */
	color: var(--brand-muted);
	font-size: 0.8125rem;
	/* 13px */
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.contact-card--primary>span {
	color: rgba(255, 255, 255, .72);
}

.contact-card--primary p {
	color: #fff !important;
}

.contact-card--primary h3 {
	color: #fff;
}

.contact-card h3 {
	margin: 0 3.375rem 0.75rem 0;
	/* 54px 12px */
	font-family: "Montserrat Alternates", sans-serif;
	font-size: clamp(1.3125rem, 1.7vw, 1.55rem);
	/* 21px - 28px */
	font-weight: 600;
	line-height: 1.25;
}

.contact-card h3 a {
	color: inherit;
}

.contact-card__phones {
	display: grid;
	gap: .875rem;
	margin: 0 3.375rem .875rem 0;
}

.contact-card__phone small {
	display: block;
	margin-bottom: .25rem;
	color: var(--brand-muted);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.contact-card--primary .contact-card__phone small {
	color: rgba(255, 255, 255, .68);
}

.contact-card__phone h3 {
	margin: 0;
}

.contact-card h3 a:hover {
	color: var(--brand-blue);
}

.contact-card--primary h3 a:hover {
	color: #ffd700;
}

.contact-card__email {
	font-size: clamp(1.0625rem, 1.35vw, 1.4375rem) !important;
	/* 17px - 23px */
	overflow-wrap: anywhere;
}

.contact-card p {
	margin: 0 3.125rem 0 0;
	/* 50px */
	color: var(--brand-muted);
	font-size: 0.875rem;
	/* 14px */
	line-height: 1.55;
}

.contact-card__arrow {
	position: absolute;
	right: 1.75rem;
	/* 28px */
	bottom: 1.75rem;
	display: grid;
	place-items: center;
	width: 2.6875rem;
	/* 43px */
	height: 2.6875rem;
	border-radius: 50%;
	background: #fff;
	color: var(--brand-blue);
	transition: transform .3s ease;
}

.contact-card:hover .contact-card__arrow {
	transform: rotate(-35deg);
}

@media (max-width: 35rem) {

	/* mobile: 560px — old 575px tier */
	.contact-card {
		min-height: 16.5rem;
		padding: 1.625rem;
		/* 26px */
		border-radius: 1.125rem;
		/* 18px */
	}

	.contact-card__icon {
		margin-bottom: 2rem;
	}

	.contact-card__phones {
		margin-right: 2.75rem;
	}

	.contact-card h3 {
		font-size: clamp(1.25rem, 7vw, 1.625rem);
		overflow-wrap: anywhere;
	}

	.contact-card p {
		margin-right: 3.25rem;
	}
}

/* ---------- .electricity-dispute-card (electricity/disputes.html + gas/disputes.html) ---------- */

.electricity-dispute-card {
	display: grid;
	grid-template-columns: 5rem minmax(0, 1fr);
	/* 80px */
	gap: 1.5625rem;
	/* 25px */
	padding: 2.1875rem;
	/* 35px */
	border: 1px solid #e0e6e2;
	border-radius: 1.125rem;
	/* 18px */
	background: #f6f8f7;
}

.electricity-dispute-card>strong {
	display: grid;
	place-items: center;
	width: 3.625rem;
	/* 58px */
	height: 3.625rem;
	border-radius: 50%;
	background: var(--brand-yellow);
	color: var(--brand-blue-dark);
}

.electricity-dispute-card h3 {
	margin: 0 0 0.6875rem;
	/* 11px */
	font-size: 1.4375rem;
	/* 23px */
}

.electricity-dispute-card p {
	max-width: 60.625rem;
	/* 970px */
	margin: 0 0 0.9375rem;
	/* 15px */
	color: var(--brand-muted);
	font-size: 0.9375rem;
	/* 15px */
	line-height: 1.7;
}

.electricity-dispute-card a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	/* 8px */
	margin-right: 1.25rem;
	/* 20px */
	color: var(--brand-blue);
	font-size: 0.8125rem;
	/* 13px */
	font-weight: 700;
}

.electricity-dispute-card__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	/* 8px 20px */
}

@media (max-width: 35rem) {

	/* mobile: 560px */
	.electricity-dispute-card {
		grid-template-columns: 1fr;
		padding: 1.5625rem;
		/* 25px */
	}
}

/* ---------- .ener-service-data__item (index.html stat tiles) ---------- */

.ener-service-data__items {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.625rem;
	/* 10px */
}

.ener-service-data__item {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 11.5rem;
	/* 184px */
	padding: 2.125rem 2.25rem;
	/* 34px 36px */
	overflow: hidden;
	border-radius: 1.25rem;
	/* 20px */
	background: #f1f1f1;
	color: #000;
	text-decoration: none;
	isolation: isolate;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ener-service-data__item:hover {
	color: #000;
	transform: translateY(-0.25rem);
	/* -4px */
	box-shadow: 0 1.125rem 2.125rem rgba(0, 91, 187, 0.10);
}

.ener-service-data__item::after {
	content: "";
	position: absolute;
	z-index: 0;
	top: 2rem;
	/* 32px */
	right: -1.125rem;
	/* -18px */
	width: 10.75rem;
	/* 172px */
	height: 10.75rem;
	background-image: var(--ener-card-icon);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	opacity: 0.12;
	filter: grayscale(1);
	transform: rotate(-12deg);
}

.ener-service-data__item--dark {
	color: var(--white-color);
	background-image: linear-gradient(90deg, rgba(0, 59, 122, 0.82), rgba(0, 91, 187, 0.38)), url('../../images/WfHD9wxLNNRt.jpg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	--ener-card-icon: url('../../energy-assets/energy-bolt.svg');
}

.ener-service-data__item--dark:hover {
	color: var(--white-color);
}

.ener-service-data__item--clients {
	--ener-card-icon: url('../../energy-assets/energy-owner.svg');
}

.ener-service-data__item--solutions {
	--ener-card-icon: url('../../energy-assets/energy-contract.svg');
}

.ener-service-data__item--rating {
	--ener-card-icon: url('../../energy-assets/energy-price.svg');
}

.ener-service-data__item-title {
	position: relative;
	z-index: 1;
	margin-bottom: 1.125rem;
	/* 18px */
}

.ener-service-data__item-title p {
	color: inherit;
	font-family: 'Montserrat', sans-serif;
	font-size: 3.625rem;
	/* 58px */
	font-weight: 400;
	line-height: 0.92;
	margin: 0;
}

.ener-service-data__item-title strong {
	display: inline-block;
	max-width: 6.875rem;
	/* 110px */
	font-size: 1.0625rem;
	/* 17px */
	font-weight: 500;
	line-height: 1.15;
	vertical-align: middle;
}

.ener-service-data__item-dscr {
	position: relative;
	z-index: 1;
	max-width: 16.25rem;
	/* 260px */
	color: inherit;
	font-size: 1rem;
	/* 16px */
	font-weight: 500;
	line-height: 1.25;
}

@media (max-width: 64rem) {

	/* tablet: 1024px — merges the old 1199px + 767px tiers */
	.ener-service-data__items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ener-service-data__item {
		min-height: 10.625rem;
		/* 170px */
		padding: 1.75rem;
		/* 28px */
	}

	.ener-service-data__item-title p {
		font-size: 3.125rem;
		/* 50px */
	}
}

@media (max-width: 35rem) {

	/* mobile: 560px */
	.ener-service-data__items {
		grid-template-columns: 1fr;
	}

	.ener-service-data__item {
		min-height: 10rem;
		/* 160px */
		border-radius: 1.125rem;
		/* 18px */
	}
}