@charset "UTF-8";

#placeholder-bg {
	background-image: url("../image-assets/placeholders/lego.png");
}

.logo-google {
	/* The URL is relative to the css folder. */
	background-image: url("../image-assets/case-study-images/summits-google_cloud_logo.svg");
	/* Exact viewBox ratio (512 x 91): drives the area-capped overlay size. */
	--logo-aspect: 512 / 91;
}

.logo-stan {
	/* The URL is relative to the css folder. */
	background-image: url("../image-assets/case-study-images/stan-logo.svg");
	/* Exact viewBox ratio (145 x 44). */
	--logo-aspect: 145 / 44;
}

.logo-inspace {
	/* The URL is relative to the css folder. */
	background-image: url("../image-assets/case-study-images/inspace-logo.svg");
	/* Exact viewBox ratio (145 x 36). */
	--logo-aspect: 145 / 36;
}

/* Work case-study client logos (the same files as the work.html logo grid).
   Used as image overlays on the case-study pages. */
.logo-ibm {
	background-image: url("../image-assets/case-study-images/client_logo-ibm-brand_color-512x192.svg");
	--logo-aspect: 512 / 192;
}

.logo-optus {
	background-image: url("../image-assets/case-study-images/client_logo-optus-brand_color-512x102.svg");
	--logo-aspect: 512 / 102;
}

.logo-datastax {
	background-image: url("../image-assets/case-study-images/client_logo-datastax-brand_color-512x48.svg");
	--logo-aspect: 512 / 48;
}

.logo-coca-cola {
	background-image: url("../image-assets/case-study-images/client_logo-coca_cola-brand_color-512x161.svg");
	--logo-aspect: 512 / 161;
}

.logo-android {
	background-image: url("../image-assets/case-study-images/client_logo-android-brand_color-512x123.svg");
	--logo-aspect: 512 / 123;
}

.logo-corporate-traveller {
	background-image: url("../image-assets/case-study-images/client_logo-corporate_traveller-brand_color-512x115.svg");
	--logo-aspect: 512 / 115;
}

.logo-cricket-for-climate {
	background-image: url("../image-assets/case-study-images/client_logo-cricket_for_climate-monochrome-516x147.svg");
	--logo-aspect: 516 / 147;
}

.logo-volkswagen {
	background-image: url("../image-assets/case-study-images/client_logo-volkswagen_australia-monochrome-128x128.svg");
	--logo-aspect: 1 / 1;
}

.logo-rocos {
	background-image: url("../image-assets/case-study-images/client_logo-rocos-monochrome-256x35.svg");
	--logo-aspect: 256 / 35;
}



.logo-adidas {
	background-image: url("../image-assets/case-study-images/client_logo-adidas-monochrome-512x119.svg");
	--logo-aspect: 512 / 119;
}



/* The black monochrome marks (Adidas, Cricket for Climate, Volkswagen)
   are drawn white so they read on the dark placeholder/image
   panels, the same way the white placeholder mark does. */
.logo-adidas,
.logo-cricket-for-climate,
.logo-volkswagen {
	filter: brightness(0) invert(1);
}



/* Placeholder client logo (staging.html): David's own weight-80 logo
   mark in white (#FFFFFF), so it stands out on the dark placeholder
   images. Use it exactly like the real logo classes above: inside any
   image container as
   <div class="logo-overlay top-left logo-placeholder"></div>, or as the
   centred logo in a Case Study Teaser's media panel. */
.logo-placeholder {
	background-image: url("../image-assets/logo/logo-80-white.svg");
	--logo-aspect: 1 / 1;
}

/* No square-mark width overrides needed any more: overlays are capped
   by AREA (see .logo-overlay in component-layout.css), so this 1:1
   mark automatically renders at 64 x 64, the same visual weight as a
   wide client wordmark, at every size. */