/* ==================================================================
   Case-study bands.

   main.css is measured off the Figma file, frame by frame. These rules are not: they are the
   geometry of the site this one replaces, ported so the 36 migrated projects and articles read
   the way they were laid out. The old theme drew them with Bootstrap columns; the numbers here
   come from its own SCSS (assets/scss/main-style/), which is the citable source — the shipped
   main.css there is a single minified line with Bootstrap inlined.

   Its root was font-size: 62.5%, so every rem in that file is 10px. The values below are in px.
   ================================================================== */

:root {
	/* The old site gave each band clamp(200px, 10vw, 300px) of air above and below. This design
	   uses 100px everywhere else, and that is what the bands take. */
	--woo-band-gap: 100px;
	--woo-band-gap-sm: 60px;

	/* .gutter-14 — 70px of padding each side of a column, so 140px between two of them. */
	--woo-band-gutter: 140px;
}

/* ---------------- The flow of bands ---------------- */

.woo-caseflow {
	padding-block: var(--woo-band-gap) 0;
	margin-bottom: var(--woo-outer);
	
}
@media (max-width: 991px) {
	.woo-caseflow{
		margin-bottom: var(--woo-outer-mobile);
	}
}

/* All sides, not just the block axis: a figure carries its own inline margin by default, and
   a per-band reset would fight the rule below — which is how the reels ended up flush against
   the band above them. */
.woo-caseflow > * {
	margin: 0 auto;
}

.woo-caseflow > * + * {
	margin-block-start: var(--woo-band-gap);
}

/* spacing_with_below_block = "small" on the band above. */
.woo-caseflow > .woo-band--tight + * {
	margin-block-start: var(--woo-band-gap-sm);
}

.woo-band__media {
	display: block;
	width: 100%;
	height: auto;
}

/* .small-image — 75% and centred, from components/_video.scss:43-50. */
.woo-band--narrow .woo-band__media {
	width: 75%;
	margin-inline: auto;
}

/* col-lg-9, ranged left unless the band said right. */
.woo-band--wide .woo-band__media { width: 75%; }

/* col-lg-6 inside .row.justify-content-end. */
.woo-band--half .woo-band__media { width: 50%; }

.woo-band--end .woo-band__media { margin-inline-start: auto; }

/* ---------------- Media beside copy (text_image_block) ---------------- */

.woo-cut {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--woo-band-gutter);
	align-items: center;
}

.woo-cut--flip .woo-cut__media { order: 2; }

/* A band with media and no copy keeps the two tracks: the old theme always drew the media in
   a col-lg-6 and only added the copy column when there was copy, so stretching the picture
   across the whole measure here made a portrait 1070px wide and 1497px tall. */

.woo-cut__copy > :last-child { margin-block-end: 0; }

/* h2.sub-heading in components/_two-cols-block.scss:1-10 — 14px/500 with 25px under it. */
.woo-cut__title,
.woo-note__title,
.woo-projectinfo__title {
	margin: 0 0 25px;
	font-size: var(--wp--preset--font-size--tiny);
	letter-spacing: var(--woo-ls-tiny);
	font-weight: 500;
	line-height: 1.4;
}

/* .service-info held its copy to 581px. */
.woo-cut__copy { max-width: 581px; }

/* ---------------- Copy in one half of the measure (text_block) ---------------- */

.woo-note {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--woo-band-gutter);
}

.woo-note > * { grid-column: 1; max-width: 581px; }

.woo-note--right > * { grid-column: 2; }

.woo-note > :last-child { margin-block-end: 0; }

/* ---------------- Two portraits, tall beside short (double_portrait_image) ---------------- */

/*
 * col-7 + col-5, vertically centred, and — unlike everything else in the old theme — it never
 * stacks on a phone: the columns stay 7/5 all the way down, with the gutter closing to 16px.
 */
.woo-duo {
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: var(--woo-band-gutter);
	align-items: center;
}

.woo-duo--flip { grid-template-columns: 5fr 7fr; }

.woo-duo--flip .woo-duo__tall { order: 2; }

.woo-duo img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* ---------------- Pairs and trios (image_pair_block, triple_media) ---------------- */

/* The pair sat on a 20px gutter, not the 140px one. */
.woo-pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	align-items: stretch;
}

.woo-pair--2-1 { grid-template-columns: 2fr 1fr; }
.woo-pair--1-2 { grid-template-columns: 1fr 2fr; }
.woo-pair--trio { grid-template-columns: repeat(3, 1fr); }

.woo-pair__item,
.woo-pair__item img,
.woo-pair__item video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------------- One major, two minor (triple_image_block) ---------------- */

.woo-trio {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(60px, 6vw, 140px);
	align-items: center;
}

.woo-trio__minor {
	display: flex;
	flex-direction: column;
	gap: clamp(60px, 6vw, 140px);
}

.woo-trio img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------------- The client's words (quote_block) ---------------- */

.woo-casequote {
	margin: 0;
	border: 0;
	padding: 0;
}

.woo-casequote__text {
	max-width: 873px;
	margin: 0 0 24px;
	font-size: var(--wp--preset--font-size--heading);
	line-height: 1.4;
	font-weight: 400;
}

.woo-casequote__by {
	font-size: var(--wp--preset--font-size--tiny);
	letter-spacing: var(--woo-ls-tiny);
	font-style: normal;
	font-weight: 500;
}

.woo-casequote__by span {
	display: block;
	font-weight: 400;
	color: var(--wp--preset--color--muted);
}

/* ---------------- The scrolling row (full_width_slider_block) ---------------- */

/*
 * The old theme ran slick here: jQuery, 90KB of plugin, and a track no keyboard could reach.
 * Scroll-snap gives the same reading, swipes on a phone by itself, and the two half-width
 * buttons are the invisible click zones the old markup already had
 * (components/_full-slider.scss:22-39).
 */
.woo-reel { position: relative; }

.woo-reel__track {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.woo-reel__track::-webkit-scrollbar { display: none; }

.woo-reel__slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
}

.woo-reel__slide img,
.woo-reel__slide video,
.woo-band--reel .woo-band__media {
	display: block;
	width: 100%;
	height: auto;
	/* ratio-1920x1060 — share/_layout.scss:116-121 put --bs-aspect-ratio at 55.2%. */
	aspect-ratio: 1920 / 1060;
	object-fit: cover;
}

.woo-reel__step {
	position: absolute;
	top: 0;
	width: 50%;
	height: 100%;
	border: 0;
	padding: 0;
	background: none;
	cursor: pointer;
}

.woo-reel__step--prev { left: 0; }
.woo-reel__step--next { right: 0; }

/* 35px hairlines bottom right, from _full-slider.scss:60-76. */
.woo-reel__dots {
	position: absolute;
	right: 40px;
	bottom: 24px;
	display: flex;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woo-reel__dots li {
	width: 35px;
	height: 1px;
	background: rgba(255, 255, 255, 0.4);
	transition: background-color var(--woo-quick) var(--woo-ease);
}

.woo-reel__dots li[aria-current] { background: var(--wp--preset--color--paper); }

/* ---------------- The overview beside the title ---------------- */

/*
 * The old page opened on a two-column band: the disciplines on the left, what the client came
 * with on the right (single-projects.php:64-89). That is what .woo-projectinfo now holds, so
 * the 600|580 grid keeps both cells filled — eight of the twenty projects have no prose in
 * their body at all, and this column would otherwise be empty on them.
 */
.woo-projectinfo__scope {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woo-projectinfo__scope li {
	font-size: var(--wp--preset--font-size--tiny);
	letter-spacing: var(--woo-ls-tiny);
	line-height: 1.4;
	padding-block: 12px;
	border-top: 0.5px solid var(--woo-rule);
}

.woo-projectinfo__scope li:last-child { border-bottom: 0.5px solid var(--woo-rule); }

/* ---------------- A picture inside a journal article ---------------- */

/* main.css:1548-1554 already bleeds a figure in .woo-article__body out to 791px; this only
   keeps the media itself from overflowing it. */
.woo-article__band { margin-block: 50px; }

.woo-article__band .woo-band__media { width: 100%; }

/* ---------------- Narrow screens ---------------- */

@media (max-width: 991px) {
	:root {
		--woo-band-gap: 72px;
		--woo-band-gap-sm: 40px;
		--woo-band-gutter: 32px;
	}

	.woo-cut,
	.woo-note,
	.woo-trio {
		grid-template-columns: 1fr;
	}

	.woo-cut--flip .woo-cut__media { order: 0; }

	.woo-note > *,
	.woo-note--right > * { grid-column: 1; }

	/* The pair stacks, the duo does not — that asymmetry is the old design's, not an oversight
	   (components/_images-two-cols.scss:104-111 vs the col-7/col-5 it never collapsed). */
	.woo-pair,
	.woo-pair--2-1,
	.woo-pair--1-2,
	.woo-pair--trio {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.woo-band--wide .woo-band__media,
	.woo-band--half .woo-band__media,
	.woo-band--narrow .woo-band__media {
		width: 100%;
	}

	.woo-reel__step { display: none; }

	.woo-reel__dots { right: 20px; }
}

/*
 * A <picture> appears wherever a band or the hero carries a mobile crop of its own. It is a
 * wrapper for the <source> and nothing else, so it is taken out of the box tree and the
 * width rules above keep applying to the <img> as if it were still a direct child.
 */
.woo-caseflow picture,
.woo-article__body picture,
.woo-projecthero__shot picture { display: contents; }