/* =============================================================================
   ECR — Our publications (/publications/)

   Website-suggestions-1_14.04.pdf p.2: "use a 4 column system … no need for
   lines separating the covers. Use white background 'card' with the
   publication and repeat the publication title underneath, all in the same
   typo, to make the titles easy to read."

   The section wrapper, header and card tokens are those of Working Groups,
   Committees and Delegations (css/structure.css: .ecr-st, --st-*), so the
   four index pages read as one family. Only what is specific to a
   publication lives here: the cover frame and the two PDF actions.

   Grid: 4 columns from 1100px, 2 on tablets, 1 on phones.
   ========================================================================== */

.ecr-pub {
	--pub-frame: #EFF6FF;
}

/* --- grid ----------------------------------------------------------------- */

.ecr-pub-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
}

/* Salient re-applies a list marker to `li` inside page content. */
.ecr-pub-grid,
.ecr-pub-item {
	list-style: none !important;
}

.ecr-pub-item {
	margin: 0;
	padding: 0;
	min-width: 0;
	display: flex;
}

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

/* --- card ----------------------------------------------------------------- */

.ecr-pub-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	background: var(--st-white, #FFFFFF);
	border: 1px solid var(--st-border, #E2E8F0);
	border-radius: var(--st-radius-card, 18px);
	box-shadow: var(--st-shadow, 0 2px 10px rgba(15, 23, 42, .04));
	overflow: hidden;
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.ecr-pub-card:hover,
.ecr-pub-card:focus-within {
	transform: translateY(-2px);
	box-shadow: var(--st-shadow-hover, 0 20px 60px rgba(15, 23, 42, .12));
	border-color: transparent;
}

/* The cover frame. Every card has the same frame (a portrait A-series page),
   and the cover sits inside it WHOLE: `contain` never crops a title or
   distorts the proportions, and a landscape or square cover is centred with
   the frame's tint around it, so rows stay aligned whatever the formats. */
.ecr-pub-card__face {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 5 / 6;
	padding: 22px;
	background: var(--pub-frame);
	box-sizing: border-box;
	overflow: hidden;
}

.ecr-pub-card__face .ecr-pub-card__cover {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: 2px;
	box-shadow: 0 10px 30px rgba(15, 23, 42, .16);
}

.ecr-pub-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 8px;
	padding: 20px 20px 22px;
	min-width: 0;
}

.ecr-pub .ecr-pub-card .ecr-pub-card__title {
	margin: 0;
	font-size: 1rem;
	line-height: 1.35;
	font-weight: 700;
	color: var(--st-text, #1E293B);
	overflow-wrap: anywhere;
}

.ecr-pub-card__title a {
	color: inherit;
	text-decoration: none;
}

.ecr-pub-card__title a:hover {
	color: var(--st-primary, #1866A5);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ecr-pub-card__title a:focus-visible,
.ecr-pub-btn:focus-visible {
	outline: 3px solid var(--st-primary-dark, #114C7D);
	outline-offset: 3px;
	border-radius: 4px;
}

.ecr-pub .ecr-pub-card__date,
.ecr-pub .ecr-pub-card__meta {
	margin: 0;
	padding: 0;
	font-size: .8125rem;
	line-height: 1.4;
	color: var(--st-muted, #667085);
}

/* A description is a sentence or two; a long one is shortened to three
   lines so the buttons of a row stay close to one another. The full text is
   the editor's, unchanged, in the page source. */
.ecr-pub .ecr-pub-card__summary {
	margin: 0;
	padding: 0;
	font-size: .875rem;
	line-height: 1.5;
	color: var(--st-muted, #667085);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ecr-pub .ecr-pub-card__meta {
	margin-top: auto;
	padding-top: 6px;
	display: flex;
	gap: 8px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	font-size: .75rem;
	color: var(--st-primary, #1866A5);
}

.ecr-pub-card__size {
	font-weight: 400;
	color: var(--st-muted, #667085);
}

.ecr-pub-card--nodoc .ecr-pub-card__body {
	justify-content: flex-start;
}

/* --- the two actions ------------------------------------------------------ */

.ecr-pub-card__actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.ecr-pub .ecr-pub-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 44px;
	padding: 8px 10px;
	box-sizing: border-box;
	border: 1px solid var(--st-primary, #1866A5);
	border-radius: 999px;
	font-size: .8125rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.ecr-pub .ecr-pub-btn--primary {
	background: var(--st-primary, #1866A5);
	color: #FFFFFF;
}

.ecr-pub .ecr-pub-btn--primary:hover {
	background: var(--st-primary-dark, #114C7D);
	border-color: var(--st-primary-dark, #114C7D);
	color: #FFFFFF;
}

.ecr-pub .ecr-pub-btn--secondary {
	background: #FFFFFF;
	color: var(--st-primary, #1866A5);
}

.ecr-pub .ecr-pub-btn--secondary:hover {
	background: var(--pub-frame);
	color: var(--st-primary-dark, #114C7D);
}

.ecr-pub-btn__icon {
	flex: 0 0 auto;
}

/* --- empty state, pagination, preview ------------------------------------- */

.ecr-pub__empty {
	text-align: center;
	color: var(--st-muted, #667085);
}

.ecr-pub__pagination ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 40px 0 0;
	padding: 0;
}

.ecr-pub__pagination li {
	list-style: none;
	margin: 0;
}

.ecr-pub__pagination a,
.ecr-pub__pagination span {
	display: inline-flex;
	min-width: 44px;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	padding: 0 14px;
	box-sizing: border-box;
	border: 1px solid var(--st-border, #E2E8F0);
	border-radius: 999px;
	color: var(--st-primary, #1866A5);
	text-decoration: none;
}

.ecr-pub__pagination .current {
	background: var(--st-primary, #1866A5);
	border-color: var(--st-primary, #1866A5);
	color: #FFFFFF;
}

.ecr-pub__pagination a:focus-visible {
	outline: 3px solid var(--st-primary-dark, #114C7D);
	outline-offset: 2px;
}

.ecr-pub__preview-note {
	max-width: 720px;
	margin: 0 auto 32px;
	padding: 16px 20px;
	background: #FFF8E1;
	border: 1px solid #F5D77A;
	border-radius: 12px;
}

.ecr-pub__preview-note p,
.ecr-pub__preview-note ul {
	margin: 0 0 6px;
}

.ecr-pub-grid--single {
	grid-template-columns: minmax(0, 300px);
	justify-content: center;
}

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

@media (max-width: 1099px) {
	.ecr-pub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
	.ecr-pub-card__face { aspect-ratio: 1 / 1; padding: 26px; }
	.ecr-pub .ecr-pub-card .ecr-pub-card__title { font-size: 1.0625rem; }
}

@media (max-width: 599px) {
	.ecr-pub-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.ecr-pub-card__face { aspect-ratio: 1 / 1; padding: 22px; }
	.ecr-pub-card__body { padding: 18px 18px 20px; }
}

/* Two buttons side by side need ~250px; below that they stack. */
@media (max-width: 359px) {
	.ecr-pub-card__actions { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
	.ecr-pub-card,
	.ecr-pub .ecr-pub-btn { transition: none; }
	.ecr-pub-card:hover,
	.ecr-pub-card:focus-within { transform: none; }
}