/**
 * Seven ESPA — fixed corner banner styles.
 *
 * Scoped to the .se-espa block. No @layer is used on purpose: as a drop-in
 * module the styles must win against a host template's unlayered base CSS,
 * which would otherwise beat any layered rule regardless of specificity.
 */

.se-espa,
.se-espa *,
.se-espa *::before,
.se-espa *::after {
	box-sizing: border-box;
}

.se-espa {
	/* Layout tokens */
	--se-max-inline: 30.625rem;
	--se-offset: 0rem;
	--se-z: 9999;

	/* Handle tokens */
	--se-toggle-size: 1.875rem;
	--se-toggle-target: 2.75rem;
	--se-toggle-radius: 0.25rem;
	--se-toggle-bg: rgba(0, 0, 0, 0.72);
	--se-toggle-bg-hover: rgba(0, 0, 0, 0.9);
	--se-toggle-color: #ffffff;
	--se-collapse-duration: 0.3s;

	/* Focus ring — light ring over a dark halo stays visible on any artwork */
	--se-focus-width: 3px;
	--se-focus-offset: 2px;
	--se-focus-color: #ffffff;
	--se-focus-halo: #000000;

	position: fixed;
	inset-block-end: var(--se-offset);
	z-index: var(--se-z);
	display: flex;
	align-items: stretch;
	inline-size: 100%;
	max-inline-size: var(--se-max-inline);
	/* Clears the iOS home indicator without moving the artwork on other devices. */
	padding-block-end: env(safe-area-inset-bottom, 0px);
}

/* Flow relative insets, so the corner mirrors on right-to-left sites */
.se-espa--left {
	inset-inline-start: var(--se-offset);
}

.se-espa--right {
	inset-inline-end: var(--se-offset);
}

.se-espa__content {
	position: relative;
	flex: 0 0 auto;
	inline-size: 100%;
}

/* The handle takes its width off the artwork rather than covering it */
.se-espa--collapsible .se-espa__content {
	inline-size: calc(100% - var(--se-toggle-size));
}

.se-espa__picture {
	display: block;
}

.se-espa__image {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

.se-espa__content:focus-visible {
	outline: var(--se-focus-width) solid var(--se-focus-color);
	/* Negative offset draws the ring inside: a flush corner banner would clip it. */
	outline-offset: calc(var(--se-focus-width) * -1);
}

/**
 * Dark band under the light ring, so the indicator survives pale artwork.
 * It has to be a positioned pseudo element: an inset shadow paints below the
 * image and would never be seen.
 */
.se-espa__content:focus-visible::after {
	content: '';
	position: absolute;
	inset: 0;
	border: calc(var(--se-focus-width) * 2) solid var(--se-focus-halo);
}

/* Handle: sits on the inner side, keeping the artwork flush in the corner */
.se-espa__toggle {
	position: relative;
	flex: 0 0 var(--se-toggle-size);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background-color: var(--se-toggle-bg);
	color: var(--se-toggle-color);
	cursor: pointer;
	transition: background-color 0.18s ease;
}

.se-espa--right .se-espa__toggle {
	order: -1;
}

/* Round only the free side; the other one meets the artwork */
.se-espa--left .se-espa__toggle {
	border-start-end-radius: var(--se-toggle-radius);
	border-end-end-radius: var(--se-toggle-radius);
}

.se-espa--right .se-espa__toggle {
	border-start-start-radius: var(--se-toggle-radius);
	border-end-start-radius: var(--se-toggle-radius);
}

.se-espa__toggle:hover {
	background-color: var(--se-toggle-bg-hover);
}

.se-espa__toggle:focus-visible {
	outline: var(--se-focus-width) solid var(--se-focus-color);
	outline-offset: var(--se-focus-offset);
	box-shadow: 0 0 0 calc(var(--se-focus-width) + var(--se-focus-offset)) var(--se-focus-halo);
}

/**
 * The pointer target reaches the comfortable 44px while the visible handle
 * stays narrow enough to leave the artwork room.
 */
.se-espa__toggle::before {
	content: '';
	position: absolute;
	inset: calc((var(--se-toggle-target) - var(--se-toggle-size)) / -2);
}

.se-espa__toggle-icon {
	display: block;
	pointer-events: none;
}

/* Chevron points the way the banner is about to travel */
.se-espa--right .se-espa__toggle-icon,
.se-espa--left.se-espa--collapsed .se-espa__toggle-icon {
	rotate: 180deg;
}

.se-espa--right.se-espa--collapsed .se-espa__toggle-icon {
	rotate: 0deg;
}

/**
 * Collapsed: the artwork slides out through its own corner and parks the handle
 * against the edge. The negative margin equals the artwork's own width, so the
 * handle always ends up exactly on the corner, whatever the preset.
 */
.se-espa--left.se-espa--collapsed .se-espa__content {
	margin-inline-start: calc(var(--se-toggle-size) - 100%);
}

.se-espa--right.se-espa--collapsed .se-espa__toggle {
	margin-inline-start: calc(100% - var(--se-toggle-size));
}

/* Hidden rather than transparent: an off screen link must leave the tab order */
.se-espa--collapsed .se-espa__content {
	visibility: hidden;
}

/* Animate only once the restored state is in place, never on first paint */
.se-espa--ready .se-espa__content,
.se-espa--ready .se-espa__toggle {
	transition:
		margin-inline-start var(--se-collapse-duration) ease,
		visibility var(--se-collapse-duration),
		background-color 0.18s ease;
}

.se-espa--ready .se-espa__toggle-icon {
	transition: rotate var(--se-collapse-duration) ease;
}

/* Width presets */
.se-espa--size-s {
	--se-max-inline: 20rem;
}

.se-espa--size-m {
	--se-max-inline: 25rem;
}

.se-espa--size-l {
	--se-max-inline: 30.625rem;
}

/**
 * The two big presets track the viewport: full size on wide screens, 70vw on
 * mid-size ones, and never below the large preset — so phones keep the same
 * flush, full-width banner as before.
 */
.se-espa--size-xl {
	--se-max-inline: clamp(30.625rem, 70vw, 37.5rem);
}

.se-espa--size-xxl {
	--se-max-inline: clamp(30.625rem, 70vw, 45rem);
}

/* Distance from the corner */
.se-espa--offset-none {
	--se-offset: 0rem;
}

.se-espa--offset-s {
	--se-offset: 0.75rem;
}

.se-espa--offset-m {
	--se-offset: 1.5rem;
}

/* Out of the way while the keyboard is on something the banner would cover */
.se-espa--stood-aside {
	visibility: hidden;
}

/* A viewport pinned banner would otherwise repeat on every printed page */
@media print {
	.se-espa {
		display: none;
	}
}