/* ════════════════════════════════════════════════════════════════
   RESPONSIVE ENHANCEMENTS for 2D Animation Landing Pages
   All common fixes across 5 language pages
   ════════════════════════════════════════════════════════════════ */

/* ── GLOBAL FIXES ─────────────────────────────────────────────── */

/* Feature Row 1 cards (fc-1 & fc-2): position text absolutely over bg image */
.feature-row-1 .fc-1 .fc-body,
.feature-row-1 .fc-2 .fc-body {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  padding: 24px;
}

/* Remove white-space: nowrap from hero h1 lines */
.hero-section-content h1 .h1-line {
  white-space: normal !important;
}
.hero-video-spacer{
  background: #fff !important;
}

/* Awards badges image - remove fixed size, make responsive */
.awards-badges img {
  width: 100% !important;
  height: auto !important;
  max-width: 696px;
  object-fit: contain;
}

/* Awards text - constrain width */
.awards-text {
  flex: 0 0 auto;
  max-width: 220px;
}

/* Logos slide image height */
.logos-slide img {
  height: 27px;
}

/* Section headings - consistent responsive size (NOT hero h1) */
.features-heading h1,
.steps-heading h1,
.use-case-heading h1,
.testimonials-head h1,
.faq-heading h1,
.resource-section .header-text,
.slider-section h1 {
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.3;
}

/* Splide slider container - match enterprise page behavior */
.splide_slide_container {
  max-width: 1700px;
  width: 100%;
  margin: auto;
  position: relative;
}

.splide {
  padding: 0;
}

.splide__list {
  height: 450px;
}

/* ── Splide arrows: true center across all screens ──────────── */
/* Base: perPage 7 — arrows flanking the active center card */
.splide__arrows {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%);
  top: 42% !important;
  gap: 225px !important;
}

/* Resource slider button container - add bottom spacing */
#resource-slider > div.button-container,
.resource-slider .button-container {
  padding-bottom: 5px;
  margin-bottom: 5px;
}

/* Nav toggle container - center by default on smaller screens */
.nav-toggle-container {
  overflow: visible !important;
}

/* Fix overflow hidden issue on user-count d-flex */
.user-count-content .d-flex {
  overflow: visible !important;
}

/* ── USE CASE SWIPER OVERRIDES ────────────────────────────── */
.use-case-swiper-wrapper {
  max-width: 1281px;
  margin: 0 auto;
  padding: 10px 40px 20px;
  position: relative;
}

.use-case-swiper .swiper-slide {
  height: auto;
}

.use-case-swiper .use-case-card {
  width: 100%;
  min-width: unset;
  max-width: unset;
  flex-shrink: unset;
  margin: 0;
}

.use-case-swiper .swiper-button-prev,
.use-case-swiper .swiper-button-next {
  width: 40px;
  height: 40px;
  background: #FFFFFF;
  border: 1px solid #E0E0E0;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

.use-case-swiper .swiper-button-prev::after,
.use-case-swiper .swiper-button-next::after {
  font-size: 14px;
  color: #555;
  font-weight: 700;
}

.use-case-swiper .swiper-button-disabled {
  opacity: 0.35;
}


/* ═══════════════════════════════════════════════════════════════
   BREAKPOINT: max-width 992px
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 992px) {

  /* User count section - flex center */
  .user-count-content {
    text-align: center;
  }

  .user-count-content .d-flex {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .user-count-divider {
    display: none;
  }

  /* Logos slide img */
  .logos-slide img {
    height: 27px;
  }

  /* Awards section - flex column, centered */
  .awards-section {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
    gap: 20px;
    padding: 24px 20px;
    height: auto !important;
  }

  .awards-text {
    max-width: none;
    text-align: center;
  }

  .awards-badges {
    width: 100%;
  }

  .awards-badges img {
    width: 100% !important;
    height: auto !important;
    max-width: none;
  }

  /* Steps content - flex column, vertical card */
  .steps-content {
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 20px;
  }

  .steps-left {
    width: 100%;
    height: auto;
  }

  .steps-left img {
    width: 100%;
    height: auto;
    border-radius: 16px 16px 0 0;
  }

  /* Steps right - padding top 20px */
  .steps-right {
    padding-top: 20px !important;
  }

  /* Use case section - fix 3rd card cut off */
  .use-case-carousel-outer {
    padding: 0 16px;
    overflow: hidden;
  }

  .use-case-track {
    overflow: hidden;
  }

  .use-case-card {
    min-width: 280px;
    flex-shrink: 0;
  }

  /* Splide slider - centered at 992px (still perPage 7) */
  .splide__arrows {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    top: 43% !important;
    gap: 200px !important;
  }

  /* Features section responsive */
  .features-cards {
    padding: 0 20px;
  }

  .feature-row-1,
  .feature-row-3 {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .feature-row-2 {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .fc-1, .fc-2, .fc-6, .fc-7 {
    width: 100% !important;
    height: auto !important;
    min-height: 270px;
  }

  /* Row 1 cards at 992px: let text flow naturally to prevent overlap */
  .feature-row-1 .fc-1,
  .feature-row-1 .fc-2 {
    display: flex;
    flex-direction: column;
    min-height: 270px;
  }

  .feature-row-1 .fc-1 .fc-body,
  .feature-row-1 .fc-2 .fc-body {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    padding: 16px 24px;
    z-index: 10;
  }

  /* Row 3 cards at 992px: same treatment for fc-6 and fc-7 */
  .feature-row-3 .fc-6,
  .feature-row-3 .fc-7 {
    display: flex;
    flex-direction: column;
    min-height: 270px;
  }

  .feature-row-3 .fc-6 .fc-body,
  .feature-row-3 .fc-7 .fc-body {
    position: relative !important;
    padding: 16px 24px;
    z-index: 10;
  }

  /* Reduce font size on feature cards at 992px */
  .fc-title {
    font-size: 14px !important;
  }
  .fc-desc {
    font-size: 14px !important;
    line-height: 20px !important;
  }

  /* Testimonials - reduce padding */
  .carousal-section {
    padding: 0 20px !important;
    max-width: 100% !important;
  }

  .tile-card.review-section {
    padding: 32px 24px;
  }

  /* Nav toggle container - center */
  .nav-toggle-container {
    position: static !important;
    bottom: auto !important;
    right: auto !important;
    margin-top: 16px;
    overflow: visible !important;
  }

  .navigation-toggle {
    justify-content: center !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   BREAKPOINT: max-width 768px (Tablet / Mobile)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Hero section - add padding bottom */
  .hero-section-wrapper {
    padding-bottom: 30px;
  }

  /* Hero h1 responsive (this is the exception - different size from other h1s) */
  .hero-section-content h1 {
    font-size: clamp(26px, 7vw, 40px);
    line-height: 1.2;
  }

  .hero-section-content .hero-subtitle {
    font-size: 15px;
    line-height: 24px;
  }

  /* Hero video */
  .hero-video-wrapper {
    width: 92vw;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
  }

  .hero-video-spacer {
    height: 16px;
  }

  /* Section headings consistent size on mobile */
  .features-heading h1,
  .steps-heading h1,
  .use-case-heading h1,
  .testimonials-head h1,
  .faq-heading h1,
  .resource-section .header-text,
  .slider-section h1 {
    font-size: clamp(22px, 6vw, 32px) !important;
    line-height: 1.3 !important;
    padding: 0 16px;
  }

  /* Features cards - single column */
  .features-cards {
    padding: 0 12px;
  }

  .features-heading {
    padding: 0 12px;
  }

  .feature-row-1,
  .feature-row-2,
  .feature-row-3 {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .fc-1, .fc-2, .fc-row2, .fc-6, .fc-7 {
    width: 100% !important;
    height: auto !important;
    min-height: 270px;
  }

  /* Row 1 cards on mobile: let text flow naturally so card height adapts to content.
     The bg-img stays absolute behind. Text won't overlap the image portion. */
  .feature-row-1 .fc-1,
  .feature-row-1 .fc-2 {
    display: flex;
    flex-direction: column;
    min-height: 270px;
  }

  .feature-row-1 .fc-1 .fc-body,
  .feature-row-1 .fc-2 .fc-body {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    padding: 14px 16px;
    z-index: 10;
  }

  /* Row 3 cards on mobile: same treatment for fc-6 and fc-7 */
  .feature-row-3 .fc-6,
  .feature-row-3 .fc-7 {
    display: flex;
    flex-direction: column;
    min-height: 270px;
  }

  .feature-row-3 .fc-6 .fc-body,
  .feature-row-3 .fc-7 .fc-body {
    position: relative !important;
    padding: 14px 16px;
    z-index: 10;
  }

  /* Reduce font size on feature cards at 768px */
  .fc-title {
    font-size: 14px !important;
  }
  .fc-desc {
    font-size: 14px !important;
    line-height: 20px !important;
  }

  /* Steps - vertical card layout */
  .steps-section {
    padding: 60px 0;
  }

  .steps-content {
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 16px;
    margin-top: 24px;
  }

  .steps-content + .steps-content {
    margin-top: 40px;
  }

  .steps-left {
    width: 100%;
    height: auto;
    border-radius: 16px 16px 0 0;
  }

  .steps-right {
    padding-top: 20px !important;
    padding-left: 16px;
    padding-right: 16px;
  }

  .steps-right .step-title {
    font-size: 18px;
    line-height: 24px;
  }

  .steps-right .step-desc {
    font-size: 14px;
    line-height: 20px;
  }

  /* Use case section - single card centered */
  .use-case-section {
    padding: 60px 0;
  }

  .use-case-carousel-outer {
    padding: 0 12px;
    overflow: hidden;
  }

  .use-case-card {
    min-width: calc(100vw - 60px);
    max-width: calc(100vw - 60px);
    margin: 0 auto;
    height: auto;
  }

  /* On mobile, show description directly without hover animation */
  .use-case-card {
    height: auto;
    margin: 0 auto 16px auto !important;
  }
  .use-case-card .uc-img {
    max-height: none;
    height: 200px;
    border-radius: 0 0 16px 16px;
  }
  .use-case-card .uc-desc {
    position: static;
    opacity: 1;
    transform: none;
    padding: 0 20px 20px;
  }
  .use-case-heading {
    text-align: center;
    padding: 0 16px;
  }

  .use-case-list {
    justify-content: center;
  }

  .uc-arrow {
    width: 40px;
    height: 40px;
  }

  .uc-arrow-prev {
    left: 4px;
  }

  .uc-arrow-next {
    right: 4px;
  }

  /* Splide slider - centered at 768px (perPage: 3) */
  .splide__arrows {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    top: 45% !important;
    gap: 240px !important;
  }

  .splide__slide.is-active .product-card {
    transform: perspective(1000px) scale(1) translate3d(0px, 50px, 100px) !important;
  }

  .splide__slide.is-prev .product-card {
    transform: perspective(1000px) scale(1) translate3d(0px, 65px, -120px) rotateY(20deg) !important;
  }

  .splide__slide.is-next .product-card {
    transform: perspective(1000px) scale(1) translate3d(0px, 65px, -120px) rotateY(-20deg) !important;
  }

  /* Awards */
  .awards-section-wrapper {
    padding: 0 12px;
    margin-top: 24px;
  }

  .awards-section {
    flex-direction: column !important;
    align-items: center !important;
    padding: 20px 16px;
    height: auto !important;
    border-radius: 12px;
  }

  .awards-text {
    max-width: none;
    text-align: center;
    min-width: auto;
  }

  .awards-badges img {
    width: 100% !important;
    height: auto !important;
  }

  /* Testimonials section - responsive */
  .animaker-testimonials {
    padding: 60px 0;
  }

  .testimonials-head {
    padding: 0 16px;
    margin-bottom: 32px;
    text-align: center;
  }

  .animaker-testimonials .author-section {
    text-align: center;
  }

  .animaker-testimonials .author-section h1,
  .animaker-testimonials .author-section h3,
  .animaker-testimonials .author-section p {
    text-align: center;
  }

  .animaker-testimonials .stats-section {
    text-align: center;
  }

  .animaker-testimonials .stats-section h1,
  .animaker-testimonials .stats-section h6 {
    text-align: center;
  }

  .testimonials-cta {
    text-align: center;
  }

  .carousal-section {
    padding: 0 12px !important;
    margin: 0 !important;
    max-width: 100% !important;
  }

  .tile-card.review-section {
    padding: 24px 16px;
    min-height: auto;
    border-radius: 12px;
    overflow: visible;
  }

  .author-img {
    width: 120px;
    height: 120px;
  }

  .author-section {
    padding-right: 16px;
  }

  .author-section h1 {
    font-size: 18px;
  }

  .author-section p {
    font-size: 14px;
    line-height: 22px;
  }

  .stats-section {
    padding-left: 16px;
    flex: 0 0 auto;
  }

  .stats-section h1 {
    font-size: 32px;
    line-height: 40px;
  }

  /* Nav toggle container - center, no overflow hidden */
  .nav-toggle-container {
    position: static !important;
    bottom: auto !important;
    right: auto !important;
    margin-top: 16px;
    overflow: visible !important;
  }

  .navigation-toggle {
    justify-content: center !important;
  }

  /* Testimonials CTA */
  .testimonials-cta {
    margin-top: 32px;
  }

  .testimonials-cta-btn {
    width: min(400px, 90vw) !important;
    font-size: 14px;
    height: 52px;
  }

  /* FAQ */
  .faq-container {
    padding: 0 12px;
  }

  /* Resource slider */
  .resource-slider-content {
    padding: 0 12px;
  }

  /* Mid CTA */
  .mid-cta-btn {
    width: min(320px, 88vw) !important;
    height: 52px;
    font-size: 15px;
  }

  /* User count */
  .user-count-content {
    padding: 48px 16px;
  }

  .logos-container {
    max-width: 100%;
  }
}


/* ═══════════════════════════════════════════════════════════════
   BREAKPOINT: max-width 640px (Enterprise Splide match)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* Splide - match enterprise 640px breakpoint exactly */
  .splide__list {
    height: auto !important;
  }

  .slider-img-card {
    border-radius: 25px;
  }

  .splide__slide .product-card {
    transform: perspective(100px) scale(1) translate3d(0px, 0px, 0px) !important;
  }

  .splide__slide.is-active .product-card {
    transform: perspective(100px) scale(1) translate3d(0px, 0px, -5px) !important;
  }

  .splide__pagination {
    bottom: -50px;
  }

  section.slider-section {
    margin-bottom: 60px !important;
  }

  /* Active slide fills full width on mobile */
  .splide__slide {
    width: 100% !important;
  }

  .splide__slide .product-card {
    width: 100%;
    padding: 0 16px;
  }

  .splide__slide .slider-img-card {
    width: 100%;
  }

  .splide__slide .slider-img-card .img-top img {
    width: 100%;
    border-radius: 25px;
  }

  .splide__arrow {
    width: 40px;
    height: 40px;
  }

  /* Splide arrows - full width spread at 640px (perPage: 1) */
  .splide__arrows {
    left: 0 !important;
    right: 0 !important;
    top: 45% !important;
    transform: none;
    align-items: center;
    width: 100% !important;
    gap: 80% !important;
    padding: 0 10px;
  }
}


/* ═══════════════════════════════════════════════════════════════
   BREAKPOINT: max-width 600px (Mobile specific)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {

  /* Testimonials swiper slide - d-flex becomes column */
  .tile-card.review-section .swiper-slide .d-flex,
  .tile-card.review-section .d-flex {
    flex-direction: column !important;
  }

  .author-section {
    padding-right: 0;
    border-right: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding-bottom: 20px;
    margin-bottom: 20px;
    text-align: center;
  }

  .author-section .author-img {
    display: block;
    margin: 0 auto;
  }

  .stats-section {
    padding-left: 0 !important;
    flex: 1 !important;
  }

  .stats-section h1 {
    font-size: 28px;
    line-height: 36px;
  }

  /* Nav toggle container buttons - center, no overflow hidden */
  .nav-toggle-container {
    position: static !important;
    margin-top: 16px;
    overflow: visible !important;
  }

  .navigation-toggle {
    justify-content: center !important;
  }

  /* Use case - single card centered on mobile */
  .use-case-card {
    min-width: calc(100vw - 48px);
    max-width: calc(100vw - 48px);
    margin: 0 auto;
  }

  /* Steps vertical card */
  .steps-content {
    padding: 0 12px;
    gap: 0 !important;
  }

  .steps-left {
    border-radius: 12px 12px 0 0;
  }

  .steps-right {
    padding-top: 20px !important;
    background: #fff;
    border-radius: 0 0 12px 12px;
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  }

  /* Hero */
  .hero-section-content h1 {
    font-size: clamp(22px, 7vw, 32px);
  }

  .btn-cta-hero {
    font-size: 14px;
    padding: 12px 24px;
  }

  /* Awards section */
  .awards-section-wrapper {
    padding: 0 8px;
  }

  /* Testimonials */
  .tile-card.review-section {
    padding: 16px 12px;
    overflow: visible;
  }

  .author-img {
    width: 80px;
    height: 80px;
  }

  .author-section h1 {
    font-size: 16px;
    margin: 10px 0 4px;
  }

  .author-section h3 {
    font-size: 12px;
  }

  .author-section p {
    font-size: 13px;
    line-height: 20px;
  }

  .testimonials-cta-btn {
    width: calc(100vw - 32px) !important;
    font-size: 13px;
    height: 48px;
  }

  /* FAQ */
  .faq-card-header {
    padding: 14px 12px;
  }

  .faq-question {
    font-size: 14px;
    line-height: 20px;
  }

  /* Resource slider button container spacing */
  #resource-slider > div.button-container,
  .resource-slider .button-container {
    padding-bottom: 5px;
    margin-bottom: 5px;
  }
}


/* ═══════════════════════════════════════════════════════════════
   BREAKPOINT: max-width 480px (Small Mobile)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* Nav */
  nav.navigation {
    padding: 12px 16px;
  }

  .nav-brand img.animaker-logo {
    width: 100px;
    height: auto;
  }

  /* Hero */
  .hero-section-content h1 {
    font-size: clamp(20px, 7vw, 28px);
    line-height: 1.2;
  }

  .hero-section-content .hero-subtitle {
    font-size: 14px;
    line-height: 20px;
  }

  /* Section headings - all same responsive size */
  .features-heading h1,
  .steps-heading h1,
  .use-case-heading h1,
  .testimonials-head h1,
  .faq-heading h1,
  .resource-section .header-text,
  .slider-section h1 {
    font-size: clamp(20px, 6vw, 28px) !important;
    line-height: 1.3 !important;
  }

  /* User count */
  .user-count h1 {
    font-size: 24px;
    line-height: 32px;
  }

  /* Steps */
  .step-tab {
    width: 40px;
    height: 40px;
    font-size: 14px;
  }

  .step-label {
    font-size: 16px;
    margin-top: 20px;
  }

  .step-title {
    font-size: 20px;
    line-height: 26px;
  }

  .step-desc {
    font-size: 14px;
    line-height: 22px;
  }

  /* Use case centered single card */
  .use-case-card {
    min-width: calc(100vw - 40px);
    max-width: calc(100vw - 40px);
  }

  .uc-content h3 {
    font-size: 14px;
  }

  .uc-desc p {
    font-size: 13px;
    line-height: 20px;
  }

  /* Mid CTA */
  .mid-cta-btn {
    width: calc(100vw - 32px) !important;
    height: 48px;
    font-size: 14px;
  }

  /* Features */
  .fc-title {
    font-size: 14px;
  }

  .fc-desc {
    font-size: 14px;
    line-height: 20px;
  }
}


/* ═══════════════════════════════════════════════════════════════
   ACCESSIBILITY: Reduced Motion
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .logos-slide {
    animation: none !important;
  }
}