/*
 * Offer stage (components/offer-stage/) — shared layer.
 *
 * 1. Baseline: the offers as numbered cards. This is what a visitor without
 *    JS (or with an unknown tool) sees, and what the stage is built from.
 * 2. The stage, [data-gb-offer-ready] (assets/js/components/offer-stage.js):
 *    the tool's navigation + one offer at a time inside its frame. This file
 *    holds only what every tool shares (layout, tab basics, the switch
 *    animation hook); each tool's look is assets/css/components/offer-stage/
 *    {skin}.css, loaded only on its own service page.
 *
 * Hooks for the tools: --gb-offer-i (chosen offer, 0-based), --gb-offer-n
 * (how many), [data-gb-offer-current] (1-based), [data-gb-switch] (set again
 * on every change → restart an animation), --gb-offer-enter (the keyframes a
 * panel arrives with); for tools that play by themselves, [data-gb-playing]
 * and --gb-play-p (0 → 1, how far the current offer has played) — section 3.
 */

/* ---------- 1. Baseline: numbered cards ---------- */

.gb-offer-stage__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
	gap: var(--gb-space-s);
	margin: 0;
	padding: 0;
	list-style: none;
}

.gb-offer-stage__group + .gb-offer-stage__group {
	margin-block-start: var(--gb-space-xl);
}

.gb-offer-stage__group-title {
	margin-block-end: var(--gb-space-s);
	font-size: var(--gb-step-2);
	color: var(--gb-color-navy);
}

.gb-offer {
	position: relative;
	display: grid;
	align-content: start;
	padding: var(--gb-space-m);
	padding-inline-start: calc(var(--gb-space-m) + 0.25rem);
	border: 1px solid var(--gb-border);
	border-radius: var(--gb-radius-l);
	background-color: var(--gb-bg);
}

/* The branch: a turquoise rule at the reading start of each card. */
.gb-offer::before {
	content: "";
	position: absolute;
	inset-block: var(--gb-space-m);
	inset-inline-start: 0;
	inline-size: 4px;
	border-radius: var(--gb-radius-pill);
	background-color: var(--gb-primary);
}

.gb-offer__body {
	display: grid;
	align-content: start;
	gap: var(--gb-space-2xs);
}

.gb-offer__number {
	font-size: var(--gb-step--1);
	font-weight: var(--gb-weight-bold);
	color: var(--gb-accent);
	font-variant-numeric: tabular-nums;
}

.gb-offer__title {
	font-size: var(--gb-step-1);
	color: var(--gb-color-navy);
}

.gb-offer__text {
	color: var(--gb-text-muted);
}

/* The tools' furniture never shows on the baseline. */
.gb-offer-stage:not([data-gb-offer-ready]) :is(.gb-offer-stage__chrome, .gb-offer-stage__overlay, .gb-offer > [aria-hidden="true"], .gb-offer__body > [aria-hidden="true"]:not(.gb-offer__number)) {
	display: none;
}

/* ---------- 2. The stage (shared) ---------- */

.gb-offer-stage[data-gb-offer-ready] {
	display: grid;
	grid-template-columns: minmax(13rem, 0.36fr) minmax(0, 1fr);
	grid-template-areas: "nav screen";
	align-items: center;
	gap: var(--gb-space-l);
}

.gb-offer-stage[data-gb-offer-ready] .gb-offer-stage__nav {
	grid-area: nav;
	min-inline-size: 0;
}

.gb-offer-stage[data-gb-offer-ready] .gb-offer-stage__screen {
	position: relative;
	grid-area: screen;
	min-inline-size: 0;
}

.gb-offer-stage[data-gb-offer-ready] .gb-offer-stage__view {
	position: relative;
	display: grid;
}

/* One offer at a time, all in the same cell (no jump when switching). */
.gb-offer-stage[data-gb-offer-ready] :is(.gb-offer-stage__group, .gb-offer-stage__list) {
	display: contents;
}

.gb-offer-stage[data-gb-offer-ready] .gb-offer-stage__group-title {
	display: none;
}

.gb-offer-stage[data-gb-offer-ready] .gb-offer {
	grid-area: 1 / 1;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

.gb-offer-stage[data-gb-offer-ready] .gb-offer::before {
	content: none;
}

/* Tools give their panels a display (grid, flex); hidden must still win. */
.gb-offer-stage .gb-offer[hidden] {
	display: none !important;
}

.gb-offer-stage[data-gb-offer-ready] .gb-offer:focus-visible {
	outline: 2px solid var(--gb-focus-halo);
	outline-offset: 4px;
}

/* Decoration above the offers (shutter, loading bar, spotlights…); never catches clicks. */
.gb-offer-stage__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}

.gb-offer-stage__chrome:empty,
.gb-offer-stage__nav-head:empty,
.gb-offer-stage__nav-end:empty,
.gb-offer-tab__mark:empty,
.gb-offer-tab__end:empty {
	display: none;
}

/* Tabs: the tool's own navigation. Each tool restyles them. */
.gb-offer-stage__tabs {
	display: grid;
	gap: var(--gb-space-3xs);
}

.gb-offer-tab {
	display: flex;
	align-items: center;
	gap: var(--gb-space-xs);
	inline-size: 100%;
	min-block-size: 2.75rem;
	margin: 0;
	padding: var(--gb-space-2xs) var(--gb-space-xs);
	border: 0;
	border-radius: var(--gb-radius-m);
	background: none;
	color: inherit;
	font: inherit;
	font-weight: var(--gb-weight-medium);
	text-align: start;
	cursor: pointer;
	transition: background-color var(--gb-duration-fast) linear, color var(--gb-duration-fast) linear;
}

.gb-offer-tab__name {
	flex: 1 1 auto;
	min-inline-size: 0;
}

.gb-offer-tab__mark,
.gb-offer-tab__end {
	display: inline-grid;
	flex: none;
	place-items: center;
}

.gb-offer-stage__tabgroup + .gb-offer-stage__tabgroup {
	margin-block-start: var(--gb-space-s);
}

.gb-offer-stage__tabgroup-title {
	margin-block-end: var(--gb-space-3xs);
	padding-inline: var(--gb-space-xs);
	font-size: var(--gb-step--1);
	font-weight: var(--gb-weight-bold);
	color: var(--gb-text-muted);
}

/* The panel arrives (each tool names its own keyframes in --gb-offer-enter). */
@keyframes gb-offer-in {
	from {
		opacity: 0;
		translate: 0 0.75rem;
	}

	to {
		opacity: 1;
		translate: 0 0;
	}
}

@media (prefers-reduced-motion: no-preference) {
	:root:not([data-gb-experience="STATIC_ACCESSIBLE"]) .gb-offer-stage[data-gb-switch] .gb-offer:not([hidden]) {
		/* backwards, not both: once arrived, no transform/filter is left on the panel (it would capture absolutely placed details). */
		animation: var(--gb-offer-enter, gb-offer-in) var(--gb-offer-enter-time, 0.5s) var(--gb-ease-out) backwards;
	}
}

/*
 * Phones: the navigation becomes one row above the tool (swipe sideways);
 * each tool keeps its own look for the row.
 */
@media (max-width: 47.99rem) {
	.gb-offer-stage[data-gb-offer-ready] {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"nav"
			"screen";
		gap: var(--gb-space-s);
	}

	.gb-offer-stage[data-gb-offer-ready] .gb-offer-stage__tabs {
		display: flex;
		gap: var(--gb-space-2xs);
		overflow-x: auto;
		padding-block-end: 0.25rem;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}

	.gb-offer-stage[data-gb-offer-ready] .gb-offer-stage__tabs::-webkit-scrollbar {
		display: none;
	}

	.gb-offer-stage[data-gb-offer-ready] .gb-offer-tab {
		flex: 0 0 auto;
		inline-size: auto;
		white-space: nowrap;
		scroll-snap-align: start;
	}

	.gb-offer-stage[data-gb-offer-ready] .gb-offer-stage__nav-head {
		display: none;
	}
}

/* ---------- 3. Tools that play by themselves ---------- */

/*
 * They keep one size: a hidden offer still takes its room (invisible, and out
 * of the accessibility tree), so the page never jumps when the next offer
 * comes by itself. --gb-offer-display = how the tool lays out a panel.
 */
.gb-offer-stage[data-gb-offer-autoplay][data-gb-offer-ready] .gb-offer[hidden] {
	display: var(--gb-offer-display, grid) !important;
	visibility: hidden;
}

/* The play / pause button. */

/*
 * Added by offer-stage.js inside the tool's screen when the stage has
 * data-gb-offer-autoplay (the phone's stories, the edit suite). Each tool
 * places it (feed.css, timeline.css); this is its shared look: a small
 * round dark button, pause bars while playing, the play triangle once paused.
 */
.gb-offer-play {
	position: absolute;
	z-index: 5;
	display: grid;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	padding: 0;
	border: 1px solid rgb(255 255 255 / 0.35);
	border-radius: 50%;
	background-color: rgb(8 19 31 / 0.55);
	color: var(--gb-color-neutral-0);
	cursor: pointer;
	backdrop-filter: blur(6px);
	transition: background-color var(--gb-duration-fast) linear;
}

.gb-offer-play[hidden] {
	display: none;
}

.gb-offer-play:hover {
	background-color: rgb(8 19 31 / 0.8);
}

.gb-offer-play:focus-visible {
	outline: 2px solid var(--gb-color-neutral-0);
	outline-offset: 2px;
}

.gb-offer-play svg {
	inline-size: 1.1rem;
	block-size: 1.1rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
}

.gb-offer-play__play {
	fill: currentColor;
	stroke: none;
}

.gb-offer-play[data-gb-state="playing"] .gb-offer-play__play,
.gb-offer-play[data-gb-state="stopped"] .gb-offer-play__pause {
	display: none;
}

/* ---------- Real work inside the tools (revision 4) ---------- */

/*
 * An offer with a picture of the company's own work (inc/services-content.php
 * → gb_theme_offer_works()). Baseline (plain cards): the picture on top of
 * the card. Each tool places it in its own way (offer-stage/{tool}.css).
 */
.gb-offer > :is(.gb-os-artwork, .gb-os-clip, .gb-os-plate, .gb-os-scene) {
	display: block;
	inline-size: 100%;
	block-size: auto;
	margin-block-end: var(--gb-space-s);
	border-radius: var(--gb-radius-m);
}