/* Hover Expand Scroller Plus — v1.3.0 */
.hesp {
  /* Typography & colors */
  --hes-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  --hes-title-size: 22px;
  --hes-sub-size: 14px;
  --hes-title-weight: 700;
  --hes-sub-weight: 400;
  --hes-title-color: #fff;
  --hes-sub-color: #fff;

  /* Layout */
  --hes-gap: 8px;
  --hes-radius: 16px;
  --hes-margin-top: 0;

  /* Heights (responsive via media queries below) */
  --hes-height-desktop: 42vh;
  --hes-height-tablet: 38vh;
  --hes-height-mobile: 320px;

  /* Overlay */
  --hes-overlay-color: 0,0,0;         /* R,G,B */
  --hes-overlay-opacity: 0.35;

  /* Caption rotation */
  --hes-text-rotate: 0deg;

  position: relative;
  overflow: visible;
  padding: 0;
  margin-top: var(--hes-margin-top);
  font-family: var(--hes-font);
}

.hesp { --hes-height: var(--hes-height-desktop); }
@media (max-width: 1024px) { .hesp { --hes-height: var(--hes-height-tablet); } }
@media (max-width: 768px)  { .hesp { --hes-height: var(--hes-height-mobile); } }

.hes-viewport { position: relative; overflow: hidden; width: 100%; height: var(--hes-height); min-height: 200px; }
.hes-track { display: flex; gap: var(--hes-gap); list-style: none; margin: 0; padding: 0; align-items: stretch; will-change: transform; height: 100%; }

.hes-item { position: relative; min-width: 0; border-radius: var(--hes-radius); overflow: hidden; flex: 0 0 auto; transition: flex-basis .35s ease, transform .35s ease; }
.hes-link { position: relative; display: grid; width: 100%; height: 100%; text-decoration: none; }

.hes-overlay { position: absolute; inset: 0; background: rgba(var(--hes-overlay-color), var(--hes-overlay-opacity)); transition: opacity .3s ease; z-index: 1; }
.hes-item:hover .hes-overlay, .hes-item:focus-within .hes-overlay { opacity: 0; }

.hes-img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform .35s ease, filter .35s ease; filter: saturate(1.05) contrast(1.02); z-index: 0; }
.hes-item:hover .hes-img, .hes-item:focus-within .hes-img { transform: scale(1.06); }

/* Caption */
/* Text offsets (responsive) */
.hesp { --hes-text-offset-desktop: 2em; --hes-text-offset-tablet: 1.5em; --hes-text-offset-mobile: 1em; --hes-text-offset: var(--hes-text-offset-desktop); }
@media (max-width: 1024px){ .hesp { --hes-text-offset: var(--hes-text-offset-tablet); } }
@media (max-width: 768px){ .hesp { --hes-text-offset: var(--hes-text-offset-mobile); } }
.hes-caption { position: absolute; inset: auto 0 0 0; display: grid; align-content: end; padding: 14px 16px; color: #fff; background: linear-gradient(to top, var(--hes-caption-bg, rgba(0,0,0,.45)) 0%, transparent 90%); z-index: 2; }
.hes-caption-inner { display: inline-block; transform: rotate(var(--hes-text-rotate)); transform-origin: left bottom; }
.hes-caption .hes-title, .hes-caption .hes-subtitle, .hes-caption .hes-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display:block; }
.hes-caption .hes-title { font-size: var(--hes-title-size); font-weight: var(--hes-title-weight); line-height: 1.25; color: var(--hes-title-color); }
.hes-caption .hes-subtitle, .hes-caption .hes-sub { font-size: var(--hes-sub-size); font-weight: var(--hes-sub-weight); line-height: 1.25; color: var(--hes-sub-color); }

/* Shift rotated -90deg captions 2em right for better positioning */
.hesp[style*="--hes-text-rotate:-90deg"] .hes-caption-inner {
  transform: rotate(-90deg) translateX(2em);
  transform-origin: left bottom;
}

.hes-link:focus-visible { outline: 2px solid #0284ff; outline-offset: -4px; box-shadow: 0 0 0 6px rgba(2,132,255,.15); border-radius: var(--hes-radius); }

.hes-arrow { position: absolute; top: 50%; transform: translateY(-50%); border: none; background: rgba(0,0,0,.4); color:#fff; width:36px; height:36px; border-radius:999px; display:grid; place-items:center; cursor:pointer; z-index:3; }
.hes-prev{ left:8px; } .hes-next{ right:8px; }
.hes-arrow:hover{ background: rgba(0,0,0,.6); } .hes-arrow:focus-visible{ outline:2px solid #fff; }

.hes-dots { display:flex; gap:8px; justify-content:center; margin-top:8px; flex-wrap: wrap; }
.hes-dot { width:8px; height:8px; border-radius:999px; background:rgba(0,0,0,.25); border:none; cursor:pointer; }
.hes-dot[aria-current="true"] { background:rgba(0,0,0,.6); }


/* Prevent clipping when text is rotated -90deg */
.hesp[style*="--hes-text-rotate:-90deg"] .hes-caption {
  overflow: visible;
  padding-bottom: 2.5em; /* space for rotated text baseline */
}
.hesp[style*="--hes-text-rotate:-90deg"] .hes-caption-inner {
  /* translate first (in unrotated coords), then rotate */
  transform: translateX(2em) rotate(-90deg);
  transform-origin: left bottom;
}