/* ==========================================================================
   Web Stories module stylesheet
   1. Listing page (grid of story cards)
   2. Full-screen story viewer
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. LISTING PAGE
   -------------------------------------------------------------------------- */

.stories-listing-section { padding: 20px 0 40px; }

.story-card-col { margin-bottom: 20px; }

.story-card {
  display: block;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
  background: #111;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
  will-change: transform;
}

.story-card:hover,
.story-card:focus {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
  text-decoration: none;
}

.story-card-thumb {
  position: relative;
  width: 100%;
  padding-top: 165%; /* 9:16-ish portrait ratio */
  background: #222;
}

.story-card-thumb img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

.story-card-category {
  position: absolute;
  top: 10px; left: 10px;
  background: rgba(255,255,255,0.9);
  color: #d0021b;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 20px;
  z-index: 2;
}

.story-card-body {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 14px 12px 12px;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 10%, rgba(0,0,0,0) 100%);
  color: #fff;
}

.story-card-title {
  font-size: 15px;
  line-height: 1.3;
  font-weight: 700;
  margin: 0 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.story-card-desc { font-size: 12px; opacity: .85; margin: 0 0 6px; display: none; }
.story-card-date { font-size: 11px; opacity: .7; }

.no-stories { padding: 40px 0; text-align: center; color: #888; }

@media screen and (max-width: 767px) {
  .story-card-thumb { padding-top: 145%; }
  .story-card-title { font-size: 13px; -webkit-line-clamp: 2; }
}

/* --------------------------------------------------------------------------
   2. FULL-SCREEN STORY VIEWER
   -------------------------------------------------------------------------- */

.story-viewer-body { margin: 0; background: #000; overflow: hidden; }

/* Shell = flex row: [left arrow] [card] [right arrow], backdrop behind
   everything. Arrows live OUTSIDE the card so the card's own
   `overflow:hidden` (needed to clip slides/animations) never clips them -
   that was why they were invisible/unclickable before. */
.story-shell {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: #000;
  overflow: hidden;
  z-index: 9999;
}

.story-backdrop {
  position: absolute;
  inset: -30px;
  background-size: cover;
  background-position: center;
  filter: blur(35px) brightness(0.45);
  transform: scale(1.15);
  display: none; /* only shown once there's room for it, see desktop breakpoint */
}

/* The card itself. On mobile it fills the screen edge-to-edge (standard
   full-screen story UX). Height is 100dvh (not a fixed vh) so mobile
   browsers with a collapsing address bar don't crop the bottom slide. */
.story-viewer {
  position: relative;
  width: 100%;
  height: 100%;
  height: 100dvh;
  background: #000;
  overflow: hidden;
  z-index: 2;
  font-family: inherit;
  flex: 0 0 auto;
}

/* Progress bar */
.story-progress-wrap {
  position: absolute;
  top: 10px; left: 10px; right: 10px;
  display: flex;
  gap: 4px;
  z-index: 40;
}

.story-progress-seg {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,0.35);
  border-radius: 3px;
  overflow: hidden;
}

.story-progress-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: #fff;
  transition: width .05s linear;
}

.story-viewer.paused .story-progress-fill { transition: none; }

/* Top bar */
.story-topbar {
  position: absolute;
  top: 22px; left: 14px; right: 14px;
  display: flex;
  align-items: center;
  z-index: 40;
  color: #fff;
}

.story-topbar-info { flex: 1; margin-left: 10px; display: flex; flex-direction: column; }
.story-topbar-category { font-size: 11px; text-transform: uppercase; font-weight: 700; opacity: .8; }
.story-topbar-title { font-size: 13px; font-weight: 600; max-width: 70vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.story-close {
  color: #fff;
  font-size: 28px;
  line-height: 1;
  text-decoration: none;
  order: 2;
  padding: 4px 8px;
  cursor: pointer;
}

.story-pause-btn,
.story-mute-btn {
  background: rgba(0,0,0,0.35);
  border: none;
  color: #fff;
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  padding: 0;
  cursor: pointer;
}

.story-pause-btn { order: 3; }
.story-mute-btn { order: 4; }

/* Two-state icon buttons (pause/play, mute/unmute): both SVGs sit in the
   button, only one is shown at a time based on state - no icon font
   dependency, so nothing can silently fail to render. */
.story-pause-btn svg,
.story-mute-btn svg { display: block; }

.story-pause-btn .icon-play { display: none; }
.story-viewer.paused .story-pause-btn .icon-pause { display: none; }
.story-viewer.paused .story-pause-btn .icon-play { display: block; }

.story-mute-btn .icon-vol-off { display: none; }
.story-mute-btn.muted .icon-vol-on { display: none; }
.story-mute-btn.muted .icon-vol-off { display: block; }

/* Slides */
.story-slides { position: relative; width: 100%; height: 100%; }

.story-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease;
  z-index: 1;
}

.story-slide.active { opacity: 1; visibility: visible; z-index: 5; }

/* Media wrapper: <picture> for images, <video> for video slides.
   Both get position/size here; the animation transform (Ken Burns) is
   applied to this same element so it matches the admin preview exactly. */
.story-slide-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  transform-origin: center center;
}

.story-slide-media img,
.story-slide-media video,
video.story-slide-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Overlay = gradient scrim + text container in ONE element, exactly like
   the admin's .preview-overlay. Background/min-height/bottom are all set
   inline via JS (per-slide values), never via a flat CSS `opacity`
   property — that was the earlier bug: `opacity` dims the text along
   with the scrim instead of only darkening the backdrop. */
.story-slide-overlay {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  min-height: 45%;
  padding: 24px 20px 80px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  box-sizing: border-box;
  z-index: 10;
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.7) 0%, rgba(0,0,0,0) 100%);
}

.story-slide-heading { margin: 0 0 8px; font-weight: 800; line-height: 1.25; text-align: center; width: 100%; }
.story-slide-desc { margin: 0 0 12px; line-height: 1.5; text-align: center; width: 100%; }

.story-slide-cta {
  display: inline-block;
  background: #fff;
  color: #111 !important;
  font-weight: 700;
  font-size: 14px;
  padding: 10px 20px;
  border-radius: 30px;
  text-decoration: none;
}

/* ---- Image (Ken Burns) animations ----
   Same keyframe names/values as the admin slide-editor preview so the
   front end always looks identical to what the admin saw while styling
   the slide. animation-duration is set per-slide via JS (matches the
   slide's on-screen duration) instead of the fixed 5s used in the small
   admin preview card. */
@keyframes kb-zoom-in   { from { transform: scale(1);    } to { transform: scale(1.18); } }
@keyframes kb-zoom-out  { from { transform: scale(1.18); } to { transform: scale(1);    } }
@keyframes kb-pan-left  { from { transform: scale(1.14) translateX(4%);  } to { transform: scale(1.14) translateX(-4%); } }
@keyframes kb-pan-right { from { transform: scale(1.14) translateX(-4%); } to { transform: scale(1.14) translateX(4%);  } }
@keyframes kb-pan-up    { from { transform: scale(1.14) translateY(4%);  } to { transform: scale(1.14) translateY(-4%); } }
@keyframes kb-pan-down  { from { transform: scale(1.14) translateY(-4%); } to { transform: scale(1.14) translateY(4%);  } }

.story-slide-media.anim-img {
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.anim-img.img-zoom-in   { animation-name: kb-zoom-in; }
.anim-img.img-zoom-out  { animation-name: kb-zoom-out; }
.anim-img.img-pan-left  { animation-name: kb-pan-left; }
.anim-img.img-pan-right { animation-name: kb-pan-right; }
.anim-img.img-pan-up    { animation-name: kb-pan-up; }
.anim-img.img-pan-down  { animation-name: kb-pan-down; }

/* ---- Text entrance animations ----
   Same keyframe names/values/timing as the admin preview. */
@keyframes tx-fade      { from { opacity:0; } to { opacity:1; } }
@keyframes tx-fade-up   { from { opacity:0; transform: translateY(16px);  } to { opacity:1; transform: translateY(0); } }
@keyframes tx-fade-down { from { opacity:0; transform: translateY(-16px); } to { opacity:1; transform: translateY(0); } }
@keyframes tx-left      { from { opacity:0; transform: translateX(-22px); } to { opacity:1; transform: translateX(0); } }
@keyframes tx-right     { from { opacity:0; transform: translateX(22px);  } to { opacity:1; transform: translateX(0); } }
@keyframes tx-zoom      { from { opacity:0; transform: scale(.82); } to { opacity:1; transform: scale(1); } }

.story-slide-overlay .anim-txt {
  animation-duration: .7s;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}
.anim-txt.txt-fade      { animation-name: tx-fade; }
.anim-txt.txt-fade-up   { animation-name: tx-fade-up; }
.anim-txt.txt-fade-down { animation-name: tx-fade-down; }
.anim-txt.txt-left      { animation-name: tx-left; }
.anim-txt.txt-right     { animation-name: tx-right; }
.anim-txt.txt-zoom      { animation-name: tx-zoom; }

/* Tap zones for prev/next */
.story-nav-zone {
  position: absolute;
  top: 0; bottom: 0;
  width: 30%;
  z-index: 20;
}
.story-nav-prev { left: 0; }
.story-nav-next { right: 0; }

/* Prev/Next arrow buttons. Plain flex items sitting next to the card
   (not absolutely positioned inside it), so the card's overflow:hidden
   can never clip or block clicks on them. Hidden on mobile - the card
   is already full-screen there, matching swipe-first mobile UX. */
.story-arrow {
  display: none;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: rgba(255,255,255,0.15);
  border: none;
  color: #fff;
  width: 44px; height: 44px;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  z-index: 10;
  transition: opacity 0.2s ease, background 0.2s ease;
}

.story-arrow:hover {
  background: rgba(255,255,255,0.25);
}

.story-arrow:active {
  transform: scale(0.95);
}

.story-arrow svg { display: block; }

@media (min-width: 992px) {
  .story-shell { gap: 24px; }

  .story-backdrop { display: block; }

  /* Real 9:16 card, capped so it never exceeds the viewport - this is
     what keeps width and height proportional. Forcing height:100vh with
     only a max-width (the old approach) made the box far taller than a
     16:9 story image, so object-fit:cover had to crop a lot of width to
     fill that extra height. Sizing by aspect-ratio fixes that. */
  .story-viewer {
    width: auto;
    height: min(92vh, 860px);
    aspect-ratio: 9 / 16;
    max-width: 480px;
    border-radius: 14px;
    box-shadow: 0 0 60px rgba(0,0,0,0.6);
  }

  .story-arrow { display: flex; }
}

/* Share bar */
.story-share-bar {
  position: absolute;
  right: 14px;
  bottom: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 40;
}
.story-share-label { display: none; }
.story-share-btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  color: #fff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}

.story-share-btn:hover {
  background: rgba(255,255,255,0.3);
}

.story-share-btn:active {
  transform: scale(0.9);
}

.story-share-btn svg { display: block; }

/* End of story popup - Enhanced with high z-index and close button */
.story-end-popup {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 9999 !important; /* Ensure it appears above everything */
  display: none;
  align-items: flex-end;
  justify-content: center;
}

.story-end-popup.active { 
  display: flex;
  animation: storyFadeIn 0.3s ease both;
}

@keyframes storyFadeIn {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

.story-end-popup-inner {
  width: 100%;
  padding: 24px 16px 30px;
  color: #fff;
  animation: storyFadeUp .3s ease both;
  position: relative;
}

@keyframes storyFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.story-end-close {
  position: absolute;
  top: 8px;
  right: 16px;
  background: none;
  border: none;
  color: #fff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  z-index: 60;
  opacity: 0.8;
  transition: opacity 0.2s ease, transform 0.2s ease;
  padding: 4px 8px;
}

.story-end-close:hover {
  opacity: 1;
  transform: rotate(90deg);
}

.story-end-title { 
  margin: 0 0 16px; 
  font-size: 16px; 
  font-weight: 700; 
  text-align: center;
  padding-right: 40px;
}

.story-end-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.story-end-card {
  position: relative;
  display: block;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  aspect-ratio: 9 / 16;
  background: #222;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.story-end-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.story-end-card-img { 
  position: absolute; 
  inset: 0; 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
}

.story-end-card-category {
  position: absolute;
  top: 6px; left: 6px;
  background: rgba(255,255,255,0.9);
  color: #d0021b;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 20px;
  z-index: 2;
}

.story-end-card-title {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0));
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.story-end-viewmore {
  display: block;
  margin: 20px auto 0;
  width: fit-content;
  background: #fff;
  color: #111 !important;
  font-weight: 700;
  font-size: 14px;
  padding: 10px 24px;
  border-radius: 30px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.story-end-viewmore:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255,255,255,0.2);
}

@media (min-width: 992px) {
  .story-end-grid { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------------------------------
   3. ADSENSE INTEGRATION
   -------------------------------------------------------------------------- */

.story-adsense-container {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 300px;
  /* Below .story-slide-overlay (10) on purpose: the CTA/heading/description
     must always win clicks over an ad slot. This used to be 15 (above the
     overlay), which combined with the placeholder AdSense ID always being
     "on" (see story.php) made this box both an unwanted dark patch over the
     slide and an invisible click-blocker over the hyperlinks. */
  z-index: 8;
  background: rgba(0,0,0,0.1);
  border-radius: 8px;
  overflow: hidden;
  min-height: 60px;
}

.story-adsense-container ins {
  display: block;
  width: 100%;
  min-height: 60px;
}

/* Mobile ad optimization */
@media (max-width: 767px) {
  .story-adsense-container {
    bottom: 70px;
    width: 95%;
    max-width: 320px;
  }
}

/* Performance: Reduce reflows */
.story-slide,
.story-progress-seg,
.story-arrow {
  will-change: transform, opacity;
}

/* Accessibility: Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .story-slide-media.anim-img,
  .story-slide-overlay .anim-txt,
  .story-end-popup,
  .story-end-popup-inner {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}