/*=========================
	DOWNLOADS BLOCK
=========================*/
.block-downloads .downloads-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

@media (min-width: 782px) {
	.block-downloads .downloads-grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-6);
	}
}

/* --- With an image: photo one side, copy + file list the other ---------------
   Mirrors live's c-list-pdf sections. On live the photo is a SQUARE, sits in the
   WIDER column (text md-7 : image md-8) and BLEEDS out to the page edge
   (negative-container-right / -left). Default = image RIGHT; .is-switched = LEFT. */
.block-downloads .downloads-grid--media {
	grid-template-columns: 1fr;
	align-items: center;
}
@media (min-width: 782px) {
	.block-downloads .downloads-grid--media {
		/* text : image = 7 : 8, like live's col-md-7 / col-md-8 */
		grid-template-columns: 7fr 8fr;
		gap: var(--space-6);
	}
	.block-downloads .downloads-grid--media .downloads-body  { order: 1; }
	.block-downloads .downloads-grid--media .downloads-media { order: 2; }
	/* switched = image on the LEFT */
	.block-downloads .downloads-grid--media.is-switched .downloads-media { order: 1; }
	.block-downloads .downloads-grid--media.is-switched .downloads-body  { order: 2; }

	/* Bleed the photo out past the container's padding — live's negative-container-*
	   pulls it out by the container gutter only, it does NOT run to the viewport edge. */
	.block-downloads .downloads-grid--media .downloads-media {
		--dl-bleed: var(--container-px, 96px);
		width: calc(100% + var(--dl-bleed));
		margin-right: calc(-1 * var(--dl-bleed));
	}
	.block-downloads .downloads-grid--media.is-switched .downloads-media {
		margin-right: 0;
		margin-left: calc(-1 * var(--dl-bleed));
	}
}

/* Mobile / single-column (< 782px): image drops BELOW the copy + file list
   (DOM order puts .downloads-media first). Applies to both switched and
   non-switched variants. */
@media (max-width: 781.98px) {
	.block-downloads .downloads-grid--media .downloads-body  { order: 1; }
	.block-downloads .downloads-grid--media .downloads-media { order: 2; }
}
/* SQUARE photo (live: ratio 1.01) */
.block-downloads .downloads-media {
	overflow: hidden;
	aspect-ratio: 1 / 1;
}
.block-downloads .downloads-media__img,
.block-downloads .downloads-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
/* the copy + list stack inside the text column */
.block-downloads .downloads-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}
/* when the block has an image the header/list are no longer grid columns,
   so let the copy use the full column width */
.block-downloads .downloads-grid--media .downloads-header .copy {
	max-width: none;
}

.block-downloads .downloads-header .top-title {
	font-weight: 700;
	margin-bottom: 8px;
}
/* No accent bar under the downloads top-title (removes the global .top-title::after). */
.block-downloads .downloads-header .top-title::after {
	display: none;
}

.block-downloads .downloads-header .title {
	margin: 0 0 16px;
}

.block-downloads .downloads-header .copy {
	max-width: 420px;
}

.block-downloads .downloads-items {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Rows match live's c-list-bordered: hairline #282829 rules, not a faded grey. */
.block-downloads .downloads-item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	padding: 30px 0;
	border-bottom: 1px solid #282829;
}

.block-downloads .downloads-item:first-child {
	border-top: 1px solid #282829;
}

.block-downloads .downloads-item__info {
	display: flex;
	flex-direction: column;
	/* live: .c-list-bordered--item-title + description { margin-top: 1.6rem } */
	gap: 16px;
	/* Copy takes the remaining width so long titles wrap before the link,
	   matching live's .c-list-bordered--item-copy (padding-right: 9rem). */
	flex: 1 1 auto;
	padding-right: var(--space-4);
}

/* Row title.
   PLAIN downloads list (no photo)      -> 32px, matching live's .c-list-bordered
                                            (32px / line-height 1.1em)
   IMAGE variant (photo beside the list) -> 20px, matching live's .c-list-bordered--item-copy
                                            (20px / weight 300 / line-height 35.2px) */
.block-downloads .downloads-item__title {
	font-weight: 200;
	font-size: 30px;
	line-height: 1.2;
}
.block-downloads .downloads-grid--media .downloads-item__title {
	font-size: 20px;
	line-height: 1.76;
}

/* Description / subtitle under the title (live: .c-list-bordered--item-description,
   22px on desktop). */
.block-downloads .downloads-item__description {
	margin: 0;
	font-size: 22px;
	line-height: 1.2;
}
.block-downloads .downloads-grid--media .downloads-item__description {
	font-size: 16px;
}

.block-downloads .downloads-item__description p {
	margin: 0;
}

/* live: 18px / weight 700 / #282829, "Download" + the software-download glyph */
.block-downloads .downloads-item__link {
	flex: 0 0 auto;
	font-weight: 700;
	font-size: 18px;
	text-decoration: none;
	color: #282829;
	border-bottom: none;
	padding-bottom: 2px;
	white-space: nowrap;
	transition: opacity 0.2s ease;
}

.block-downloads .downloads-item__link--arrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* Download rows: label + the download glyph (live's #software-download) */
.block-downloads .downloads-item__link--download {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.block-downloads .downloads-item__icon {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	transition: transform 0.2s ease;
}
.block-downloads .downloads-item__link--download:hover .downloads-item__icon,
.block-downloads .downloads-item__link--download:focus-visible .downloads-item__icon {
	transform: translateY(2px);
}

.block-downloads .downloads-item__link--arrow svg {
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

.block-downloads .downloads-item__link--arrow:hover svg,
.block-downloads .downloads-item__link--arrow:focus-visible svg {
	transform: translateX(4px);
}

.block-downloads .downloads-item__link:hover,
.block-downloads .downloads-item__link:focus-visible {
	opacity: 0.65;
}

.block-downloads .downloads-empty {
	padding: 20px 0;
	font-style: italic;
	opacity: 0.7;
}

@media (max-width: 767.98px) {
	.block-downloads .downloads-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.block-downloads .downloads-item {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
	.block-downloads .downloads-item__title {
		font-size: 16px;
	}
}

/* --- Bottom decorative graphic (James, 2026-07-16) — mirrors live's IWCD-2023
   Resources band: half the section's width, flush bottom-LEFT, outside the
   content container (full-bleed to the section edge), natural aspect ratio
   (height follows width via the SVG viewBox — live caps nothing here). --- */
.block-downloads .downloads-graphic {
	width: 50%;
	margin-top: var(--space-6);
	line-height: 0;
}
.block-downloads .downloads-graphic svg {
	display: block;
	width: 100%;
	height: auto;
	color: var(--color-n-black, #282829);
}
/* When the block has bottom padding, live's graphic still sits on the band edge —
   pull it down over the padding. */
.block-downloads .downloads-graphic {
	margin-bottom: 0;
}
/* Graphic selected: drop the block's bottom padding so the graphic sits FLUSH at
   the section edge (overrides the pb-N utility and the mobile block-padding rule). */
.block-downloads:has(.downloads-graphic) {
	padding-bottom: 0 !important;
}

/* ---------- Decorative zig-zag (live: bottom-left of the teal Resources block) ---------- */
.block-downloads {
	position: relative;
}
/* LIVE 1:1 (James, 2026-07-29: "Download graphic is not the same size on live"):
   live's zig-zag is IN FLOW (col-xs-8 .img-wrap), HALF the full-bleed module's
   width (979px at ~1960 — our absolute clamp() capped it at 520), flush to the
   section's bottom-left edge. Static block + width:50% reproduces that and lets
   the section grow around it like live (1089px tall vs our old 630px). */
.block-downloads .downloads-zigzag {
	width: 50%;
	max-width: 1200px;   /* live c-icon--max-w-x120 */
	margin-top: 40px;
	line-height: 0;
	pointer-events: none;
}
/* the graphic must TOUCH the section's bottom edge (live has no gutter under it) —
   zero out the block's pb-N utility padding when the zig-zag is present */
section.block-downloads:has(.downloads-zigzag) {
	padding-bottom: 0 !important;
}
.block-downloads .downloads-zigzag svg {
	width: 100%;
	height: auto;
	display: block;
	color: #282829;
}
@media (max-width: 767.98px) {
	.block-downloads .downloads-zigzag {
		display: none;
	}
}