/* ==========================================================================
   Gesund Horizontal Scroll v1.0
   Classes: horizontal-scroll-section, scroll-track, scroll-item
   ========================================================================== */

.horizontal-scroll-section,
.horizontal-scrool-section,
.scroll-track {
  --arc-w: 231px;
  --arc-h: 149px;
  --node: 85.4527px;
  --step: 200.7702px;
  --overlap: 30.2296px;
  --chain-h: 210.9072px;
  --ribbon-w: 168px;
  --ribbon-gap: 22px;
  --popup-w: 400px;
  --popup-h: 250px;
  --node-logo-sm: 59.5214px;
  --node-logo-lg: 205px;
  --rail-above: calc(50% - var(--node) / 2 - var(--ribbon-gap) - 4px);
  --rail-below: calc(50% + var(--node) / 2 + var(--ribbon-gap) + 4px);
  --glass-w: 50vw;
  --glass-x: 0px;
  --track-x: 0px;
  --logo-scale: 1;
  --finale-o: 0;
  --copy-fade: 1;
  --ease-pop: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-fun: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ink: #fff;
  --title: #f4f2ec;
  --muted: rgba(255, 255, 255, 0.78);
}

/* ---- Section shell ---- */

.horizontal-scroll-section,
.horizontal-scrool-section {
  position: relative;
  padding: 0 !important;
  margin: 0 !important;
  background: #000;
  color: var(--ink);
  isolation: isolate;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  min-height: 100vh;
  height: 100vh;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.horizontal-scroll-section.is-hs-pinned {
  overflow: hidden !important;
}

/* Vertically center the arc chain in the viewport */
.horizontal-scroll-section .scroll-track,
.horizontal-scrool-section .scroll-track {
  margin-block: auto;
}

.horizontal-scroll-section .brxe-section,
.horizontal-scroll-section.brxe-section {
  overflow: visible !important;
}

.hs-pin-wrap {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
}

.hs-spacer {
  width: 100%;
  height: 0;
  pointer-events: none;
  visibility: hidden;
}

/* ---- Glass panel (Bricks-built) ---- */

#recent-posts-glass,
.horizontal-scroll-section .glass-panel {
  z-index: 10;
  pointer-events: none;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 1.25rem;
  padding: 12% 10% !important;
  box-sizing: border-box;
}

/* Bricks wrapper around glass — slides as one unit with narrow panel */
.horizontal-scroll-section > .brxe-block:has(#recent-posts-glass),
.horizontal-scroll-section > .brxe-block:has(.glass-panel) {
  position: absolute !important;
  top: 0 !important;
  left: var(--glass-x) !important;
  width: var(--glass-w) !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none;
  z-index: 30;
  transition: width 0.4s var(--ease-pop), left 0.4s var(--ease-pop);
}

#recent-posts-glass,
.horizontal-scroll-section .glass-panel {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  height: 100%;
}

/* Icy glass stack — front panel + structural-icy tint layer move together */
.glass-panel.structural-icy,
#recent-posts-glass.structural-icy {
  background: rgba(10, 26, 44, 0.42);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border-right: 1px solid rgba(130, 210, 255, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset -3px 0 10px rgba(90, 190, 255, 0.1),
    6px 0 28px rgba(0, 0, 0, 0.38);
}

.horizontal-scroll-section > .brxe-block:has(#recent-posts-glass) .brxe-div:not(#recent-posts-glass),
.horizontal-scroll-section .glass-panel .structural-icy {
  border-radius: inherit;
}

#recent-posts-title,
#recent-posts-sub,
#recent-posts-instruction {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 21;
  pointer-events: none;
  opacity: 1;
  visibility: visible;
  transform: none !important;
  margin: 0 !important;
}

#recent-posts-title,
#recent-posts-glass .glass-panel-heading {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg) !important;
  transform-origin: center;
  font-size: clamp(2rem, 4.5vw, 3.25rem) !important;
  line-height: 1 !important;
  color: #e8a4b8 !important;
  align-self: flex-start;
  margin-inline-start: 4% !important;
}

#recent-posts-sub {
  font-size: clamp(0.85rem, 1.2vw, 1rem) !important;
  line-height: 1.45 !important;
  color: #d4af37 !important;
  max-width: 78%;
}

#recent-posts-instruction {
  font-size: clamp(0.75rem, 1vw, 0.9rem) !important;
  line-height: 1.4 !important;
  color: rgba(255, 255, 255, 0.88) !important;
  max-width: 78%;
}

/* Keep glass copy visible until scroll intentionally fades it */
.horizontal-scroll-section:not(.is-copy-gone) #recent-posts-sub,
.horizontal-scroll-section:not(.is-copy-gone) #recent-posts-instruction {
  opacity: 1 !important;
  visibility: visible !important;
}

.horizontal-scroll-section .hs-glass-copy {
  opacity: var(--copy-fade);
  transition: opacity 0.35s ease;
}

.horizontal-scroll-section.is-copy-gone #recent-posts-sub,
.horizontal-scroll-section.is-copy-gone #recent-posts-instruction,
.horizontal-scroll-section.is-copy-gone .hs-glass-copy {
  opacity: 0;
  visibility: hidden;
}

/* ---- Track + chain ---- */

.scroll-track {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: max-content !important;
  max-width: none !important;
  min-height: var(--chain-h);
  padding: var(--ribbon-w) 0 var(--ribbon-w) 0;
  padding-inline-end: 55vw;
  transform: translate3d(var(--track-x), 0, 0);
  will-change: transform;
  position: relative;
  z-index: 4;
  flex-shrink: 0;
}

.scroll-track .bricks-lazy-hidden {
  opacity: 1 !important;
  visibility: visible !important;
}

/* ---- Scroll item ---- */

.scroll-item {
  position: relative !important;
  flex: 0 0 var(--step) !important;
  width: var(--step) !important;
  min-width: var(--step) !important;
  max-width: var(--step) !important;
  height: var(--chain-h) !important;
  margin-inline-start: calc(var(--overlap) * -1) !important;
  overflow: visible !important;
}

.scroll-item:first-of-type {
  margin-inline-start: 0 !important;
}

.scroll-item.is-active {
  z-index: auto;
}

/* Bricks fixes: hide duplicate template (no arc-graphic), nested logo inside loop */
.scroll-item > .brxe-template:not(:has(.arc-graphic)) {
  display: none !important;
}

.scroll-item .scroll-item.is-logo {
  display: none !important;
}

/* Only loop items on the track row — not nested blocks */
.scroll-track > .scroll-item.is-logo {
  display: block !important;
}

.scroll-track > .scroll-item:not(.is-logo) .scroll-item.is-logo {
  display: none !important;
}

/* Duplicate triggers/popups from both templates — keep first only */
.scroll-item .node-trigger ~ .node-trigger,
.scroll-item .X-closer ~ .X-closer,
.scroll-item .x-closer ~ .x-closer,
.scroll-item .popup-card ~ .popup-card {
  display: none !important;
}

/* ---- Arc graphic ---- */

.scroll-item.has-arc-bg:not(.is-logo):not(:has(.arc-graphic))::before {
  content: "";
  position: absolute;
  left: 0;
  z-index: 5;
  width: var(--arc-w);
  height: var(--arc-h);
  background: var(--arc-bg, none) left center / contain no-repeat;
  pointer-events: none;
}

.scroll-item.has-arc-bg.arc-top:not(.is-logo):not(:has(.arc-graphic))::before {
  top: calc(50% - var(--arc-h) + var(--node) / 2);
}

.scroll-item.has-arc-bg.arc-bottom:not(.is-logo):not(:has(.arc-graphic))::before {
  top: calc(50% - var(--node) / 2);
}

.scroll-item .arc-graphic {
  position: absolute;
  left: 0;
  z-index: 5;
  width: var(--arc-w);
  height: var(--arc-h);
  background: var(--arc-bg, none) left center / contain no-repeat;
  pointer-events: none;
  overflow: visible;
}

.scroll-item .arc-graphic:empty::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
}

.scroll-item.arc-top:not(.is-logo) .arc-graphic {
  top: calc(50% - var(--arc-h) + var(--node) / 2);
}

.scroll-item.arc-bottom:not(.is-logo) .arc-graphic {
  top: calc(50% - var(--node) / 2);
}

/* Logo item */

.scroll-item.is-logo::after {
  content: "";
  position: absolute;
  left: 0;
  width: var(--arc-w);
  height: var(--arc-h);
  background: var(--arc-bg, none) left center / contain no-repeat;
  pointer-events: none;
  z-index: 5;
  opacity: 1;
  transition: background-image 0.35s ease;
}

.scroll-item.is-logo.arc-top::after {
  top: calc(50% - var(--arc-h) + var(--node) / 2);
}

.scroll-item.is-logo.arc-bottom::after {
  top: calc(50% - var(--node) / 2);
}

.scroll-item.is-logo .arc-graphic {
  display: none;
}

.scroll-item.is-logo .node-logo {
  position: absolute;
  top: 50%;
  left: calc(var(--node) / 2);
  z-index: 12;
  width: var(--node-logo-sm);
  height: var(--node-logo-sm);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -50%) scale(var(--logo-scale));
  transform-origin: center;
  background: url("https://gesund.ca/wp-content/uploads/2026/07/node-logo.png") center / contain no-repeat;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.75s var(--ease-fun);
}

.horizontal-scroll-section.is-logo-pinned .scroll-item.is-logo .node-logo {
  opacity: 1;
  visibility: visible;
  position: fixed;
  left: 50vw;
  top: 50vh;
  z-index: 58;
  transform: translate(-50%, -50%) scale(var(--logo-scale));
}

/* ---- Node trigger ---- */

.scroll-item .node-trigger {
  position: absolute;
  top: 50%;
  left: calc(var(--node) / 2);
  z-index: 15;
  width: var(--node);
  height: var(--node);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  background: transparent;
  pointer-events: none;
}

.horizontal-scroll-section.is-horizontal .scroll-item .node-trigger,
.horizontal-scroll-section.is-hold-end .scroll-item .node-trigger {
  pointer-events: auto;
}

.scroll-item .node-trigger::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.12);
  opacity: 0;
  transition: opacity 0.28s var(--ease-pop), transform 0.28s var(--ease-pop);
  pointer-events: none;
}

.scroll-item .node-trigger:hover::after,
.scroll-item.is-active .node-trigger::after {
  opacity: 1;
  transform: scale(1.04);
}

.scroll-item.is-logo .node-trigger {
  display: none;
}

/* ---- Text — single Bricks template; arc-top / arc-bottom flips rail + justification ---- */

.scroll-item .item-content,
.scroll-item .scroll-item-text {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: visible;
}

/* Template wrapper must not fight absolute rail positioning */
.scroll-item:not(.is-logo) > .brxe-template {
  position: static !important;
  display: contents !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

.scroll-item.is-logo .item-content,
.scroll-item.is-logo .scroll-item-text,
.scroll-item.is-logo .block-rotated {
  display: none !important;
}

.scroll-item .x-closer,
.scroll-item .X-closer {
  display: none !important;
  pointer-events: none !important;
}

.gesund-hs-popup .x-closer,
.gesund-hs-popup .X-closer {
  display: block !important;
  pointer-events: auto !important;
  position: absolute !important;
  top: 8px !important;
  right: 10px !important;
  z-index: 5 !important;
  margin: 0 !important;
  padding: 4px 10px !important;
  cursor: pointer !important;
  font-size: 1.1rem !important;
  line-height: 1 !important;
  color: #1a2332 !important;
  background: rgba(0, 0, 0, 0.08) !important;
  border-radius: 6px !important;
  transform: none !important;
}

/* Shared ribbon geometry — arc-bottom = upper rail, arc-top = lower rail (matches arc divots) */
.scroll-item.arc-bottom:not(.is-logo) .block-rotated,
.scroll-item.arc-bottom:not(.is-logo) .item-content,
.scroll-item.arc-bottom:not(.is-logo) .scroll-item-text {
  position: absolute !important;
  left: calc(var(--step) * 0.5) !important;
  right: auto !important;
  bottom: var(--rail-above) !important;
  top: auto !important;
  width: var(--ribbon-w) !important;
  max-width: var(--ribbon-w) !important;
  max-height: calc(var(--step) - var(--overlap) - 6px) !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateX(-50%) rotate(-90deg) !important;
  transform-origin: center bottom !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: flex-start !important;
  align-content: flex-end !important;
  text-align: left !important;
  z-index: 6 !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s var(--ease-pop), visibility 0.45s var(--ease-pop);
}

.scroll-item.arc-top:not(.is-logo) .block-rotated,
.scroll-item.arc-top:not(.is-logo) .item-content,
.scroll-item.arc-top:not(.is-logo) .scroll-item-text {
  position: absolute !important;
  left: calc(var(--step) * 0.5) !important;
  right: auto !important;
  top: var(--rail-below) !important;
  bottom: auto !important;
  width: var(--ribbon-w) !important;
  max-width: var(--ribbon-w) !important;
  max-height: calc(var(--step) - var(--overlap) - 6px) !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateX(-50%) rotate(-90deg) !important;
  transform-origin: center top !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-end !important;
  align-content: flex-start !important;
  text-align: right !important;
  z-index: 6 !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s var(--ease-pop), visibility 0.45s var(--ease-pop);
}

/* When .block-rotated was inside .arc-graphic, anchor from arc edge (legacy fallback) */
.scroll-item.arc-bottom:not(.is-logo) .arc-graphic .block-rotated,
.scroll-item.arc-bottom:not(.is-logo) .arc-graphic > .brxe-block.block-rotated {
  bottom: calc(100% + var(--ribbon-gap)) !important;
  top: auto !important;
  left: calc(var(--node) / 2) !important;
  visibility: visible;
}

.scroll-item.arc-top:not(.is-logo) .arc-graphic .block-rotated,
.scroll-item.arc-top:not(.is-logo) .arc-graphic > .brxe-block.block-rotated {
  top: calc(100% + var(--ribbon-gap)) !important;
  bottom: auto !important;
  left: calc(var(--node) / 2) !important;
  visibility: visible;
}

/* Reveal ribbons one-by-one during horizontal scrub only */
.horizontal-scroll-section.is-horizontal .scroll-item.is-in-view .block-rotated,
.horizontal-scroll-section.is-horizontal .scroll-item.is-in-view .item-content,
.horizontal-scroll-section.is-horizontal .scroll-item.is-in-view .scroll-item-text {
  opacity: 1;
  visibility: visible;
}

.horizontal-scroll-section.is-hold .scroll-item .block-rotated,
.horizontal-scroll-section.is-hold .scroll-item .item-content,
.horizontal-scroll-section.is-hold .scroll-item .scroll-item-text,
.horizontal-scroll-section.is-hold-end .scroll-item .block-rotated,
.horizontal-scroll-section.is-hold-end .scroll-item .item-content,
.horizontal-scroll-section.is-hold-end .scroll-item .scroll-item-text {
  opacity: 0;
  visibility: hidden;
}

/* Popup open — hurricane whoosh hides ribbon (no blur ghost) */
.scroll-item.is-active .block-rotated,
.scroll-item.is-active .item-content,
.scroll-item.is-active .scroll-item-text {
  opacity: 0 !important;
  visibility: hidden !important;
  filter: none !important;
}

.scroll-item.arc-bottom:not(.is-logo) .block-rotated > .brxe-container,
.scroll-item.arc-bottom:not(.is-logo) .block-rotated > .brxe-block,
.scroll-item.arc-bottom:not(.is-logo) .block-rotated > .brxe-div,
.scroll-item.arc-bottom:not(.is-logo) .item-content > .brxe-container,
.scroll-item.arc-bottom:not(.is-logo) .item-content > .brxe-block,
.scroll-item.arc-bottom:not(.is-logo) .item-content > .brxe-div {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: flex-start !important;
  align-self: stretch !important;
  width: 100% !important;
  text-align: left !important;
}

.scroll-item.arc-top:not(.is-logo) .block-rotated > .brxe-container,
.scroll-item.arc-top:not(.is-logo) .block-rotated > .brxe-block,
.scroll-item.arc-top:not(.is-logo) .block-rotated > .brxe-div,
.scroll-item.arc-top:not(.is-logo) .item-content > .brxe-container,
.scroll-item.arc-top:not(.is-logo) .item-content > .brxe-block,
.scroll-item.arc-top:not(.is-logo) .item-content > .brxe-div {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-end !important;
  align-self: stretch !important;
  width: 100% !important;
  text-align: right !important;
}

.scroll-item.arc-bottom:not(.is-logo) .block-rotated .brxe-heading,
.scroll-item.arc-bottom:not(.is-logo) .block-rotated .brxe-text,
.scroll-item.arc-bottom:not(.is-logo) .block-rotated .brxe-text-basic,
.scroll-item.arc-bottom:not(.is-logo) .block-rotated .brxe-post-meta,
.scroll-item.arc-bottom:not(.is-logo) .block-rotated .brxe-post-taxonomy,
.scroll-item.arc-bottom:not(.is-logo) .block-rotated h1,
.scroll-item.arc-bottom:not(.is-logo) .block-rotated h2,
.scroll-item.arc-bottom:not(.is-logo) .block-rotated h3,
.scroll-item.arc-bottom:not(.is-logo) .block-rotated h4,
.scroll-item.arc-bottom:not(.is-logo) .block-rotated p {
  align-self: flex-start !important;
  text-align: left !important;
  width: 100% !important;
}

.scroll-item.arc-top:not(.is-logo) .block-rotated .brxe-heading,
.scroll-item.arc-top:not(.is-logo) .block-rotated .brxe-text,
.scroll-item.arc-top:not(.is-logo) .block-rotated .brxe-text-basic,
.scroll-item.arc-top:not(.is-logo) .block-rotated .brxe-post-meta,
.scroll-item.arc-top:not(.is-logo) .block-rotated .brxe-post-taxonomy,
.scroll-item.arc-top:not(.is-logo) .block-rotated h1,
.scroll-item.arc-top:not(.is-logo) .block-rotated h2,
.scroll-item.arc-top:not(.is-logo) .block-rotated h3,
.scroll-item.arc-top:not(.is-logo) .block-rotated h4,
.scroll-item.arc-top:not(.is-logo) .block-rotated p {
  align-self: flex-end !important;
  text-align: right !important;
  width: 100% !important;
}

/* Typography inside ribbons — title matches arc, meta/categories stay neutral */
.scroll-item .block-rotated .brxe-text-basic:first-child,
.scroll-item .block-rotated .brxe-post-meta {
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: clamp(0.58rem, 0.72vw, 0.68rem) !important;
}

.scroll-item[data-arc-cat="blog"] .block-rotated .brxe-heading,
.scroll-item[data-arc-cat="blog"] .block-rotated h3 {
  color: #b56cff !important;
}

.scroll-item[data-arc-cat="social"] .block-rotated .brxe-heading,
.scroll-item[data-arc-cat="social"] .block-rotated h3 {
  color: #2ee6e6 !important;
}

.scroll-item[data-arc-cat="youtube"] .block-rotated .brxe-heading,
.scroll-item[data-arc-cat="youtube"] .block-rotated h3 {
  color: #5b8dff !important;
}

.scroll-item .block-rotated a {
  color: rgba(255, 255, 255, 0.68) !important;
  text-decoration: none;
}

.scroll-item .brxe-heading,
.scroll-item .brxe-text-basic,
.scroll-item h1,
.scroll-item h2,
.scroll-item h3,
.scroll-item h4 {
  margin: 0 0 5px !important;
  font-size: clamp(0.78rem, 1.05vw, 0.95rem) !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  color: var(--title) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
}

.scroll-item .brxe-text,
.scroll-item .brxe-post-meta,
.scroll-item .brxe-post-taxonomy,
.scroll-item p {
  margin: 0 0 4px !important;
  font-size: clamp(0.58rem, 0.72vw, 0.68rem) !important;
  line-height: 1.3 !important;
  color: var(--muted) !important;
  overflow: hidden !important;
}

.scroll-item .hs-ellipsis {
  opacity: 0.85;
}

/* Hide per-item popup shells — shared popup used */
.scroll-item .popup-card {
  display: none !important;
}

/* Mobile + no-GSAP fallback — ribbons always visible */
.horizontal-scroll-section.hs-static .scroll-item.is-in-view .block-rotated,
.horizontal-scroll-section.hs-static .scroll-item.is-in-view .item-content,
.horizontal-scroll-section.hs-static .scroll-item.is-in-view .scroll-item-text {
  opacity: 1;
  visibility: visible;
}

/* ---- Shared popup ---- */

.gesund-hs-popup {
  position: fixed;
  z-index: 9999;
  width: var(--popup-w);
  max-width: min(var(--popup-w), 92vw);
  min-height: var(--popup-h);
  overflow: auto;
  border-radius: 14px;
  color: #1a2332;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.48);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 0) scale(0.88);
}

.gesund-hs-popup.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* PHP-built popup fallback (when Bricks nested template is empty in loop) */
.hs-popup-built {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

.hs-popup-built .hs-popup-img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 10px;
}

.hs-popup-built .hs-popup-date {
  display: block;
  font-size: 0.8rem;
  color: rgba(26, 35, 50, 0.65);
}

.hs-popup-built .hs-popup-title {
  margin: 0;
  font-size: 1rem;
  line-height: 1.3;
  color: #1a2332;
  text-transform: none;
  font-weight: 700;
}

.hs-popup-built .hs-popup-btn {
  display: inline-block;
  align-self: flex-start;
  margin-top: 4px;
  padding: 10px 18px;
  border-radius: 8px;
  background: #1a4a6e;
  color: #fff;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
}

.hs-popup-built .hs-popup-btn:hover {
  background: #23608f;
}

.gesund-hs-popup__close {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 2;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.12);
  color: #1a2332;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: none;
}

.horizontal-scroll-section.is-mobile .gesund-hs-popup__close {
  display: block;
}

/* ---- Finale overlay ---- */

.hs-finale {
  position: absolute;
  inset: 0;
  z-index: 55;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: var(--finale-o);
}

.horizontal-scroll-section.is-finale .hs-finale {
  pointer-events: auto;
}

.hs-finale-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  max-width: 90vw;
}

.hs-finale-card {
  padding: 14px 22px;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px);
  transition: transform 0.25s var(--ease-fun);
}

.hs-finale-card:hover {
  transform: scale(1.04);
}

.hs-finale-card--ig { background: rgba(225, 48, 108, 0.35); }
.hs-finale-card--fb { background: rgba(24, 119, 242, 0.35); }

/* ---- Skip buttons ---- */

.hs-skip {
  position: fixed;
  right: 16px;
  z-index: 100;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.75rem;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

.hs-skip.is-visible {
  opacity: 1;
  visibility: visible;
}

.hs-skip--down { bottom: 20px; }
.hs-skip--up { top: 80px; }

/* ---- Mobile: vertical stack ---- */

@media (max-width: 767px) {
  .horizontal-scroll-section.is-mobile {
    min-height: auto;
  }

  .horizontal-scroll-section.is-mobile .hs-spacer {
    display: none;
  }

  .horizontal-scroll-section.is-mobile .scroll-track {
    flex-direction: column !important;
    width: 100% !important;
    padding: 24px 16px 48px;
    transform: none !important;
  }

  .horizontal-scroll-section.is-mobile .scroll-item {
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 200px;
    margin: 0 0 24px !important;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
  }

  .horizontal-scroll-section.is-mobile .scroll-item .arc-graphic,
  .horizontal-scroll-section.is-mobile .scroll-item.is-logo::after {
    position: relative;
    left: auto;
    top: auto !important;
    margin: 0 auto 12px;
  }

  .horizontal-scroll-section.is-mobile .scroll-item .block-rotated,
  .horizontal-scroll-section.is-mobile .scroll-item .item-content,
  .horizontal-scroll-section.is-mobile .scroll-item .scroll-item-text,
  .horizontal-scroll-section.is-mobile .scroll-item .brxe-template {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-align: left !important;
    display: block !important;
  }

  .horizontal-scroll-section.is-mobile .scroll-item .x-closer {
    display: none !important;
  }

  .horizontal-scroll-section.is-mobile .scroll-item .brxe-heading,
  .horizontal-scroll-section.is-mobile .scroll-item h3 {
    font-size: 1rem !important;
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  .horizontal-scroll-section.is-mobile #recent-posts-glass {
    position: relative;
    width: 100% !important;
    height: auto;
    min-height: 120px;
  }

  .horizontal-scroll-section.is-mobile .hs-finale,
  .horizontal-scroll-section.is-mobile .hs-skip {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-track,
  .scroll-item .item-content,
  .scroll-item .brxe-template,
  .gesund-hs-popup,
  .scroll-item.is-logo .node-logo {
    transition: none !important;
  }
}