/* carousel.css (Panoramika streams carousel)
   -----------------------------------------------------------------------
   Edit ONLY CSS variables below. This is your "template config".
   ---------------------------------------------------------------------*/

:root {
  /* Placement */
  --pano-carousel-top: 64px;
  --pano-carousel-left: 16px;
  --pano-carousel-z: 60;

  /* Carousel width */
  --pano-carousel-width: 640px;
  --pano-carousel-padding: 8px;

  /* Thumbnails */
  --pano-thumb-width: 220px;
  --pano-thumb-height: 124px;
  --pano-thumb-gap: 10px;
  --pano-thumb-radius: 0px; /* set 0px for NO rounding */
  --pano-thumb-outline: 2px;
  --pano-thumb-outline-color: rgba(255,255,255,0.85);
  --pano-thumb-outline-color-active: rgba(255,255,255,1);

  /* Caption */
  --pano-caption-font-size: 14px;
  --pano-caption-font-weight: 700;
  --pano-caption-padding: 6px 8px;
  --pano-caption-bg: rgba(0,0,0,0.55);
  --pano-caption-color: #ffffff;

  /* Arrows */
  --pano-arrow-width: 44px;
  --pano-arrow-height: 110px;
  --pano-arrow-radius: 10px;
  --pano-arrow-bg: rgba(0,0,0,0.35);
  --pano-arrow-bg-hover: rgba(0,0,0,0.55);
  --pano-arrow-color: #ffffff;
  --pano-arrow-font-size: 56px;

  /* Backdrop */
  --pano-carousel-bg: rgba(0,0,0,0.15);
  --pano-carousel-backdrop-filter: blur(0px);
}

.pano-carousel {
  position: absolute;
  top: var(--pano-carousel-top);
  left: var(--pano-carousel-left);
  z-index: var(--pano-carousel-z);

  width: var(--pano-carousel-width);
  padding: var(--pano-carousel-padding);

  display: grid;
  grid-template-columns: var(--pano-arrow-width) 1fr var(--pano-arrow-width);
  align-items: center;
  gap: 10px;

  background: var(--pano-carousel-bg);
  backdrop-filter: var(--pano-carousel-backdrop-filter);

  pointer-events: none; /* allow clicks only on controls */
}
.pano-carousel * { box-sizing: border-box; }

.pano-carousel__arrow {
  pointer-events: auto;
  width: var(--pano-arrow-width);
  height: var(--pano-arrow-height);
  border: 0;
  border-radius: var(--pano-arrow-radius);
  background: var(--pano-arrow-bg);
  color: var(--pano-arrow-color);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.pano-carousel__arrow:hover { background: var(--pano-arrow-bg-hover); }
.pano-carousel__chev { font-size: var(--pano-arrow-font-size); line-height: 1; transform: translateY(-2px); }

.pano-carousel__viewport {
  pointer-events: auto;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.pano-carousel__viewport::-webkit-scrollbar { display:none; }

.pano-carousel__track {
  display: flex;
  align-items: stretch;
  gap: var(--pano-thumb-gap);
  padding: 2px; /* keep outline visible */
}

.pano-carousel__thumb {
  pointer-events: auto;
  width: var(--pano-thumb-width);
  border: var(--pano-thumb-outline) solid var(--pano-thumb-outline-color);
  border-radius: var(--pano-thumb-radius);
  padding: 0;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  display: grid;
  grid-template-rows: var(--pano-thumb-height) auto;
}
.pano-carousel__thumb.is-active { border-color: var(--pano-thumb-outline-color-active); }

.pano-carousel__img {
  width: 100%;
  height: 100%;
  display: block; /* IMPORTANT: fixes missing bottom outline */
  object-fit: cover;
}

.pano-carousel__caption {
  font-size: var(--pano-caption-font-size);
  font-weight: var(--pano-caption-font-weight);
  padding: var(--pano-caption-padding);
  background: var(--pano-caption-bg);
  color: var(--pano-caption-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 768px) {
  :root {
    --pano-carousel-width: calc(100vw - 24px);
    --pano-thumb-width: 200px;
    --pano-thumb-height: 112px;
    --pano-arrow-height: 96px;
  }
}