/* ── SP2 Blocks — Hero / Apartments Showcase / Gallery ────────────────────────
   Shares tokens with fp-sp2.css (--sp2-accent, --sp2-dark, --sp2-font, --sp2-radius)
   and the translucent-white card look established there, so these blocks read as
   part of the same system and adapt to any per-project page background. */

/* ── Hero ──────────────────────────────────────────────────────────────────── */

.sp2-hero {
  position: relative;
  display: flex;
  /* stretch (default), not center: .sp2-hero-inner must fill the full section height so
     its own align-items:center below centers hero-left/hero-right against the WHOLE
     hero, not just against each other's content height. */
  min-height: 90vh;
  padding: 60px 0;
  background-size: cover;
  background-position: center;
  background-color: var(--sp2-dark);
  overflow: hidden;
  box-sizing: border-box;
}

/* Lightweight parallax — the image is pinned to the viewport and the section scrolls
   over it, pure CSS/GPU-composited, no JS/scroll listener. Gated on hover:hover and
   pointer:fine (a real mouse), not just viewport width — a wide-screen phone/tablet in
   landscape can easily clear 901px, and this should stay off on any touch device
   regardless of orientation (iOS also just ignores fixed backgrounds, so it's not worth
   the jank there either). Also skipped whenever the visitor asked for reduced motion. */
@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  .sp2-hero { background-attachment: fixed; }
}
@media (prefers-reduced-motion: reduce) {
  .sp2-hero { background-attachment: scroll; }
}

.sp2-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10,10,10,0.55);
  z-index: 0;
}

/* Elementor's own boxed-content formula (frontend.min.css: --content-width:
   min(100%,var(--container-max-width,1140px)), 10px side padding by default) — the
   section itself is set to "Full Width" in Elementor so the background/overlay reach
   the edges, but the content inside re-aligns to the same grid every other (boxed)
   section on the page uses, and stays in sync automatically if that site-wide setting
   ever changes. */
.sp2-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  width: 100%;
  max-width: min(100%, var(--container-max-width, 1140px));
  margin-inline: auto;
  padding-inline: 10px;
  box-sizing: border-box;
}

.sp2-hero--no-form .sp2-hero-inner { grid-template-columns: 1fr; }

.sp2-hero-left {
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  padding-left: 26px;
}

/* Vertical accent line that grows in, then the kicker/title fade in from behind it —
   mirrors sunnyparadise.eu's hero animation. Gated by .sp2-hero--in (added via JS a
   frame after load) so it always starts from the pre-animation state, never flashes. */
.sp2-hero-left::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 2px;
  height: 0;
  background: var(--sp2-accent);
  opacity: 0;
  transform: translateY(-50%) scaleY(0);
  transform-origin: center;
}

.sp2-hero--in .sp2-hero-left::before {
  height: 100%;
  animation: sp2-hero-line-grow 0.8s ease-out 0.2s forwards;
}

@keyframes sp2-hero-line-grow {
  0%   { transform: translateY(-50%) scaleY(0); opacity: 0; }
  100% { transform: translateY(-50%) scaleY(1); opacity: 1; }
}

/* Pure-CSS reveal — no JS trigger class needed (unlike the accent line below, which still
   waits for .sp2-hero--in). Earlier this depended on JS adding .sp2-hero--in, which left the
   text permanently invisible (opacity:0, nothing to ever un-hide it) whenever that script
   didn't run in time — notably inside the Elementor editor's preview iframe, where the
   frontend/element_ready hook doesn't reliably refire on every settings-panel edit. Animating
   directly off the keyframe's own 0%→100% removes that dependency entirely. */
.sp2-hero-kicker,
.sp2-hero-title,
.sp2-hero-subtitle,
.sp2-hero-btn {
  opacity: 0;
  animation: sp2-hero-fade-in-left 0.8s ease-out forwards;
}

.sp2-hero-kicker   { animation-delay: 0.1s; }
.sp2-hero-title    { animation-delay: 0.3s; }
.sp2-hero-subtitle { animation-delay: 0.45s; }
.sp2-hero-btn      { animation-delay: 0.6s; }

@keyframes sp2-hero-fade-in-left {
  0%   { opacity: 0; transform: translateX(-20px); }
  100% { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .sp2-hero-left::before,
  .sp2-hero-kicker,
  .sp2-hero-title,
  .sp2-hero-subtitle,
  .sp2-hero-btn {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
  .sp2-hero-left::before { height: 100%; }
}

.sp2-hero-kicker {
  font-family: var(--sp2-font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sp2-accent);
}

.sp2-hero-title {
  font-family: var(--sp2-font);
  font-size: clamp(32px, 4.5vw, 56px);
  font-weight: 600;
  line-height: 1.15;
  color: #fff;
  margin: 0;
}

.sp2-hero-subtitle {
  font-family: var(--sp2-font);
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255,255,255,0.8);
  margin: 0;
  max-width: 480px;
}

/* Row that holds the anchor button and the optional second (real-link) button side by
   side. Wrapping to a new line is handled explicitly below (phones only, flex-direction
   switches to column there) — left as nowrap here so two buttons never silently drop onto
   separate rows just because their un-shrunk text doesn't fit (that fought with the
   equal-width rule below in an unpredictable way across laptop widths). */
.sp2-hero-btns {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 16px;
}

/* With both buttons present, split the row evenly instead of each hugging its own text —
   otherwise two different-length labels ("Етажни планове - 2-и етап" vs "...- 1-й етап")
   produce visibly mismatched widths on some viewports. flex-basis:0 makes the text length
   irrelevant to the sizing (growth is divided equally), so this holds regardless of copy.
   min-width:0 lets a button actually shrink below its text's natural width when the row is
   tight (laptop widths — see the compact sizing below) instead of forcing the whole row to
   overflow; the ellipsis is just a last-resort safety net, the sizing below is what normally
   keeps the text whole. */
.sp2-hero-btns:has(.sp2-hero-btn:nth-child(2)) .sp2-hero-btn {
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Laptop-width squeeze: with two buttons the row only has ~200-250px per button here (the
   hero's own two-column grid gives .sp2-hero-left less room than the single-column mobile
   layout does), so the default padding/font-size wrap the label onto two lines. Smaller,
   tighter text keeps it on one line without touching anything above 1800px, where there's
   plenty of room again. Scoped to the two-button case only — a single anchor button already
   fits fine at its default size. */
@media (min-width: 481px) and (max-width: 1800px) {
  .sp2-hero-btns:has(.sp2-hero-btn:nth-child(2)) .sp2-hero-btn {
    padding-left: 14px;
    padding-right: 14px;
    font-size: 10px;
    letter-spacing: 0.04em;
    gap: 6px;
  }
}

/* Mobile/tablet: match the sitewide 46px button height (.sp2-pricelist-btn, .hn-location-btn,
   footer buttons) instead of whatever height this widget's own font-size/padding happen to
   produce — otherwise the hero buttons read as a visibly different, flimsier component. */
@media (max-width: 900px) {
  /* !important: the unconditional base .sp2-hero-btn rule further down sets its own
     padding:14px 28px (not viewport-gated), and being later in the file it would otherwise
     win the padding-top/bottom tie despite this media query actually matching. */
  .sp2-hero-btn {
    height: 46px !important;
    box-sizing: border-box !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1 !important;
  }
}

/* Same filled-gold pill as the other CTA buttons on the page (.sp2-pricelist-btn, footer
   buttons) — kept sitewide-consistent on purpose, so it always follows --hn-gold rather than
   being configurable per instance. */
.sp2-hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  padding: 14px 28px;
  font-family: var(--sp2-font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sp2-dark);
  background: var(--sp2-accent);
  border: 1px solid var(--sp2-accent);
  border-radius: var(--sp2-radius);
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.sp2-hero-btn:hover {
  /* Same Bauen "a:hover{display:inline-block}" override as .sp2-pricelist-btn needs. */
  display: inline-flex;
  background: transparent;
  color: var(--sp2-accent);
}

.sp2-hero-right { display: flex; justify-content: flex-end; }

/* The theme's "classic centered logo" header always paints a solid block behind the
   logo (Bauen Options → Classic Menu Back Color, includes/color.php line ~258) — normally
   invisible because it matches the flat page background, but it shows as a mismatched
   box over a photographic hero. Scoped to pages that actually use this widget, so
   pages/headers elsewhere are untouched. */
body:has(.sp2-hero) .logo-wrapper {
  background: transparent !important;
}

.sp2-hero-form-card {
  width: 100%;
  max-width: 420px;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  box-sizing: border-box;
}

/* Reuses .sp2-contact-panel__form / __label from fp-sp2.css (already styled dark+gold,
   incl. the phone-mask dropdown) — only spacing/size is adjusted for this card context. */
.sp2-hero-form-card .sp2-contact-panel__label {
  padding: 24px 28px 0;
  font-size: 15px; /* a touch bigger than the 14px field text below it */
  text-align: center;
  color: var(--sp2-hero-label-color, var(--sp2-accent)); /* widget's own "Цвет надписи над формой" control */
}
.sp2-hero-form-card .sp2-contact-panel__form { padding: 16px 28px 28px; }

/* Field spacing: the popup styling stacks three margins between two fields (p 16 + label 5 +
   theme's input margin-bottom 10 = 31px), which is twice the gap between the phone field and the
   submit button (16px). Here every gap — field to field and phone to button — is that 16px. */
.sp2-hero-form-card .wpcf7-form label { margin-bottom: 0 !important; }
.sp2-hero-form-card .wpcf7-form input[type="text"],
.sp2-hero-form-card .wpcf7-form input[type="email"] { margin-bottom: 0 !important; }

/* Country dropdown of the phone field — glass, to match the card (the popup keeps its solid one).
   Own backdrop blur + a dark tint so every name stays readable over the photo. */
.sp2-hero-form-card .sp2-contact-panel__form .iti {
  --iti-dropdown-bg: transparent;
  --iti-hover-color: color-mix(in srgb, var(--sp2-accent) 16%, transparent);
  --iti-border-color: rgba(255, 255, 255, 0.14);
  --iti-dialcode-color: rgba(255, 255, 255, 0.55);
}

.sp2-hero-form-card .sp2-contact-panel__form .iti__dropdown-content {
  margin-top: 6px;
  background: rgba(10, 28, 32, 0.74);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.sp2-hero-form-card .sp2-contact-panel__form .iti__search-input,
.sp2-hero-form-card .sp2-contact-panel__form .iti__search-input:focus {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0;
  box-shadow: none;
}
.sp2-hero-form-card .sp2-contact-panel__form .iti__search-input:focus {
  border-bottom-color: color-mix(in srgb, var(--sp2-accent) 55%, transparent);
  background: rgba(255, 255, 255, 0.09);
}

.sp2-hero-form-card .sp2-contact-panel__form .iti__country-list {
  background: transparent;
  max-height: 220px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--sp2-accent) 50%, transparent) transparent;
}
.sp2-hero-form-card .sp2-contact-panel__form .iti__country-list::-webkit-scrollbar { width: 6px; }
.sp2-hero-form-card .sp2-contact-panel__form .iti__country-list::-webkit-scrollbar-track { background: transparent; }
.sp2-hero-form-card .sp2-contact-panel__form .iti__country-list::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--sp2-accent) 45%, transparent);
  border-radius: 3px;
}

.sp2-hero-form-card .sp2-contact-panel__form .iti__country { padding: 9px 12px; }
.sp2-hero-form-card .sp2-contact-panel__form .iti__country-name { color: #fff; }
.sp2-hero-form-card .sp2-contact-panel__form .iti__dial-code { color: rgba(255, 255, 255, 0.55); }
.sp2-hero-form-card .sp2-contact-panel__form .iti__country.iti__highlight { background: color-mix(in srgb, var(--sp2-accent) 16%, transparent); }

/* Submit button: this CF7 form's [submit] field is configured with the theme's own
   button markup (class:butn-dark → <button class="butn-dark"><a><span>...) instead of a
   plain <input type="submit">, so fp-sp2.css's popup button CSS (which targets
   input[type="submit"]) never touches it — it was inheriting Bauen's sitewide button
   size (16px, auto width) instead. Override scoped to this card only; .butn-dark itself
   is used all over the theme and stays untouched everywhere else. */
/* The markup is <button.butn-dark><a><span>: the theme paints BOTH the button and the link gold,
   and on :hover Bauen turns the <button> dark grey (button:hover{background:#323232}) — which
   showed as a dark box around a narrower gold bar. So the <button> is reduced to an invisible,
   full-width shell in EVERY state, and the <a> alone is the visible button: same padding +
   line-height recipe as the fields (so it is exactly as tall), gold fill, and on hover the
   site's usual inverse (transparent, gold text + border) — same as the SP2 / footer buttons. */
.sp2-hero-form-card .wpcf7-form .butn-dark,
.sp2-hero-form-card .wpcf7-form .butn-dark:hover,
.sp2-hero-form-card .wpcf7-form .butn-dark:focus,
.sp2-hero-form-card .wpcf7-form .butn-dark:active {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  color: inherit !important;
  font-size: 14px;
  line-height: 1.75;
  text-align: center;
}
.sp2-hero-form-card .wpcf7-form .butn-dark > a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 11px 20px !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
  background: var(--sp2-accent) !important;
  border: 1px solid var(--sp2-accent) !important;
  border-radius: 2px !important;
  color: #0a0a0a !important;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.sp2-hero-form-card .wpcf7-form .butn-dark > a > span {
  font-size: inherit !important;
  color: inherit !important;
}
.sp2-hero-form-card .wpcf7-form .butn-dark:hover > a,
.sp2-hero-form-card .wpcf7-form .butn-dark > a:hover,
.sp2-hero-form-card .wpcf7-form .butn-dark:focus > a {
  background: transparent !important;
  color: var(--sp2-accent) !important;
}
/* Disabled (phone still empty — hnPhoneMaskInit blocks submit until it's filled): stay filled,
   dimmed, no hover inverse — the button visibly can't be pressed yet. */
.sp2-hero-form-card .wpcf7-form .butn-dark:disabled > a,
.sp2-hero-form-card .wpcf7-form .butn-dark:disabled:hover > a,
.sp2-hero-form-card .wpcf7-form .butn-dark:disabled > a:hover {
  background: var(--sp2-accent) !important;
  color: #0a0a0a !important;
  opacity: 0.55;
  cursor: not-allowed;
}

@media (max-width: 900px) {
  .sp2-hero { min-height: auto; padding: 48px 0; }
  .sp2-hero-inner { grid-template-columns: 1fr; }
  .sp2-hero-right { justify-content: stretch; }
  .sp2-hero-form-card { max-width: none; }

  /* Stacked below the form, .sp2-hero-left's own left edge now sits directly above the
     form card's left edge — the accent-line gutter (padding-left:26px, desktop-only
     concern since the columns never lined up before) suddenly reads as a stray indent.
     Drop it and hide the line itself so text/buttons share the form's inset exactly. */
  .sp2-hero-left { padding-left: 0; }
  .sp2-hero-left::before { display: none; }

  /* Widget's own "Скрыть кнопки на телефоне" toggle — for pages that show the same two
     buttons via a separate "HN — Custom Buttons" widget placed further down instead. */
  .sp2-hero-btns--hide-mobile { display: none; }
}

@media (max-width: 480px) {
  .sp2-hero-btns { flex-direction: column; align-items: stretch; }
  /* Cancel flex:1 1 0 from the two-button equal-WIDTH rule above — in a column container
     that flex-basis:0 hijacks the main axis, which is now vertical, and collapses the
     button's height to ~0 (explicit height below can't override that: flex-basis wins the
     main-axis sizing algorithm outright, !important or not). width:100% here already makes
     each stacked button full-width on its own, so the flex-split isn't needed in this layout. */
  /* !important: the two-button rule above is .sp2-hero-btns:has(.sp2-hero-btn:nth-child(2))
     .sp2-hero-btn — specificity (0,4,0), beats this plain (0,2,0) selector outright regardless
     of source order, so flex:0 0 auto needs !important to actually win here. */
  .sp2-hero-btns .sp2-hero-btn {
    flex: 0 0 auto !important;
    justify-content: center;
    width: 100%;
    padding-left: 14px;
    padding-right: 14px;
    font-size: 10px;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }
}

/* ── Apartments Showcase ───────────────────────────────────────────────────── */

.sp2-showcase {
  /* Defaults match the original hardcoded values (dark-page assumption), so anything
     already placed keeps looking the same. The widget's own Style-tab controls override
     these per instance — same pattern as SP2 — Galерея. */
  --sp2-show-title-color: #fff;
  --sp2-show-card-bg: rgba(255,255,255,0.04);
  --sp2-show-card-border: rgba(255,255,255,0.07);
  --sp2-show-name-color: #fff;
  --sp2-show-meta-color: rgba(255,255,255,0.5);
  --sp2-show-note-color: rgba(255,255,255,0.5);
  --sp2-show-accent-color: var(--sp2-accent);
  --sp2-show-accent-text-color: var(--sp2-dark);
}

.sp2-showcase-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.sp2-showcase-title {
  font-family: var(--sp2-font);
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 600;
  color: var(--sp2-show-title-color);
  margin: 0;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sp2-showcase-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 26px;
  font-family: var(--sp2-font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sp2-show-accent-text-color);
  background: var(--sp2-show-accent-color);
  border-radius: var(--sp2-radius);
  text-decoration: none;
  white-space: nowrap;
  transition: filter 0.2s;
}

/* Bauen theme's global "span, a, a:hover { display: inline-block; }" (bauen-theme-dark.css)
   outranks our plain .class display:flex/inline-flex the instant :hover fires — an element+
   pseudo-class selector beats a lone class on specificity. Re-declaring display in our own
   :hover rule (now element+class+pseudo-class) is the only way to keep winning. */
.sp2-showcase-btn:hover { filter: brightness(1.1); display: inline-flex; }

.sp2-showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.sp2-showcase-card {
  display: flex;
  flex-direction: column;
  background: var(--sp2-show-card-bg);
  border: 1px solid var(--sp2-show-card-border);
  border-radius: var(--sp2-radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}

/* Box-shadow only, no transform/movement at all — nothing to ever shift the card's own
   box or its neighbours in the grid. */
a.sp2-showcase-card:hover {
  display: flex; /* theme's global a:hover{display:inline-block} otherwise wins on :hover and
                    blockifies this grid item — harmless here (same visual stacking either way)
                    but locking it down removes the variable entirely. */
  border-color: var(--sp2-show-accent-color);
  box-shadow: 0 4px 14px rgba(0,0,0,0.28);
}

.sp2-showcase-card__image {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--sp2-show-card-bg);
}

.sp2-showcase-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sp2-showcase-card__body { padding: 20px; display: flex; flex-direction: column; gap: 6px; }

.sp2-showcase-card__name {
  font-family: var(--sp2-font);
  font-size: 18px;
  font-weight: 600;
  color: var(--sp2-show-name-color);
}

.sp2-showcase-card__meta { font-size: 13px; color: var(--sp2-show-meta-color); }

.sp2-showcase-card__price {
  margin-top: 6px;
  font-family: var(--sp2-font);
  font-size: 18px;
  font-weight: 700;
  color: var(--sp2-show-accent-color);
}

.sp2-showcase-note {
  margin-top: 24px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--sp2-show-note-color);
  text-align: center;
}

/* ── Gallery carousel ──────────────────────────────────────────────────────── */

.sp2-gal-head { margin-bottom: 28px; text-align: center; }

.sp2-gal-title {
  font-family: var(--sp2-font);
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 600;
  color: #fff;
  margin: 0;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sp2-gal-wrap {
  position: relative;
  /* Namespaced fallbacks — widget's own "Цвет пагинации/стрелок" and "Акцентный цвет"
     controls override these two per instance (same pattern as HN — Advantages). */
  --sp2-gal-nav-color: #0d1e30;
  --sp2-gal-accent-color: var(--sp2-accent);
}

.sp2-gal-swiper { overflow: hidden; }

/* sunnyparadise.eu's own photo carousel (.photos-swiper/.swiper-wrapper) pads generously
   around the slides specifically so a lifted+shadowed slide isn't hard-clipped by the
   swiper's own overflow:hidden (needed to hide off-screen slides horizontally). Same fix
   here — see .sp2-gal-slide:hover below. */
.sp2-gal-swiper { padding: 20px 0 8px; }
.sp2-gal-swiper .swiper-wrapper { padding: 16px 0 20px; }

/* .sp2-gal-frame carries the 4:3 box (aspect-ratio) and is NEVER transformed — Chromium
   can mis-recompute an aspect-ratio box's height while a transform runs on the SAME
   element inside a flex layout (that's what was growing .swiper-slide by ~9px on hover).
   The part that actually lifts + shadows on hover (.sp2-gal-slide) is instead absolutely
   positioned to fill the frame, so nothing it does can ever feed back into the frame's —
   or .swiper-slide's — size. Same hover look as sunnyparadise.eu's .photos-slide-inner. */
.sp2-gal-frame {
  position: relative;
  aspect-ratio: 4 / 3;
}

.sp2-gal-slide {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sp2-gal-slide:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.28);
}

.sp2-gal-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Pagination/nav palette — matches HN — Advantages (.hn-facts-bullet/.hn-facts-btn)
   instead of assuming a dark page background, since this block is just as likely to sit
   on a light section. */
.sp2-gal-pagination { display: flex; justify-content: center; gap: 6px; margin-top: 20px; }

.sp2-gal-pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: color-mix(in srgb, var(--sp2-gal-nav-color) 20%, transparent);
  border-radius: 999px;
  opacity: 1;
  transition: width 0.25s, background 0.25s;
}

.sp2-gal-pagination .swiper-pagination-bullet-active { width: 24px; background: var(--sp2-gal-accent-color); }

.sp2-gal-nav { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }

.sp2-gal-nav-btn {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--sp2-gal-nav-color) 15%, transparent);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}

.sp2-gal-nav-btn::before {
  content: '';
  width: 9px;
  height: 9px;
  border-top: 2px solid var(--sp2-gal-nav-color);
  border-right: 2px solid var(--sp2-gal-nav-color);
}

.sp2-gal-nav-btn--prev::before { transform: rotate(-135deg); margin-left: 3px; }
.sp2-gal-nav-btn--next::before { transform: rotate(45deg); margin-right: 3px; }

.sp2-gal-nav-btn:hover { background: var(--sp2-gal-accent-color); border-color: var(--sp2-gal-accent-color); transform: translateY(-1px); }
.sp2-gal-nav-btn:hover::before { border-color: #fff; }
.sp2-gal-nav-btn:focus, .sp2-gal-nav-btn:focus-visible { outline: none; }