/*
 * Hardcoded replacement for the "Sponsored By" / "Featured By" Slider
 * Revolution logo sections, which were rendering as broken raw shortcode
 * text in production. The original was a fixed-pixel-coordinate scattered
 * canvas that only worked by being uniformly scaled down for smaller
 * screens; this is a genuinely responsive flex-wrap grid instead, with the
 * same "logos appear progressively" intent via a scroll-triggered fade-in.
 */
/* clear:both is load-bearing, not cosmetic: every other homepage block
 * (front-page.php) is wrapped in the parent theme's ".one" class, which is
 * float:left; width:100%; clear:both (screen.css:1932) - an old float-based
 * "page builder column" system. This section is this project's own new
 * markup, not wrapped in .one, so it never got that clear:both. Floated
 * siblings are removed from normal flow for a non-floated, non-clearing
 * element, so without this, .logo-showcase renders as if the floated
 * portfolio grid and "Sponsored By" heading before it don't exist -
 * starting at the position right after the last non-floated content (the
 * "Portfolio" heading) instead of after its own heading, overlapping
 * everything between: "Sponsored By" text overlapping "SPONSORED BY", "Still"
 * overlapping sponsor logos, and portfolio-grid images overlapping. Also
 * inflates this section's own height to ~4300px (from a real ~500px), since
 * its content still has to render below the still-active 100%-wide float
 * even though its own box top doesn't visually reflect that. */
.logo-showcase {
	clear: both;
	padding: 40px 0;
	text-align: center;
	/* WHITE, not the warm limestone surface (reverted 2026-08-29).
	
	   The band was given --surface-warm on 2026-08-23 so it read as a
	   designed temperature rather than more white. On the homepage - the
	   only page with two of these - that turned out to cost more than it
	   bought: .pm-footer-signoff paints the SAME token, and the Featured By
	   band ended at exactly the pixel the footer band began (measured live:
	   both at y=3866), so the two merged into one 557px grey mass and the
	   boundary between page content and footer simply vanished. The sponsor
	   logos read as part of the footer.
	
	   White gives the footer that boundary back and leaves --surface-warm
	   doing exactly one visible job on the site (the footer band), which is
	   a cleaner system than the same tone meaning both "sponsor strip" and
	   "footer". Separation from the content above was never carried by the
	   fill anyway - the heading plus this rule's own 40px padding do it,
	   and the logos are greyscale at 0.7 opacity, so the strip stays quiet
	   on white. Verified by rendering both versions on the live homepage.
	
	   The token itself is untouched: it is still the image-loading
	   placeholder tone here and in portfolio-grid.css/blocks.css, and
	   darkroom.css still redefines it to #262220 for dark pages. */
}

/*
 * "Sponsored By" / "Featured By" are separate canvas Heading blocks that
 * happen to sit directly above their own .logo-showcase grid, but they
 * rendered on plain white - so each section read as a white heading
 * stripe abruptly handing off to an unrelated grey box below it, and the
 * page as a whole became a flush white/grey/white/grey stack (Kedyn's
 * call, 2026-08-23). Pulling the heading's own wrap into the same warm
 * surface as the grid it introduces makes "heading + logos" read as one
 * band instead of two. Targets ONLY a heading wrap immediately followed
 * by a logo-showcase wrap - every other canvas heading on the site is
 * unaffected.
 */
/* The heading-wrap rule that used to live here is GONE, and should not be
 * re-added. Its whole job was painting the heading in the same fill as the
 * band below it so the two read as one surface; with the fill dropped there
 * is nothing left for it to do. Its padding-top could not have replaced
 * that job either: the canvas writes an inline padding:0px 0px 0px 0px
 * on every .kcb-style-wrap, so a stylesheet padding on that element is
 * inert no matter how specific (verified live - computed padding-top came
 * back 0px while the rule was still present). Spacing above the heading
 * comes from the surrounding block rhythm, and the band keeps its own
 * 40px inset from the .logo-showcase rule above. */

.logo-showcase__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 32px 48px;
	max-width: 1425px;
	margin: 0 auto;
	padding: 0 30px;
	box-sizing: border-box;
}

/*
 * EQUAL BILLING (2026-08-29, Kedyn: "logos should all be the same size to
 * not promote one brand vs the other").
 *
 * Was: `max-height: 70px` on the image alone. Equal HEIGHT is not equal
 * weight - it hands a wide wordmark several times the area of a compact
 * mark. Measured on the sponsor wall: NOLS rendered 51x70 (~3,600px2)
 * while Katadyn rendered 498x51 (~25,000px2), seven times the presence,
 * which is exactly the editorial favouritism this band must not express.
 *
 * Now: every item is an identical fixed cell and the logo is letterboxed
 * inside it with object-fit: contain. Same box for every sponsor,
 * whatever its shape - the standard sponsor-wall treatment. The cell is
 * deliberately wider than tall (150x64, ~2.3:1) because the median logo
 * here is ~1.35:1: most marks are therefore height-bound and fill the
 * cell, and only the two extreme wordmarks (Katadyn, Klean Kanteen) are
 * width-bound. A square cell would shrink every normal logo to serve two
 * outliers.
 *
 * flex: 0 0 auto so the cell keeps its size instead of being stretched or
 * shrunk by flex-wrap's own distribution.
 */
.logo-showcase__item {
	flex: 0 0 auto;
	width: 150px;
	height: 64px;
	/* The cell centers the logo itself - see the image rule below for why
	   the centering cannot live on the image. */
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity var(--duration-moderate, 500ms) ease, transform var(--duration-moderate, 500ms) ease;
}

/* Starting hidden state only applies once js/logo-showcase.js arms this grid
 * (never true in server-rendered HTML) - if that script fails to load or
 * throws, logos stay at their default fully-visible state instead of being
 * stuck invisible. Mirrors gallery-reveal.js's identical .pm-reveal-armed
 * safety net. */
.logo-showcase__grid.is-armed .logo-showcase__item {
	opacity: 0;
	transform: translateY(12px);
}

.logo-showcase__grid.is-armed .logo-showcase__item.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/*
 * Fit by max-width/max-height, NOT by width/height: 100% + object-fit.
 *
 * The percentage version was written first and rendered wrong live - the
 * logos overflowed their cells and the rows overlapped. `height` on these
 * images is already claimed by the theme at a specificity this file
 * cannot reach: screen.css sets `#page_content_wrapper .inner
 * .sidebar_content img { height: auto }` (1,3,1), and grid.css repeats it
 * at (1,4,1) inside media queries - every builder page renders inside
 * `.sidebar_content`, so `height: 100%` lost, the image fell back to its
 * intrinsic ratio at the cell's width, and a 363x500 mark rendered 207px
 * tall inside a 64px cell.
 *
 * `max-height` is uncontested by any of those rules, and `height: auto`
 * agrees with them instead of fighting - so the box below is what the
 * image actually gets. Equal cell, logo scaled to fit inside it: the same
 * result object-fit: contain would give, reached by a property the
 * cascade will let this file keep. Centering therefore has to come from
 * the flex cell above rather than from object-position.
 *
 * max-width: 100% (of the 150px cell) rather than a literal 150px, so it
 * simply ties with the theme's own `max-width: 100%` instead of racing it.
 */
.logo-showcase__item img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 64px;
	object-fit: contain;
	display: block;
	filter: grayscale(100%);
	opacity: 0.7;
	transition: filter var(--duration-base, 0.35s) ease, opacity var(--duration-base, 0.35s) ease;
}

/*
 * Historical note, kept because it explains the bug this section fixes:
 * the old cap here was `max-width: 200px`, which was silently a no-op on
 * every content-builder page - screen.css's `#page_content_wrapper img {
 * max-width: 100% }` is (1,0,1) and beats a two-class selector. That is
 * why Katadyn rendered 498px wide on the Tongass article while the
 * homepage - whose showcase sits outside that wrapper - obeyed the cap.
 * The cell above now bounds the width instead, so no ID-scoped override
 * is needed: the image's own max-width simply ties at 100% either way.
 */

/* block, not the <a> default of inline - avoids the inline-baseline "phantom
   gap" under the image and makes the whole logo (not just its inline text
   extent) the click/tap target. Only present when a logo has a canvas-
   editable link (kedynsierra_builder_render_logo_carousel()); an unlinked
   logo is still a plain <div>, matching the note below. */
.logo-showcase__item a {
	/* flex, matching the cell: a linked logo must centre exactly like an
	   unlinked one, and the anchor sits between the two. Also keeps the
	   whole cell as the click target rather than the image's own box. */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

/* Not every logo is a link - only those with a canvas-editable URL set
   (kedynsierra_builder_render_logo_carousel()) render as a real <a>; the
   rest stay plain <div>s. :focus-within covers keyboard-tabbing to a linked
   logo the same way :hover covers a mouse - both reveal color; an unlinked
   logo can never receive focus, so :focus-within is simply inert for it,
   same as :hover already was. Touch has no hover/focus-before-activation
   concept for either case, so it still gets the same fully-revealed state
   permanently: a sponsor logo's job is to be recognized, and a visitor who
   can't hover has no way to resolve a dimmer default into the clear one -
   whatever ships as the touch state IS the only state they ever see. */
@media (hover: hover) {
	.logo-showcase__item:hover img,
	.logo-showcase__item:focus-within img {
		filter: grayscale(0%);
		opacity: 1;
	}
}
@media (hover: none) {
	.logo-showcase__item img {
		filter: grayscale(0%);
		opacity: 1;
	}
}

/* Stagger delay is set inline by js/logo-showcase.js (from each item's real
 * index, computed at runtime) instead of a fixed nth-child list here - a
 * finite CSS list silently stops staggering past whatever N it was written
 * for: a fixed 12-rule list matching today's real sponsor count would leave
 * a 13th logo - a normal admin edit - popping in with zero delay instead of
 * continuing the cascade. */

/* Backstop, not the primary gate: js/logo-showcase.js already checks
 * matchMedia('(prefers-reduced-motion: reduce)') before ever adding
 * .is-armed, so this currently only works because the JS gate exists - this
 * file has no CSS-level fallback of its own the way portfolio-grid.css's
 * .pm-reveal-armed and hero-slideshow.css both do. */
@media (prefers-reduced-motion: reduce) {
	.logo-showcase__grid.is-armed .logo-showcase__item {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Phone: a 150px cell fits, but three-to-a-row reads better than two, and
 * the row gap dominates the band otherwise. Proportional to the desktop
 * cell so the letterboxing stays identical, just smaller. */
/*
 * Phone. The gap and padding have to come down with the cell, or nothing
 * fits beside anything: measured in a 390px frame, the desktop 48px column
 * gap and 30px grid padding left 255px of usable width, so two 108px cells
 * (216 + 48 = 264) overflowed and every logo landed on its own row - a
 * 14-row column of sponsors. Two per row at these numbers: 112 + 112 + 24
 * = 248 inside 283.
 */
@media (max-width: 480px) {
	.logo-showcase__grid {
		gap: 20px 24px;
		padding: 0 16px;
	}

	.logo-showcase__item {
		width: 112px;
		height: 44px;
	}

	/* max-height is a literal, so it has to track the cell here too. */
	.logo-showcase__item img {
		max-height: 44px;
	}
}