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

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

  /* The Info button's colour came from --sss-primary-color, which this plugin
     never defines — it only ever worked because a theme happened to supply it.
     Undefined, `background: var(--sss-primary-color)` resolved to nothing and
     the button rendered transparent with white text, i.e. invisible. Keep
     honouring the theme's value, but fall back to the plugin's own accent
     (the same blue as the nav arrow hover). */
  --myc-accent: var(--sss-primary-color, #150578);
}

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

/* Styled by class, not by tag, so the heading level stays a document-structure
   choice: h2/h3/h4/p all render identically. */
.carousel-header .carousel-title {
  font-size: 2.25rem;
  font-weight: bold;
  color: #0f172a;
  margin-bottom: 12px;
}

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

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

.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));
}

/* ============================================================================
   FIT CONTAINER / NOT CENTERED LAYOUT (0px Edge Padding)
   When the carousel item is not centered or peek is set to 0, completely eliminate
   padding-left and padding-right so slides start flush at the container's edge.
   ============================================================================ */
.video-carousel-container.myc-mobile-fit,
.video-carousel-container.myc-layout-fit,
.video-carousel-container.myc-not-centered,
.video-carousel-container.myc-peek-zero {
  --myc-peek: 0px !important;
  --myc-peek-desktop: 0px !important;
  --myc-peek-mobile: 0px !important;
}

.video-carousel-container.myc-mobile-fit .carousel-track,
.video-carousel-container.myc-layout-fit .carousel-track,
.video-carousel-container.myc-not-centered .carousel-track,
.video-carousel-container.myc-peek-zero .carousel-track {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

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

/* In rotation modes the server sends every slide in authored order and JS cuts
   it down to this visit's batch, so hide the track until that has happened —
   otherwise the full pool flashes first. JS drops the class as soon as it has
   arranged the slides.

   The hiding is carried entirely by the animation, never by a bare
   `opacity: 0`, so it can only ever fail open: step-end holds the track at 0
   for one second and then reveals it, so a script that never runs costs a
   delay rather than an invisible carousel — and anything that strips
   animations (reduced-motion overrides, user stylesheets) just shows the
   slides immediately. */
.myc-shuffle-pending .carousel-track {
  animation: myc-shuffle-reveal 1s step-end forwards;
}

@keyframes myc-shuffle-reveal {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 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; */
  /* Optional per-carousel height cap (--myc-max-h, set by the shortcode per
     breakpoint). Unset means `none`, so the card keeps its 9:16 ratio. When the
     cap applies the thumbnail crops instead of stretching (object-fit: cover). */
  max-height: var(--myc-max-h, none);
  /* Only the hover effects are animated. `all` would include max-height, which
     leaves the cap stuck on the previous breakpoint's value when the viewport
     crosses 768px (e.g. rotating a phone) until the page is reloaded. */
  transition: transform 0.3s ease, box-shadow 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;
  }
}

/* The thumbnail is a <button> so it can be reached and activated by keyboard;
   these declarations strip the native button chrome so it renders exactly as
   the old <div> did. */
.video-thumbnail {
  width: 100%;
  height: 100%;
  cursor: pointer;
  position: relative;
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: inherit;
  appearance: none;
  -webkit-appearance: none;
}

/* Keyboard focus needs to be visible, but the ring should not show for mouse
   users on a tile that already reacts to hover. */
.video-thumbnail:focus-visible {
  outline: 3px solid #150578;
  outline-offset: 2px;
}

.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 .video-info-title {
  display: block;
  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(--myc-accent) !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;
}

/* Iframe fallback for hosted providers (e.g. Vimeo) — styled to match the
   native lightbox video. Iframes have no intrinsic size, so the JS sets an
   aspect-ratio and a landscape/portrait class to drive the dimensions. */
.lightbox .lightbox-iframe {
  border: 0;
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgb(122 122 122 / 75%);
  background: #000;
  max-width: 100%;
  max-height: 100%;
}

.lightbox .lightbox-iframe.landscape {
  width: 90vw;
  max-width: 1280px;
  height: auto;
}

.lightbox .lightbox-iframe.portrait {
  height: 90vh;
  max-height: 720px;
  width: auto;
}

.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;
  }

  /* Iframe embeds keep their aspect ratio on mobile (object-fit doesn't
     apply to iframes); just make sure they use the full width. */
  .video-carousel-container .lightbox .lightbox-iframe {
    width: 100%;
    height: auto;
    max-height: 100%;
  }
}

.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(--myc-accent);
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  float: right;
  border: 2px solid var(--myc-accent);

  &:hover {
    background-color: transparent !important;
    color: var(--myc-accent);
  }
}

/* ============================================================================
   SLIDE BUTTON ALIGNMENT (LEFT / CENTER / RIGHT)
   ============================================================================ */

.video-carousel-container.myc-btn-align-left .info-button {
  margin-left: 0 !important;
  margin-right: auto !important;
  float: none !important;
}

.video-carousel-container.myc-btn-align-center .info-button {
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
}

.video-carousel-container.myc-btn-align-right .info-button {
  margin-left: auto !important;
  margin-right: 0 !important;
  float: none !important;
}



@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: var(--myc-peek-mobile, 15vw);
    /* Space between items (and between the main item and the peeking ones),
       overridable per carousel via the "Space between items on mobile" setting. */
    --myc-gap: var(--myc-gap-mobile, 16px);
    /* Per-carousel "Maximum item height on mobile" setting; unset = no cap. */
    --myc-max-h: var(--myc-max-h-mobile, none);
  }

  /* Optional per-carousel setting: hide the prev/next arrows on mobile.
     Swiping still works, so the carousel stays fully navigable. */
  .video-carousel-container.myc-hide-nav-mobile .carousel-nav {
    display: none;
  }

  .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: var(--myc-peek-desktop, 32px);
    /* Space between items, overridable per carousel via the
       "Space between items on desktop" setting. */
    --myc-gap: var(--myc-gap-desktop, 8px);
    /* Per-carousel "Maximum item height on desktop" setting; unset = no cap. */
    --myc-max-h: var(--myc-max-h-desktop, none);
  }

  .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;
  }

  /* When the carousel is not centered on desktop (Fit container / Flush edges):
     Calculate item width directly from container width without edge peek slivers. */
  .video-carousel-container.myc-mobile-fit .carousel-item,
  .video-carousel-container.myc-layout-fit .carousel-item,
  .video-carousel-container.myc-not-centered .carousel-item,
  .video-carousel-container.myc-peek-zero .carousel-item {
    width: calc((var(--myc-container-width, 100cqi) - (var(--myc-cols-desktop, 7) - 1) * var(--myc-gap, 8px)) / var(--myc-cols-desktop, 7)) !important;
  }



  .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;
  }

  /* ==========================================================================
     FIT TO CONTAINER MOBILE LAYOUT (.myc-mobile-fit, .myc-layout-fit)
     Renders items flush with container margins (no peek slivers at edges).
     Ideal when showing 2 items side-by-side.
     ========================================================================== */
  .video-carousel-container.myc-mobile-fit,
  .video-carousel-container.myc-layout-fit,
  .video-carousel-container.myc-not-centered,
  .video-carousel-container.myc-peek-zero {
    --myc-peek: 0px !important;
  }

  .video-carousel-container.myc-mobile-fit .carousel-track,
  .video-carousel-container.myc-layout-fit .carousel-track,
  .video-carousel-container.myc-not-centered .carousel-track,
  .video-carousel-container.myc-peek-zero .carousel-track {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .video-carousel-container.myc-mobile-fit .carousel-item,
  .video-carousel-container.myc-layout-fit .carousel-item,
  .video-carousel-container.myc-not-centered .carousel-item,
  .video-carousel-container.myc-peek-zero .carousel-item {
    width: calc((var(--myc-container-width, 100cqi) - (var(--myc-cols-mobile, 2) - 1) * var(--myc-gap, 16px)) / var(--myc-cols-mobile, 2)) !important;
  }

  .video-carousel-container.myc-mobile-fit .info-button,
  .video-carousel-container.myc-layout-fit .info-button,
  .video-carousel-container.myc-not-centered .info-button,
  .video-carousel-container.myc-peek-zero .info-button {
    min-width: 0;
    max-width: 100%;
    width: auto;
    padding: 8px 24px;
    font-size: 14px;
    margin: 12px auto 0;
    border-radius: 6px;
  }

  .video-carousel-container.myc-mobile-fit .carousel-nav,
  .video-carousel-container.myc-layout-fit .carousel-nav,
  .video-carousel-container.myc-not-centered .carousel-nav,
  .video-carousel-container.myc-peek-zero .carousel-nav {
    right: 0;
    bottom: 8px;
  }

  .video-carousel-container.myc-mobile-fit .play-icon,
  .video-carousel-container.myc-layout-fit .play-icon,
  .video-carousel-container.myc-not-centered .play-icon,
  .video-carousel-container.myc-peek-zero .play-icon {
    width: 44px;
    height: 44px;
  }

  .video-carousel-container.myc-mobile-fit .play-icon .play-svg,
  .video-carousel-container.myc-layout-fit .play-icon .play-svg,
  .video-carousel-container.myc-not-centered .play-icon .play-svg,
  .video-carousel-container.myc-peek-zero .play-icon .play-svg {
    width: 28px;
    height: 28px;
  }

  .video-carousel-container.myc-mobile-fit .zoom-icon,
  .video-carousel-container.myc-layout-fit .zoom-icon,
  .video-carousel-container.myc-not-centered .zoom-icon,
  .video-carousel-container.myc-peek-zero .zoom-icon {
    padding: 6px;
  }
}