/* Case studies (single, archive, sector pages). Built from core blocks; reuses the About page's look
   (hero, pink headings, black body text) and the home page's card feel. Loaded on the site and in the editor. */

/* ---- Hero: same geometry as the About hero, but the picture is the post's featured image ---- */
.cs-hero {
	position: relative; overflow: hidden; display: flex; flex-flow: column; justify-content: center; align-items: center;
	height: 50vw; padding-top: 29vw; background-color: var(--footer-blue, #2c3649);
}
.cs-hero .wp-block-post-featured-image { position: absolute; inset: 0; margin: 0; width: 100%; height: 100%; }
.cs-hero .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background-image: linear-gradient(180deg, #000, transparent 35%); pointer-events: none; }
.cs-hero .h1-heading---about-us { position: relative; z-index: 2; }
@media screen and (min-width: 1440px) { .cs-hero { height: 720px; padding-top: 410px; } }
@media screen and (max-width: 991px)  { .cs-hero { height: 60vw; padding-top: 35vw; } }
@media screen and (max-width: 767px)  { .cs-hero { height: 70vw; padding-top: 43vw; } }
@media screen and (max-width: 479px)  { .cs-hero { height: 100vw; padding-top: 66vw; } }

/* ---- Single case study ---- */
.cs-meta { margin-bottom: 2vw; }
.cs-meta .wp-block-post-terms { margin: .5vw 0 0; }
.cs-meta .wp-block-post-terms a { color: var(--black); text-decoration: none; font-size: 1.2vw; font-weight: 500; }
.cs-facts { margin: 1vw 0 2vw; padding: 1.2vw 1.6vw; background: var(--rgb-240, #f0f0f0); border-radius: 4px; }
.cs-facts p { margin: 0 0 .3vw; }
.cs-facts p:last-child { margin-bottom: 0; }
/* The labels are fixed (not typed by editors); the paragraph holds only the answer. */
.cs-facts .cs-client::before { content: "Client: "; font-weight: 700; }
.cs-facts .cs-location::before { content: "Location: "; font-weight: 700; }
.cs-facts .cs-systems::before { content: "Systems: "; font-weight: 700; }
/* On the public page an unanswered fact is hidden (not in the editor, where it must stay visible to type in). */
body:not(.editor-styles-wrapper) .cs-facts p:empty { display: none; }
.cs-gallery { margin-top: 2vw; }
.cs-back { margin-top: 3vw; }
.cs-back a { color: var(--brand-colour-4); font-weight: 600; text-decoration: none; }

/* ---- Archive / sector pages: card grid ---- */
.cs-grid.wp-block-post-template { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2vw; list-style: none; margin: 0; padding: 0; }
.cs-card { text-align: left; }
.cs-card .wp-block-post-featured-image { margin: 0 0 1vw; overflow: hidden; }
.cs-card .wp-block-post-featured-image img { width: 100%; display: block; aspect-ratio: 3 / 2; object-fit: cover; }
.cs-card .wp-block-post-terms { margin: 0 0 .4vw; font-size: 1vw; font-weight: 600; text-transform: uppercase; color: var(--brand-colour-4); }
.cs-card .wp-block-post-terms a { color: inherit; text-decoration: none; }
.cs-card .wp-block-post-title { margin: 0 0 .5vw; font-size: 1.5vw; font-weight: 600; line-height: 1.2; }
.cs-card .wp-block-post-title a { color: var(--footer-blue); text-decoration: none; }
.cs-card .wp-block-post-excerpt { margin: 0; font-size: 1.1vw; font-weight: 500; line-height: 1.5; color: var(--black); }
.cs-card .wp-block-post-excerpt__more-link { display: none; }
.cs-pagination { margin-top: 3vw; }
@media screen and (min-width: 1440px) {
	.cs-meta { margin-bottom: 30px; } .cs-meta .wp-block-post-terms a { font-size: 17px; } .cs-facts { padding: 18px 24px; margin: 15px 0 30px; }
	.cs-grid.wp-block-post-template { gap: 28px; } .cs-card .wp-block-post-terms { font-size: 14px; } .cs-card .wp-block-post-title { font-size: 22px; }
	.cs-card .wp-block-post-excerpt { font-size: 16px; } .cs-card .wp-block-post-featured-image { margin-bottom: 14px; }
}
@media screen and (max-width: 991px) {
	.cs-grid.wp-block-post-template { grid-template-columns: repeat(2, 1fr); gap: 3vw; }
	.cs-meta .wp-block-post-terms a { font-size: 1.7vw; } .cs-card .wp-block-post-terms { font-size: 1.5vw; } .cs-card .wp-block-post-title { font-size: 2.4vw; } .cs-card .wp-block-post-excerpt { font-size: 1.7vw; }
}
@media screen and (max-width: 479px) {
	.cs-grid.wp-block-post-template { grid-template-columns: 1fr; gap: 6vw; }
	.cs-meta .wp-block-post-terms a { font-size: 3.4vw; } .cs-card .wp-block-post-terms { font-size: 3vw; } .cs-card .wp-block-post-title { font-size: 5vw; } .cs-card .wp-block-post-excerpt { font-size: 3.6vw; }
}