/* ====================================================
   Alphabet Image Preloader — Frontend CSS v2.0
   Handles fullscreen preloader + inline section blocks
   ==================================================== */

/* ── Fullscreen overlay ───────────────────────────── */
#aip-preloader {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999999;
  overflow: hidden;
}

#aip-preloader-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

/* ── Section / shortcode block ───────────────────── */
/*
   IMPORTANT: overflow must NOT be hidden here.
   Letters fly in from far outside the viewport (window.innerWidth * 2.5).
   If overflow:hidden is set on the section they get clipped and never visible.
   We control horizontal overflow at the html/body level instead.
*/
.aip-section-block {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: visible;
}

/* Prevent horizontal scrollbar while letters are mid-flight */
html body {
  overflow-x: hidden;
}

.aip-section-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* ── Shared: word + letter ────────────────────────── */
.aip-word-wrapper {
  display: flex;
  align-items: center;
  /* Prevent a single word from breaking across lines */
  flex-shrink: 0;
}

/*
  Section block letters start invisible via CSS.
  GSAP's fromTo() will animate them from opacity:0 → opacity:1.
  The fullscreen preloader letters are built by JS so not affected.
*/
.aip-section-block .aip-letter-img {
  opacity: 0;
}

.aip-letter-img {
  height: auto;
  object-fit: contain;
  display: block;
}

/* ── Page lock while fullscreen preloader runs ───── */
body.aip-loading {
  overflow: hidden !important;
}

/* ====================================================
   MOBILE RESPONSIVE FIXES
   Override the fixed inline width set by the shortcode PHP
   and scale everything down to fit small screens.
   ==================================================== */

/* Tablet — up to 1024px */
@media (max-width: 1024px) {
  .aip-section-block .aip-letter-img {
    /* Scale down from desktop size; clamp keeps it readable */
    width: clamp(28px, 6vw, 70px) !important;
    height: auto !important;
  }

  .aip-section-inner {
    gap: clamp(8px, 2vw, 30px) !important;
  }

  .aip-word-wrapper {
    gap: clamp(1px, 0.8vw, 6px) !important;
  }

  /* Fullscreen preloader on tablet */
  #aip-preloader-container .aip-letter-img {
    width: clamp(28px, 6vw, 70px) !important;
    height: auto !important;
  }

  #aip-preloader-container {
    gap: clamp(8px, 2vw, 30px) !important;
  }
}

/* Mobile — up to 768px */
@media (max-width: 768px) {
  .aip-section-block .aip-letter-img {
    /*
      On mobile each letter gets ~1/8 of viewport width,
      so an 8-letter word fills the screen comfortably.
      clamp(min, preferred, max)
    */
    width: clamp(22px, 10vw, 52px) !important;
    height: auto !important;
  }

  .aip-section-inner {
    /* Tighter word gap on mobile */
    gap: clamp(6px, 3vw, 20px) !important;
    /* Centre-align wrapped rows */
    justify-content: center !important;
  }

  .aip-word-wrapper {
    /* Tighter letter gap on mobile */
    gap: clamp(1px, 1vw, 4px) !important;
  }

  /* Fullscreen preloader on mobile */
  #aip-preloader-container .aip-letter-img {
    width: clamp(22px, 10vw, 52px) !important;
    height: auto !important;
  }

  #aip-preloader-container {
    gap: clamp(6px, 3vw, 20px) !important;
    padding: 16px;
  }
}

/* Small mobile — up to 480px */
@media (max-width: 480px) {
  .aip-section-block .aip-letter-img {
    width: clamp(18px, 8.5vw, 40px) !important;
    height: auto !important;
  }

  .aip-section-inner {
    gap: clamp(4px, 2.5vw, 14px) !important;
  }

  .aip-word-wrapper {
    gap: clamp(1px, 0.8vw, 3px) !important;
  }

  #aip-preloader-container .aip-letter-img {
    width: clamp(18px, 8.5vw, 40px) !important;
    height: auto !important;
  }
}