/* =============================================================================
   ECR — Logos & Branding, per-language packs

   Two surfaces:
     .ecr-lp--index   the language selector on /logos-branding/
     .ecr-lp--pack    one language, at /logos-branding/<language>/

   Same tokens, card radius, border, shadow and hover lift as the "Who we are"
   tiles and the brochure download band, so the third download surface on this
   site reads as the same system rather than a new one. Nothing global is
   introduced: every rule is under `.ecr-lp`.
   ========================================================================== */

.ecr-lp {
	--lp-primary: var(--ecr-primary, #1866A5);
	--lp-primary-dark: var(--ecr-primary-dark, #114C7D);
	--lp-text: var(--ecr-text, #1E293B);
	--lp-border: var(--ecr-border, #E2E8F0);
	--lp-white: var(--ecr-white, #FFFFFF);
	--lp-muted: #667085;
	--lp-tint: #EDF4FC;

	box-sizing: border-box;
	max-width: 1200px;
	margin: 0 auto;
	padding: 56px 25px;
	color: var(--lp-text);
}

/* --- header --------------------------------------------------------------- */

.ecr-lp__header {
	text-align: center;
	margin-bottom: 24px;
}

.ecr-lp__eyebrow {
	display: block;
	margin-bottom: 6px;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--lp-primary);
}

.ecr-lp .ecr-lp__title {
	margin: 0 0 7px;
	line-height: 1.15;
}

.ecr-lp__subtitle,
.ecr-lp__where,
.ecr-lp__lede {
	margin: 0 auto 6px;
	max-width: 60ch;
	font-size: .9375rem;
	line-height: 1.5;
	color: var(--lp-muted);
}

.ecr-lp__where {
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--lp-primary);
}

/* A fact about the pack, not decoration — so it is legible, not a whisper. */
.ecr-lp__note {
	margin: 10px auto 0;
	max-width: 60ch;
	padding: 10px 14px;
	background: var(--lp-tint);
	border-radius: 10px;
	font-size: .875rem;
	line-height: 1.5;
	color: var(--lp-text);
}

.ecr-lp__empty {
	margin: 0;
	text-align: center;
	color: var(--lp-muted);
}

/* The "Back to Logos & Branding" link is the shared .ecr-back component
   (css/section-spacing.css). */

/* --- flags ---------------------------------------------------------------- */

/* Several national flags have a white or near-white field, so every flag gets
   a hairline border or it dissolves into the card. */
.ecr-lp-flag {
	display: block;
	width: 34px;
	height: 23px;
	object-fit: cover;
	border: 1px solid var(--lp-border);
	border-radius: 3px;
	background: var(--lp-white);
}

.ecr-lp-flag--lg { width: 46px; height: 31px; }

.ecr-lp-langcard__flags,
.ecr-lp__headerflags {
	display: flex;
	gap: 6px;
	flex: 0 0 auto;
}

.ecr-lp__headerflags {
	justify-content: center;
	margin-bottom: 10px;
}

/* --- the language grid ---------------------------------------------------- */

.ecr-lp-langgrid {
	list-style: none !important;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
}

.ecr-lp-langitem {
	list-style: none !important;
	margin: 0;
	padding: 0;
}

.ecr-lp-langitem::before,
.ecr-lp-langitem::marker { content: none; }

.ecr-lp-langcard {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 100%;
	min-height: 72px;
	box-sizing: border-box;
	padding: 13px 15px;
	background: var(--lp-white);
	border: 1px solid var(--lp-border);
	border-radius: 15px;
	box-shadow: 0 2px 10px rgba(15, 23, 42, .04);
	text-decoration: none;
	color: var(--lp-text);
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background-color .25s ease, color .25s ease;
}

.ecr-lp-langcard:hover,
.ecr-lp-langcard:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--ecr-shadow-hover, 0 20px 60px rgba(15, 23, 42, .12));
	border-color: transparent;
	background: var(--lp-primary);
	color: var(--lp-white);
}

.ecr-lp-langcard:focus-visible {
	outline: 3px solid var(--lp-primary-dark);
	outline-offset: 3px;
}

.ecr-lp-langcard__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ecr-lp-langcard__name {
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.ecr-lp-langcard__en,
.ecr-lp-langcard__where {
	font-size: .75rem;
	line-height: 1.35;
	color: var(--lp-muted);
	transition: color .25s ease;
}

.ecr-lp-langcard__where {
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.ecr-lp-langcard:hover .ecr-lp-langcard__en,
.ecr-lp-langcard:hover .ecr-lp-langcard__where,
.ecr-lp-langcard:focus-visible .ecr-lp-langcard__en,
.ecr-lp-langcard:focus-visible .ecr-lp-langcard__where {
	color: rgba(255, 255, 255, .85);
}

/* --- "Download all logos" ------------------------------------------------- */

.ecr-lp__zip {
	margin: 0 0 22px;
	text-align: center;
}

.ecr-lp-zipbtn {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	padding: .95rem 1.9rem;
	background: var(--lp-primary);
	border-radius: 6px;
	color: #fff !important;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: .02em;
	text-decoration: none;
	transition: background .2s ease;
}

.ecr-lp-zipbtn:hover,
.ecr-lp-zipbtn:focus-visible { background: var(--lp-primary-dark); }

.ecr-lp-zipbtn:focus-visible {
	outline: 3px solid var(--lp-primary-dark);
	outline-offset: 3px;
}

.ecr-lp-zipbtn__size {
	font-size: .8125rem;
	font-weight: 600;
	opacity: .85;
}

/* --- the variant grid ----------------------------------------------------- */

.ecr-lp-grid {
	list-style: none !important;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .9rem;
}

.ecr-lp-item {
	list-style: none !important;
	margin: 0;
	padding: 0;
}

.ecr-lp-item::before,
.ecr-lp-item::marker { content: none; }

.ecr-lp-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	box-sizing: border-box;
	padding: 1.1rem;
	background: var(--lp-white);
	border: 1px solid var(--lp-border);
	border-radius: 15px;
}

/* A neutral tile behind the artwork. */
.ecr-lp-card__preview {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 150px;
	margin-bottom: .8rem;
	padding: 1rem;
	background: var(--lp-tint);
	border-radius: 10px;
}

/* The negative artwork is white. On the light tile it is invisible, so its
   preview sits on brand blue instead. THE FILE IS NOT ALTERED — only the tile
   behind it changes. */
.ecr-lp-card__preview--dark { background: var(--lp-primary-dark); }

.ecr-lp-card__img {
	display: block;
	max-width: 100%;
	max-height: 130px;
	width: auto;
	height: auto;
}

.ecr-lp-card__name {
	margin: 0 0 .2rem;
	font-size: 1.0625rem;
	line-height: 1.25;
	color: var(--lp-text);
}

.ecr-lp-card__note {
	margin: 0 0 .75rem;
	font-size: .875rem;
	line-height: 1.45;
	color: var(--lp-muted);
}

/* --- format buttons ------------------------------------------------------- */

.ecr-lp-formats {
	list-style: none !important;
	margin: auto 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.ecr-lp-formats li {
	list-style: none !important;
	margin: 0;
	padding: 0;
}

.ecr-lp-formats li::before,
.ecr-lp-formats li::marker { content: none; }

.ecr-lp-fmt {
	display: inline-flex;
	align-items: baseline;
	gap: .45rem;
	padding: .55rem .9rem;
	background: var(--lp-white);
	border: 1px solid var(--lp-primary);
	border-radius: 4px;
	color: var(--lp-primary);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-decoration: none;
	transition: background .2s ease, color .2s ease;
}

.ecr-lp-fmt:hover,
.ecr-lp-fmt:focus-visible {
	background: var(--lp-primary);
	color: #fff;
}

.ecr-lp-fmt:focus-visible {
	outline: 3px solid var(--lp-primary-dark);
	outline-offset: 3px;
}

.ecr-lp-fmt__ext { text-transform: uppercase; }

.ecr-lp-fmt__size {
	font-size: .75rem;
	font-weight: 600;
	opacity: .75;
}

/* --- responsive ----------------------------------------------------------- */

@media (max-width: 1200px) {
	.ecr-lp-langgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1000px) {
	.ecr-lp { padding: 40px 22px; }
	.ecr-lp-langgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 690px) {
	.ecr-lp { padding: 30px 18px; }
	.ecr-lp-langgrid,
	.ecr-lp-grid { grid-template-columns: minmax(0, 1fr); }
	.ecr-lp-card { padding: .95rem; }
	.ecr-lp-card__preview { min-height: 128px; }
	.ecr-lp-card__img { max-height: 108px; }
	.ecr-lp-zipbtn {
		width: 100%;
		justify-content: center;
		flex-wrap: wrap;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ecr-lp-langcard,
	.ecr-lp-fmt,
	.ecr-lp-zipbtn { transition: none; }
	.ecr-lp-langcard:hover { transform: none; }
}