/* Domased Slider
 *
 * Sizing reproduces the live Revolution Slider on domased.sk — see the detailed
 * note on .domased-slider__viewport below; the height is a ratio of the
 * container width, not a fixed value. Slides cross-fade; only the active one is
 * in the accessibility tree and the tab order (the others carry [hidden]).
 */

/* Full-bleed. Revolution Slider's sliderLayout:"fullwidth" spans the whole
   browser width rather than its container, so the slider has to break out of
   the constrained content column it is rendered inside.
   50% resolves against the parent's width and 50vw against the viewport, so
   calc(50% - 50vw) is exactly the distance from the column edge to the viewport
   edge — correct at any width, because the column is horizontally centred.
   Note 100vw includes the scrollbar, so the ancestor needs overflow-x: clip;
   that guard lives in booklovers-child/style.css. */
.domased-slider {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	overflow: hidden;
	background: #f2f0ec;
	font-family: 'Inter', sans-serif;
}

/* Sizing copied from the live slider on domased.sk, which initialises with:
 *     sliderLayout: "fullwidth"
 *     gridwidth:  1920, 1024, 778, 479
 *     gridheight:  639,  450,  400, 300
 *     responsiveLevels: 1240, 1024, 778, 480      (mh: 0 — no minimum)
 *
 * Verbatim from setREVStartSize() on the live page:
 *     for (i in rl) nl[i] = rl[i] < RSIW ? 0 : rl[i];
 *     sl = nl[0]; for (i in nl) if (sl>nl[i] && nl[i]>0) { sl = nl[i]; ix = i; }
 *     m = pw > gw[ix] ? 1 : pw / gw[ix];
 *     newh = gh[ix] * m;
 *
 * Two things follow, and both are easy to get wrong:
 *
 * 1. The level is the SMALLEST responsive level that is still >= the viewport
 *    width, so the switch points are the levels themselves — 1024, 778, 480 —
 *    not "one below" them. A 1200px viewport therefore still uses the 1920x639
 *    grid (giving ~399px), it does not drop to the 1024x450 grid.
 * 2. Height is the grid height scaled by width/gridwidth, and m is clamped to 1,
 *    so the slider never grows past its grid height. That is exactly
 *    aspect-ratio + max-height. */
.domased-slider__viewport {
	position: relative;
	width: 100%;
	aspect-ratio: 1920 / 639;
	max-height: 639px;
}

@media (max-width: 1024px) { .domased-slider__viewport { aspect-ratio: 1024 / 450; max-height: 450px; } }
@media (max-width: 778px)  { .domased-slider__viewport { aspect-ratio: 778 / 400;  max-height: 400px; } }
@media (max-width: 480px)  { .domased-slider__viewport { aspect-ratio: 479 / 300;  max-height: 300px; } }

/* ---- slides ---- */
.domased-slider__slide {
	position: absolute;
	inset: 0;
	background-color: var(--slide-bg, #f2f0ec);
	opacity: 0;
	transition: opacity .6s ease;
}
.domased-slider__slide.is-active { opacity: 1; }
.domased-slider__slide[hidden]   { display: none; }

/* During the cross-fade the outgoing slide is still painted but must not be
   interactive — .is-active is removed before [hidden] is applied. */
.domased-slider__slide:not(.is-active) { pointer-events: none; }

/* Artwork is scaled down inside the slide, so the slide's own background colour
   (--slide-bg, taken from the Revolution Slider record) frames it. `inset: 0`
   plus `margin: auto` centres the shrunk box.

   object-fit is `contain`, not `cover`, so the whole image is always visible.
   All four files are 1920x639 (3:1) — exactly the desktop grid — but the slide
   box is not 3:1 at every size: above a 1920px viewport `max-height` caps the
   height while the width keeps growing (4:1 at 2560px), which made `cover`
   overflow and clip the top and bottom; below desktop the boxes are narrower
   than 3:1, which clipped the sides. `contain` fits the image inside the box in
   both directions instead, letting --slide-bg show in whichever axis is spare. */
.domased-slider {
	--img-scale: 80%;
	/* Global horizontal nudge applied to every slide's artwork. Per-slide
	   `shift_x` values add to this rather than replacing it, so the relative
	   correction on 01-b.jpg is preserved when this is tuned. */
	--img-shift: -45px;
}

.domased-slider__img {
	position: absolute;
	inset: 0;
	margin: auto;
	width: var(--img-scale);
	height: var(--img-scale);
	object-fit: contain;
	object-position: center;
	display: block;
	/* Global nudge (--img-shift) plus an optional per-slide one (--img-shift-x,
	   set from 'shift_x' in the slides array). They add, so a slide with its own
	   correction keeps that correction relative to the rest of the set. */
	transform: translateX(calc(var(--img-shift, 0px) + var(--img-shift-x, 0px)));
}

/* ---- content ----
 *
 * Layer geometry transcribed from the live slider's <rs-layer> attributes:
 *     text    x:c  xo:296,175,159,5    yo:123,100,79,49    s:50,31,24,24
 *     button  x:c  xo:80,84,105,5      yo:497,338,272,228  s:20,19,17,15
 *
 * "x:c" centres the layer and xo pushes it RIGHT of centre — which is why the
 * copy sits in the right-hand half of the slide, clear of the artwork on the
 * left. "yo" is measured from the top of the slide.
 *
 * Those pixels are relative to each responsive grid (1920x639, 1024x450,
 * 778x400, 479x300) and Revolution Slider scales the whole grid to the
 * viewport, so they are expressed here as percentages of the slide, with type
 * in vw — the slider is full-bleed, so 1vw is 1% of the slide. The min() caps
 * stop the type growing past its design size above the grid width, matching
 * enableUpscaling:false in the slider config.
 *
 * NOTE: the horizontal xo values above are recorded for reference but are NOT
 * used. On the live slider every layer is positioned independently — each slide
 * has its own text xo (296/301/262/231) and button xo (80/75/32/59) — so both
 * the copy and the button shift position as the slides change. Here all four
 * slides share one left edge (--col-lx) and the button sits at the start of the
 * text, so nothing moves between slides. Only the VERTICAL offsets still come
 * from the layer data (--text-top, --btn-dy).
 */
.domased-slider__inner {
	position: absolute;
	inset: 0;
	z-index: 2;

	/* level 1 — viewport >= 1025px, grid 1920x639.
	   --col-lx is the shared LEFT edge of the copy, identical on every slide. */
	--col-lx:     50%;
	--col-tx:     0;
	--text-top:   19.25%;
	--text-w:     max-content;
	--text-maxw:  44%;
	--text-size:  min(50px, 2.6042vw);
	--text-lh:    1.2;
	--text-ls:    min(2px, 0.1042vw);
	--text-align: left;
	/* Button offset DOWN FROM THE COLUMN TOP: the live layers sit at y=123 and
	   y=497 on the 1920x639 grid, so the gap is 374px => 374/1920 = 19.4792vw. */
	--btn-lx:     0;
	--btn-tx:     0;
	--btn-dy:     min(374px, 19.4792vw);
	--btn-size:   min(20px, 1.0417vw);
	--btn-ls:     min(3px, 0.1563vw);
	--btn-pad-x:  min(25px, 1.3021vw);
}

/* level 2 — grid 1024x450 */
@media (max-width: 1024px) {
	.domased-slider__inner {
		--col-lx:    50%;         --text-top: 22.22%;
		--text-size: 3.0273vw; --text-lh:  1.161;    --text-ls:    0.0977vw;
		--btn-dy:    23.2422vw;   /* (338-100)/1024 */
		--btn-size:  1.8555vw; --btn-ls:   0.2930vw; --btn-pad-x:  2.4414vw;
	}
}
/* level 3 — grid 778x400 */
@media (max-width: 778px) {
	.domased-slider__inner {
		--col-lx:    50%;         --text-top: 19.75%;
		--text-size: 3.0848vw; --text-lh:  1.167;    --text-ls:    0.1285vw;
		--btn-dy:    24.8072vw;   /* (272-79)/778 */
		--btn-size:  2.1851vw; --btn-ls:   0.3856vw; --btn-pad-x:  3.2134vw;
	}
}
/* level 4 — grid 479x300. Here the live slider pins the copy to a fixed 305px
   block and centres the text inside it (w:305px, a:center), so the authored
   <br> breaks are joined by ordinary wrapping. */
@media (max-width: 480px) {
	.domased-slider__inner {
		--col-lx:    50%; --col-tx: -50%;  --text-top: 16.33%;
		--text-w:    63.7%;    --text-maxw: 63.7%;
		--text-size: 5.0104vw; --text-lh:  1.208;    --text-ls:    0.2087vw;
		--text-align: center;
		--btn-lx: 50%; --btn-tx: -50%; --btn-dy: 37.3695vw;  /* (228-49)/479, centred */
		--btn-size:  3.1315vw; --btn-ls:   0.6263vw; --btn-pad-x:  5.2192vw;
	}
}

/* Text and button share this column, which carries the horizontal position.
   The live layers are auto-width — their width is set by the longest authored
   line, since the copy carries its own <br> breaks — so max-content reproduces
   that, and the button can then anchor to the column's left edge, i.e. to where
   the text begins. --text-maxw is only a guard against overflow. */
.domased-slider__col {
	position: absolute;
	/* Anchored by its LEFT edge at one shared value, not by its centre. The live
	   slider centres each layer at its own xo (296/301/262/231), and because the
	   column is max-content wide — its width set by that slide's longest line —
	   centring made the left edge land in a different place on every slide, so
	   the copy visibly shifted as the slides changed. Anchoring the left edge
	   pins all four to the same start. */
	left: var(--col-lx);
	top: var(--text-top);
	transform: translateX(var(--col-tx));
	width: var(--text-w);
	max-width: var(--text-maxw);
}

.domased-slider__text {
	margin: 0;
	/* Revolution Slider style ".tp-caption.Fashion-BigDisplay" — the class the
	   live text layers carry: Playfair Display, weight 400. The layer overrides
	   its colour to #000000 via data-color. (The layers also carry .sliderfont /
	   .sliderfontb, but neither has any CSS on the live site — checked all 28
	   stylesheets and the Customizer CSS — so they are inert markup hooks.) */
	font-family: "Playfair Display", serif;
	font-weight: 400;
	color: #000;
	font-size: var(--text-size);
	line-height: var(--text-lh);
	letter-spacing: var(--text-ls);
	text-align: var(--text-align);
}

/* Highlighted words inside the slide copy: Inter bold against the Playfair
   body text. Inter is self-hosted by the child theme (@font-face for weights
   400 and 700 in booklovers-child/style.css), so no extra font request. */
.domased-slider__text .domased-slider__em {
	font-family: 'Inter', sans-serif;
	font-weight: 700;
}

.domased-slider__btn {
	/* Anchored to the column's left edge, so it lines up with the first character
	   of the text. Its vertical offset is measured DOWN FROM THE COLUMN, not from
	   the slide, because percentages here would resolve against the column's own
	   (auto) height — hence --btn-dy in vw. The slider is full-bleed, so 1vw is
	   1% of the slide, and the min() caps mirror the height cap above 1920px. */
	position: absolute;
	left: var(--btn-lx);
	top: var(--btn-dy);
	transform: translateX(var(--btn-tx));
	display: inline-block;
	/* Restyled to the domased-home.png comp (2026-08-06). It was Revolution
	   Slider's ".tp-caption.botton-slider": filled #121212, white label, 5px
	   radius. The comp draws an OUTLINE pill instead — 2px #292929, no fill, so
	   the slide colour shows through, with a dark label.

	   Measured off the comp: 228 x 60 outer, 2px border, 24px corner radius,
	   label ~20px with wide tracking. The radius is expressed in em so it tracks
	   --btn-size as the slider scales down (1.2em x 20px = the 24px measured);
	   a fixed 24px would read as far rounder on the mobile-sized button.
	   line-height 2.8 not 3: the comp's 60px is the OUTER box, and the 2px
	   border top and bottom comes out of it first.

	   The dark outline is safe on every slide — the four backgrounds are
	   #FFBC00, #8CD5FC, #B08750, #8CD5FC, giving 8.6:1, 9.0:1 and 4.5:1. Check
	   again before adding a dark slide. */
	padding: 0 var(--btn-pad-x);
	border: 2px solid #292929;
	border-radius: 1.2em;
	background: transparent;
	color: #292929;
	font-family: 'Inter', sans-serif;
	font-size: var(--btn-size);
	font-weight: 700;
	line-height: 2.8;
	letter-spacing: var(--btn-ls);
	white-space: nowrap;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}
/* The comp shows no hover state; inverting the outline is the natural pairing
   and keeps the label's contrast high whatever the slide colour underneath. */
.domased-slider__btn:hover,
.domased-slider__btn:focus {
	background: #292929;
	border-color: #292929;
	color: #fff;
}

/* ---- arrows / play-pause ---- */
.domased-slider__nav,
.domased-slider__playpause {
	position: absolute;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(20, 17, 14, .25);
	border-radius: 50%;
	background: rgba(255, 255, 255, .85);
	color: #14110e;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.domased-slider__nav:hover,
.domased-slider__playpause:hover {
	background: #14110e;
	color: #FFBC00;
}

.domased-slider__nav--prev { top: 50%; left: 16px;  transform: translateY(-50%); }
.domased-slider__nav--next { top: 50%; right: 16px; transform: translateY(-50%); }
.domased-slider__playpause { bottom: 16px; right: 16px; }

/* Play/pause glyph drawn in CSS so there is no icon-font dependency. */
.domased-slider__playpause-icon {
	display: block;
	width: 12px;
	height: 14px;
	border-left: 4px solid currentColor;
	border-right: 4px solid currentColor;
	box-sizing: border-box;
}
.domased-slider__playpause.is-paused .domased-slider__playpause-icon {
	width: 0;
	height: 0;
	border-left: 12px solid currentColor;
	border-right: 0;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	margin-left: 3px;
}

@media (max-width: 778px) {
	.domased-slider__nav { width: 38px; height: 38px; }
	.domased-slider__nav--prev { left: 8px; }
	.domased-slider__nav--next { right: 8px; }
	.domased-slider__playpause { width: 38px; height: 38px; bottom: 10px; right: 10px; }
}

/* ---- progress bar (matches the old slider: 5px, top, translucent dark) ---- */
.domased-slider__progress {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 3;
	height: 5px;
	background: transparent;
}
.domased-slider__progress-bar {
	display: block;
	width: 0;
	height: 100%;
	background: rgba(0, 0, 0, .15);
}

/* Respect a reduced-motion preference: no cross-fade, and slider.js also
   disables autoplay so nothing moves unless the visitor asks it to. */
@media (prefers-reduced-motion: reduce) {
	.domased-slider__slide { transition: none; }
	.domased-slider__progress { display: none; }
}