/* HOSTREND VERTICAL IMAGE MARQUEE — reusable responsive media component.
   Timing, gaps, surface and radius are centrally controlled by Global Settings tokens. */
.host-vertical-marquee {
  --host-vertical-marquee-speed: var(--marquee-speed, 25s);
  --host-vertical-marquee-card-gap: var(--marquee-card-gap, clamp(12px, 1.35vw, 22px));
  --host-vertical-marquee-column-gap: var(--marquee-column-gap, clamp(10px, 1.35vw, 22px));
  --host-vertical-marquee-card-radius: var(--marquee-card-radius, var(--radius-xl, 20px));
  --host-vertical-marquee-card-surface: var(--marquee-card-surface, rgba(255, 255, 255, .86));
  --host-vertical-marquee-card-border: var(--marquee-card-border, rgba(255, 255, 255, .68));
  --host-vertical-marquee-card-shadow: var(--marquee-card-shadow, 0 16px 38px rgba(19, 27, 36, .16));
  position: relative;
  width: 100%;
  height: var(--host-vertical-marquee-height, clamp(480px, 42vw, 620px));
  max-width: 100%;
  overflow: hidden;
  isolation: isolate;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.18) 5%, #000 var(--marquee-fade-top, 14%), #000 var(--marquee-fade-bottom-start, 76%), rgba(0,0,0,.62) 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.18) 5%, #000 var(--marquee-fade-top, 14%), #000 var(--marquee-fade-bottom-start, 76%), rgba(0,0,0,.62) 88%, transparent 100%);
}
.host-vertical-marquee__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--host-vertical-marquee-column-gap);
  align-items: stretch;
  width: 100%;
  height: 100%;
}
.host-vertical-marquee__column {
  position: relative;
  min-width: 0;
  height: 100%;
  overflow: hidden;
}
.host-vertical-marquee__column--up { padding-top: clamp(14px, 2vw, 28px); }
.host-vertical-marquee__track {
  display: flex;
  flex-direction: column;
  width: 100%;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}
.host-vertical-marquee__track--up {
  animation: host-vertical-marquee-up var(--host-vertical-marquee-speed) linear infinite;
}
.host-vertical-marquee__track--down {
  animation: host-vertical-marquee-down var(--host-vertical-marquee-speed) linear infinite;
}
.host-vertical-marquee__group {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: var(--host-vertical-marquee-card-gap);
  padding-bottom: var(--host-vertical-marquee-card-gap);
  min-width: 0;
}
.host-vertical-marquee__card {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--host-vertical-marquee-card-border);
  border-radius: var(--host-vertical-marquee-card-radius);
  background: var(--host-vertical-marquee-card-surface);
  box-shadow: var(--host-vertical-marquee-card-shadow);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.host-vertical-marquee__image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border: 0;
  border-radius: inherit;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
@keyframes host-vertical-marquee-up {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -50%, 0); }
}
@keyframes host-vertical-marquee-down {
  from { transform: translate3d(0, -50%, 0); }
  to   { transform: translate3d(0, 0, 0); }
}
/* Vertical motion remains continuous when visitors hover or focus the gallery. */
.host-vertical-marquee:hover .host-vertical-marquee__track,
.host-vertical-marquee:focus-within .host-vertical-marquee__track {
  animation-play-state: running !important;
}
@media (max-width: 1023px) {
  .host-vertical-marquee {
    --host-vertical-marquee-card-gap: clamp(12px, 1.8vw, 18px);
    --host-vertical-marquee-column-gap: clamp(12px, 2vw, 18px);
  }
}
@media (max-width: 599px) {
  .host-vertical-marquee {
    --host-vertical-marquee-card-gap: 12px;
    --host-vertical-marquee-column-gap: 10px;
    --host-vertical-marquee-card-radius: 14px;
    --marquee-fade-top: 10%;
    --marquee-fade-bottom-start: 80%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.18) 4%, #000 var(--marquee-fade-top), #000 var(--marquee-fade-bottom-start), rgba(0,0,0,.62) 90%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.18) 4%, #000 var(--marquee-fade-top), #000 var(--marquee-fade-bottom-start), rgba(0,0,0,.62) 90%, transparent 100%);
  }
  .host-vertical-marquee__column--up { padding-top: 12px; }
  .host-vertical-marquee__card { border-width: 1px; }
}
@media (prefers-reduced-motion: reduce) {
  .host-vertical-marquee {
    height: auto;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .host-vertical-marquee__columns { height: auto; }
  .host-vertical-marquee__column { height: auto; overflow: visible; padding-top: 0; }
  .host-vertical-marquee__track { animation: none !important; transform: none !important; will-change: auto; }
  .host-vertical-marquee__group--clone { display: none !important; }
}