/**
 * HNT Instagram Showcase Widget Stylesheet
 * Prefix: .hnt-w-lise-5-
 */

.hnt-w-lise-5-showcase {
  --hnt-w-lise-5-bg-color: transparent;
  --hnt-w-lise-5-text-primary: #591d13;
  --hnt-w-lise-5-btn-bg: #681c12;
  --hnt-w-lise-5-btn-hover: #52150d;
  --hnt-w-lise-5-white: #ffffff;
  --hnt-w-lise-5-card-radius: 20px;
  --hnt-w-lise-5-marquee-gap: 16px;
  --hnt-w-lise-5-card-aspect-ratio: 274 / 412;

  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 463px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  position: relative;
  background-color: var(--hnt-w-lise-5-bg-color);
  box-sizing: border-box;
}

.hnt-w-lise-5-showcase,
.hnt-w-lise-5-showcase * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Center CTA Content */
.hnt-w-lise-5-content {
  width: 463px;
  padding: 24px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 10;
  contain: layout style paint;
  transform: translateZ(0);
}

.hnt-w-lise-5-content-inner {
  width: 100%;
}

.hnt-w-lise-5-empty-template {
  padding: 30px 20px;
  text-align: center;
  background: rgba(255, 255, 255, 0.7);
  border: 2px dashed rgba(89, 29, 19, 0.3);
  border-radius: 16px;
  font-size: 14px;
  color: var(--hnt-w-lise-5-text-primary);
  line-height: 1.5;
}

/* Marquee Tracks */
.hnt-w-lise-5-marquee-wrap {
  width: 100%;
  overflow: hidden;
  position: relative;
  container-type: inline-size;
  contain: layout paint;
  transform: translateZ(0);
  cursor: grab;
  cursor: -webkit-grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}

.hnt-w-lise-5-marquee-wrap.is-dragging {
  cursor: grabbing;
  cursor: -webkit-grabbing;
}

.hnt-w-lise-5-track {
  display: flex;
  width: max-content;
  user-select: none;
  -webkit-user-select: none;
  will-change: transform;
}

.hnt-w-lise-5-group {
  display: flex;
  gap: var(--hnt-w-lise-5-marquee-gap);
  padding-right: var(--hnt-w-lise-5-marquee-gap);
  flex-shrink: 0;
  will-change: transform;
}

/* Cards */
.hnt-w-lise-5-card {
  position: relative;
  display: block;
  width: calc((100cqw - var(--hnt-w-lise-5-marquee-gap)) / 2);
  aspect-ratio: var(--hnt-w-lise-5-card-aspect-ratio);
  border-radius: var(--hnt-w-lise-5-card-radius);
  overflow: hidden;
  background-color: #efe6da;
  flex-shrink: 0;
  text-decoration: none;
  transform: translateZ(0);
  -webkit-user-drag: none;
  cursor: pointer;
}

.hnt-w-lise-5-marquee-wrap.is-dragging .hnt-w-lise-5-card {
  cursor: grabbing !important;
  cursor: -webkit-grabbing !important;
}

.hnt-w-lise-5-card * {
  pointer-events: none;
}

.hnt-w-lise-5-card img,
.hnt-w-lise-5-card video {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.4s ease;
  transform: translateZ(0);
  pointer-events: none;
}

.hnt-w-lise-5-card-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(89, 29, 19, 0.42);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 2;
  pointer-events: none;
}

.hnt-w-lise-5-card-badge {
  width: 46px;
  height: 46px;
  background-color: var(--hnt-w-lise-5-white);
  color: var(--hnt-w-lise-5-btn-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0.6);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hnt-w-lise-5-card-badge svg {
  width: 22px;
  height: 22px;
  stroke-width: 2;
}

.hnt-w-lise-5-card:hover img,
.hnt-w-lise-5-card:hover video {
  transform: scale(1.05) translateZ(0);
}

.hnt-w-lise-5-card:hover .hnt-w-lise-5-card-overlay {
  opacity: 1;
}

.hnt-w-lise-5-card:hover .hnt-w-lise-5-card-badge {
  transform: scale(1);
}

/* Responsive Breakpoints */
@media (max-width: 1024px) {
  .hnt-w-lise-5-showcase {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .hnt-w-lise-5-content {
    order: -1;
    width: 100%;
    max-width: 463px;
    margin: 0 auto;
    padding: 0 16px;
  }

  .hnt-w-lise-5-marquee-right {
    display: none;
  }

  .hnt-w-lise-5-card {
    width: calc((100cqw - var(--hnt-w-lise-5-marquee-gap)) / 2.3);
  }
}

@media (max-width: 767px) {
  .hnt-w-lise-5-showcase {
    --hnt-w-lise-5-marquee-gap: 12px;
  }

  .hnt-w-lise-5-card {
    width: calc((100cqw - var(--hnt-w-lise-5-marquee-gap)) / 2);
    border-radius: 14px;
  }

  .hnt-w-lise-5-card-badge {
    width: 40px;
    height: 40px;
  }

  .hnt-w-lise-5-card-badge svg {
    width: 19px;
    height: 19px;
  }
}