/**
 * @file
 * Hero Slideshow styles using Flickity - matching original editors-pick design
 */

/* =============================================================================
   Hero Slideshow Container - matching .editors-pick
   ========================================================================== */

.hero-slideshow-wrapper {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: visible; /* Allow arrows to overflow */
  margin: 40px 0 65px 0;
  z-index: 0;
}

.hero-slideshow-wrapper:after {
  display: table;
  content: "";
  clear: both;
}

.hero-slideshow {
  width: 100%;
  position: relative;
}

/* Editors Pick badge - matches .editors-pick .views_slideshow_slide:before */
.hero-slide:before,
.views_slideshow_slide:before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  content: "";
  width: 140px;
  height: 20px;
  background-image: url(../images/icn-editors-pick.png);
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 10;
}

/* Blue bottom border - matches .views_slideshow_cycle_main:after */
.hero-slideshow:after {
  position: absolute;
  display: block;
  content: "";
  width: calc(100% - 9px);
  bottom: -5px;
  left: 5px;
  border-bottom: 5px solid #2D66AC;
  z-index: 1;
}

/* =============================================================================
   Individual Slide - matching .views-row structure
   ========================================================================== */

.hero-slide {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.hero-slide:after {
  display: table;
  content: "";
  clear: both;
}

/* Two column layout: 58% image / 42% text - matches original structure */
.hero-slide .content-locking-wrapper > div:first-child,
.editors-pick .hero-slide .content-locking-wrapper > div:first-child {
  float: left;
  width: 58% !important;
  height: 360px !important;
  position: relative;
  overflow: hidden;
}

.hero-slide .content-locking-wrapper > div:first-child a {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-slide .content-locking-wrapper > div:first-child picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-slide .content-locking-wrapper > div:first-child img,
.hero-slide .content-locking-wrapper > div:first-child picture img,
.editors-pick .hero-slide .content-locking-wrapper > div:first-child img {
  width: 100% !important;
  height: 360px !important;
  max-height: 360px !important;
  min-height: 360px !important;
  max-width: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* =============================================================================
   Text Content Area - matching .views-field-nothing
   ========================================================================== */

.hero-slide .content-locking-wrapper > div:nth-child(2),
.editors-pick .hero-slide .content-locking-wrapper > div:nth-child(2) {
  float: left;
  width: 42% !important;
  height: 360px !important;
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  border-left: none;
  position: relative;
  background: #fff;
  padding: 5px 20px 0 10px;
}

.hero-slide .content-text {
  margin-top: 32px;
}

/* =============================================================================
   Typography - matching original .content-text styles
   ========================================================================== */

/* These styles come from cumgmt.css and are already applied via .editors-pick */
/* Keeping minimal overrides here for consistency */

.hero-slide .ep-date {
  margin-top: 5px;
}

.hero-slide .latest-summary {
  margin-top: 15px;
}

.hero-slide .latest-author {
  margin-top: 30px;
}

.hero-slide .latest-length {
  margin-top: 60px;
}

/* =============================================================================
   Call to Action Link - matching .content-arrow
   ========================================================================== */

.hero-slide .content-arrow {
  display: block;
  position: absolute;
  right: 0px;
  bottom: -1px;
  width: 74px;
  height: 38px;
  text-indent: -999em;
  background-image: url(../images/icn-latest-arrow-blue.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.hero-slide .content-arrow:hover {
  background-image: url(../images/icn-latest-arrow-blue-on.png);
}

/* =============================================================================
   Flickity Controls - matching original arrows
   ========================================================================== */

/* Hide default Flickity buttons, use custom styling */
.hero-slideshow .flickity-button {
  position: absolute;
  display: block;
  background: #fff;
  padding: 5px;
  border: none;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  cursor: pointer;
}

.hero-slideshow .flickity-button:hover {
  background: #fff;
}

.hero-slideshow .flickity-button:focus {
  box-shadow: none;
  outline: none;
}

/* Hide default SVG icons */
.hero-slideshow .flickity-button .flickity-button-icon {
  display: none;
}

/* Add Font Awesome icons */
.hero-slideshow .flickity-button:before {
  display: block;
  color: #ccc;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.hero-slideshow .flickity-button:hover:before {
  color: #DC6126;
}

/* Previous arrow */
.hero-slideshow .flickity-prev-next-button.previous {
  left: -50px;
}

.hero-slideshow .flickity-prev-next-button.previous:before {
  content: "\f053"; /* fa-chevron-left */
}

/* Next arrow */
.hero-slideshow .flickity-prev-next-button.next {
  right: -50px;
}

.hero-slideshow .flickity-prev-next-button.next:before {
  content: "\f054"; /* fa-chevron-right */
}

.hero-slideshow .flickity-prev-next-button:disabled {
  opacity: 1;
  cursor: default;
}

.hero-slideshow .flickity-prev-next-button:disabled:before {
  color: #ccc;
}

/* =============================================================================
   Pagination Dots - matching original bullets
   ========================================================================== */

.hero-slideshow .flickity-page-dots {
  position: absolute;
  bottom: -35px;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 0;
  margin: 0;
  list-style: none;
  z-index: 2;
}

.hero-slideshow .flickity-page-dots .dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 8px;
  background: #fff;
  border-radius: 50%;
  padding: 0;
  border: 2px solid #0066A5;
  cursor: pointer;
  opacity: 1;
}

.hero-slideshow .flickity-page-dots .dot:hover {
  background: #fff;
  border-color: #0066A5;
}

.hero-slideshow .flickity-page-dots .dot.is-selected {
  background-color: #0066A5;
  border-color: #0066A5;
}

.hero-slideshow .flickity-page-dots .dot:focus {
  box-shadow: none;
  outline: none;
}

/* =============================================================================
   Mobile & Tablet Responsive - matching original breakpoints
   ========================================================================== */

/* Desktop layout - two columns side by side */
@media (min-width: 992px) {
  .hero-slide .content-locking-wrapper > div:first-child,
  .editors-pick .hero-slide .content-locking-wrapper > div:first-child {
    float: left;
    width: 58% !important;
    height: 360px !important;
  }

  .hero-slide .content-locking-wrapper > div:nth-child(2),
  .editors-pick .hero-slide .content-locking-wrapper > div:nth-child(2) {
    float: left;
    width: 42% !important;
    height: 360px !important;
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-left: none;
  }
}

@media (max-width: 991px) {
  /* Stack layout on tablet/mobile - matches original */
  .hero-slide .content-locking-wrapper > div:first-child,
  .editors-pick .hero-slide .content-locking-wrapper > div:first-child {
    float: left;
    width: 100% !important;
    height: 270px !important;
  }

  .hero-slide .content-locking-wrapper > div:first-child img,
  .hero-slide .content-locking-wrapper > div:first-child picture img,
  .editors-pick .hero-slide .content-locking-wrapper > div:first-child img {
    width: 100% !important;
    height: 270px !important;
    max-height: 270px !important;
    min-height: 270px !important;
    max-width: 100% !important;
  }

  .hero-slide .content-locking-wrapper > div:nth-child(2),
  .editors-pick .hero-slide .content-locking-wrapper > div:nth-child(2) {
    float: left;
    width: 100% !important;
    height: 310px !important;
    border: 1px solid #ccc;
  }

  /* Adjust arrow positions for smaller screens */
  .hero-slideshow .flickity-prev-next-button.previous {
    left: 20%;
    top: 275px;
    transform: none;
  }

  .hero-slideshow .flickity-prev-next-button.next {
    right: 20%;
    top: 275px;
    transform: none;
  }

  .hero-slideshow .flickity-button:before {
    font-size: 28px;
  }

  /* Move pagination dots up */
  .hero-slideshow .flickity-page-dots {
    top: 280px;
    bottom: auto;
  }

  .hero-slideshow-wrapper {
    margin: 40px 0;
  }
}

/* =============================================================================
   Accessibility
   ========================================================================== */

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .hero-slideshow * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .hero-slideshow .flickity-button {
    transform: translateY(-50%);
  }

  .hero-slideshow .flickity-button:hover {
    transform: translateY(-50%);
  }
}

/* =============================================================================
   Loading State
   ========================================================================== */

/* Show first slide before Flickity initializes */
.hero-slideshow:not(.flickity-enabled) {
  opacity: 1;
}

.hero-slideshow.flickity-enabled {
  opacity: 1;
}

/* Hide all slides except first before Flickity loads */
.hero-slideshow:not(.flickity-enabled) .hero-slide:not(:first-child) {
  display: none;
}

/* Ensure proper z-index stacking */
.hero-slideshow .flickity-viewport {
  position: relative;
  z-index: 1;
}