/*
 * Shared base for all GSF blocks. Uses tokens only.
 */
/*
 * Full-width blocks keep their content as wide as Avada's boxed content (--gsf-content-width,
 * the site width) and add the gutter outside it, so their content lines up with blocks in a
 * normal Avada container: .gsf-x__inner { max-width: var(--gsf-content-outer); padding-inline: var(--gsf-space-gutter); }
 */
.gsf-block {
	--gsf-content-outer: calc(var(--gsf-content-width) + 2 * var(--gsf-space-gutter));
	box-sizing: border-box;
	container-type: inline-size;
	font-family: var(--gsf-font-body);
	font-size: var(--gsf-text-body);
	line-height: var(--gsf-text-body-line-height);
	letter-spacing: var(--gsf-text-body-letter-spacing);
	color: var(--gsf-color-text);
}

.gsf-block *,
.gsf-block *::before,
.gsf-block *::after {
	box-sizing: inherit;
}

.gsf-block :where(a, button, [tabindex]):focus-visible {
	outline: var(--gsf-focus-ring);
	outline-offset: var(--gsf-focus-offset);
}

/*
 * Shared building blocks. Selectors repeat .gsf-block (.gsf-block.gsf-block) to get the same
 * weight as block rules, so Avada's content rules (.post-content h2, a) never win.
 */

/* Heading: label + title (GSF_Renderer::heading()) and intro. The block's text colour applies;
   the label is the inverse of it. Blocks only position these, they do not restyle them.
   Title colour: --gsf-head-title-color when the block sets it on its own (light) background,
   usually var(--gsf-head-style-color) = the site's colour for that heading style (Avada
   H1/H2/H3 colour); otherwise the block's text colour, which is readable on its background. */
.gsf-block.gsf-block .gsf-head__label {
	display: inline-block;
	margin-bottom: var(--gsf-space-3);
	padding: 0.45em 0.75em 0.4em;
	background: var(--gsf-head-label-bg, var(--gsf-color-text));
	color: var(--gsf-head-label-fg, var(--gsf-on-color-text));
	font-family: var(--gsf-font-body);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	transform: rotate(-1.3deg);
}

.gsf-block.gsf-block .gsf-head__title {
	--gsf-head-style-color: var(--gsf-color-heading-2);
	max-width: 16ch;
	margin: 0;
	color: var(--gsf-head-title-color, inherit);
	font-family: var(--gsf-font-heading);
	font-weight: 400;
	font-size: var(--gsf-text-h2);
	line-height: var(--gsf-text-h2-line-height);
	letter-spacing: var(--gsf-text-h2-letter-spacing);
	text-transform: var(--gsf-text-h2-transform);
	text-wrap: balance;
	overflow-wrap: break-word;
	hyphens: auto;
}

.gsf-block.gsf-block .gsf-head__title--h1 {
	--gsf-head-style-color: var(--gsf-color-heading-1);
	font-size: var(--gsf-text-h1);
	line-height: var(--gsf-text-h1-line-height);
	letter-spacing: var(--gsf-text-h1-letter-spacing);
	text-transform: var(--gsf-text-h1-transform);
}

.gsf-block.gsf-block .gsf-head__title--h3 {
	--gsf-head-style-color: var(--gsf-color-heading-3);
	font-size: var(--gsf-text-h3);
	line-height: var(--gsf-text-h3-line-height);
	letter-spacing: var(--gsf-text-h3-letter-spacing);
	text-transform: var(--gsf-text-h3-transform);
}

/* Heading display "Band" (heading_display=band): white capitals on a black band, line by line,
   like the page titles of the GSF sites (Avada title bar, .title-black-bg). */
.gsf-block.gsf-block[class*="--heading-display-band"] .gsf-head__title {
	max-width: 22ch;
	line-height: 1.55;
	text-transform: uppercase;
}

.gsf-block.gsf-block[class*="--heading-display-band"] .gsf-head__title-text {
	padding: 0 0.3em;
	background: var(--gsf-color-text);
	color: var(--gsf-on-color-text);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.gsf-block.gsf-block .gsf-head__intro {
	max-width: 50ch;
	margin: var(--gsf-space-3) 0 0;
	color: inherit;
	font-size: var(--gsf-text-body);
}

/* Buttons (GSF_Renderer::button()). Primary: --gsf-button-bg / --gsf-button-fg, default the
   accent colour; a block on its own background sets them (e.g. the inverse of its colours).
   Secondary: an outline in the current text colour. */
.gsf-block.gsf-block .gsf-button {
	display: inline-flex;
	align-items: center;
	gap: var(--gsf-space-2);
	min-height: 44px;
	padding: 0.7em 1.25em;
	border-radius: var(--gsf-radius);
	background: var(--gsf-button-bg, var(--gsf-color-accent));
	color: var(--gsf-button-fg, var(--gsf-on-color-accent));
	font-family: var(--gsf-font-body);
	font-size: var(--gsf-text-body);
	font-weight: 700;
	line-height: 1.1;
	text-decoration: none;
	transition: filter 0.15s ease, background-color 0.15s ease;
}

.gsf-block.gsf-block .gsf-button--secondary {
	background: transparent;
	color: inherit;
	box-shadow: inset 0 0 0 2px currentColor;
}

.gsf-block .gsf-button svg {
	flex: none;
	transition: transform 0.2s ease;
}

.gsf-block .gsf-button:hover {
	filter: brightness(0.92);
}

.gsf-block.gsf-block .gsf-button--secondary:hover {
	filter: none;
	background: color-mix(in srgb, currentColor 12%, transparent);
}

.gsf-block .gsf-button:hover svg {
	transform: translateX(4px);
}

.gsf-block .gsf-button:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

.gsf-block .gsf-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gsf-space-3);
}

/* Own icon images (GSF_Renderer::icon()): fill the icon box the block gives them. */
.gsf-block .gsf-icon-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
}

/* Arc at the bottom edge of a photo, like the arcs over photos on the GSF sites. The photo box
   itself gets the arc as its bottom edge (a mask), so whatever lies below (the card) shows
   through. Not an overlay in the card colour: an overlay and the photo clipped at the same edge
   left a hairline of the photo while a card lifted or the photo zoomed (0.9.2). */
.gsf-block .gsf-arc {
	--gsf-arc-mask: radial-gradient(75% 14% at 40% 100%, transparent 97%, #000000 100%);
	overflow: hidden;
	-webkit-mask-image: var(--gsf-arc-mask);
	mask-image: var(--gsf-arc-mask);
}

/* "This is a link" cue on an item whose title is the link (GSF_Renderer::cue()). */
.gsf-block .gsf-cue {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin-top: var(--gsf-space-3);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.gsf-block .gsf-cue svg {
	flex: none;
	transition: transform 0.22s ease;
}

.gsf-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/*
 * Visibility per screen size (Avada's "Element Visibility" field). Media queries cannot use
 * custom properties, so the breakpoints are fixed here: Avada's visibility_small (640) and
 * visibility_medium (1024), identical on all GSF sites.
 */
@media (max-width: 640px) {
	.gsf-hide-small {
		display: none !important;
	}
}

@media (min-width: 641px) and (max-width: 1024px) {
	.gsf-hide-medium {
		display: none !important;
	}
}

@media (min-width: 1025px) {
	.gsf-hide-large {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gsf-block * {
		transition: none !important;
		animation: none !important;
	}
}

/*
 * Shared mobile slider (.gsf-slider), used by every block that lists items.
 * (Opt-in wide mode below: data-gsf-slider-wide, with previous/next buttons.)
 *
 * Below a 520px block width the list becomes a horizontal scroll-snap slider: items are 85%
 * wide so the next one peeks in, and each swipe stops on an item. It works without JavaScript;
 * core/slider.js adds dots and keyboard focus while the list actually scrolls.
 * Blocks only style their items and their wide layout (inside @container (min-width: 520px)),
 * never the narrow layout of the list itself, so all sliders behave the same.
 * Colours follow currentColor (the block's text colour), so they work on any background.
 */
@container (max-width: 519.98px) {
	.gsf-block .gsf-slider {
		--gsf-slider-ring: 8px; /* room for focus rings and hover lifts inside the scroller */
		display: flex;
		gap: 0.75rem;
		margin: calc(-1 * var(--gsf-slider-ring));
		padding: var(--gsf-slider-ring);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--gsf-slider-ring);
		scrollbar-width: none;
	}

	.gsf-block .gsf-slider::-webkit-scrollbar {
		display: none;
	}

	.gsf-block .gsf-slider > * {
		flex: 0 0 85%;
		min-width: 0;
		scroll-snap-align: start;
	}

	/* The last item can never reach the start, so it snaps to the end: otherwise the end of the
	   list is not a snap position and scrolling there (dots, buttons) is pulled back. */
	.gsf-block .gsf-slider > :last-child {
		scroll-snap-align: end;
	}
}

@container (min-width: 520px) {
	/*
	 * Wide mode, opt-in with data-gsf-slider-wide: the list stays a slider on wide screens too.
	 * Items get a fixed width (--gsf-slider-item, set by the block), navigation is the
	 * previous/next buttons (.gsf-slider-nav, placed by the block), no dots, no scrollbar.
	 */
	.gsf-block .gsf-slider[data-gsf-slider-wide] {
		--gsf-slider-ring: 8px;
		display: flex;
		gap: var(--gsf-slider-gap, 18px);
		margin: calc(-1 * var(--gsf-slider-ring));
		padding: var(--gsf-slider-ring);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--gsf-slider-ring);
		scrollbar-width: none;
	}

	.gsf-block .gsf-slider[data-gsf-slider-wide]::-webkit-scrollbar {
		display: none;
	}

	.gsf-block .gsf-slider[data-gsf-slider-wide] > * {
		flex: 0 0 var(--gsf-slider-item, 330px);
		min-width: 0;
		scroll-snap-align: start;
	}

	.gsf-block .gsf-slider[data-gsf-slider-wide] > :last-child {
		scroll-snap-align: end;
	}

	/*
	 * Bleed, opt-in with .gsf-slider--bleed: the slider runs on to the right edge of the block,
	 * while it starts on the content edge. Assumes the standard full-width block layout
	 * (content within --gsf-content-outer with --gsf-space-gutter padding, in a 100%-width container).
	 */
	.gsf-block .gsf-slider--bleed[data-gsf-slider-wide] {
		--gsf-slider-bleed: calc((100cqi - min(100cqi, var(--gsf-content-outer))) / 2 + var(--gsf-space-gutter));
		margin-right: calc(-1 * var(--gsf-slider-bleed));
		padding-right: var(--gsf-space-gutter);
	}
}

/* Previous/next buttons for wide mode; hidden on narrow screens (dots there) and when nothing scrolls. */
.gsf-block .gsf-slider-nav {
	display: flex;
	gap: var(--gsf-space-2);
}

.gsf-block .gsf-slider-nav[hidden] {
	display: none;
}

@container (max-width: 519.98px) {
	.gsf-block .gsf-slider-nav {
		display: none;
	}
}

.gsf-block .gsf-slider-button {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin: 0;
	padding: 0;
	border: 2px solid currentColor;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}

.gsf-block .gsf-slider-button svg {
	width: 19px;
	height: 19px;
}

.gsf-block .gsf-slider-button:hover:not(:disabled) {
	background: currentColor;
}

.gsf-block .gsf-slider-button:hover:not(:disabled) svg {
	color: var(--gsf-slider-button-hover, var(--gsf-color-surface));
}

.gsf-block .gsf-slider-button:disabled {
	opacity: 0.35;
	cursor: default;
}

.gsf-block .gsf-slider-button:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

.gsf-block .gsf-slider:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 2px;
}

.gsf-block .gsf-slider-dots {
	display: flex;
	justify-content: center;
	gap: var(--gsf-space-1);
	margin-top: var(--gsf-space-3);
}

.gsf-block .gsf-slider-dots[hidden] {
	display: none;
}

/* Each dot is a 24px target (WCAG 2.5.8) with a small visible dot. */
.gsf-block .gsf-slider-dot {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.gsf-block .gsf-slider-dot::before {
	content: "";
	width: 10px;
	height: 10px;
	border: 2px solid currentColor;
	border-radius: 50%;
	transition: background-color 0.15s ease;
}

.gsf-block .gsf-slider-dot[aria-current="true"]::before {
	background: currentColor;
}

.gsf-block .gsf-slider-dot:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 0;
	border-radius: 50%;
}

/* Mouse dragging (core/slider.js): grab cursor while there is something to scroll; no snap and
   no text selection during a drag. */
.gsf-block .gsf-slider.is-draggable {
	cursor: grab;
}

.gsf-block .gsf-slider.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
	user-select: none;
}

.gsf-block .gsf-slider.is-dragging a {
	pointer-events: none;
}

/* Dots are for narrow screens only (after the base dot rules, so this wins). */
@container (min-width: 520px) {
	.gsf-block .gsf-slider-dots {
		display: none;
	}
}