/** Customers Choice award badges (installer review page, company-aside) **/
/*
 * The badges and the Trust Badge / NETCC row below share one 3-column grid (the columns are fluid: 110px in the 330px
 * content area of the aside). Badge 1 lines up with the Trust Badge, badges 2 and 3 with the NETCC block.
 * The carousel arrows hang in the aside's padding so they take no room from the columns.
 */
.installer-award-badges {
	position: relative;
	margin: 0 0 15px;
}
.installer-award-badges .installer-award-list,
.installer-badge-row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 0;
	align-items: center;
}
.installer-award-badges .installer-award-list {
	row-gap: 0;
}
/*
 * Each badge fills its column. The PNGs keep a transparent margin around the medal (the medal fills 83.4% of the
 * canvas, 34px of 410px on each side; the manufacturer PNGs fill 100%), so the image is scaled up and the margin is
 * cropped out to match the manufacturer badge size. The scale is 118.7% (the medal then fills 99.0% of the box) and not
 * the exact 1 / 0.834 = 119.9% on purpose: that leaves a little transparent margin on each side, so rounding can never
 * clip the medal rim. If the PNGs are ever
 * cropped to the medal, drop the width/top/left overrides on the img below.
 */
.installer-award-badges .installer-award-item {
	display: block;
	position: relative;
	overflow: hidden;
	width: 92%;
	justify-self: center;
	aspect-ratio: 1 / 1;
}
.installer-award-badges .installer-award-item img {
	display: block;
	position: absolute;
	top: -9.2%;
	left: -9.2%;
	width: 118.7%;
	max-width: none;
	height: auto;
}
/*
 * National badge: the medal circle is 365px of the 410px canvas (the state medals are 342px), and it has a star
 * spike above the circle, so it cannot use the 118.7% crop above. 111.2% makes its circle 99% of the box, the same as
 * the state medals (342px circle x 118.7% / 410 = 99.0%, 365px x 111.2% / 410 = 99.0%), and top/left centre the
 * circle in the box (circle centre at 202,208.5 of 410, the state medals' at 204.5,204.5). The
 * item is not clipped so the star spike (about 5% above the box) is not cut off; the PNG has no other margin to hide.
 */
.installer-award-badges .installer-award-item.is-national {
	overflow: visible;
}
.installer-award-badges .installer-award-item.is-national img {
	top: -6.55%;
	left: -4.8%;
	width: 111.2%;
}
.installer-award-badges .installer-award-item[hidden] {
	display: none;
}
/*
 * Before installer-awards.js turns the list into a carousel (it adds is-carousel), show only the newest three badges,
 * the same ones the script opens on, so the page does not load with every badge and then collapse. Three is the
 * data-visible value. The partial has a <noscript> rule that shows them all when JavaScript is off.
 */
.installer-award-badges.with-controls:not(.is-carousel) .installer-award-item:nth-last-child(n+4) {
	display: none;
}
.installer-award-badges .installer-award-prev,
.installer-award-badges .installer-award-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 22px;
	height: 40px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #2b3a67;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}
.installer-award-badges .installer-award-prev {
	left: -23px;
}
.installer-award-badges .installer-award-next {
	right: -23px;
}
/*
 * Below 741px the aside has 20px of padding on the left and none on the right (installer-reviews.css), so there is no
 * room to hang the arrows outside the row. With more than three badges the row is inset 20px on both sides and the
 * arrows sit in that space, inside the aside. The Trust Badge row right below gets the same inset so its columns stay
 * lined up with the badges.
 */
@media (max-width: 740px) {
	.installer-award-badges.with-controls,
	.installer-award-badges.with-controls + .installer-badge-row {
		padding: 0 20px;
		margin-left: -20px;
	}
	/*
	 * With three badges or fewer there are no arrows, but the aside's uneven padding would still leave the badges
	 * off-centre (20px of space on the left, none on the right). The rows are pulled 10px to the left and given 10px
	 * on the right, so the space is the same on both sides. The Trust Badge row follows so its columns stay lined up.
	 */
	.installer-award-badges:not(.with-controls),
	.installer-award-badges:not(.with-controls) + .installer-badge-row {
		margin-left: -10px;
		margin-right: 10px;
	}
	.installer-award-badges .installer-award-prev,
	.installer-award-badges .installer-award-next {
		width: 20px;
	}
	.installer-award-badges .installer-award-prev {
		left: 0;
	}
	.installer-award-badges .installer-award-next {
		right: 0;
	}
}
.installer-award-badges .installer-award-prev[hidden],
.installer-award-badges .installer-award-next[hidden] {
	display: none;
}
.installer-award-badges .installer-award-prev:disabled,
.installer-award-badges .installer-award-next:disabled {
	cursor: default;
	opacity: 0.2;
}
.installer-award-badges .installer-award-prev:not(:disabled):hover,
.installer-award-badges .installer-award-next:not(:disabled):hover {
	opacity: 0.7;
}

/* Trust Badge (column 1) and NETCC (columns 2-3). Without a Trust Badge the NETCC block moves to column 1 */
.installer-badge-row {
	margin: 0 0 15px;
}
.installer-badge-row > a,
.installer-badge-row > img {
	display: block;
	min-width: 0;
}
/* Trust Badge centred in column 1 */
.installer-badge-row > a:not(.netcc-link),
.installer-badge-row > img {
	justify-self: center;
}
.installer-badge-row img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 !important;
}
.installer-badge-row .netcc-link {
	grid-column: span 2;
}
/* net-approved-seller.jpg has about 10% blank space on each side, so at full width its content is roughly centred in columns 2-3; the small shift covers its slightly wider right-hand blank space */
.installer-badge-row .netcc-link img {
	width: 100%;
	transform: translateX(3.5%);
	mix-blend-mode: darken;
}