/* ==========================================================
   AdWizards Mobile Fixes
   Restaura el responsive del template original de Webflow
   
   IMPORTANTE: Este archivo SOLO contiene media queries
   NO MODIFICA DESKTOP - Solo aplica en mobile/tablet
   ========================================================== */

/* ==========================================================
   TABLET (max-width: 991px)
   ========================================================== */
@media screen and (max-width: 991px) {

  /* --- Hero Headline --- */
  h1 {
    font-size: 7vw !important;
  }

  /* --- Hero Images/Videos Grid --- 
     Cambia de grid a flex layout horizontal */
  .hero-images-grid {
    grid-column-gap: 10px !important;
    grid-row-gap: 10px !important;
    justify-content: center !important;
    align-items: flex-start !important;
    height: 600px !important;
    display: flex !important;
  }

  /* Videos/images width fijo en tablet */
  .hero-images-grid video,
  .hero-images-grid .image-1,
  .hero-images-grid .image-2,
  .hero-images-grid .image-3,
  .hero-images-grid .image-4,
  .hero-images-grid .image-5 {
    width: 185px !important;
    height: auto !important;
    flex-shrink: 0 !important;
  }

  /* --- Mobile Mockup Size --- */
  .mobile-mockup-inner {
    width: 200px !important;
  }

  .feature-mockup-inner {
    border-radius: 32px !important;
    width: 200px !important;
    overflow: hidden !important;
  }

  /* --- Hero Title Bottom (rotator) --- */
  .hero-title-bottom-wrapper {
    width: 25vw !important;
    max-width: 25vw !important;
  }

  .hero-title-bottom-1,
  .hero-title-bottom-2,
  .hero-title-bottom-3 {
    font-size: 7.5vw !important;
  }

  /* --- Heading Wrapper spacing --- */
  .heading-wrapper {
    grid-column-gap: 10px !important;
    grid-row-gap: 10px !important;
    margin-bottom: 40px !important;
  }

  .absolute-heading-wrapper {
    grid-column-gap: 10px !important;
    grid-row-gap: 10px !important;
    margin-bottom: 40px !important;
  }

  /* --- Review Cards / Creations Grid --- */
  .review-card {
    min-width: 50vw !important;
  }

  .creations-grid {
    height: auto !important;
    padding-left: 5vw !important;
    overflow-x: scroll !important;
    overflow-y: hidden !important;
  }

  .creations-odd-column,
  .creations-even-column {
    flex-flow: row !important;
  }

  /* --- CTA Section --- */
  .cta-images-grid {
    display: flex !important;
  }

  .cta-image {
    width: 180px !important;
    max-height: 350px !important;
    object-fit: cover !important;
    border-radius: 32px !important;
  }

  /* CTA container - remove clipping that was cutting content */
  .cta-container {
    overflow: visible !important;
  }

  .mobile-mockup-footer {
    width: 200px !important;
    overflow: visible !important;
  }

  /* Position CTA button below the mockup */
  .cta-section-button-block {
    position: relative !important;
    margin-top: 20px !important;
  }

  /* --- Footer Grid --- */
  .footer-grid {
    grid-template-columns: 1fr !important;
  }

  /* Reorder download buttons to top on tablet */
  #w-node-_78d776aa-c700-391d-57f9-c38a8cad374e-8cad371c {
    grid-area: 1 / 1 / 2 / 2 !important;
  }
}

/* ==========================================================
   MOBILE (max-width: 767px)
   ========================================================== */
@media screen and (max-width: 767px) {

  /* --- Hero Headline --- */
  h1 {
    line-height: 100% !important;
  }

  .home-h1 {
    white-space: normal !important;
    margin-bottom: 0 !important;
    font-size: 9vw !important;
  }

  /* --- Hero Title Bottom (rotator) --- */
  .hero-title-bottom-wrapper {
    justify-content: flex-start !important;
    align-items: flex-start !important;
    width: 40vw !important;
    max-width: 40vw !important;
    min-height: 12vw !important;
    margin-left: 15px !important;
  }

  .hero-title-bottom-1,
  .hero-title-bottom-2,
  .hero-title-bottom-3 {
    text-align: left !important;
    margin-left: 0 !important;
    font-size: 12vw !important;
  }

  /* --- Heading Wrapper flex wrap --- */
  .heading-wrapper,
  .absolute-heading-wrapper {
    grid-column-gap: 0px !important;
    grid-row-gap: 0px !important;
    flex-flow: wrap !important;
  }

  /* --- Review Block --- */
  .review-block-wrapper {
    width: 500px !important;
    max-width: 90% !important;
  }

  .review-text {
    font-size: 3rem !important;
  }

  /* --- Pricing Grid - Stack vertically --- */
  .plans-grid {
    grid-column-gap: 40px !important;
    grid-row-gap: 40px !important;
    grid-template-columns: 1fr !important;
  }

  /* Keep natural price order: Starter ($3,500) -> Core ($5,500) -> Lab ($8,500) */
  /* Override Webflow's grid-area that forces Core first */
  #w-node-_67a80908-0b8a-015e-cfcb-23bed24300a5-48b03521 {
    grid-area: auto !important;
  }

  .plans-grid>.plan-card:nth-child(1) {
    order: 1 !important;
  }

  /* Starter -> 1st */
  .plans-grid>.plan-card:nth-child(2) {
    order: 2 !important;
  }

  /* Core -> 2nd */
  .plans-grid>.plan-card:nth-child(3) {
    order: 3 !important;
  }

  /* Lab -> 3rd */
  .plans-grid>.plan-card:nth-child(4) {
    order: 4 !important;
  }

  /* Enterprise -> 4th */

  /* Remove center margins on mobile */
  .pricing-features-wrapper.center,
  .pricing-plan-title-wrapper.center,
  .center {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .pricing-plan-title-wrapper {
    min-height: auto !important;
  }

  .pricing-separator {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }

  /* --- FAQs Grid - Single column --- */
  .faqs-grid {
    grid-template-columns: 1fr !important;
  }

  /* --- CTA Section --- */
  .cta-section {
    padding-top: 250px !important;
  }

  /* --- CTA Heading --- */
  .cta-heading {
    white-space: normal !important;
    margin-bottom: 0 !important;
    font-size: 12vw !important;
  }

  .absolute-heading-wrapper-footer {
    grid-column-gap: 0px !important;
    grid-row-gap: 0px !important;
    flex-flow: wrap !important;
    top: -75px !important;
  }

  /* --- Horizontal Heading Wrapper (Pricing toggle) --- */
  .horizontal-heading-wrapper {
    flex-flow: column !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
  }

  .pricing-toggle-wrapper {
    margin-top: 20px !important;
  }
}

/* ==========================================================
   SMALL MOBILE (max-width: 479px)
   ========================================================== */
@media screen and (max-width: 479px) {

  /* --- Hero Headline --- */
  h1 {
    font-size: 10vw !important;
  }

  h2 {
    font-size: 2.25rem !important;
  }

  .home-h1 {
    font-size: 10vw !important;
  }

  /* --- Hero Title Bottom (rotator) --- */
  .hero-title-bottom-wrapper {
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 20vw !important;
    margin-left: 0 !important;
  }

  .hero-title-bottom-1,
  .hero-title-bottom-2,
  .hero-title-bottom-3 {
    font-size: 20vw !important;
  }

  /* --- Animated Number Counter --- */
  .large-number {
    font-size: 5rem !important;
  }

  .animated-number-wrapper {
    justify-content: center !important;
    align-items: flex-start !important;
    height: 85px !important;
  }

  .animated-digits-wrapper {
    width: 50px !important;
  }

  .animated-number {
    font-size: 5rem !important;
  }

  /* --- Review Block --- */
  .review-block-wrapper {
    width: 300px !important;
    max-width: 90% !important;
  }

  .review-text {
    font-size: 1.9rem !important;
    line-height: 130% !important;
  }

  /* --- Features Section (single-feature-grid) --- */
  .single-feature-grid {
    grid-template-rows: auto auto !important;
    grid-template-columns: 20vw 1fr !important;
    width: 100% !important;
    height: auto !important;
    margin-bottom: 100px !important;
  }

  .feature-right {
    padding-top: 0 !important;
  }

  .feature-left {
    padding-top: 0 !important;
  }

  .process-step-wrapper {
    align-items: stretch !important;
    max-width: none !important;
    position: static !important;
  }

  .animated-path {
    margin-left: 20px !important;
  }

  .features-container {
    padding-top: 10% !important;
  }

  .feature-center {
    margin-left: -15px !important;
  }

  .feature-mockup-wrapper {
    margin-bottom: 60px !important;
  }

  /* Grid area adjustments for features */
  #w-node-f769bc0d-682a-e181-0eaa-0ef4c2ee65fa-48b03521 {
    grid-area: 1 / 2 / 2 / 3 !important;
    justify-self: start !important;
  }

  #w-node-f769bc0d-682a-e181-0eaa-0ef4c2ee65f8-48b03521 {
    grid-area: 1 / 1 / 3 / 2 !important;
  }

  #w-node-_8b746d06-cd50-ad04-4610-33e24bcfa146-48b03521 {
    grid-area: 2 / 2 / 3 / 3 !important;
    align-self: end !important;
  }

  /* --- CTA Heading --- */
  .cta-heading {
    white-space: nowrap !important;
    font-size: 15vw !important;
    display: inline-flex !important;
  }

  .absolute-heading-wrapper-footer {
    display: inline-flex !important;
    top: -60px !important;
  }

  /* --- FAQs --- */
  .faqs-grid {
    grid-row-gap: 30px !important;
  }

  .faq-trigger {
    padding-bottom: 5px !important;
  }

  /* --- Footer --- */
  .footer-grid {
    grid-column-gap: 40px !important;
    grid-row-gap: 40px !important;
    margin-bottom: 20px !important;
  }

  .footer-link,
  .footer-text {
    font-size: 0.875rem !important;
  }

  .row-1 {
    grid-column-gap: 0px !important;
    grid-row-gap: 0px !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }

  .footer-links-inner {
    grid-column-gap: 16px !important;
    grid-row-gap: 0px !important;
    grid-template-rows: auto auto !important;
    grid-template-columns: 1fr 1fr !important;
    margin-bottom: 30px !important;
    font-size: 0.875rem !important;
    display: grid !important;
  }

  .footer-links-header {
    margin-bottom: 5px !important;
  }

  /* --- Download Icons --- */
  .download-icons-grid {
    grid-template-columns: 1fr !important;
    margin-bottom: 20px !important;
  }

  /* --- Toggle Switch --- */
  .toggle-switch {
    width: 65px !important;
    height: 30px !important;
  }

  .toggle-indicator {
    height: 26px !important;
  }

  /* --- CTA Images --- */
  .cta-image {
    width: 200px !important;
    border-radius: 24px !important;
  }

  /* --- CTA Mockups - clip content --- */
  .feature-mockup-inner,
  .mobile-mockup-footer {
    overflow: hidden !important;
    border-radius: 28px !important;
  }
}

/* ==========================================================
   ADDITIONAL FIXES
   ========================================================== */

/* Fix for overrides.css heading-wrapper that uses clamp() */
@media screen and (max-width: 991px) {
  .heading-wrapper .home-h1 {
    font-size: 7vw !important;
    gap: 0.2ch !important;
  }

  .rotator-word.home-h1,
  .rotator-measure {
    font-size: 7vw !important;
  }
}

@media screen and (max-width: 767px) {
  .heading-wrapper .home-h1 {
    font-size: 9vw !important;
    flex-wrap: wrap !important;
    white-space: normal !important;
  }

  .rotator-word.home-h1,
  .rotator-measure {
    font-size: 9vw !important;
  }

  /* Allow text to wrap instead of overflow */
  .heading-wrapper {
    white-space: normal !important;
  }

  /* Hero rotator mask - allow longer words */
  .hero-rotator-mask {
    max-width: 95vw !important;
  }
}

@media screen and (max-width: 479px) {
  .heading-wrapper .home-h1 {
    font-size: 10vw !important;
  }

  .rotator-word.home-h1,
  .rotator-measure {
    font-size: 10vw !important;
  }

  /* Hero rotator mask - allow longer words like HUMAN-CRAFTED */
  .hero-rotator-mask {
    max-width: 90vw !important;
  }
}