/* pc.css - isolated PC layout overrides for /pc preview */
@media (min-width: 1025px) {
  .bottom-controls{ position:absolute; left:50%; transform:translateX(-50%); bottom:12px; width:100%; max-width:min(1080px, calc(95svh * 9/16), 100vw); display:flex; justify-content:center; }
  #nextButton{ position:relative; margin:0 auto; }
}
/* PC carousel overrides */
.pc-carousel .card-container { position: relative; overflow: hidden; }
.pc-carousel .card { position: relative !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transition: none !important; }
#carousel-track { width: 100%; height: 100%; display: flex; gap: 0; }
.pc-carousel .card { flex: 0 0 100%; }
/* Disable all CSS transitions/animations in PC preview */
.pc-no-anim *, .pc-no-anim *::before, .pc-no-anim *::after { transition: none !important; animation: none !important; }
.pc-no-anim .card { transition: none !important; }
/* Ensure straight, aligned layout in PC carousel */
.pc-carousel .card-container { margin: 0 auto; overflow: hidden; }
#carousel-track { align-items: stretch; }
.pc-carousel .card { top: 0 !important; left: 0 !important; }
/* Avoid any accidental rotation/skew in preview */
.pc-carousel .card, .pc-carousel .card * { transform: none !important; }
/* Carousel spacing and content containment */
.pc-carousel #carousel-track { gap: 16px; }
.pc-carousel .card { box-sizing: border-box; }
.pc-carousel .text-overlay { max-width: 88%; margin-left: auto; margin-right: auto; }
/* Ensure card content is fully contained within each card in PC carousel */
.pc-carousel .card-container {
  height: 92vh;                 /* give cards stable height on desktop */
  max-width: 1080px;
  aspect-ratio: 9 / 16;
  margin: 0 auto;
}
.pc-carousel .card { position: relative !important; height: 100%; }
/* Re-enable centered overlay inside card and constrain height */
.pc-carousel .text-overlay {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important; /* override earlier transform:none */
  width: 90% !important;
  max-width: 900px;
  max-height: calc(100% - 120px) !important;   /* keep inside card */
  overflow: auto !important;                    /* allow inner scroll if needed */
  padding: 20px !important;
  box-sizing: border-box;
}
/* Tweak heading/body sizes to avoid overflow on shorter heights */
@media (max-height: 800px) {
  .pc-carousel .text-overlay h1 { font-size: 24px; }
  .pc-carousel .text-overlay p { font-size: 13px; line-height: 1.45; }
}
@media (max-height: 700px) {
  .pc-carousel .text-overlay h1 { font-size: 22px; }
  .pc-carousel .text-overlay p { font-size: 12px; line-height: 1.4; }
}
@media (min-width: 1025px){ .pc-carousel .card-container { max-width: 1200px; } }
/* Peeking layout: ensure container allows side peeks */
@media (min-width: 1025px){
  .pc-carousel .card-container { max-width: 1280px; }
}
/* Scroll mode: show all cards horizontally with snap */
.pc-scroll .card-container { height: 92vh; max-width: 1280px; aspect-ratio: 9/16; margin: 0 auto; }
.pc-scroll .card { height: 100%; box-sizing: border-box; }
.pc-scroll .text-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 90%; max-width: 900px; max-height: calc(100% - 120px); overflow: auto; }
/* Stack mode: show all cards vertically, each self-contained */
.pc-stack .card-container { display:block; width:min(1280px,96vw); margin:0 auto; padding: 16px 0; height:auto; max-width:1280px; }
.pc-stack .card { position:relative !important; opacity:1 !important; visibility:visible !important; pointer-events:auto !important; transform:none !important; height:auto; box-sizing:border-box; margin:0 0 24px 0; }
.pc-stack .card-content { position:relative; height:auto; }
.pc-stack .card-video { width:100%; height:auto; object-fit:cover; }
.pc-stack .text-overlay { position:relative !important; top:auto !important; left:auto !important; transform:none !important; width:90% !important; max-width:1000px; margin:0 auto; max-height:none !important; overflow:visible !important; padding:20px !important; box-sizing:border-box; }
/* Swiper coverflow sizing */
.pc-swiper .card-container { width: min(1280px, 96vw); height: 92vh; margin: 0 auto; }
.pc-swiper .swiper { width: 100%; height: 100%; }
.pc-swiper .swiper-slide { width: 64vw; max-width: 860px; height: 100%; display: flex; align-items: stretch; justify-content: center; }
@media (min-width: 1280px){ .pc-swiper .swiper-slide { width: 820px; } }
.pc-swiper .card { position: relative !important; height: 100%; box-sizing: border-box; }
.pc-swiper .text-overlay { position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); width: 90%; max-width: 900px; max-height: calc(100% - 140px); overflow: auto; padding: 20px; box-sizing: border-box; }
/* Ensure visibility in swiper mode regardless of app scripts */
.pc-swiper .card {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
/* Full-viewport slider nav buttons */
.pc-swiper #nextButton, .pc-swiper #backButton {
  position: fixed !important;
  top: 50% !important;
  transform: translateY(-50%);
  z-index: 1000;
  height: 48px !important; min-width: 56px !important;
  padding: 0 16px !important;
  border-radius: 6px !important;
  background-color: rgba(0,0,0,0.8) !important;
  color: #fff !important; border: none !important;
}
.pc-swiper #backButton { left: 16px; display: inline-flex !important; }
.pc-swiper #nextButton { right: 16px; }
.pc-swiper .static-page-indicator, .pc-swiper .bottom-controls { pointer-events: none; }
/* Strip mode: 480x720 cards, 16 horizontally, scroll with native scrollbar */
.pc-strip .card-container { width: 100vw; height: 760px; margin: 0 auto; overflow-x: auto; overflow-y: hidden; }
.pc-strip #strip { display: flex; gap: 16px; padding: 16px; height: 100%; align-items: center; }
.pc-strip .strip-card { width: 480px; height: 720px; flex: 0 0 auto; position: relative; box-sizing: border-box; border-radius: 8px; overflow: hidden; background: rgba(0,0,0,0.4); }
.pc-strip .strip-card .card { position: relative !important; height: 100%; }
/* disable interfering UI over strip */
.pc-strip .bottom-controls { pointer-events: none; }