/**
 * Surabhi Lakkshmi - Manual Responsive Carousel Styles
 * Scoped strictly to Homepage Gallery and News sections.
 */

/* Carousel Container */
.surabhi-carousel-container {
  position: relative;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

/* Hero-to-News Vertical Spacing: Desktop 44px, Tablet 32px, Mobile 24px */
.surabhi-home-news-carousel,
.latest-news-section:not(.surabhi-carousel-track) {
  margin-top: 44px !important;
}

@media (max-width: 1023px) {
  .surabhi-home-news-carousel,
  .latest-news-section:not(.surabhi-carousel-track) {
    margin-top: 32px !important;
  }
}

@media (max-width: 767px) {
  .surabhi-home-news-carousel,
  .latest-news-section:not(.surabhi-carousel-track) {
    margin-top: 24px !important;
  }
}

/* Viewport clips slides on horizontal axis */
.surabhi-carousel-viewport {
  overflow: hidden;
  width: 100%;
  position: relative;
  box-sizing: border-box;
}

/* Track holds all slides in a single horizontal row */
.surabhi-carousel-track {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  .surabhi-carousel-track {
    transition: none !important;
  }
}

/* Base slide flex proportions - Desktop (1024px and above): 3 visible */
.surabhi-carousel-slide {
  flex: 0 0 33.333333% !important;
  max-width: 33.333333% !important;
  width: 33.333333% !important;
  box-sizing: border-box !important;
  float: none !important;
}

/* Tablet: 2 visible cards at once (768px - 1023px) */
@media (max-width: 1023px) and (min-width: 768px) {
  .surabhi-carousel-slide {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
  }
}

/* Mobile: 1 visible card at once (< 768px) */
@media (max-width: 767px) {
  .surabhi-carousel-slide {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* Gallery specific slide spacing matching original -2.5px margins */
.surabhi-home-gallery-carousel .surabhi-carousel-track {
  margin-left: -2.5px !important;
  margin-right: -2.5px !important;
  width: calc(100% + 5px) !important;
}
.surabhi-home-gallery-carousel .surabhi-carousel-slide {
  padding-left: 2.5px !important;
  padding-right: 2.5px !important;
}

/* News specific slide spacing matching original -15px margins */
.surabhi-home-news-carousel .surabhi-carousel-track {
  margin-left: -15px !important;
  margin-right: -15px !important;
  width: calc(100% + 30px) !important;
}
.surabhi-home-news-carousel .surabhi-carousel-slide {
  padding-left: 15px !important;
  padding-right: 15px !important;
}

/* Ensure equal height news cards */
.surabhi-home-news-carousel .news-feeds {
  display: flex !important;
  flex-direction: column !important;
}
.surabhi-home-news-carousel .news-feeds > .tm_pb_text {
  flex: 1 1 auto;
}

/* Navigation Controls Row - Centered below cards in normal document flow */
.surabhi-carousel-controls {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  width: 100% !important;
  margin: 22px auto 14px auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  clear: both !important;
  z-index: 5;
  position: relative;
}

/* Hide controls completely without reserving vertical space when not needed */
.surabhi-carousel-controls.is-hidden {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}

/* Compact outlined circular navigation controls (WCAG 44x44px touch target) */
.surabhi-carousel-nav-btn {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  background: #ffffff;
  border: 1.5px solid #d1d5db;
  color: #1f2937;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
  outline: none;
  -webkit-appearance: none;
  user-select: none;
}

.surabhi-carousel-nav-btn:hover:not(:disabled):not(.is-disabled) {
  background: #111827;
  border-color: #111827;
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
  transform: translateY(-1px) !important;
}

.surabhi-carousel-nav-btn:active:not(:disabled):not(.is-disabled) {
  transform: translateY(0) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.surabhi-carousel-nav-btn:focus-visible {
  outline: 2px solid #2271b1;
  outline-offset: 2px;
}

.surabhi-carousel-nav-btn:disabled,
.surabhi-carousel-nav-btn.is-disabled {
  opacity: 0.28 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  border-color: #e5e7eb !important;
  background: #f9fafb !important;
  box-shadow: none !important;
  transform: none !important;
}

.surabhi-carousel-nav-btn.is-hidden {
  display: none !important;
}

.surabhi-carousel-nav-btn svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  pointer-events: none;
  display: block;
}

/* Dragging state prevents accidental link activation */
.surabhi-carousel-track.is-dragging {
  cursor: grabbing !important;
  cursor: -webkit-grabbing !important;
  transition: none !important;
}
.surabhi-carousel-track.is-dragging a {
  pointer-events: none !important;
}