/*
 * isarch V2 data pages (phase 4b-1): the 47 winners pages (theme builder
 * template "ISARCH V2 Winners Page" and its loop items), /winners/,
 * /jury-list/ and /ranking/. Dark stage (concept 1). Source of the markup:
 * wp/elementor/isarch-v2/pages-data and inc/winners.php in the repository.
 * Winner images are never cropped or enlarged (owner decision B4,
 * 2026-10-04): they sit centred in a 4:3 frame.
 */

/* ---------- Shared ---------- */

.e-con.isd-winners,
.e-con.isd-winners-index,
.e-con.isd-jury,
.e-con.isd-ranking {
	--gap: 0px;
	background: var(--isarch-color-stage-bg);
	color: var(--isarch-color-stage-text);
	padding-bottom: clamp(4rem, 8vw, 7rem);
}

.isd-winners .elementor-heading-title,
.isd-winners-index h2,
.isd-winners-index h3,
.isd-jury .elementor-heading-title,
.isd-ranking .elementor-heading-title {
	color: var(--isarch-color-stage-text);
}

.e-con.isd-winners__head,
.e-con.isd-winners-index__hero,
.e-con.isd-jury__head,
.e-con.isd-ranking__head {
	--gap: 1rem;
	padding: clamp(3rem, 7vw, 6rem) var(--isarch-gutter) clamp(2rem, 4vw, 3.5rem);
}

.e-con.isd-winners__zones,
.e-con.isd-winners-index__awards,
.e-con.isd-winners-index__years,
.e-con.isd-jury__grid,
.e-con.isd-ranking__top,
.e-con.isd-ranking__more {
	--gap: clamp(3rem, 6vw, 5rem);
	padding-inline: var(--isarch-gutter);
}

/* Page titles: letter case of the H1 texts differs between pages (as on V1);
   they look the same through text-transform. The size is capped at a share
   of the title's own width (container unit, as for the display headings in
   pages.css): "ARCHITECTURE" is 10.16em wide at 125% width, so 9% leaves
   it 8.5% spare; on phones (100% width) 11% does the same. The widget gets
   a definite width so that a wrapping column measures its height at its
   real width. */
.elementor-widget.isd-winners__title,
.elementor-widget.isd-winners-index__title,
.elementor-widget.isd-jury__title,
.elementor-widget.isd-ranking__title {
	container-type: inline-size;
	width: 100%;
}

.isd-winners__title .elementor-heading-title,
.isd-winners-index__title .elementor-heading-title,
.isd-jury__title .elementor-heading-title,
.isd-ranking__title .elementor-heading-title {
	font-family: var(--isarch-font-display);
	font-size: clamp(2.5rem, 1.6rem + 4.2vw, 5.5rem);
	font-size: min(clamp(2.5rem, 1.6rem + 4.2vw, 5.5rem), 9cqi);
	font-stretch: 125%;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 0.95;
	overflow-wrap: anywhere;
	text-transform: uppercase;
}

.isd-winners-index__title .elementor-heading-title {
	text-transform: none;
}

/* Phones: long single words ("ARCHITECTURE") stay on one line. */
@media (max-width: 767px) {
	.isd-winners__title .elementor-heading-title,
	.isd-winners-index__title .elementor-heading-title,
	.isd-jury__title .elementor-heading-title,
	.isd-ranking__title .elementor-heading-title {
		font-size: clamp(1.75rem, 8vw, 2.25rem);
		font-size: min(clamp(1.75rem, 8vw, 2.25rem), 11cqi);
		font-stretch: 100%;
		overflow-wrap: break-word;
	}
}

/* ---------- Winners pages ---------- */

.isd-winners__division .elementor-heading-title {
	color: var(--isarch-yellow);
	font-family: var(--isarch-font-body);
	font-size: 0.9375rem;
	font-stretch: 100%;
	font-weight: 600;
	letter-spacing: 0.18em;
	line-height: 1.3;
	text-transform: uppercase;
}

.isd-winners__group-title .elementor-heading-title {
	border-top: 1px solid var(--isarch-line-dark);
	font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
	padding-top: 1.5rem;
}

.e-con.isd-winners__group {
	--gap: 2rem;
}

.elementor-widget-loop-grid.isd-winners__grid .elementor-loop-container.elementor-grid,
.elementor-widget-loop-grid.isd-jury__loop .elementor-loop-container.elementor-grid {
	--isd-col-gap: clamp(1rem, 2vw, 1.75rem);
	column-gap: var(--isd-col-gap);
	row-gap: clamp(1.5rem, 3vw, 2.5rem);
}

/* The column count of each breakpoint (Elementor's --grid-columns) stays,
   but a column is never narrower than the longest word of its card needs:
   13rem for a winner card (the longest title word, "Neighborhood's", is
   9.6rem plus 8% plus the 2.5rem side padding) and 8.4rem for a juror card
   (the longest role word, "UNStudioAteliers", is 7.6rem plus 8%). Below
   that the grid shows one column fewer, instead of breaking the word in the
   middle (phones up to about 440px wide, or a larger default font size). */
.elementor-widget-loop-grid.isd-winners__grid .elementor-loop-container.elementor-grid {
	--isd-col-min: 13rem;
}

.elementor-widget-loop-grid.isd-jury__loop .elementor-loop-container.elementor-grid {
	--isd-col-min: 8.4rem;
}

.elementor-widget-loop-grid:is(.isd-winners__grid, .isd-jury__loop) .elementor-loop-container.elementor-grid {
	grid-template-columns: repeat(auto-fill, minmax(max(min(100%, var(--isd-col-min)), calc((100% - (var(--grid-columns, 1) - 1) * var(--isd-col-gap)) / var(--grid-columns, 1) - 1px)), 1fr));
}

/* The loop widget is an item of a column container that wraps on phones,
   where Chrome measures an item's height at its max-content width; there
   the grid above shows more columns than at the real width and the zone
   came out shorter than its cards (the footer rode up over them at 440px).
   A definite width (the width the column gives it anyway) makes it measure
   at its real width, as for the category blocks in pages.css. */
.e-con .elementor-widget-loop-grid:is(.isd-winners__grid, .isd-jury__loop) {
	width: 100%;
}

/* Space between the award zones and between the ESG groups. */
.e-con.isd-winners__zone + .e-con.isd-winners__zone {
	margin-top: clamp(2rem, 4vw, 3.5rem);
}

.e-con.isd-winner {
	--gap: 0px;
	height: 100%;
	/* Motion v2: a pedestal card (.isd-pedestal) keeps room for its plinth. */
	padding: 0 0 var(--isd-plinth, 0px);
}

/* Motion v2 plinths (model.css: .isd-pedestal::before, the second and third
   Ranking cards' ::before) sit at the bottom of the card. On Elementor
   containers (.e-con-full) Elementor's own rule for the container's
   ::before (background overlay) also sets top: 0 and the full width, which
   moved the plinth to the top of the card; measured on Stage 2026-10-09. */
.e-con.isd-pedestal::before,
.isd-podium > .e-con:is(:nth-child(2), :nth-child(3))::before {
	top: auto;
	width: auto;
}

/* The pedestal glow (model.css .isd-pedestal::after) is wider than the card;
   on phones it reached 5 px past the viewport and made the page scroll
   sideways. Clipped at the page edge (overflow-x: clip keeps no scroll
   container and leaves the vertical overflow visible). */
.e-con.isd-winners {
	overflow-x: clip;
}

.e-con.isd-winner__card {
	--gap: 0px;
	background: var(--isarch-ink-raised);
	border: 1px solid var(--isarch-line-dark);
	border-radius: var(--isarch-radius);
	height: 100%;
	overflow: hidden;
	padding: 0;
}

.isd-winner__media {
	align-items: center;
	aspect-ratio: 4 / 3;
	background: #15110B;
	display: flex;
	justify-content: center;
	padding: clamp(0.75rem, 1.5vw, 1.25rem);
	width: 100%;
}

.isd-winner__media img {
	display: block;
	height: auto;
	max-height: 100%;
	max-width: 100%;
	object-fit: contain;
	width: auto;
}

/* Winner cards (the grid cards; not the Gold feature card or the Silver and
   Bronze podium cards): the work image fills its 4:3 frame, whole and
   uncropped (object-fit: contain), as wide or as tall as the frame allows
   (owner request 2026-10-16). It was 81 to 86% of the frame at 1440px
   (237 x 167 for a landscape image in a 277 x 208 frame) because of the
   frame padding, and half the card width on phones because the image never
   grew past the width of its sizes slot (46vw while the grid is one column,
   see ISARCH_V2_CARD_IMAGE_SIZES in inc/winners.php). The frame and the card
   keep their size. */
.e-con.isd-winner:not(.isd-winner--feature, .isd-pedestal) .isd-winner__media {
	padding: 0;
}

.e-con.isd-winner:not(.isd-winner--feature, .isd-pedestal) .isd-winner__media img {
	height: 100%;
	max-height: none;
	max-width: none;
	width: 100%;
}

.e-con.isd-winner__body {
	--gap: 0.5rem;
	padding: 1.25rem 1.25rem 1.5rem;
}

.isd-winner__rank .elementor-heading-title {
	font-family: var(--isarch-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1.2;
	text-transform: uppercase;
}

/* Award labels: shape only. Colours come from model.css (motion v2, the
   --isarch-rank-* tokens): Gold and Grand Prix yellow, Silver, Bronze,
   Jury Special yellow outline, ESG Winner green outline, Winner grey outline. */
.isd-rank {
	border-radius: var(--isarch-radius-pill);
	border-style: solid;
	border-width: 1px;
	display: inline-block;
	padding: 0.375rem 0.75rem;
}

/* model.css keeps a label on one line (white-space: nowrap). In a card that
   is narrower than the label, as on a phone with a larger default font size
   ("JURY SPECIAL AWARD" at 24px), the card cut the end of the label off; it
   may wrap there. Where the label fits, nothing changes. */
.isd-winner__rank .isd-rank {
	white-space: normal;
}

/* The work title follows the width of its card. A column is at least 13rem
   (see the grid above), where the title fits at its full size; a single
   column on a phone can be narrower than that with a larger default font
   size, and "Neighborhood's" (8.07em, the longest title word) broke in the
   middle at 24px. 11.5% of the title width is the full size at a 13rem
   card, so the cap only acts below it (7% spare for that word). */
.elementor-widget.isd-winner__title {
	container-type: inline-size;
	width: 100%;
}

.isd-winner__title .elementor-heading-title {
	font-family: var(--isarch-font-display);
	font-size: 1.1875rem;
	font-size: min(1.1875rem, 11.5cqi);
	font-stretch: 106%;
	font-weight: 700;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.isd-winner__designer {
	color: var(--isarch-mist);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.isd-winner__designer p {
	margin: 0;
}

/* Gold (and grand prix): one wide card, image and text side by side. The
   work title is one step above the other cards' titles (19px), from 21px on
   phones to 26px on wide screens, well below the group heading above it
   (28 to 44px); it was 36px, close to that heading (reported 2026-10-11). */
.isd-winner--feature .isd-winner__title .elementor-heading-title {
	font-size: clamp(1.3125rem, 1.15rem + 0.5vw, 1.625rem);
	font-size: min(clamp(1.3125rem, 1.15rem + 0.5vw, 1.625rem), 11.5cqi);
	line-height: 1.2;
}

@media (min-width: 1025px) {
	.isd-winner--feature .e-con.isd-winner__card {
		align-items: stretch;
		flex-direction: row;
	}

	.isd-winner--feature .isd-winner__media {
		flex: 0 0 62%;
		width: 62%;
	}

	.isd-winner--feature .e-con.isd-winner__body {
		align-self: center;
		flex: 1 1 auto;
		padding: 2.5rem;
	}
}

/* ---------- /winners/ ---------- */

.isd-winners-index__intro {
	color: var(--isarch-color-stage-text);
	font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
	max-width: var(--isarch-reading-width);
}

.isd-winners-index__intro p {
	margin: 0;
}

.isd-award-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
}

body .isd-award-nav a,
body .isd-award__chips a,
body .isd-by-year__links a {
	align-items: center;
	border: 1px solid var(--isarch-line-dark);
	border-radius: var(--isarch-radius-pill);
	color: var(--isarch-color-stage-text);
	display: inline-flex;
	font-size: 0.9375rem;
	font-weight: 500;
	justify-content: center;
	min-height: 44px;
	padding: 0.5rem 1.125rem;
	text-decoration: none;
	transition: border-color 0.2s, color 0.2s;
}

body .isd-award-nav a:hover,
body .isd-award__chips a:hover,
body .isd-by-year__links a:hover {
	border-color: var(--isarch-yellow);
	color: var(--isarch-yellow);
}

/* Year timeline (motion.css lays out the scroller; timeline.min.js pins it). */
.isd-years-timeline {
	border-block: 1px solid var(--isarch-line-dark);
	padding-block: clamp(2.5rem, 5vw, 4rem);
}

.isd-years-timeline__head {
	box-sizing: border-box;
	margin: 0 auto 1.5rem;
	max-width: var(--isarch-content-width);
	padding-inline: var(--isarch-gutter);
	width: 100%;
}

.isd-years-timeline__eyebrow {
	color: var(--isarch-yellow);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	margin: 0 0 0.5rem;
	text-transform: uppercase;
}

.isd-years-timeline__title {
	font-family: var(--isarch-font-display);
	font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
	font-stretch: 125%;
	font-weight: 800;
	line-height: 1;
	margin: 0;
}

.isd-timeline__track {
	align-items: stretch;
	gap: 0;
}

body a.isd-year {
	border-left: 1px solid var(--isarch-line-dark);
	color: var(--isarch-color-stage-text);
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	height: 100%;
	justify-content: center;
	min-width: clamp(220px, 24vw, 340px);
	padding: 1.25rem 1.75rem;
	text-decoration: none;
}

.isd-year__num {
	font-family: var(--isarch-font-display);
	font-size: clamp(4rem, 2.5rem + 6vw, 8.5rem);
	/* The number shrinks with a capped card (see the card cap below): it is
	   about 3.25em wide and the card's content box is the cap minus the
	   padding (2 x 1.75rem) and the 1px border; dividing by 3.5 leaves about
	   7% spare (fallback font). It only binds with a large default font size:
	   at 16px the number keeps its size at every width. */
	font-size: min(clamp(4rem, 2.5rem + 6vw, 8.5rem), (100cqi - var(--isarch-gutter) - 8px - 3.5rem - 1px) / 3.5);
	font-stretch: 125%;
	font-weight: 900;
	line-height: 0.9;
	transition: color 0.3s;
}

.isd-year__meta {
	color: var(--isarch-mist);
	font-size: 0.9375rem;
}

/*
 * A year card is never wider than its scroller (docs/specs/isarch-v2-motion.md
 * 3.2: the focused year is fully visible). The track is max-content wide, so a
 * card takes the width of its longest line and its description never wraps:
 * at 320px, or with a large default font size, a card ran past the scroller.
 * The scroller (.isd-timeline__viewport, both timelines; these files load on
 * every page) becomes the size container, and a card is at most its width
 * (100cqi) minus the snap start (scroll-padding-inline-start, the gutter) and
 * 8px of room for the focus outline (timeline.min.js keeps the same 8px): once
 * the scroller snaps to a card, the card and its outline are fully visible.
 * A cap from 100vw would count a desktop scrollbar (400% zoom) and miss the
 * home scroller's own inset. Cards that fit keep their width: at 16px the cap
 * only binds below about 355px wide; the description wraps between words
 * (the home card's number already follows its card in cqi).
 * The scroller's width never depends on its content (it fills the section,
 * also when pinned), so the inline-size containment changes nothing else.
 */
.isd-timeline__viewport {
	container-type: inline-size;
}

body a.isd-year,
body a.isarch-pg-year {
	max-width: calc(100cqi - var(--isarch-gutter) - 8px);
}

body a.isd-year:hover .isd-year__num,
.isd-year--current .isd-year__num {
	color: var(--isarch-yellow);
}

.isd-year--current .isd-year__meta {
	align-self: flex-start;
	background: var(--isarch-yellow);
	border-radius: var(--isarch-radius-pill);
	color: var(--isarch-black);
	font-weight: 600;
	padding: 0.25rem 0.75rem;
}

.isd-timeline__group {
	border-left: 1px solid var(--isarch-line-dark);
	justify-content: center;
	padding: 1.25rem 1.75rem;
}

.isd-timeline__group-label {
	color: var(--isarch-mist);
}

body .isd-timeline__item--compact > a {
	color: var(--isarch-color-stage-text);
}

/* Award sections (anchors #architecture to #esg are kept). */
.isd-award {
	border-top: 1px solid var(--isarch-line-dark);
	padding-top: 2rem;
}

/* Motion v2 dimension lines (.isd-dimline) separate the timeline, the award
   sections and the years; they replace the first rule lines there. */
.e-con.isd-winners-index__dim {
	--gap: 0px;
	padding: 0 var(--isarch-gutter);
}

.isd-winners-index__award:first-child .isd-award {
	border-top: 0;
}

.isd-award__title {
	font-family: var(--isarch-font-display);
	font-size: clamp(1.875rem, 1.3rem + 2.4vw, 3.25rem);
	font-weight: 800;
	line-height: 1.05;
	margin: 0 0 1.75rem;
}

.isd-award__years {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.isd-award__year-title,
.isd-by-year__year-title {
	color: var(--isarch-yellow);
	font-family: var(--isarch-font-display);
	font-size: 1.5rem;
	font-stretch: 125%;
	font-weight: 800;
	margin: 0 0 0.75rem;
}

.isd-award__links,
.isd-award__chips,
.isd-by-year__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.isd-award__links li + li {
	margin-top: 0.625rem;
}

body .isd-award__links a {
	background: var(--isarch-ink-raised);
	border: 1px solid var(--isarch-line-dark);
	border-radius: 14px;
	color: var(--isarch-color-stage-text);
	display: block;
	line-height: 1.35;
	min-height: 44px;
	padding: 0.875rem 1.125rem;
	text-decoration: none;
	transition: border-color 0.2s;
}

body .isd-award__links a:hover {
	border-color: var(--isarch-yellow);
}

.isd-award__links strong {
	color: var(--isarch-yellow);
	display: block;
	font-weight: 600;
}

.isd-award__early {
	margin-top: 2rem;
}

.isd-award__early-label {
	color: var(--isarch-mist);
	margin: -0.25rem 0 0.75rem;
}

.isd-award__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* Winners by year (anchors #year-2025, #year-2024, #year-2023). */
.isd-by-year {
	padding-top: 2rem;
}

.isd-by-year__title {
	font-family: var(--isarch-font-display);
	font-size: clamp(1.875rem, 1.3rem + 2.4vw, 3.25rem);
	font-weight: 800;
	margin: 0 0 1.75rem;
}

.isd-by-year__grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.isd-by-year__year {
	background: var(--isarch-ink-raised);
	border: 1px solid var(--isarch-line-dark);
	border-radius: var(--isarch-radius);
	padding: 1.5rem;
}

.isd-by-year__list li {
	align-items: center;
	border-top: 1px solid var(--isarch-line-dark);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	justify-content: space-between;
	padding: 0.625rem 0;
}

.isd-by-year__award {
	font-weight: 600;
}

.isd-by-year__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

body .isd-by-year__links a {
	font-size: 0.875rem;
	padding: 0.375rem 0.875rem;
}

@media (max-width: 1024px) {
	.isd-award__years,
	.isd-by-year__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.isd-award__years,
	.isd-by-year__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- /jury-list/ ---------- */

.e-con.isd-juror,
.e-con.isd-juror__card {
	--gap: 0.375rem;
	height: 100%;
	padding: 0;
}

.isd-juror__photo {
	aspect-ratio: 4 / 5;
	background: var(--isarch-ink-raised);
	border-radius: var(--isarch-radius);
	margin-bottom: 0.75rem;
	overflow: hidden;
	width: 100%;
}

.isd-juror__photo img {
	display: block;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	width: 100%;
}

.isd-juror__name .elementor-heading-title {
	font-family: var(--isarch-font-display);
	font-size: 1.125rem;
	font-stretch: 106%;
	font-weight: 700;
	line-height: 1.25;
}

.isd-juror__role .elementor-heading-title {
	color: var(--isarch-mist);
	font-family: var(--isarch-font-body);
	font-size: 0.9375rem;
	font-stretch: 100%;
	font-weight: 400;
	line-height: 1.45;
}

/* ---------- /ranking/ ---------- */

.isd-ranking__lead .elementor-heading-title {
	font-family: var(--isarch-font-body);
	font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
	font-stretch: 100%;
	font-weight: 500;
	line-height: 1.45;
	max-width: 52rem;
}

.isd-ranking__intro {
	color: var(--isarch-mist);
	max-width: var(--isarch-reading-width);
}

.isd-ranking__intro p {
	margin: 0;
}

.e-con.isd-ranking__top,
.e-con.isd-ranking__more {
	--gap: 1.75rem;
}

.isd-ranking__section-title .elementor-heading-title {
	font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
	font-weight: 800;
}

/* The card grid (podium: first card full width, second and third on low
   and lower plinths, then four per row; two on phones) comes from model.css
   (.isd-podium, motion v2). */
.e-con.isd-ranking__cards {
	--gap: 0px;
	padding: 0;
}

/* Phones (model.css: two columns below 900px): a column is never narrower
   than its longest word needs, 7.25rem ("Polytechnic", 6.7rem of the
   1.125rem name, plus 8%), and the grid shows one column below that. At
   the default 16px a 320px phone has 8.5rem columns, so it keeps two; with
   a 20 or 24px default font size the names and countries ran into the next
   card. The first card spans every column as before. */
@media (max-width: 899px) {
	.e-con.isd-podium.isd-podium {
		grid-template-columns: repeat(auto-fill, minmax(max(min(100%, 7.25rem), calc((100% - 1rem) / 2 - 1px)), 1fr));
	}
}

.e-con.isd-rank-card {
	--gap: 0.25rem;
	padding: 0;
	width: auto;
}

.isd-rank-card__image {
	aspect-ratio: 4 / 3;
	border-radius: var(--isarch-radius);
	margin-bottom: 0.75rem;
	overflow: hidden;
	width: 100%;
}

.isd-rank-card__image img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.isd-rank-card__no .elementor-heading-title {
	color: var(--isarch-yellow);
	font-family: var(--isarch-font-display);
	font-size: 1.75rem;
	font-stretch: 125%;
	font-weight: 900;
	line-height: 1;
}

.isd-rank-card__name .elementor-heading-title {
	font-size: 1.0625rem;
	font-stretch: 106%;
	line-height: 1.25;
}

.isd-rank-card__country .elementor-heading-title {
	color: var(--isarch-mist);
	font-family: var(--isarch-font-body);
	font-size: 0.8125rem;
	font-stretch: 100%;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Ranking podium (motion v2, build/isarch-v2-motion/demo/v2.css): card look;
   the positions come from model.css. */
.isd-podium .isd-rank-card__no .elementor-heading-title {
	font-size: 1.375rem;
	font-stretch: 112%;
	font-weight: 800;
}

.isd-podium .isd-rank-card__name .elementor-heading-title {
	font-size: 1.125rem;
	line-height: 1.2;
}

/* Fourth place on: model.css lines the cards of a row up at the bottom
   (align-items: end, which keeps the second and third places on their
   plinths), so a card whose name took fewer lines started lower and its
   image, number, name and country all sat lower than its neighbours'
   (reported 2026-10-11). Each name keeps room for the most lines a name
   needs at that card width: two lines, three on cards narrower than 13rem
   (four columns at 900 to about 1000px, two columns on phones), four below
   9rem. The cards of a row are then the same height, so with the bottom
   alignment their tops, images, numbers, names and countries line up. */
.isd-podium > .e-con.isd-rank-card:nth-child(n+4) {
	container-type: inline-size;
}

.isd-podium > .isd-rank-card:nth-child(n+4) .isd-rank-card__name .elementor-heading-title {
	min-height: 2.4em;
}

@container (max-width: 13rem) {
	.isd-podium > .isd-rank-card:nth-child(n+4) .isd-rank-card__name .elementor-heading-title {
		min-height: 3.6em;
	}
}

@container (max-width: 9rem) {
	.isd-podium > .isd-rank-card:nth-child(n+4) .isd-rank-card__name .elementor-heading-title {
		min-height: 4.8em;
	}
}

.isd-podium > .e-con.isd-rank-card:first-child {
	background: var(--isarch-ink-raised);
	border: 1px solid var(--isarch-line-dark);
	border-radius: 20px;
	padding: 1.25rem;
}

.isd-podium > .isd-rank-card:first-child .isd-rank-card__image {
	aspect-ratio: 16 / 10;
	border-radius: 14px;
	margin-bottom: 0;
}

.isd-podium > .isd-rank-card:first-child > .isd-rank-card__no {
	justify-self: start;
	margin-top: 0.75rem;
}

.isd-podium > .isd-rank-card:first-child .isd-rank-card__no .elementor-heading-title {
	background: var(--isarch-yellow);
	border-radius: var(--isarch-radius-pill);
	color: var(--isarch-ink);
	display: inline-block;
	font-size: 1.125rem;
	padding: 0.35rem 0.9rem;
}

/* The first place's name follows its column: "University" (5.12em) ran past
   the card on a 320px phone at a 24px default font size; 18% of the column
   leaves 8% spare. At the default 16px the column is wide enough. */
.isd-podium > .isd-rank-card:first-child > .elementor-widget.isd-rank-card__name {
	container-type: inline-size;
	width: 100%;
}

.isd-podium > .isd-rank-card:first-child .isd-rank-card__name .elementor-heading-title {
	font-size: clamp(1.75rem, 1rem + 2vw, 2.75rem);
	font-size: min(clamp(1.75rem, 1rem + 2vw, 2.75rem), 18cqi);
	max-width: 14ch;
}

/* Second and third: a little air between the country line and the plinth
   (as in the demo). */
.isd-podium > .e-con.isd-rank-card:is(:nth-child(2), :nth-child(3)) {
	padding-bottom: calc(var(--isd-plinth) + 0.625rem);
}

.isd-ranking__list {
	columns: 2;
	column-gap: 3rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Number in its own column, a wrapped name lines up under the first line of
   the name (hanging indent; it started under the number before, reported
   2026-10-11). The number column is at least 2.5rem and grows with a wider
   number (reader's own letter spacing), so the two never overlap. */
.isd-ranking__list li {
	align-items: baseline;
	border-top: 1px solid var(--isarch-line-dark);
	break-inside: avoid;
	column-gap: 0.25em;
	display: grid;
	grid-template-columns: minmax(2.5rem, max-content) minmax(0, 1fr);
	padding: 0.625rem 0;
}

.isd-ranking__no {
	color: var(--isarch-yellow);
	display: inline-block;
	font-family: var(--isarch-font-display);
	font-stretch: 125%;
	font-weight: 800;
	min-width: 2.5rem;
}

@media (max-width: 767px) {
	.isd-ranking__list {
		columns: 1;
	}
}