/* Resource public-view gallery — TPT-style thumbnail rail + main stage.
   Feature: resource gallery redesign (2026-06-18).
   Markup is rendered by ResourcesView::renderResourceGallery(). Bootstrap 5
   utilities (.row/.col-*/.d-none/.gap-2/order-*) are already loaded; this file
   only styles the gallery-specific classes. Brand navy #1f3f68. */

/* ---- Rail ---------------------------------------------------------------- */

.cce-resgallery-rail-inner {
   /* xs: horizontal strip below the stage (markup uses flex-row). */
   overflow-x: auto;
   overflow-y: hidden;
   -webkit-overflow-scrolling: touch;
   padding-bottom: 4px;
}

.cce-resgallery-thumb {
   flex: 0 0 auto;          /* never shrink/squash in the flex strip */
   width: 64px;
   height: 64px;
   padding: 0;
   border: 2px solid transparent;
   border-radius: 6px;
   background: #fff;
   position: relative;
   overflow: hidden;
   cursor: pointer;
   transition: border-color 0.12s ease-in-out;
}

.cce-resgallery-thumb > img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

.cce-resgallery-thumb:hover {
   border-color: #9bb3d1;
}

.cce-resgallery-thumb.is-active {
   border-color: #1f3f68;
   box-shadow: 0 0 0 1px rgba(31, 63, 104, 0.25);
}

.cce-resgallery-thumb:focus-visible {
   outline: 2px solid #1f3f68;
   outline-offset: 1px;
}

.cce-resgallery-thumb-badge {
   position: absolute;
   top: 3px;
   right: 3px;
   line-height: 0;
   color: #fff;
   filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.6));
   pointer-events: none;
}

.cce-resgallery-thumb-badge svg {
   width: 16px;
   height: 16px;
}

/* ---- Stage --------------------------------------------------------------- */

.cce-resgallery-stage {
   min-width: 0;            /* allow the column to shrink inside the row */
}

.cce-stage-slide {
   display: flex;           /* .d-none (Bootstrap) hides inactive slides */
   align-items: center;
   justify-content: center;
   position: relative;
   background: #f8fafc;
   border: 1px solid #d7dde5;
   border-radius: 8px;
   overflow: hidden;
   min-height: 320px;
   cursor: pointer;
}

.cce-stage-img {
   max-width: 100%;
   max-height: 480px;
   object-fit: contain;
   display: block;
   margin: auto;
}

.cce-stage-play {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   font-size: 3.5rem;
   line-height: 0;
   color: #fff;
   filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.7));
   pointer-events: none;
}

.cce-stage-zoomhint {
   position: absolute;
   bottom: 10px;
   right: 10px;
   width: 32px;
   height: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background: rgba(0, 0, 0, 0.55);
   color: #fff;
   font-size: 0.95rem;
   pointer-events: none;
}

.cce-stage-badge {
   position: absolute;
   top: 10px;
   right: 10px;
   line-height: 0;
   color: #fff;
   filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.6));
   pointer-events: none;
}

.cce-stage-badge svg {
   width: 28px;
   height: 28px;
}

.cce-stage-iframe {
   /* Default (YouTube): 16:9 landscape player. */
   width: 100%;
   aspect-ratio: 16 / 9;
   border: 0;
   display: block;
}

/* TikTok and Instagram embeds are PORTRAIT/tall — a 16:9 box crushes them.
   Size them by height (vh-capped) so they don't blow up wide on a wide stage,
   with a sensible max-width matching each platform's vertical card. The bare
   iframe can't auto-fit to content (that needs the platform JS API), so we give
   each a correctly-proportioned, scrollable box. */
.cce-stage-slide[data-kind="tiktok"] .cce-stage-iframe {
   aspect-ratio: auto;
   width: min(100%, 325px);
   height: min(80vh, 740px);
   margin: 0 auto;
}

.cce-stage-slide[data-kind="instagram"] .cce-stage-iframe {
   aspect-ratio: auto;
   width: min(100%, 400px);
   height: min(82vh, 720px);
   margin: 0 auto;
}

/* YouTube Shorts are 9:16 portrait — give the player a tall box (a 16:9 box
   pillarboxes the short). kind stays "youtube"; the view tags shorts with
   data-variant="shorts". */
.cce-stage-slide[data-kind="youtube"][data-variant="shorts"] .cce-stage-iframe {
   aspect-ratio: 9 / 16;
   width: auto;
   height: min(80vh, 720px);
   max-width: 100%;
   margin: 0 auto;
}

/* ---- Desktop: vertical rail left of the stage ---------------------------- */

@media (min-width: 576px) {
   .cce-resgallery-rail-inner {
      /* markup switches to flex-column at >=sm; cap height + scroll if many. */
      overflow-x: hidden;
      overflow-y: auto;
      max-height: 480px;
      padding-bottom: 0;
   }

   .cce-resgallery-thumb {
      width: 100%;
      height: auto;
      aspect-ratio: 1 / 1;
   }
}