/*=========================
	TWO COL CONTENT IMAGE BLOCK
=========================*/

.block-two-col-content-image {
	position: relative;
	overflow: hidden;
}

.block-two-col-content-image .container {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
	align-items: start;
	position: relative;
	z-index: 1;
}
/* Mobile: no grid gap on the container */
@media (max-width: 767.98px) {
	.block-two-col-content-image .container {
		gap: 0;
	}
}

/* Grid items refuse to shrink below their content's INTRINSIC width (a 580px photo or a wide
   inline SVG forces the collapsed 1fr column past a phone viewport, and the block's
   overflow:hidden then CLIPS ~130px of copy — found in the 2026-07-16 tablet/mobile sweep).
   Let every cell shrink and cap media at the cell. */
.block-two-col-content-image .container > *,
.block-two-col-content-image .tcol-header > *,
.block-two-col-content-image .items > *,
.block-two-col-content-image .items-col,
.block-two-col-content-image .col-left,
.block-two-col-content-image .col-right { min-width: 0; }
.block-two-col-content-image .image img,
.block-two-col-content-image .col-left svg,
.block-two-col-content-image .col-right svg,
.block-two-col-content-image .tcol-col-graphic svg,
.block-two-col-content-image .tcol-header__graphic svg { max-width: 100%; }

/* Non-split (side-by-side) mode: items col | content col */
.block-two-col-content-image .container.side-by-side {
	grid-template-columns: 1fr 1fr;
	gap: var(--space-8);
	align-items: stretch;
}
.block-two-col-content-image .container.side-by-side .col-left,
.block-two-col-content-image .container.side-by-side .col-right {
	display: flex;
	flex-direction: column;
}
.block-two-col-content-image .container.side-by-side.switchSides .col-left  { grid-column: 2; }
.block-two-col-content-image .container.side-by-side.switchSides .col-right { grid-column: 1; grid-row: 1; }
/* Text-only side-by-side (no image and no graphic): vertically centre the RIGHT
   column against the taller left column (destination2030 "The opportunity"). */
.block-two-col-content-image .container.side-by-side:not(:has(.image)):not(:has(.tcol-col-graphic)) .col-right {
	justify-content: center;
}

/* ── Stacked layout: header row ─────────────────────────────────────────── */

.block-two-col-content-image .tcol-header {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-6);
	margin-bottom: var(--space-6);
}
/* Mobile: no bottom margin on the stacked header */
@media (max-width: 767.98px) {
	.block-two-col-content-image .tcol-header {
		margin-bottom: 0;
	}
}

/* switchSides: graphic moves to left column, content to right */
.block-two-col-content-image .tcol-header.switchSides .tcol-header__graphic { grid-column: 1; grid-row: 1; }
.block-two-col-content-image .tcol-header.switchSides .tcol-header__content { grid-column: 2; }

.block-two-col-content-image .tcol-header__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.block-two-col-content-image .tcol-header__graphic {
	display: flex;
	justify-content: center;
	align-self: flex-start;
	overflow: hidden;
	width: 100%;
	height: 100%;
}
.block-two-col-content-image .tcol-header__graphic .tcol-graphic--inline {
	display: block;
	width: 100%;
	height: 100%;
	color: currentColor;
}
.block-two-col-content-image .tcol-header__graphic .tcol-graphic--inline svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* ── Items — single column (default) ────────────────────────────────────── */

.block-two-col-content-image .items {
	display: flex;
	flex-direction: column;
}

/* ── Items — split into 2 sub-columns ───────────────────────────────────── */

.block-two-col-content-image .items--split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 var(--space-7);
}

.block-two-col-content-image .tcol-stacked-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.block-two-col-content-image .items-col {
	display: flex;
	flex-direction: column;
}

/* ── Individual item ─────────────────────────────────────────────────────── */

.block-two-col-content-image .item {
	padding: var(--space-4) 0;
}
/* Mobile: tighter vertical padding on items */
@media only screen and (max-width: 767.98px) {
	.block-two-col-content-image .item {
		padding: var(--space-2) 0;
	}
}

.block-two-col-content-image .items > .item:first-child,
.block-two-col-content-image .items-col .item:first-child {
	border-top: none;
	padding-top: 0;
}
.block-two-col-content-image .items > .item:last-child,
.block-two-col-content-image .items-col .item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.block-two-col-content-image .item-title {
	margin: 0 0 var(--space-2);
	font-size: 20px;
	font-weight: 600;
}
.block-two-col-content-image .item-title a {
	color: inherit;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: 28px;
	max-height: 225px;
}
/* Mobile: smaller item-title link */
@media only screen and (max-width: 767.98px) {
	.block-two-col-content-image .item-title a {
		font-size: 22px;
	}
}
.block-two-col-content-image .item-title .c-link__icon {
	display: inline-flex;
	align-items: center;
	line-height: 1;
}
.block-two-col-content-image .item-title .c-link__icon svg {
	width: 1.9rem;
	height: 1.9rem;
	transition: transform .3s cubic-bezier(.4,0,0,1);
}
.block-two-col-content-image .item-title a:hover .c-link__icon svg,
.block-two-col-content-image .item-title a:focus .c-link__icon svg {
	transform: translateX(8px);
}
.block-two-col-content-image .item-copy {
	font-size: 1.4rem;
	line-height: 1.6;
}

/* ── Per-column graphics (side-by-side layout) — render inside their column ─ */
.block-two-col-content-image .tcol-col-graphic {
	display: block;
	color: currentColor;
	margin-bottom: var(--space-6);
}
.block-two-col-content-image .tcol-col-graphic--top    { margin-bottom: var(--space-5); }
/* Wave graphic sits ABOVE the list (don't fill full column width, or its lower
   points dip into the first item). Cap height; align left like live. */
.block-two-col-content-image .tcol-col-graphic--top.graphic--zig-zag-single-wave svg {
	width: auto;
	height: 220px;
}
.block-two-col-content-image .tcol-col-graphic--bottom {
	margin-top: auto;
	/* align-self: flex-end; */
	/* width: fit-content; */
}
.block-two-col-content-image .tcol-col-graphic svg {
	display: block;
	width: 100%;
	height: auto;
}

.block-two-col-content-image .tcol-col-graphic--bottom.graphic--chevron-right-double {
	height: 355px;
	width: auto;
}
.block-two-col-content-image .tcol-col-graphic--bottom.graphic--chevron-right-double svg {
	height: 100%;
	width: auto;
}

.block-two-col-content-image .tcol-col-graphic--bottom.graphic--stairs-down-right {
	height: 560px;
}
.block-two-col-content-image .tcol-col-graphic--bottom.graphic--stairs-down-left {
	height: 560px;
}
.block-two-col-content-image .tcol-col-graphic--bottom.graphic--stairs-down-right svg,
.block-two-col-content-image .tcol-col-graphic--bottom.graphic--stairs-down-left svg {
	height: 100%;
	width: auto;
	display: block;
}

.block-two-col-content-image .icon-triangle-right,
.block-two-col-content-image .icon-triangle-right-dim {
	height: 370px;
	width: fit-content;
}
.block-two-col-content-image .icon-triangle-right svg,
.block-two-col-content-image .icon-triangle-right-dim svg {
	height: 100%;
	width: auto;
	display: block;
}

/* ── Buttons — don't stretch to column width ────────────────────────────── */
.block-two-col-content-image .c-btn {
	align-self: flex-start;
}

/* ── Col-right content ───────────────────────────────────────────────────── */

.block-two-col-content-image .col-right .content {
	margin-bottom: 0;
}
.block-two-col-content-image .col-right .content a,
.block-two-col-content-image .col-right .rich-text a {
	color: #282829 !important;
	font-weight: 700;
	text-decoration: underline;
}
.block-two-col-content-image .col-right .intro {
	margin-top: var(--space-3);
	opacity: 0.85;
}
.block-two-col-content-image .col-right .image,
.block-two-col-content-image .col-left .image {
	overflow: hidden;
}
.block-two-col-content-image .col-right .image img,
.block-two-col-content-image .col-left .image img {
	/* Live renders these as a square o-ratio tile that scales with the column
	   (was a fixed 650px, which stretched the photo on tablet — 8037079). */
	width: 100%;
	aspect-ratio: 1 / 1;
	height: auto;
	object-fit: cover;
	display: block;
}

/* ── Corner graphics ─────────────────────────────────────────────────────── */

.tcol-graphics {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: var(--container-width, 1500px);
	padding-left: var(--container-px, 96px);
	padding-right: var(--container-px, 96px);
	box-sizing: border-box;
	display: flex;
	pointer-events: none;
	z-index: 0;
}
.tcol-graphics--top    { top: 0; }
.tcol-graphics--bottom { bottom: 0; }

.tcol-graphic {
	display: block;
	color: currentColor;
	width: clamp(180px, 18vw, 320px);
}
.tcol-graphic svg {
	display: block;
	width: 100%;
	height: auto;
}

.tcol-graphic--left  { margin-right: auto; }
.tcol-graphic--right { margin-left: auto; }

.tcol-graphic.graphic--stairs-down-left,
.tcol-graphic.graphic--stairs-down-right {
	height: 560px;
	width: auto;
}
.tcol-graphic.graphic--stairs-down-left svg,
.tcol-graphic.graphic--stairs-down-right svg {
	height: 100%;
	width: auto;
}

.block-two-col-content-image .graphic--fat-zig-zag,
.block-two-col-content-image .graphic--fat-zig-zag-vertical { max-height: 380px; }

.block-two-col-content-image .graphic--zig-zag-double {
	height: 535px;
	width: auto;
}
.block-two-col-content-image .graphic--zig-zag-double svg {
	height: 100%;
	width: auto;
	display: block;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 991.98px) {
	/* Collapse stacked header to single column */
	.block-two-col-content-image .tcol-header {
		grid-template-columns: 1fr;
		direction: ltr;
	}
	.block-two-col-content-image .tcol-header__graphic {
		display: none;
	}

	/* Collapse split items to single column */
	.block-two-col-content-image .items--split {
		grid-template-columns: 1fr;
	}
	.block-two-col-content-image .items-col .item:first-child {
		padding-top: var(--space-3);
	}
	.block-two-col-content-image .items-col:first-child .item:first-child {
		border-top: none;
		padding-top: 0;
	}

}

/* Stack side-by-side columns on MOBILE only, in DOM ORDER (live 1:1 — James, 2026-07-16,
   IDD-2023 "Instructions" block): live's feature rows are col-sm-7/col-sm-8, i.e. columns
   sit side by side FROM 768 (we wrongly stacked below 992), and below 768 live stacks in
   source order — TEXT column first, photo column (with its trailing copy) after. The old
   rule force-lifted .col-right (the photo) above the text on every two-col sitewide. */
@media (max-width: 767.98px) {
	.block-two-col-content-image .container.side-by-side,
	.block-two-col-content-image .container.side-by-side.switchSides {
		grid-template-columns: 1fr;
		gap: var(--space-4);
	}
	.block-two-col-content-image .container.side-by-side .col-left,
	.block-two-col-content-image .container.side-by-side .col-right {
		grid-column: 1;
		grid-row: auto;
	}
	/* switchSides = the RIGHT column's content leads visually (linklist header/photo);
	   on mobile it stacks FIRST, matching live's source order for those sections */
	.block-two-col-content-image .container.side-by-side.switchSides .col-right {
		grid-column: 1;
		grid-row: 1;
	}
	.block-two-col-content-image .container.side-by-side.switchSides .col-left {
		grid-column: 1;
		grid-row: 2;
	}
	/* …but when the LEFT column carries the heading (.content) and the RIGHT carries
	   the image, lead with the heading so the top-title + title sit ABOVE the image
	   (guide-dog-mobility "Finding the right match for you"). Scoped via :has so the
	   linklist/photo-led switchSides blocks (heading in the RIGHT column) are untouched. */
	.block-two-col-content-image .container.side-by-side.switchSides:has(.col-left .content) .col-left {
		grid-row: 1;
	}
	.block-two-col-content-image .container.side-by-side.switchSides:has(.col-left .content) .col-right {
		grid-row: 2;
	}
	/* Live's feature sections carry TWO copies of the decorative graphic: the text-column one
	   is hidden <768 (u-none u-block-sm) and a MOBILE-ONLY copy (u-none-sm, col-xs-11 ≈ 69%)
	   renders at the BOTTOM of the section, after the image (James, 2026-07-16, IWCD-2024
	   "At a community level"). We have one node, so on mobile the columns become
	   display:contents and the graphic is ordered last. Switched blocks keep it hidden. */
	.block-two-col-content-image .container.side-by-side .tcol-col-graphic {
		display: none;
	}
	.block-two-col-content-image .container.side-by-side:not(.switchSides) {
		gap: 0;
	}
	.block-two-col-content-image .container.side-by-side:not(.switchSides) .col-left,
	.block-two-col-content-image .container.side-by-side:not(.switchSides) .col-right {
		display: contents;
	}
	.block-two-col-content-image .container.side-by-side:not(.switchSides) .col-right .image,
	.block-two-col-content-image .container.side-by-side:not(.switchSides) .col-left .image {
		margin: var(--space-4) 0 0;
	}
	.block-two-col-content-image .container.side-by-side:not(.switchSides) .tcol-col-graphic {
		display: block;
		order: 10;
		width: 60%;               /* live: col-xs-11 minus gutters ≈ 211px at 390vw */
		margin-top: var(--space-4);
		margin-bottom: 0;         /* the base --bottom variant carries 75px that live doesn't */
	}
	/* kill the per-graphic DESKTOP heights (chevron 355px / stairs 560px + svg height:100%)
	   — on mobile the 60% width drives the size, height follows the svg's own ratio */
	.block-two-col-content-image .container.side-by-side:not(.switchSides) .tcol-col-graphic[class*="graphic--"] {
		height: auto;
	}
	.block-two-col-content-image .container.side-by-side:not(.switchSides) .tcol-col-graphic[class*="graphic--"] svg {
		width: 100%;
		height: auto;
	}
	/* (removed 2026-07-16 per James: the section-level `padding-bottom: 0 !important`
	   on :has(.tcol-col-graphic) blocks — mobile blocks keep their normal bottom
	   padding; only the inner container's pb-N utility stays zeroed) */
	.block-two-col-content-image:has(.side-by-side:not(.switchSides) .tcol-col-graphic) > .container {
		padding-bottom: 0 !important;
	}
	/* the image follows its OWN ratio on mobile (live o-ratio) — the 650px desktop crop was
	   towering over a 390px viewport */
	.block-two-col-content-image .col-right .image img,
	.block-two-col-content-image .col-left .image img {
		height: auto;
	}
}

/* National-partners logo grid (tcol-brands): on mobile remove the decorative
   graphic (it's otherwise moved to the bottom) and add space between the button
   at the end of the left column and the logos. */
@media (max-width: 767.98px) {
	.block-two-col-content-image .container.side-by-side:not(.switchSides):has(.tcol-brands) .tcol-col-graphic {
		display: none;
	}
	.block-two-col-content-image .container.side-by-side:not(.switchSides):has(.tcol-brands) .tcol-brands {
		margin-top: var(--space-5);
	}
}

/* image on top of right column */
.block-two-col-content-image .col-right .image--top{margin-bottom:24px;}
.block-two-col-content-image .image--above-title { margin-bottom: var(--space-5); }

/* left-column embedded eyebrow + title (used when title lives in the text column) */
.block-two-col-content-image .col-left .tcol-eyebrow{font-weight:700;margin:0 0 8px;}
.block-two-col-content-image .col-left .tcol-ltitle{margin:0 0 24px;}

/* ── Brands / logos grid (right column — e.g. National Corporate Partners) ── */
/* ── Brands panel — white box with large top-right radius (mirrors live) ─── */
.block-two-col-content-image .tcol-brands {
	position: relative;
	background: #fff;
	padding: 4rem 3rem 4rem;
	height: 100%;
	box-sizing: border-box;
}
.block-two-col-content-image .tcol-brands__icon {
	/* Half-circle dome: flush with the panel's right edge, rising above the
	   panel top — bottom edge sits 50px below the panel top (mirrors live). */
	position: absolute;
	bottom: calc(100% - 50px);
	right: 0;
	width: 480px;
	max-width: 80%;
	height: auto;
	color: currentColor;
	display: block;
}
.block-two-col-content-image .tcol-brands__icon svg {
	width: 100%;
	height: auto;
	display: block;
}
.block-two-col-content-image .tcol-brands__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
}
.block-two-col-content-image .tcol-brands__item {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-bottom: 100%;
	position: relative;
	overflow: hidden;
}
.block-two-col-content-image .tcol-brands__item img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: grayscale(1);
	transition: filter .3s cubic-bezier(.4,0,0,1);
}
.block-two-col-content-image .tcol-brands__item img:hover {
	filter: grayscale(0);
}
/* TPG + Greenstone source PNGs have heavy internal padding, so they read tiny —
   zoom just those two (the tile clips the transparent overflow). */
.block-two-col-content-image .tcol-brands__item img[src*="Untitled-design-8"] {
	transform: translate(-50%, -50%) scale(1.5);
}
.block-two-col-content-image .tcol-brands__item img[src*="greenstone"] {
	transform: translate(-50%, -50%) scale(1.15);
}
.block-two-col-content-image .tcol-brands__item img[src*="coles"] {
	transform: translate(-50%, -50%) scale(1.2);
}
@media (min-width: 768px) {
	.block-two-col-content-image .tcol-brands {
		padding: 7rem 5rem 6rem;
	}
	.block-two-col-content-image .tcol-brands__list {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ── Column graphics render at their NATURAL size ────────────────────────────
   Live's decorative icon carries an `icon-<name>-dim` class, which is a SIZE class,
   not a different symbol: the artwork is the same SVG, drawn at its intrinsic
   dimensions (triple-circle-vertical = 290 x 868). Our default `width: 100%` stretched
   it to the column, so guide-dog-mobility's graphic came out far larger than live's.
   Cap it at its natural width and let it shrink on narrow screens. */
.block-two-col-content-image .tcol-col-graphic.graphic--triple-circle-vertical svg {
	width: 290px;
	max-width: 100%;
	height: auto;
}
.block-two-col-content-image .tcol-col-graphic.graphic--pac-man-half svg,
.block-two-col-content-image .tcol-col-graphic.graphic--half-circle svg,
.block-two-col-content-image .tcol-col-graphic.graphic--circle-three-quarters svg {
	width: auto;
	max-width: 100%;
	max-height: 420px;
	height: auto;
}

/* Centre the column graphic within its own column (James, 2026-07-14) — at natural size it no
   longer fills the column, so left-aligning left it hanging off to one side. */
.block-two-col-content-image .tcol-col-graphic {
	display: flex;
	justify-content: center;
}
.block-two-col-content-image .tcol-col-graphic svg {
	margin-inline: auto;
}

/* ── LINKLIST shape (image-graphic-link-list) on small screens — live 1:1
   (James, 2026-07-16, home "About our Dogs"). Live's DOM puts the CONTENT column
   (eyebrow/title/photo) FIRST and the items column second; the items column only
   moves left at >=md via `first-md`. Our builder stores items in .col-left, and
   on mobile the columns are display:contents (children are direct grid items in
   DOM order) — so reorder the CHILDREN: content, image, then items. */
@media (max-width: 767.98px) {
	.block-two-col-content-image .container.side-by-side:not(.switchSides):has(.col-left .items) .col-right .content {
		order: -3;
	}
	.block-two-col-content-image .container.side-by-side:not(.switchSides):has(.col-left .items) .col-right .image {
		order: -2;
	}
	.block-two-col-content-image .container.side-by-side:not(.switchSides):has(.col-left .items) .col-left .items {
		margin-top: var(--space-5);
	}
}
/* Live hides the linklist decorative shape (.image-graphic-link-list__shape) below
   62em — mirror that for per-column graphics inside linklist-style blocks. Feature
   sections without .items keep their ordered-last mobile graphic (IWCD-2024 rule). */
@media (max-width: 991.98px) {
	.block-two-col-content-image .container.side-by-side:has(.items) .tcol-col-graphic {
		display: none;
	}
}

/* ── SPLIT ITEMS (feature-list) on small screens — live 1:1 (James, 2026-07-16,
   home "Volunteer and get involved"). The template interleaves stored items
   column-major so DESKTOP rows pair like live (Raise|Walk / Lend|grounds /
   Assist|admin) — but the old mobile collapse stacked col1 then col2, giving
   Raise, Lend, Assist, Walk… Live's source order is ROW-MAJOR: re-interleave
   with display:contents + order. Live tablet (768-991) keeps TWO columns
   (li.col-sm-8); mobile is one. */
@media (max-width: 991.98px) {
	.block-two-col-content-image .items--split .items-col {
		display: contents;
	}
	.block-two-col-content-image .items--split .items-col:first-child .item:nth-child(1) { order: 1; }
	.block-two-col-content-image .items--split .items-col:first-child .item:nth-child(2) { order: 3; }
	.block-two-col-content-image .items--split .items-col:first-child .item:nth-child(3) { order: 5; }
	.block-two-col-content-image .items--split .items-col:first-child .item:nth-child(4) { order: 7; }
	.block-two-col-content-image .items--split .items-col:first-child .item:nth-child(5) { order: 9; }
	.block-two-col-content-image .items--split .items-col:last-child .item:nth-child(1) { order: 2; }
	.block-two-col-content-image .items--split .items-col:last-child .item:nth-child(2) { order: 4; }
	.block-two-col-content-image .items--split .items-col:last-child .item:nth-child(3) { order: 6; }
	.block-two-col-content-image .items--split .items-col:last-child .item:nth-child(4) { order: 8; }
	.block-two-col-content-image .items--split .items-col:last-child .item:nth-child(5) { order: 10; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
	.block-two-col-content-image .items--split {
		grid-template-columns: 1fr 1fr;
		column-gap: var(--space-6);
	}
}
/* Live keeps the feature-list header graphic on mobile (col-xs-12 col-xs-offset-4:
   75% wide, pushed right, below the title) — the generic ≤991 header-graphic hide
   was removing it. Scope the re-show to split-items blocks. */
@media (max-width: 991.98px) {
	.block-two-col-content-image:has(.items--split) .tcol-header__graphic {
		display: block;
		width: 75%;
		margin-left: auto;
	}
	.block-two-col-content-image:has(.items--split) .tcol-header__graphic svg {
		width: 100%;
		height: auto;
	}
}