/* ==========================================================================
   GrowthStudioz, Case Studies page grid

   Off Adarsh's Figma frames, 26th September 2026.

   Bar (white, edge to edge, 1px #EAEAEA under it, 24px above and below):
     tab       radius 8, padding 8 / 16, DM Sans 16px; 12px apart
               idle    #F1F1F1, text 400 #545454
               picked  #FFE0E0, 1px #E11D2E border, text 500 #000
     count     14px #545454, "Showing" 500, "17 / 17 Case Studies" 700
   Heading: the logo (the division's, once one is picked), 16px to its line,
     16px #545454; 48px to the cards; 60px under the bar
   Cards: 3 columns (2 below 1200), 24 across and 32 down; white, radius 16,
     padding 24, 24 between parts, shadow 0 4 4 black 25%; picture radius 16
   Phone: tabs wrap, the count under them; one card per row

   The bar stays pinned while the cards scroll (Adarsh): sticky, inside this
   section, so it lets go when the grid ends. Not on phones, where the tabs
   wrap to three rows and pinned they would hold a quarter of the screen.
   ========================================================================== */

.gs-casegrid {
	/* Edge to edge: out of main's side padding, with the width cap lifted
	   (core's constrained layout sets both, !important on the margins). */
	margin-inline: calc(var(--gs-gutter-now) * -1) !important;
	max-width: none !important;
	background: #FAFAFA;
}

/* Filtered-out cards and the empty note use the hidden attribute. The card
   is display:flex, which beats the browser's own [hidden] rule. */
.gs-casegrid [hidden] {
	display: none !important;
}

/* --- the bar -------------------------------------------------------------- */

.gs-casegrid__bar {
	position: sticky;
	/* Under the admin bar for a logged-in editor; 0 for visitors. Under the
	   site header too while it is showing: the header now stays at the top
	   and slides away on scroll down (header.js sets --gs-header-h and
	   gs-header-hidden), so the bar follows it, in step. */
	top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--gs-header-h, 0px));
	transition: top 240ms var(--gs-ease-out);
	/* Above the cards, below the header's menus. */
	z-index: calc(var(--gs-z-sticky) - 1);
	border-bottom: 1px solid #EAEAEA;
	background: var(--gs-white);
}

html.gs-header-hidden .gs-casegrid__bar {
	top: var(--wp-admin--admin-bar--height, 0px);
	transition-duration: 180ms;
}

@media (prefers-reduced-motion: reduce) {
	.gs-casegrid__bar {
		transition: none;
	}
}

.gs-casegrid__bar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gs-space-3) var(--gs-space-5);
	padding: var(--gs-space-5) var(--gs-gutter-now);   /* 24px */
}

.gs-casegrid__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gs-space-3);                /* 12px */
	margin: 0;
	padding: 0;
	list-style: none;
}

.gs-casegrid__tabs > li {
	margin: 0;
}

.gs-casegrid__tab {
	display: inline-flex;
	align-items: center;
	padding: var(--gs-space-2) var(--gs-space-4);      /* 8px 16px */
	/* On every tab, transparent when idle, so picking one never changes
	   its size or nudges its neighbours. */
	border: 1px solid transparent;
	border-radius: var(--gs-radius);       /* 8px */
	background: var(--gs-grey-l);          /* #F1F1F1 */
	color: var(--gs-text-grey);            /* #545454 */
	font-size: var(--gs-b3);               /* 16px */
	font-weight: var(--gs-weight-regular);
	line-height: 1.3;
	text-decoration: none;
	white-space: nowrap;
	transition:
		background-color var(--gs-dur-hover) ease,
		border-color var(--gs-dur-hover) ease,
		color var(--gs-dur-hover) ease;
}

/* a.gs-casegrid__tab, not a bare class: base.css turns every link that is
   not a .gs-btn red on hover, and that rule outranks a single class. */
@media (hover: hover) and (pointer: fine) {
	a.gs-casegrid__tab:hover {
		background: #E6E6E6;
		color: var(--gs-black);
	}
}

.gs-casegrid__tab:focus-visible {
	outline: 2px solid var(--gs-accent);
	outline-offset: 2px;
}

.gs-casegrid__tab.is-active,
.gs-casegrid__tab.is-active:hover {
	border-color: var(--gs-pm-red);        /* #E11D2E */
	background: #FFE0E0;
	color: var(--gs-black);
	font-weight: var(--gs-weight-medium);
}

.gs-casegrid__count {
	flex: none;
	margin: 0;
	max-width: none;
	color: var(--gs-text-grey);
	font-size: var(--gs-b4);               /* 14px */
	font-weight: var(--gs-weight-medium);
	line-height: 1.3;
	white-space: nowrap;
}

.gs-casegrid__count strong {
	font-weight: var(--gs-weight-bold);
}

/* --- heading -------------------------------------------------------------- */

.gs-casegrid__main {
	padding: 3.75rem var(--gs-gutter-now) 5rem;        /* 60 top, 80 bottom */
}

.gs-casegrid__head {
	/* As wide as the heading, so the roll is seen from straight in front of
	   it rather than from the middle of the page, where it leaned. */
	width: fit-content;
	max-width: 100%;
	margin-block-end: var(--gs-space-7);   /* 48px */
	/* Depth for the roll: the header's 500px is for a 40px logo; this block
	   is three or four times as tall, so the same look needs more distance. */
	perspective: 1600px;
}

/*
 * The die, the same roll as the header's logo on a division page (Adarsh,
 * 26th September 2026): two faces in one slot, the heading at the front and
 * the next one underneath, facing down. Picking a tab puts that heading on
 * the bottom face and the die rolls up a quarter turn, so the new heading
 * comes up from below as the old one goes over the top. The script then puts
 * the new heading on the front and sets the die back without a transition,
 * ready for the next roll. --gs-die-d, half the slot's height, is set by the
 * script as each roll starts, since the headings are different heights.
 */
.gs-casegrid__die {
	--gs-die-d: 3.5rem;

	display: grid;
	align-items: start;
	justify-items: start;
	transform-style: preserve-3d;
	transform: translateZ(calc(var(--gs-die-d) * -1)) rotateX(0deg);
}

.gs-casegrid__die.is-rolling {
	transform: translateZ(calc(var(--gs-die-d) * -1)) rotateX(90deg);
	/* The header's roll: its duration and curve. */
	transition: transform 0.6s cubic-bezier(0.3, 0.8, 0.25, 1);
}

.gs-casegrid__face {
	display: inline-flex;
	flex-direction: column;
	grid-area: 1 / 1;
	gap: var(--gs-space-4);                /* 16px */
	max-width: 100%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.gs-casegrid__face--front {
	transform: translateZ(var(--gs-die-d));
}

/* Underneath, facing down, until the die rolls it up to the front. */
.gs-casegrid__face--next {
	transform: rotateX(-90deg) translateZ(var(--gs-die-d));
}

.gs-casegrid__title {
	margin: 0;
	max-width: none;
	color: var(--gs-black);
	font-size: var(--gs-h3);
	line-height: 1.1;
	letter-spacing: 0;
}

.gs-casegrid__logo {
	display: block;
	max-width: 100%;
	height: auto;
}

.gs-casegrid__line {
	margin: 0;
	max-width: none;
	color: var(--gs-text-grey);
	font-size: var(--gs-b3);               /* 16px */
	line-height: 1.3;
}

/* --- the cards ------------------------------------------------------------ */

.gs-casegrid__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--gs-space-6) var(--gs-space-5);          /* 32 down, 24 across */
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The shared card, restyled for this grid (Adarsh's card frame): the
   carousel's width, border and 12px corners give way to a raised white card. */
.gs-casegrid .gs-case {
	gap: var(--gs-space-5);                /* 24px */
	width: auto;
	margin: 0;
	padding: var(--gs-space-5);            /* 24px */
	border: 0;
	border-radius: var(--gs-space-4);      /* 16px */
	background: var(--gs-white);
	box-shadow: 0 4px 4px rgb(0 0 0 / 25%);
}

/* The whole card is the link (case-studies.css). No border here, so the hover
   lifts the shadow instead. */
@media (hover: hover) and (pointer: fine) {
	.gs-casegrid .gs-case:hover {
		box-shadow: 0 8px 18px rgb(0 0 0 / 22%);
	}
}

/* Spacing comes from the card's gap now. */
.gs-casegrid .gs-case__banner {
	margin-bottom: 0;
}

/* Off the card frame's inspector (Adarsh, 26th September 2026):
     picture   362.67 x 268.69, radius 21.05
     client    202 x 34.45; 12px to the text
     text      16px / 144%, #737373, bold 700 in the red (phone 14px / 140%)
     rows      a block padded 8px all round (so 12 + 8 = 20 under the
               text); rows 8px apart; the division logo column 78px, 14px
               to its tags
     tags      #CDCDCD pill, padding 5 / 13, 14px #000, 12px apart */
.gs-casegrid .gs-case__img {
	aspect-ratio: 362.67 / 268.69;
	border-radius: 1.3156rem;              /* 21.05px */
}

.gs-casegrid .gs-case__body {
	gap: var(--gs-space-3);                /* 12px */
	padding: 0;
}

.gs-casegrid .gs-case__client {
	height: 2.1531rem;                     /* 34.45px */
	max-width: 100%;
}

.gs-casegrid .gs-case__text {
	color: var(--gs-body-soft);            /* #737373 */
	font-size: var(--gs-b3);               /* 16px */
	line-height: 1.44;
}

.gs-casegrid .gs-case__text strong,
.gs-casegrid .gs-case__text b {
	font-weight: var(--gs-weight-bold);
}

/* Still pushed to the card's base so rows line up across a row of cards. */
.gs-casegrid .gs-case__rows {
	gap: var(--gs-space-2);                /* 8px */
	padding: var(--gs-space-2);            /* 8px all round */
}

.gs-casegrid .gs-case__row {
	grid-template-columns: 4.875rem minmax(0, 1fr);    /* 78px */
	gap: 0.875rem;                         /* 14px */
}

.gs-casegrid .gs-case__brand-logo {
	height: 1.7294rem;                     /* 27.67px */
}

.gs-casegrid .gs-case__tags {
	gap: var(--gs-space-2) var(--gs-space-3);          /* 8 down, 12 across */
}

.gs-casegrid .gs-case__tag {
	padding: 0.3106rem 0.8069rem;          /* 4.97 / 12.91 */
	background: #CDCDCD;
	color: var(--gs-black);
	font-size: var(--gs-b4);               /* 14px */
	line-height: 1.3;
}

.gs-casegrid__none {
	margin: 0;
	max-width: none;
	color: var(--gs-text-grey);
	font-size: var(--gs-b3);
}

/* --- smaller screens ------------------------------------------------------ */

/* Two across until 1200: three in a 1024 window came out 267px each, too
   narrow for a card's division rows, which wrapped a tag per line. */
@media (max-width: 1199px) {
	.gs-casegrid__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	/* Not pinned on a phone: see the note at the top. */
	.gs-casegrid__bar {
		position: static;
	}

	/* Phone frame: 20px above and below, tabs 8px apart, the count under
	   them at 13px. */
	.gs-casegrid__bar-inner {
		flex-direction: column;
		align-items: flex-start;
		padding-block: 1.25rem;            /* 20px */
	}

	.gs-casegrid__tabs {
		gap: var(--gs-space-2);            /* 8px */
	}

	.gs-casegrid__count {
		font-size: 0.8125rem;              /* 13px */
	}

	.gs-casegrid__main {
		padding-block: var(--gs-space-6) var(--gs-space-7);  /* 32 / 48 */
	}

	.gs-casegrid__head {
		margin-block-end: var(--gs-space-5);   /* 24px */
	}

	.gs-casegrid__line {
		font-size: var(--gs-b4);           /* 14px */
	}

	.gs-casegrid__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--gs-space-5);            /* 24px */
	}

	/* The phone card keeps the desktop card's 24px padding, 24px gaps and
	   picture shape (302 x 223.75 is the same ratio); only its text steps
	   down, to 14px at 140%. */
	.gs-casegrid .gs-case__text {
		font-size: var(--gs-b4);           /* 14px */
		line-height: 1.4;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gs-casegrid__die,
	.gs-casegrid__die.is-rolling,
	.gs-casegrid__face--front {
		transform: none;
		transition: none;
	}
}