/* ============================================================================
   CAROUSEL CONTAINER & LAYOUT
   ============================================================================ */

.video-carousel-container {
  width: 100%;
  padding: 64px 0;
  position: relative;
  padding-top: 0 !important;
}

.carousel-header {
  text-align: center;
  margin-bottom: 48px;
}

.carousel-header h1 {
  font-size: 2.25rem;
  font-weight: bold;
  color: #0f172a;
  margin-bottom: 12px;
}

.carousel-header p {
  font-size: 1.125rem;
  color: #64748b;
}

.carousel-wrapper {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.carousel-wrapper::-webkit-scrollbar {
  display: none;
}

.carousel-track {
  display: flex;
  gap: var(--myc-gap, 8px);
  width: fit-content;
  padding-top: 32px;
  /* Reserve space at both edges so a sliver of the previous/next item peeks
     through, hinting that the carousel scrolls. --myc-peek is the visible
     sliver width; the extra --myc-gap matches the track gap. */
  padding-left: calc(var(--myc-peek, 10vw) + var(--myc-gap, 8px));
  padding-right: calc(var(--myc-peek, 10vw) + var(--myc-gap, 8px));
}

.carousel-item {
  flex-shrink: 0;
  /* width: 414px; */
  transition: opacity 0.3s ease;
}

/* Disable hover effects on touch devices */
@media (hover: none) and (pointer: coarse) {
  .carousel-track:has(.video-card-wrapper:hover) .carousel-item:not(:hover) {
    opacity: 1 !important;
  }
}

/* For desktop/mouse devices, enable hover effects */
@media (hover: hover) and (pointer: fine) {
  .carousel-track:has(.video-card-wrapper:hover) .carousel-item:not(:hover) {
    opacity: 0.5;
  }
}


/* ============================================================================
   VIDEO CARD & THUMBNAIL STYLES
   ============================================================================ */

.video-card-wrapper {
  position: relative;
  background: white;
  border-radius: 16px;
  overflow: hidden;
  /* height: 627px; */
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* .video-card-wrapper:hover {
  transform: scale(1.1);
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
} */

/* Disable scale hover effect on touch devices */
@media (hover: hover) and (pointer: fine) {
  .carousel-item .video-card-wrapper:hover {
    transform: scale(1.1);
    z-index: 99;
  }
}

.video-thumbnail {
  width: 100%;
  height: 100%;
  cursor: pointer;
  position: relative;
}

.video-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* aspect-ratio: 9/16; */
}

.play-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(0, 18, 134, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  transition: transform 0.2s ease, background 0.2s ease, opacity 0.2s ease;
  opacity: 0.98;
  pointer-events: none;
}

.play-icon .play-svg {
  width: 41px;
  height: 41px;
  color: white;
  display: block;
}

.zoom-icon {
  padding: 9px;
}

.zoom-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Disable play icon hover effects on touch devices */
@media (hover: hover) and (pointer: fine) {
  .video-card-wrapper:hover .play-icon {
    transform: translate(-50%, -50%) scale(1.08);
    background: rgba(0, 18, 134, 0.6);
  }

  .video-card-wrapper:active .play-icon {
    transform: translate(-50%, -50%) scale(0.98);
  }
}

.video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
  opacity: 0;
  transition: opacity 0.3s;
  display: none;
}

.video-info-hover {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px;
  color: white;
  transform: translateY(100%);
  transition: transform 0.3s;
  display: none;
}

.video-info-hover h3 {
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 8px;
  color: white;
}

.video-info-hover p {
  font-size: 0.875rem;
  opacity: 0.9;
}

.info-button {
  margin-top: 16px;
  width: 100%;
  padding: 12px 24px;
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.info-button:hover {
  background: var(--sss-primary-color) !important;
  color: white;
}


/* ============================================================================
   INFO SECTION & DETAILS PANEL
   ============================================================================ */

.info-section {
  max-width: 896px;
  margin: 32px auto 0;
  display: none;
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.info-content {
  background: white;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  border: 1px solid #e2e8f0;
  position: relative;
}

.close-button {
  position: absolute;
  top: 16px;
  right: 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  color: #0f172a;
  z-index: 9999;
}

.close-button:hover {
  background: #f1f5f9;
}

/* Mobile close button - hidden on desktop */
.close-button-mobile {
  display: none;
}

/* Show mobile close button only on mobile devices */
@media only screen and (max-width: 768px) {
  .close-button-mobile {
    display: block;
    position: absolute;
    bottom: 16px;
    right: 16px;
    top: auto;
  }
}

.info-content h2 {
  font-size: 1.875rem;
  font-weight: bold;
  color: #0f172a;
  margin-bottom: 16px;
  display: none;
}

.info-content p {
  font-size: 1.125rem;
  color: #28266f;
  line-height: 1.75;
  margin: 0 auto;
  max-width: 1100px;
  line-height: 1.4;
  padding-bottom: 60px;
  padding-top: 40px;
  font-size: 28px;
  font-style: italic;
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
}

.watch-button {
  margin-top: 24px;
  padding: 12px 32px;
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.watch-button:hover {
  background: #2563eb;
  transform: scale(1.05);
}


/* ============================================================================
   LIGHTBOX & VIDEO MODAL
   ============================================================================ */

.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgb(122 122 122 / 75%);
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.lightbox-close {
  position: absolute;
  top: 74px;
  right: 24px;
  background: rgb(46 46 46);
  border: none;
  cursor: pointer;
  border-radius: 50%;
  color: white;
  font-size: 2rem;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  z-index: 99999 !important;
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.lightbox video {
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgb(122 122 122 / 75%);
  max-width: 100%;
  max-height: 100%;
}

.lightbox video.landscape {
  width: 90vw;
  max-width: 1280px;
  height: auto;
  object-fit: cover;
}

.lightbox video.portrait {
  height: 90vh;
  max-height: 720px;
  width: auto;
  object-fit: cover;
}

.lightbox img {
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  max-width: 100%;
  max-height: 100%;
}

.lightbox img.landscape {
  width: 90vw;
  max-width: 1280px;
  height: auto;
  object-fit: cover;
}

/* ============================================================================
   LIGHTBOX MEDIA FIT — MOBILE ONLY
   Per-carousel setting ("Lightbox → Media fit on mobile" in the carousel
   dashboard). The shortcode adds .myc-fit-contain or .myc-fit-cover to the
   lightbox. Scoped to .video-carousel-container so it can't leak into other
   lightboxes on the site. Desktop keeps the default sizing above.
   ============================================================================ */
@media only screen and (max-width: 768px) {
  .video-carousel-container .lightbox.myc-fit-contain .lightbox-image,
  .video-carousel-container .lightbox.myc-fit-contain .lightbox-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-color: var(--myc-lightbox-bg, #fff);
  }

  .video-carousel-container .lightbox.myc-fit-cover .lightbox-image,
  .video-carousel-container .lightbox.myc-fit-cover .lightbox-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.lightbox img.portrait {
  height: 90vh;
  max-height: 720px;
  width: auto;
  object-fit: cover;
}


/* ============================================================================
   NAVIGATION ARROWS
   ============================================================================ */

.carousel-nav {
  position: absolute;
  bottom: 0;
  right: 24px;
  display: flex;
  gap: 0;
  pointer-events: all;
  align-items: center;
  z-index: 100;
}

.carousel-nav button {
  position: static;
  background: rgba(255, 255, 255, 0);
  color: #E3E7F3;
  border: 0;
  width: 38px;
  height: 44px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none;
  transition: transform 0.2s ease;
  padding: 0;
}

@media (hover: hover) and (pointer: fine) {
  .carousel-nav button:hover {
    color: #150578;
  }
}

.info-button {
  margin-top: 16px;
  width: 146px;
  padding: 10px 48px;
  color: white;
  background-color: var(--sss-primary-color);
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  float: right;
  border: 2px solid var(--sss-primary-color);

  &:hover {
    background-color: transparent !important;
    color: var(--sss-primary-color);
  }
}



@media only screen and (max-width: 768px) {
  .video-carousel-container {
    /* Adjust this value to change how much of the left/right items are visible.
       15vw means 15% of the screen width on each side; the main item shrinks to
       make room. Decrease to make the main item larger. */
    --myc-peek: 15vw;
    /* Space between items (and between the main item and the peeking ones). */
    --myc-gap: 16px;
  }

  .video-card-wrapper {
    aspect-ratio: 9 / 16;
    height: auto;
  }

  .carousel-item {

    /* item width derived from the "items visible on mobile" setting (--myc-cols-mobile,
       set by the shortcode), minus the peek slivers reserved at both edges */
    width: calc((100vw - (var(--myc-cols-mobile, 4) - 1) * var(--myc-gap, 16px) - 2 * (var(--myc-peek, 15vw) + var(--myc-gap, 16px))) / var(--myc-cols-mobile, 4));
    transition: opacity 0.3s ease;
    height: auto;

  }

  /* Scoped to the container so this outranks generic .info-button rules
     in theme/global custom CSS. */
  .video-carousel-container .info-button {
    margin: 16px auto 0;
    float: none;
    width: auto;
    min-width: 150px;
    padding: 12px 44px;
    font-size: 16px;
    border-radius: 10px;
  }

  .info-content p {

    font-size: 26px;

  }

}

body .carousel-item img.zoom-icon-img {
  width: 24px !important;
  height: 24px !important;
}

/* Custom (user-uploaded) slide icon, shown inside the circular badge */
body .carousel-item img.custom-icon-img {
  width: 28px !important;
  height: 28px !important;
  object-fit: contain;
}

@media only screen and (min-width: 769px) {
  .video-carousel-container {
    /* How much of the previous/next item peeks in at each edge on desktop.
       Keep this small (a thin sliver) — if it approaches the width of an item,
       the edges show what looks like whole extra items and the "items visible"
       setting appears wrong. Set to 0px for hard edges with no hint. */
    --myc-peek: 32px;
    /* Space between items. */
    --myc-gap: 8px;
  }

  .carousel-item {
    flex-shrink: 0;
    /* item width derived from the "items visible on desktop" setting (--myc-cols-desktop,
       set by the shortcode), minus the peek slivers reserved at both edges */
    width: calc((100vw - (var(--myc-cols-desktop, 7) - 1) * var(--myc-gap, 8px) - 2 * (var(--myc-peek, 10vw) + var(--myc-gap, 8px))) / var(--myc-cols-desktop, 7)) !important;
    transition: opacity 0.3s ease;
    /* aspect-ratio: 9/16; */
    display: flex;
    flex-direction: column;
  }



  .video-card-wrapper {
    aspect-ratio: 9/16;
    /* height: 420px; */
  }
}

.info-button {

  margin: 12px auto 0 auto;
}

.info-description {
  position: relative;
}

.ar-quote-opener,
.ar-quote-closer {
  position: relative;
}

.ar-quote-opener::before,
.ar-quote-closer::after {
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
  opacity: 0.95;
}

.ar-quote-opener::before {
  left: -56px;
  top: -4px;
  background-image: url(left-blockquote.png);
  display: inline-block;
}

.ar-quote-closer::after {
  right: -56px;
  bottom: -16px;
  background-image: url(right-blockquote.png);
  display: inline-block;
}


@media only screen and (max-width: 768px) {
  .ar-quote-closer::after {
    right: -60px;
    bottom: -18px;
  }

  .ar-quote-opener::before {
    left: -52px;
    top: -4px;
  }

  .ar-quote-opener::before,
  .ar-quote-closer::after {

    width: 30px;
    height: 30px;

  }

  .video-card-wrapper {
    aspect-ratio: 9 / 16;
    height: auto;
    position: relative;
  }

  .carousel-item {

    width: calc((100vw - (var(--myc-cols-mobile, 4) - 1) * var(--myc-gap, 16px) - 2 * (var(--myc-peek, 15vw) + var(--myc-gap, 16px))) / var(--myc-cols-mobile, 4));
    transition: opacity 0.3s ease;
    height: auto;
    display: flex;
    flex-direction: column;
  }
}