/*
 * Sustainability - Policies.
 *
 * Read from cp-all-designer css/app.css:1813-1885 (.oppacc) and
 * css/sustain-policy.css (.supotiles).
 *
 * Colour, type, padding and the measures arrive from the Style tab and are not
 * repeated here.
 */

/* app.css:1813-1817 — four a row, a hairline between, cut to the leaf */
.custom-sustainability-policies .custom-sustainability-policies__tiles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 2px;                              /* app.css:1814 measures 1px */
	overflow: hidden;
	border: 2px solid #EEF2F7;
	background: #EEF2F7;
}

/* app.css:1821-1832, sustain-policy.css:41-52 */
.custom-sustainability-policies .custom-sustainability-policies__tile {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 8px;
	box-sizing: border-box;
	min-width: 0;
	overflow: hidden;
	isolation: isolate;
	background: var(--custom-sustainability-policies-ground, #F0F9FD);
	color: var(--custom-sustainability-policies-name, #16418C);
	text-decoration: none;
}

/* the picture and the wash, both away until a pointer comes */
.custom-sustainability-policies .custom-sustainability-policies__shot {
	position: absolute;
	inset: 0;
	z-index: -2;
	opacity: 0;
	transition: opacity 500ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.custom-sustainability-policies .custom-sustainability-policies__tile .custom-sustainability-policies__shot img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	border-radius: 0;
	transform: scale(1.02);
	transition: transform 1200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.custom-sustainability-policies .custom-sustainability-policies__tile::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(0deg,
		var(--custom-sustainability-policies-tint, rgba(44, 122, 30, 0.82)) 0%,
		rgba(10, 22, 60, 0.78) 50%,
		rgba(10, 22, 60, 0.46) 80%,
		rgba(10, 22, 60, 0.34) 100%);
	opacity: 0;
	transition: opacity 450ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* sustain-policy.css:80-96 — a pale square the drawing sits in */
.custom-sustainability-policies .custom-sustainability-policies__icon {
	display: grid;
	place-items: center;
	width: var(--custom-sustainability-policies-icon, 56px);
	height: var(--custom-sustainability-policies-icon, 56px);
	border-radius: 16px;
	background: rgba(22, 65, 140, 0.08);
	color: var(--custom-sustainability-policies-name, #16418C);
	transition: background-color 400ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            color 400ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            transform 400ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.custom-sustainability-policies .custom-sustainability-policies__icon svg {
	display: block;
	width: 78%;
	height: 78%;
}

/* app.css:1853 — the name at the foot */
.custom-sustainability-policies .custom-sustainability-policies__tiles .custom-sustainability-policies__tile .custom-sustainability-policies__name {
	margin: auto 0 0;
	font-weight: 600;
	line-height: 1.45;
	color: inherit;
	transition: color 400ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* app.css:1856-1862 — the line unrolls under a pointer */
.custom-sustainability-policies .custom-sustainability-policies__tiles .custom-sustainability-policies__tile .custom-sustainability-policies__note {
	max-height: 0;
	margin: 0;
	overflow: hidden;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.86);
	opacity: 0;
	transition: max-height 450ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            opacity 300ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            margin 450ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* app.css:1873-1882 — the corner mark, a ring that fills */
.custom-sustainability-policies .custom-sustainability-policies__go {
	position: absolute;
	top: 22px;
	right: 22px;
	z-index: 2;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 34px;
	height: 34px;
	border: 2px solid rgba(255, 255, 255, 0.7);   /* app.css:1876 measures 1.5px */
	border-radius: 50%;
	color: #FFFFFF;
	transition: color 350ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            border-color 350ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            background-color 350ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* a plain tile only makes up the last row */
.custom-sustainability-policies .custom-sustainability-policies__filler {
	display: none;
	pointer-events: none;
}

.custom-sustainability-policies .custom-sustainability-policies__filler--four {
	display: block;
}

/* under a pointer, or in the keyboard: the picture, the wash, white words */
.custom-sustainability-policies a.custom-sustainability-policies__tile:hover .custom-sustainability-policies__shot,
.custom-sustainability-policies a.custom-sustainability-policies__tile:focus-visible .custom-sustainability-policies__shot,
.custom-sustainability-policies a.custom-sustainability-policies__tile:hover::after,
.custom-sustainability-policies a.custom-sustainability-policies__tile:focus-visible::after {
	opacity: 1;
}

.custom-sustainability-policies a.custom-sustainability-policies__tile:hover .custom-sustainability-policies__shot img {
	transform: scale(1.09);
}

.custom-sustainability-policies a.custom-sustainability-policies__tile:hover,
.custom-sustainability-policies a.custom-sustainability-policies__tile:focus-visible {
	color: #FFFFFF;
}

.custom-sustainability-policies a.custom-sustainability-policies__tile:hover .custom-sustainability-policies__note,
.custom-sustainability-policies a.custom-sustainability-policies__tile:focus-visible .custom-sustainability-policies__note {
	max-height: 154px;                     /* 11em */
	margin-top: 4px;
	opacity: 1;
}

.custom-sustainability-policies a.custom-sustainability-policies__tile:hover .custom-sustainability-policies__icon,
.custom-sustainability-policies a.custom-sustainability-policies__tile:focus-visible .custom-sustainability-policies__icon {
	background: rgba(255, 255, 255, 0.2);
	color: #FFFFFF;
	transform: translateY(-2px);
}

.custom-sustainability-policies a.custom-sustainability-policies__tile:hover .custom-sustainability-policies__go {
	border-color: #FFFFFF;
	background: #FFFFFF;
	color: #16418C;
	transform: translateX(4px);            /* app.css:1880 measures 3px */
}

.custom-sustainability-policies a.custom-sustainability-policies__tile:focus-visible {
	outline: 2px solid #50A3D5;
	outline-offset: -6px;
}

/* no pointer to hover with: no picture, and the line shows outright */
@media (hover: none) {
	.custom-sustainability-policies .custom-sustainability-policies__shot {
		display: none;
	}
	.custom-sustainability-policies .custom-sustainability-policies__tiles .custom-sustainability-policies__tile .custom-sustainability-policies__note {
		max-height: none;
		margin-top: 4px;
		color: #475569;
		opacity: 1;
	}
}

/* app.css:1883 — two a row */
@media (max-width: 1024px) {
	.custom-sustainability-policies .custom-sustainability-policies__tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.custom-sustainability-policies .custom-sustainability-policies__go {
		top: 16px;
		right: 16px;
	}
	.custom-sustainability-policies .custom-sustainability-policies__filler--four {
		display: none;
	}
	.custom-sustainability-policies .custom-sustainability-policies__filler--two {
		display: block;
	}
}

/* app.css:1885-1898 — a phone: the title alone with its mark */
@media (max-width: 640px) {
	.custom-sustainability-policies .custom-sustainability-policies__tile {
		gap: 4px;
	}
	.custom-sustainability-policies .custom-sustainability-policies__icon {
		border-radius: 12px;
	}
	.custom-sustainability-policies .custom-sustainability-policies__go {
		top: 12px;
		right: 12px;
		width: 28px;
		height: 28px;
	}
	.custom-sustainability-policies .custom-sustainability-policies__tiles .custom-sustainability-policies__tile .custom-sustainability-policies__note {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.custom-sustainability-policies .custom-sustainability-policies__shot,
	.custom-sustainability-policies .custom-sustainability-policies__tile .custom-sustainability-policies__shot img,
	.custom-sustainability-policies .custom-sustainability-policies__tile::after,
	.custom-sustainability-policies .custom-sustainability-policies__icon,
	.custom-sustainability-policies .custom-sustainability-policies__go,
	.custom-sustainability-policies .custom-sustainability-policies__note {
		transition: none;
	}
}