/* ==========================================================================
   Periscope — dynamic episode components (carousel + grid) for shortcodes /
   Elementor widgets. Class-scoped (not ID-scoped) so they can be dropped into
   any Elementor page. Reproduces the approved episode-card design exactly:
   image on top + number tag, footer-green lower area, title, WATCH HERE /
   MORE INFO buttons. Uses the theme's existing CSS variables.
   ========================================================================== */

/* ---- shared episode-card design (carousel + grid) ---- */
.periscope-episodes-carousel .ep-card,
.periscope-episodes-grid .ep-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: transparent; border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--size--radius);
}
.periscope-episodes-carousel .ep-card-media,
.periscope-episodes-grid .ep-card-media {
  position: relative; width: 100%; aspect-ratio: 16 / 11;
  border-radius: 0; background-size: cover; background-position: center;
}
.periscope-episodes-carousel .ep-tag,
.periscope-episodes-grid .ep-tag {
  position: absolute; top: 12px; left: 12px; margin: 0; padding: 6px 12px;
  border-radius: 999px; background: rgba(5, 55, 52, 0.85); color: #fff;
  font-family: var(--font-family--text); font-size: 0.78rem; font-weight: 700;
  line-height: 1; letter-spacing: 0.05em; text-transform: uppercase;
}
.periscope-episodes-carousel .ep-card-body,
.periscope-episodes-grid .ep-card-body {
  display: flex; flex-direction: column; gap: 16px;
  padding: clamp(18px, 1.6vw, 24px); flex: 1 1 auto; background: var(--deep-green);
}
.periscope-episodes-carousel .ep-card-body .episode-heading,
.periscope-episodes-grid .ep-card-body .episode-heading {
  margin: 0; text-align: left; color: var(--color--white);
  font-size: 1.15em; line-height: 1.3; text-transform: none;
}
.periscope-episodes-carousel .ep-card-body .episode-buttons,
.periscope-episodes-grid .ep-card-body .episode-buttons {
  margin: auto 0 0; padding-top: 0; justify-content: flex-start;
  align-items: center; gap: 8px; flex-wrap: wrap;
}
.periscope-episodes-carousel .ep-card-body .play-button,
.periscope-episodes-grid .ep-card-body .play-button {
  padding-left: 12px; padding-right: 12px; margin-right: 0; flex: 0 0 auto; white-space: nowrap;
}
.periscope-episodes-carousel .ep-card-body .button.secondary,
.periscope-episodes-grid .ep-card-body .button.secondary {
  min-height: 46px; border-radius: var(--size--button-radius);
  padding: 10px 12px 10px; flex: 0 0 auto; white-space: nowrap;
}

/* ---- carousel layout (4 / 2 / 1) ---- */
.periscope-episodes-carousel .episodes-carousel { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; }
.periscope-episodes-carousel .episodes-track {
  display: flex; gap: 32px; flex: 1 1 auto; min-width: 0; align-items: stretch;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  -ms-overflow-style: none; scrollbar-width: none; padding-bottom: 4px;
}
.periscope-episodes-carousel .episodes-track::-webkit-scrollbar { display: none; }
.periscope-episodes-carousel .episodes-track > .ep-card { scroll-snap-align: start; flex: 0 0 calc((100% - 64px) / 3); min-width: 0; }
.periscope-episodes-carousel .ep-arrow {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28); background-color: var(--deep-green); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease, opacity 160ms ease;
}
.periscope-episodes-carousel .ep-arrow:hover { background-color: var(--yellow); color: var(--deep-green); border-color: var(--yellow); }
.periscope-episodes-carousel .ep-arrow:active { transform: scale(0.94); }
.periscope-episodes-carousel .ep-arrow:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.periscope-episodes-carousel .ep-arrow[disabled] { opacity: 0.35; cursor: default; }
.periscope-episodes-carousel .ep-arrow svg { display: block; }

/* ---- grid layout (3 / 2 / 1) ---- */
.periscope-episodes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.2vw, 32px); width: 100%; }

@media screen and (max-width: 991px) {
  .periscope-episodes-carousel .episodes-track { gap: 24px; }
  .periscope-episodes-carousel .episodes-track > .ep-card { flex-basis: calc((100% - 24px) / 2); }
  .periscope-episodes-grid { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 767px) {
  .periscope-episodes-carousel .episodes-track { gap: 16px; }
  .periscope-episodes-carousel .episodes-track > .ep-card { flex-basis: 100%; }
  .periscope-episodes-carousel .ep-arrow { width: 42px; height: 42px; }
  .periscope-episodes-carousel .episodes-carousel { gap: 8px; }
}
@media screen and (max-width: 600px) {
  .periscope-episodes-grid { grid-template-columns: 1fr; }
}

/* ---- Homepage carousel only (3-up desktop): comfortable CTA padding with both
   buttons on ONE line. There is now room for generous padding on real desktops;
   a compact tier keeps them on one line on small laptops (992–1199). Kept as
   wrap so nothing ever overflows. Grid (All Episodes) padding is unchanged. ---- */
.periscope-episodes-carousel .ep-card-body .episode-buttons { gap: 10px; flex-wrap: wrap; }
.periscope-episodes-carousel .ep-card-body .play-button { padding-left: 18px; padding-right: 18px; }
.periscope-episodes-carousel .ep-card-body .button.secondary { padding-left: 18px; padding-right: 18px; }
@media screen and (min-width: 992px) and (max-width: 1199px) {
  .periscope-episodes-carousel .ep-card-body .episode-buttons { gap: 8px; }
  .periscope-episodes-carousel .ep-card-body .play-button { padding-left: 6px; padding-right: 6px; }
  .periscope-episodes-carousel .ep-card-body .button.secondary { padding-left: 6px; padding-right: 6px; }
}

/* ---- Grid (All Episodes) only: comfortable 32px horizontal button padding to
   match the approved All Episodes card design. Carousel is unaffected. ---- */
.periscope-episodes-grid .ep-card-body .play-button { padding-left: 32px; padding-right: 32px; }
.periscope-episodes-grid .ep-card-body .button.secondary { padding-left: 32px; padding-right: 32px; }