/* ═══════════════════════════════════════════════════════════════════════════
   THE SIDE PROMO, "Šoninė iškaba" — a permanent tab on the right edge that opens
   one card. PORTED from kavosbroliai assets/css/kb-promo.css 1.34.0 (2026-10-29;
   whatajazz → urbanessentials before it). Enqueued only when the component
   renders (inc/esp-promo.php) — toggle off = 0 bytes.

   ESPRESINĖ ADAPTATIONS beyond the prefix rename, each checked here:
   1. CONTRAST: espresine's tokens are the SAME four colours as kavosbroliai
      (ink #0c203e, brass #af8644, paper #f8f8ef, grey #43485a), so the donor's
      computed pairs hold unchanged — tab at rest brass on navy 4.89:1, hover /
      open navy on brass 4.89:1, card text #43485a on cream 8.50:1.
   2. Source order kept: card before tab (inc/esp-promo.php).
   3. BUTTON LANDMINE — checked: esp.css has no bare `button` rule (only the
      scoped `.esp-chips button { all: unset }`), so no armour is needed.
   4. LANDSCAPE: the theme's own band, `(max-height: 500px) and (orientation:
      landscape)` (esp.css "Landscape phones"). The WHOLE component hides.
   5. z-index 30 in the espresine stack: above content and the sticky header
      (20); BELOW the phone menu panel (40), the skip link (50) and the
      Complianz banner. The phone menu and the consent banner always win.

   Brand: radius 0, no shadows, hairlines; the 3px brass strip on top. Tab voice
   = Campton caps. DONOR LOAD-BEARING FACTS (keep): position:relative on the
   card is the ✕'s containing block; visibility+transform pair with the JS's
   transitionend+backstop. NOTHING PERSISTED — see the PHP header.
   ═══════════════════════════════════════════════════════════════════════════ */

.esp-promo {
	position: fixed;
	z-index: 30;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	flex-direction: row;          /* card LEFT of the tab, slid off-screen — the tab never moves */
	pointer-events: none;         /* children re-enable; the gap stays click-through */
}
.esp-promo > * { pointer-events: auto; }

/* ---- the tab ---------------------------------------------------------------- */
.esp-promo__tab {
	display: flex;
	align-items: center;
	width: auto; min-height: 0; min-width: 0; flex: none;
	writing-mode: vertical-rl;
	margin: 0;
	background: var(--esp-ink);
	color: var(--esp-brass);                       /* 4.89:1 on navy */
	border: 1px solid rgba(175, 134, 68, .55);
	border-right: 0;
	border-radius: 0;
	padding: 18px 10px;
	font-family: var(--esp-sans);
	font-weight: 500;
	font-size: 12.5px;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color .15s, background-color .15s, border-color .15s;
}
.esp-promo__tab:hover,
.esp-promo.is-open .esp-promo__tab {                 /* OPEN is a state, not a leftover hover */
	background: var(--esp-brass);
	border-color: var(--esp-brass);
	color: var(--esp-ink);                          /* 4.89:1 on brass */
}

/* ---- the card --------------------------------------------------------------- */
.esp-promo__card {
	width: min(300px, 78vw);
	position: relative;
	background: var(--esp-paper);
	color: var(--esp-ink);
	border: 1px solid rgba(12, 32, 62, .22);
	border-top: 3px solid var(--esp-brass);
	/* Slid out by its own width plus clearance, so nothing peeks at the edge. */
	transform: translateX(calc(100% + 48px));
	visibility: hidden;
	transition: transform .34s cubic-bezier(.2, .7, .3, 1), visibility 0s .34s;
}
.esp-promo.is-open .esp-promo__card {
	transform: translateX(0);
	visibility: visible;
	transition: transform .34s cubic-bezier(.2, .7, .3, 1), visibility 0s;
}

/* Always square, so any poster or product photo drops in without the card resizing. */
.esp-promo__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.esp-promo__body { padding: 20px 20px 22px; }
.esp-promo__body p { margin: 0; }

.esp-promo__title {
	font-family: var(--esp-serif);
	font-weight: 300;
	font-size: 1.2rem;
	line-height: 1.3;
	letter-spacing: 0.02em;
	color: var(--esp-ink);
	margin-bottom: 8px !important;
	padding-right: 28px;                           /* clears the ✕ when there is no image */
}
.esp-promo__text {
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--esp-grey);                    /* 8.50:1 on cream */
	margin-bottom: 18px !important;
}
.theme--esp .esp-promo__cta {
	display: block;
	width: 100%;
	text-align: center;
	padding: 13px 16px;
}

/* ---- close ------------------------------------------------------------------ */
.esp-promo__close {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 1;                                    /* above the image it sits on */
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	margin: 0;
	padding: 0;
	min-height: 0; min-width: 0;
	background: var(--esp-paper);
	color: var(--esp-ink);
	border: 1px solid rgba(12, 32, 62, .22);
	border-radius: 0;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}
.esp-promo__close:hover {
	background: var(--esp-brass);
	border-color: var(--esp-brass);
	color: var(--esp-ink);
}

/* ---- phones: the same tab, smaller ---------------------------------------- */
@media (max-width: 640px) {
	.esp-promo__tab { padding: 14px 8px; font-size: 11px; letter-spacing: 0.1em; }
	.esp-promo__card { width: min(272px, 74vw); }
	.esp-promo__body { padding: 16px 16px 18px; }
	.esp-promo__title { font-size: 1.08rem; }
	.esp-promo__text { font-size: 0.88rem; }
}

/* A sideways phone is ~390px tall: a centred card with a square image cannot
   fit. HIDE THE WHOLE COMPONENT (a tab that opens nothing lies to screen
   readers). Same band as esp.css "Landscape phones". */
@media (max-height: 500px) and (orientation: landscape) {
	.esp-promo { display: none; }
}

/* The slide is decoration; the card still opens, it just arrives. */
@media (prefers-reduced-motion: reduce) {
	.esp-promo__card,
	.esp-promo.is-open .esp-promo__card { transition: none; }
}