/**
 * cafe-row Block
 *
 * Styles for episode/cafe row block component. Displays video
 * cards in grid/slider layouts with overlay effects, play icons,
 * and dark mode support.
 *
 * BEM STRUCTURE
 * - .episode-cards: Container
 * - .me-*: Media episode classes (me-data, me-image, me-title)
 * - .dmfp-*: Dark mode featured posts classes
 * - me-title-wrap, me-main, me-slider: Layout sections
 * - me-image-wrap, me-date, me-play-icon: Image overlays
 *
 * RESPONSIVE BREAKPOINTS
 * - respond-below(md): Tablet and below
 * - respond-below(lg): Large devices and below
 * - respond-below(xl): Extra large and below
 * - 400px media query: Mobile-specific sizing
 *
 * KEY FEATURES
 * - SVG play icon overlays with opacity transitions
 * - Image blur effect on date overlay (has-date modifier)
 * - Swiper slider integration for carousel mode
 * - Dark mode dark-mode class with white text
 * - Button hover state transitions (primary/secondary colors)
 * - Brightness filter on image hover in dark mode
 */
/*
 * Abstracts: Core Exports
 *
 * DESCRIPTION
 * Entry point that forwards all abstract modules (functions, variables,
 * mixins) for convenient importing throughout the codebase.
 *
 * USAGE
 * Import entire abstracts layer: @use "../../abstracts/core" as *;
 * All functions, variables, and mixins become available after import.
 */
/*
 * Abstracts: Sass Functions
 *
 * DESCRIPTION
 * Custom Sass functions for calculations, conversions, and utilities.
 * Used throughout the codebase for consistent value transformations.
 *
 * KEY FUNCTIONS
 * - decimal-round: Rounds numbers to specific decimal places
 * - rem: Converts px values to rem units using $base (16px)
 * - Other utility functions for calculations
 *
 * USAGE
 * @use "function" as *;
 * $font-size: rem(24);  // Returns 1.5rem
 */
/**
 * Rounds a number to specified decimal places
 *
 * @param {number} $number - Value to round
 * @param {number} $digits - Number of decimal places
 * @param {string} $mode - round, ceil, or floor
 * @return {number} Rounded value
 */
/*
 * Abstracts: Core Exports
 *
 * DESCRIPTION
 * Entry point that forwards all abstract modules (functions, variables,
 * mixins) for convenient importing throughout the codebase.
 *
 * USAGE
 * Import entire abstracts layer: @use "../../abstracts/core" as *;
 * All functions, variables, and mixins become available after import.
 */
/*
 * Abstracts: Global Variables
 *
 * DESCRIPTION
 * Application-wide Sass variables including typography, color system,
 * spacing scales, and breakpoint definitions. All color and sizing
 * variables are defined here for consistent theming across components.
 *
 * USAGE
 * Import as: @use "variables" as *;
 * Access variables directly: $primary-100, $font-size-base, etc.
 */
/* Note: If need Disable Decimal-value functionilty open function.scss file */
/*
 * Abstracts: Core Exports
 *
 * DESCRIPTION
 * Entry point that forwards all abstract modules (functions, variables,
 * mixins) for convenient importing throughout the codebase.
 *
 * USAGE
 * Import entire abstracts layer: @use "../../abstracts/core" as *;
 * All functions, variables, and mixins become available after import.
 */
/*
 * Abstracts: Global Mixins
 *
 * DESCRIPTION
 * Reusable Sass mixins for responsive design, utility patterns, and
 * common styling needs. Includes media query helpers, flexbox utilities,
 * and other frequently used patterns.
 *
 * KEY MIXINS
 * - respond-above: Media query min-width breakpoint
 * - respond-below: Media query max-width breakpoint
 * - respond-between: Media query range between two breakpoints
 * - flex patterns and other utility mixins
 *
 * USAGE
 * Import as: @use "mixins" as *;
 * Call mixin: @include respond-above(md) { ... }
 */
/* mini laptop resolution 1349 X 662 and 1246 X 681 and 1218 X 672 */
/* Mozila Firefox */
.episode-cards .me-data .vid-link {
  text-decoration: none;
}
.episode-cards .me-data .me-text-link {
  text-decoration: none;
}
.episode-cards .me-data .btn-link {
  display: block;
  margin-top: 1.25rem;
}
.episode-cards .me-row-container .cafe-row-post:hover {
  text-decoration: none;
}
.episode-cards .me-title-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2.5rem;
}
.episode-cards .me-title {
  flex: 1;
  align-items: center;
  gap: 1.75rem;
  margin-right: 1.88rem;
}
@media (max-width: 767px) {
  .episode-cards .me-title {
    margin-bottom: 1.25rem;
  }
}
.episode-cards .me-title h2 {
  margin-bottom: 0;
}
.episode-cards .me-bottom-content {
  text-decoration: none;
}
.episode-cards .me-button-prev, .episode-cards .me-button-next {
  background-color: #96eaaa;
  color: #081d4d;
  border: 1px solid #96eaaa;
}
.episode-cards .me-button-prev:hover, .episode-cards .me-button-next:hover {
  background-color: #081d4d;
  color: #96eaaa;
}
.episode-cards .me-main .row {
  margin-right: -1.56rem;
  margin-left: -1.56rem;
}
.episode-cards .me-main .row [class*=cell-] {
  padding-left: 1.57rem;
  padding-right: 1.57rem;
}
.episode-cards .me-main .row {
  row-gap: 5rem;
}
@media (max-width: 1199px) {
  .episode-cards .me-main .row {
    margin-right: -0.93rem;
    margin-left: -0.93rem;
  }
  .episode-cards .me-main .row [class*=cell-] {
    padding-left: 0.94rem;
    padding-right: 0.94rem;
  }
  .episode-cards .me-main .row {
    row-gap: 1.88rem;
  }
}
.episode-cards .me-image-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
}
.episode-cards .me-image-wrap.has-date .me-image img {
  filter: blur(3.5px);
}
.episode-cards .me-date {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  z-index: 1;
  color: #fff;
}
.episode-cards .me-date span {
  font-size: 1rem;
  line-height: 1;
  font-weight: 600;
}
@media (max-width: 991px) {
  .episode-cards .me-date span {
    font-size: 1.13rem;
  }
}
@media (max-width: 767px) {
  .episode-cards .me-date span {
    font-size: 1rem;
  }
}
.episode-cards .me-date-title {
  margin-bottom: 0.13rem;
  display: block;
}
.episode-cards .me-content {
  gap: 0.69rem;
  margin-bottom: 1.07rem;
  opacity: 0.94;
}
.episode-cards .me-content h6,
.episode-cards .me-content .h6 {
  margin-bottom: 0;
}
.episode-cards .me-col-item {
  display: block;
  text-decoration: none;
}
.episode-cards .me-col-item:hover .btn-link {
  color: #fff;
}
.episode-cards .me-col-item [data-fancybox] {
  cursor: pointer;
}
.episode-cards .me-image {
  position: relative;
  padding-top: 56.25%;
}
.episode-cards .me-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.episode-cards .me-image {
  border-radius: 0.94rem;
  margin-bottom: 0.94rem;
  overflow: hidden;
}
.episode-cards .me-image:is(a):hover::before {
  opacity: 1;
  visibility: visible;
}
.episode-cards .me-image::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(6, 17, 49, 0.51);
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  border-radius: 0.94rem;
  transition: 0.4s;
}
.episode-cards .me-image img {
  border-radius: 0.94rem;
}
.episode-cards .me-image img.is-blurred {
  filter: blur(5px) brightness(1);
  transform: scale(1);
}
.episode-cards .me-image:hover .icon-play {
  background-color: #5fd6ff;
}
.episode-cards .me-data h5 {
  opacity: 0.94;
}
.episode-cards .me-data p {
  font-size: 0.88rem;
  opacity: 0.94;
}
.episode-cards .me-data .btn-link {
  font-size: 0.88rem;
}
.episode-cards .me-play-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}
.episode-cards .me-play-icon .icon-play {
  width: 2.88rem;
  height: 2.44rem;
  font-size: 1.13rem;
  color: #081d4d;
}
.episode-cards .me-play-icon .icon-play:hover {
  text-decoration: none;
}
.episode-cards .me-play-icon:hover {
  text-decoration: none;
}
.episode-cards .me-play-icon:hover .icon-play {
  text-decoration: none;
}
.episode-cards .me-slider {
  overflow: hidden;
}
.episode-cards .me-slider .row.swiper-wrapper {
  flex-wrap: nowrap;
  margin-right: 0rem;
  margin-left: 0rem;
}
.episode-cards .me-slider .row.swiper-wrapper [class*=cell-] {
  padding-left: 0rem;
  padding-right: 0rem;
}
.episode-cards .dmfp-title-container {
  padding-top: 3.13rem;
}
.episode-cards .dmfp-slide-inner {
  text-decoration: none;
}
.episode-cards .dmfp-slide {
  overflow: hidden;
  margin-right: -1.56rem;
  margin-left: -1.56rem;
}
.episode-cards .dmfp-slide [class*=cell-] {
  padding-left: 1.57rem;
  padding-right: 1.57rem;
}
@media (max-width: 1199px) {
  .episode-cards .dmfp-slide {
    margin-right: -0.93rem;
    margin-left: -0.93rem;
  }
  .episode-cards .dmfp-slide [class*=cell-] {
    padding-left: 0.94rem;
    padding-right: 0.94rem;
  }
}
@media (min-width: 768px) {
  .episode-cards .dmfp-no-slide.less-three .dmfp-slide-item {
    flex: 1;
    max-width: 37.82rem;
  }
}
@media (max-width: 767px) {
  .episode-cards .dmfp-no-slide.less-three .swiper-wrapper {
    row-gap: 1.88rem;
  }
}
.episode-cards .dmfp-no-slide.less-three .swiper-wrapper {
  flex-wrap: wrap;
}
.episode-cards .dmfp-title {
  margin-bottom: 0;
  flex: 1;
  margin-right: 1.25rem;
}
.episode-cards .dmfp-title-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2.5rem;
}
.episode-cards .dmfp-button-prev, .episode-cards .dmfp-button-next {
  background-color: #96eaaa;
  color: #081d4d;
  border: 1px solid #96eaaa;
}
.episode-cards .dmfp-button-prev:hover, .episode-cards .dmfp-button-next:hover {
  background-color: #081d4d;
  color: #96eaaa;
}
.episode-cards .dmfp-slide-item [data-fancybox] {
  cursor: pointer;
}

.main-container.dark-mode .episode-cards .me-content {
  color: #fff;
}
.main-container.dark-mode .episode-cards .me-content h6,
.main-container.dark-mode .episode-cards .me-content .h6 {
  color: #fff;
}
.main-container.dark-mode .episode-cards .me-data {
  color: #fff;
}
.main-container.dark-mode .episode-cards .me-data .btn-link {
  display: block;
  margin-top: 1.25rem;
}
.main-container.dark-mode .episode-cards .me-data .vid-link {
  color: #fff;
  text-decoration: none;
}
.main-container.dark-mode .episode-cards .me-data h5,
.main-container.dark-mode .episode-cards .me-data .h5,
.main-container.dark-mode .episode-cards .me-data p {
  color: #fff;
}
.main-container.dark-mode .episode-cards .me-title {
  color: #fff;
}
.main-container.dark-mode .episode-cards .me-title h2,
.main-container.dark-mode .episode-cards .me-title .h2 {
  color: #fff;
}
.main-container.dark-mode .episode-cards .btn-link {
  color: #96eaaa;
}
.main-container.dark-mode .episode-cards .btn-link:hover {
  color: #fff;
}
.main-container.dark-mode .episode-cards .dmfp-slide-item img {
  transition: 0.4s filter, 0.4s transform;
  will-change: filter, transform;
}
.main-container.dark-mode .episode-cards .dmfp-slide-item:hover img {
  transition: 0.4s;
  filter: brightness(0.5);
  transform: scale(1);
}
.main-container.dark-mode .episode-cards .dmfp-slide-item:hover img.is-blurred {
  filter: blur(5px) brightness(0.5);
  transition: filter 0.4s;
  transform: scale(1);
}