/* ==========================================================================
   Custom Template: Collections round (Part D4 in CUSTOM-TEMPLATE.md)
   Series Bento, Portrait Card and Headline Card heroes, Hover Index description, Statement photos,
   Showcase Alternating, Sheet. Scoped to .ct4-* (plus the layout options' own classes).
   Everything follows Branding through the theme's CSS variables and works on light and dark sections.
   No section padding here (A6). Motion only inside prefers-reduced-motion: no-preference.
   ========================================================================== */

/* ── Shared: text link with an arrow ─────────────────────────── */
.ct4-arrow-link { display: inline-flex; align-items: center; gap: 10px; padding: 0 0 6px; border-bottom: 1px solid currentColor; color: inherit !important; text-decoration: none !important; font-size: var(--size-copy); line-height: 1.3; }
.ct4-arrow-link svg { flex: none; }
@media (prefers-reduced-motion: no-preference) {
	.ct4-arrow-link svg { transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
	.ct4-arrow-link:hover svg, .ct4-arrow-link:focus-visible svg { transform: translateX(4px); }
}

/* ── Series Bento ───────────────────────────────────────────── */
.ct4-series { container-type: inline-size; --ct4-gap: 8px; }
.ct4-sr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ct4-gap); }
.ct4-sr + .ct4-sr { margin-top: clamp(44px, 6cqi, 88px); padding-top: clamp(44px, 6cqi, 88px); border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent); }
.ct4-sr-img { margin: 0; position: relative; overflow: hidden; border-radius: var(--img-radius, 0); min-height: 110px; background: color-mix(in srgb, currentColor 6%, transparent); }
.ct4-sr-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ct4-p1 { grid-area: p1; } .ct4-p2 { grid-area: p2; } .ct4-p3 { grid-area: p3; } .ct4-p4 { grid-area: p4; }
.ct4-sr-text { grid-area: t; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; padding: 2px clamp(8px, 2.4cqi, 32px) 14px 0; }
.ct4-sr-index, .ct4-sr-label { font-family: var(--font-data-labels, var(--font-small-titles)); font-size: 16px; line-height: 1.35; letter-spacing: .03em; font-variant-numeric: tabular-nums; }
.ct4-sr-index { opacity: .55; margin-bottom: 16px; }
.ct4-sr-label { opacity: .72; margin-bottom: 10px; }
.ct4-sr .ct4-sr-title { margin: 0 0 16px !important; line-height: 1.04; text-wrap: balance; color: inherit; }
.ct4-sr-copy { font-size: var(--size-copy); line-height: 1.6; opacity: .74; max-width: 30em; margin: 0 0 22px; text-wrap: pretty; }
.ct4-sr-link { margin-top: auto; }
.ct4-sr-text > .ct4-sr-link:first-child { margin-top: 0; }

/* A: text + small photo stacked in one column, two tall photos (photos 1–2 tall, 3 small) */
.ct4-sr--a { grid-template-areas: "t p1 p2" "p3 p1 p2"; grid-template-rows: auto minmax(110px, 1fr); min-height: 48cqi; }
.ct4-sr--a-flip { grid-template-areas: "p1 p2 t" "p1 p2 p3"; grid-template-rows: auto minmax(110px, 1fr); min-height: 48cqi; }
.ct4-sr--a .ct4-sr-link, .ct4-sr--a-flip .ct4-sr-link { margin-top: 0; }
/* B: a wide photo + the text, three photos in the other row (photo 1 wide) */
.ct4-sr--b { grid-template-areas: "p1 p1 t" "p2 p3 p4"; grid-template-rows: minmax(32cqi, auto) 23cqi; }
.ct4-sr--b-flip { grid-template-areas: "p2 p3 p4" "t p1 p1"; grid-template-rows: 23cqi minmax(32cqi, auto); }
.ct4-sr--b .ct4-sr-text, .ct4-sr--b-flip .ct4-sr-text { justify-content: flex-end; padding-top: 24px; }
.ct4-sr--b-flip .ct4-sr-text { justify-content: center; }
.ct4-sr--b .ct4-sr-link, .ct4-sr--b-flip .ct4-sr-link { margin-top: 0; }
/* C: a small photo over the text, one big photo (photo 1 big, 2 small) */
.ct4-sr--c { grid-template-areas: "p2 p1 p1" "t p1 p1"; grid-template-rows: 20cqi minmax(25cqi, auto); }
.ct4-sr--c-flip { grid-template-areas: "p1 p1 p2" "p1 p1 t"; grid-template-rows: 20cqi minmax(25cqi, auto); }
.ct4-sr--c .ct4-sr-text, .ct4-sr--c-flip .ct4-sr-text { padding-top: clamp(18px, 3cqi, 40px); }
.ct4-sr--c .ct4-sr-link, .ct4-sr--c-flip .ct4-sr-link { margin-top: 0; }
@media (prefers-reduced-motion: no-preference) {
	.ct4-sr-img img { transition: transform 1.1s cubic-bezier(.22, 1, .36, 1); }
	.ct4-sr:has(.ct4-sr-link:hover) .ct4-sr-img img { transform: scale(1.03); }
}
/* Tablets and phones: the text first, then the photos in a composed stack on a 6-column grid */
@media (max-width: 900px) {
	.ct4-sr { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-areas: none !important; grid-template-rows: none !important; min-height: 0 !important; }
	.ct4-sr > * { grid-row: auto !important; grid-column: span 6 !important; }
	.ct4-sr-text { order: -1; padding: 0 0 18px !important; }
	.ct4-sr-img { min-height: 0; aspect-ratio: 4 / 3; }
	.ct4-sr-link { margin-top: 0 !important; }
	.ct4-sr[class*="ct4-sr--a"] > .ct4-p1, .ct4-sr[class*="ct4-sr--a"] > .ct4-p2 { grid-column: span 3 !important; aspect-ratio: 3 / 4; }
	[class*="ct4-sr--a"] .ct4-p3 { aspect-ratio: 3 / 2; }
	[class*="ct4-sr--b"] .ct4-p1 { aspect-ratio: 3 / 2; }
	.ct4-sr[class*="ct4-sr--b"] > .ct4-p2, .ct4-sr[class*="ct4-sr--b"] > .ct4-p3, .ct4-sr[class*="ct4-sr--b"] > .ct4-p4 { grid-column: span 2 !important; aspect-ratio: 1; }
	[class*="ct4-sr--c"] .ct4-p1 { aspect-ratio: 4 / 3; }
	[class*="ct4-sr--c"] .ct4-p2 { aspect-ratio: 21 / 9; }
}

/* ── Hover Index: description under the hovered / focused row ── */
.ct4-ix-reveal .ct2-ix-link { row-gap: 0; }
.ct4-ix-desc { grid-row: 2; grid-column: 1 / -1; display: grid; grid-template-rows: 0fr; opacity: 0; }
.has-numbers .ct4-ix-desc { grid-column: 2 / -1; }
.ct4-ix-desc > span { display: inline-block; width: 100%; text-decoration: none; overflow: hidden; min-height: 0; font-family: var(--font-body); font-size: var(--size-copy); line-height: 1.55; max-width: 42em; opacity: .72; }
.ct4-ix-desc > span::before { content: ""; display: block; height: 12px; }
.ct4-ix-reveal .ct2-ix-row:hover .ct4-ix-desc, .ct4-ix-reveal .ct2-ix-row:focus-within .ct4-ix-desc { grid-template-rows: 1fr; opacity: 1; }
@media (prefers-reduced-motion: no-preference) { .ct4-ix-desc { transition: grid-template-rows .45s cubic-bezier(.22, 1, .36, 1), opacity .3s; } }
@media (hover: none), (pointer: coarse), (max-width: 767px) {
	.ct4-ix-desc { grid-template-rows: 1fr; opacity: 1; }
	.ct4-ix-reveal .ct2-ix-img { grid-row: 1; }
}
@media (max-width: 600px) { .has-numbers .ct4-ix-desc { grid-column: 2 / -1; } }

/* ── Statement: photos inside the line, {1} {2} {3} ─────────── */
.ct4-stm-pill { display: inline-block; vertical-align: baseline; width: 1.9em; height: .74em; margin: 0 .1em; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, currentColor 10%, transparent); }
.ct4-stm-pill img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0 !important; }
@media (max-width: 600px) { .ct4-stm-pill { width: 1.7em; } }

/* ── Project Showcase: Alternating rows, two-tone captions ──── */
.ct2-sc-alternating { container-type: inline-size; }
.ct2-sc-alternating .ct2-sc-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(30px, 4cqi, 56px) clamp(12px, 1.4cqi, 22px); }
.ct2-sc-alternating .ct2-sc-item:nth-child(4n+1), .ct2-sc-alternating .ct2-sc-item:nth-child(4n+4) { grid-column: span 2; }
.ct2-sc-alternating .ct2-sc-item img { height: 43cqi; aspect-ratio: auto; object-fit: cover; }
.ct2-sc-alternating .ct2-sc-item figcaption { justify-content: flex-start; flex-wrap: wrap; gap: 4px 12px; padding-top: 14px; }
.ct2-sc-alternating .ct2-sc-title { font-size: 1.7em !important; line-height: 1.35 !important; letter-spacing: 0; text-transform: none; }
.ct2-sc-alternating .ct2-sc-meta { font-family: inherit; font-size: 1.7em; line-height: 1.35; opacity: .55; text-align: left; }
@media (max-width: 767px) {
	.ct2-sc-alternating .ct2-sc-items { grid-template-columns: 1fr; }
	.ct2-sc-alternating .ct2-sc-item { grid-column: auto !important; }
	.ct2-sc-alternating .ct2-sc-item img { height: auto; aspect-ratio: 4 / 3; }
}

/* ── Sheet: rounded top corners, rising over the section above ─ */
.ct-wrapper.ct4-sheet { border-radius: 32px 32px 0 0; position: relative; z-index: 3; }
.ct-wrapper.ct4-sheet:not([class*="bg-"]):not([style*="background"]) { background: var(--color-content-bg, #fff); }
.ct-wrapper.ct4-sheet.bg-image, .ct-wrapper.ct4-sheet > .video-container { overflow: clip; border-radius: 32px 32px 0 0; }
.ct-wrapper.ct4-sheet-32 { margin-top: -32px; }
.ct-wrapper.ct4-sheet-64 { margin-top: -64px; }
.ct-wrapper.ct4-sheet-96 { margin-top: -96px; }
.ct-wrapper.ct4-sheet-128 { margin-top: -128px; }
@media (max-width: 767px) {
	.ct-wrapper.ct4-sheet, .ct-wrapper.ct4-sheet.bg-image, .ct-wrapper.ct4-sheet > .video-container { border-radius: 22px 22px 0 0; }
	.ct-wrapper.ct4-sheet-32 { margin-top: -16px; } .ct-wrapper.ct4-sheet-64 { margin-top: -32px; }
	.ct-wrapper.ct4-sheet-96 { margin-top: -48px; } .ct-wrapper.ct4-sheet-128 { margin-top: -64px; }
}
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.ct-wrapper.ct4-sheet { animation: ct4-sheet-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
	}
}
@keyframes ct4-sheet-rise { from { translate: 0 40px; } to { translate: none; } }

/* ── Hero: Portrait Card ────────────────────────────────────── */
.ct4-hp { --ct4-fs: clamp(64px, 15vw, 250px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); padding-bottom: clamp(40px, 5vw, 80px) !important; }
.ct4-hp-media { grid-column: 1 / 6; grid-row: 1; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--img-radius, 0); position: relative; z-index: 1; align-self: start; }
.ct4-hp-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ct4-hp-side { grid-column: 8 / 13; grid-row: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding-bottom: calc(var(--ct4-fs) * .55); }
.ct4-hp-img-right .ct4-hp-media { grid-column: 8 / 13; }
.ct4-hp-img-right .ct4-hp-side { grid-column: 1 / 6; }
.ct2-hero .ct4-hp-lead { margin: 0; max-width: 22em; font-size: calc(var(--size-copy) * 1.25) !important; line-height: 1.45; color: inherit; text-wrap: pretty; }
.ct2-hero .ct4-hp-note { margin: 0 0 22px; max-width: 28em; font-size: var(--size-copy); line-height: 1.6; opacity: .7; color: inherit; }
.ct2-hero .ct4-hp-name { grid-column: 1 / -1; grid-row: 2; position: relative; z-index: 2; margin: calc(var(--ct4-fs) * -.44) 0 0; font-family: var(--font-headlines, var(--font-titles)); font-size: var(--ct4-fs) !important; line-height: .9 !important; letter-spacing: -.03em; white-space: nowrap; color: inherit !important; text-transform: var(--title-transform); text-wrap: nowrap; }
.ct2-hero .ct4-hp-name span { color: var(--color-main); }
.ct2-hero .ct4-hp-loc { grid-column: 1 / -1; grid-row: 3; justify-self: end; margin: 18px 0 0; font-family: var(--font-data-labels, var(--font-small-titles)); font-size: 16px !important; letter-spacing: .02em; opacity: .7; color: inherit; }
.ct4-hp .ct2-hero-eyebrow { margin-bottom: 16px; }
.ct4-hp .ct2-hero-buttons { margin-top: 0; }
@media (max-width: 1000px) {
	.ct4-hp-media { grid-column: 1 / 7; } .ct4-hp-side { grid-column: 8 / 13; }
	.ct4-hp-img-right .ct4-hp-media { grid-column: 7 / 13; } .ct4-hp-img-right .ct4-hp-side { grid-column: 1 / 6; }
}
@media (max-width: 767px) {
	.ct4-hp { grid-template-columns: minmax(0, 1fr); }
	.ct4-hp-media, .ct4-hp-img-right .ct4-hp-media { grid-column: 1; width: 82%; aspect-ratio: 4 / 5; }
	.ct4-hp-img-right .ct4-hp-media { justify-self: end; }
	.ct2-hero .ct4-hp-name { grid-row: 2; }
	.ct4-hp-side, .ct4-hp-img-right .ct4-hp-side { grid-column: 1; grid-row: 3; padding-bottom: 0; margin-top: 30px; gap: 26px; }
	.ct2-hero .ct4-hp-loc { grid-row: 4; justify-self: start; margin-top: 26px; }
}

/* ── Hero: Headline Card ────────────────────────────────────── */
.ct2-hero.ct2-hero-card { --ct4-bg: var(--color-content-bg, #fff); --ct4-r: 20px; background: var(--ct4-bg); padding: 16px !important; }
.ct2-hero-card.ct2-hp-main { --ct4-bg: var(--color-main); } .ct2-hero-card.ct2-hp-sec { --ct4-bg: var(--color-sec); }
.ct2-hero-card.ct2-hp-third { --ct4-bg: var(--color-third); } .ct2-hero-card.ct2-hp-fourth { --ct4-bg: var(--color-fourth); }
.ct2-hero-card.ct2-hp-black { --ct4-bg: #0b0b0b; } .ct2-hero-card.ct2-hp-white { --ct4-bg: #fff; }
.ct4-hc-card { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--ct4-r); min-height: 520px; height: calc(100svh - 32px); display: flex; flex-direction: column; justify-content: space-between; color: #fff; background: #222; }
.ct2-hero-card.is-normal .ct4-hc-card { height: min(78svh, 860px); }
.ct2-hero-card.is-below-header.is-full .ct4-hc-card { height: calc(100svh - var(--ct4-header-h, 100px) - 32px); }
.ct4-hc-media { position: absolute; inset: 0; z-index: -1; }
.ct4-hc-slide { position: absolute; inset: 0; opacity: 0; }
.ct4-hc-slide.is-on { opacity: 1; }
.ct4-hc-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ct4-hc-shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .25) 42%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .6) 100%); pointer-events: none; }
.ct4-hc-top { padding: clamp(26px, 3.6vw, 56px); }
.ct2-hero-card.is-under-header .ct4-hc-top { padding-top: max(clamp(26px, 3.6vw, 56px), calc(var(--ct4-header-h, 100px) + 4px)); }
.ct2-hero .ct4-hc-title { font-size: clamp(4.4rem, 6.4vw, 12rem); line-height: .98; max-width: 13em; color: #fff !important; }
.ct2-hero .ct4-hc-title span { color: inherit !important; opacity: .7; }
.ct4-hc-top .ct2-hero-sentence { max-width: 32em; margin-top: 22px; }
.ct4-hc-bottom { display: flex; align-items: flex-end; gap: 18px 28px; }
.ct4-hc-tabs { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px 28px; padding: 0 0 clamp(20px, 2.4vw, 32px) clamp(26px, 3.6vw, 56px); }
.ct4-notch-left .ct4-hc-tabs { padding-left: 0; }
.ct4-hc-tab { font-size: 15px; line-height: 1.4; padding: 6px 0; color: rgba(255, 255, 255, .72) !important; text-decoration: none !important; border-bottom: 1.5px solid transparent; }
.ct4-hc-tab.is-on, a.ct4-hc-tab:hover { color: #fff !important; border-bottom-color: #fff; }
.ct4-hc-count { flex: none; margin-left: auto; display: flex; align-items: center; gap: 14px; padding: 0 clamp(26px, 3.6vw, 56px) clamp(24px, 2.6vw, 36px) 0; font-size: 15px; font-variant-numeric: tabular-nums; }
.ct4-notch-right .ct4-hc-count { padding-right: 0; }
.ct4-hc-bar { width: clamp(64px, 8vw, 110px); height: 2px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.ct4-hc-bar i { display: block; height: 100%; width: 0; background: #fff; }
.ct4-hc-pause { width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .5); background: transparent; color: #fff; display: grid; place-items: center; cursor: pointer; }
.ct4-hc-pause .ct4-i-play, .ct4-hc-pause[aria-pressed="true"] .ct4-i-pause { display: none; }
.ct4-hc-pause[aria-pressed="true"] .ct4-i-play { display: inline; }
.ct4-hc-pause:focus-visible, .ct4-hc-tab:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* The notch: page background cut into a bottom corner, with concave corners on both sides */
.ct4-hc-notch { flex: none; position: relative; background: var(--ct4-bg); padding: 14px 16px 0 0; border-top-right-radius: var(--ct4-r); }
.ct4-hc-notch .button { margin: 0 !important; float: none; }
.ct4-hc-notch::before, .ct4-hc-notch::after { content: ""; position: absolute; width: var(--ct4-r); height: var(--ct4-r); background: radial-gradient(circle at 100% 0, transparent calc(var(--ct4-r) - .5px), var(--ct4-bg) var(--ct4-r)); pointer-events: none; }
.ct4-hc-notch::before { bottom: 100%; left: 0; }
.ct4-hc-notch::after { left: 100%; bottom: 0; }
.ct4-notch-right .ct4-hc-notch { order: 9; margin-left: auto; padding: 14px 0 0 16px; border-top-right-radius: 0; border-top-left-radius: var(--ct4-r); }
.ct4-notch-right .ct4-hc-notch::before, .ct4-notch-right .ct4-hc-notch::after { background: radial-gradient(circle at 0 0, transparent calc(var(--ct4-r) - .5px), var(--ct4-bg) var(--ct4-r)); }
.ct4-notch-right .ct4-hc-notch::before { left: auto; right: 0; }
.ct4-notch-right .ct4-hc-notch::after { left: auto; right: 100%; }
.ct4-notch-right .ct4-hc-count { margin-left: 0; padding-right: 0; }
.ct4-notch-right .ct4-hc-tabs { order: 0; }
@media (prefers-reduced-motion: no-preference) {
	.ct4-hc-slide { transition: opacity 1.2s ease; }
	.ct4-hc-tab { transition: color .2s, border-color .2s; }
}
@media (max-width: 767px) {
	.ct2-hero.ct2-hero-card { padding: 10px !important; --ct4-r: 16px; }
	.ct4-hc-card { height: auto; min-height: calc(100svh - 20px); }
	.ct2-hero-card.is-normal .ct4-hc-card { min-height: 560px; }
	.ct2-hero .ct4-hc-title { font-size: clamp(3.8rem, 11.5vw, 6.4rem); }
	.ct4-hc-bottom { flex-wrap: wrap; }
	.ct4-hc-tabs, .ct4-notch-left .ct4-hc-tabs { order: -1; flex-basis: 100%; flex-wrap: nowrap; overflow-x: auto; padding: 0 22px 4px; gap: 20px; scrollbar-width: none; }
	.ct4-hc-tab { white-space: nowrap; }
	.ct4-hc-count { padding: 0 22px 20px 0; }
	.ct4-notch-right .ct4-hc-count { padding: 0 0 20px 22px; margin-right: auto; }
}