/* WordPress Converter tile (AI Engineering section): bin + sparkle + "AI" */

.wp-converter {
  /* Inline-block (not flex) so it sits on the text baseline like the gallery <img>s
     and gets the same small gap below, keeping its heading level with the others */
  display: inline-block;
  width: 100%;
  vertical-align: baseline;
  aspect-ratio: 1920 / 992;
  overflow: hidden;
  margin-bottom: 2rem;
  background:
    radial-gradient(circle at 30% 40%, rgba(99, 107, 255, 0.35), transparent 55%),
    radial-gradient(circle at 75% 65%, rgba(27, 157, 255, 0.3), transparent 50%),
    #141418;
  box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.3);
  line-height: 1;
}

.wp-converter-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2.5vw, 2.5rem);
  height: 100%;
}

.wp-bin {
  flex-shrink: 0;
  height: clamp(9rem, 15vw, 18rem);
  filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.18));
  transform-origin: 50% 100%;
  transition: transform 0.4s ease-in-out;
}

.wp-plus {
  font-size: clamp(3.5rem, 6vw, 7rem);
  color: #F5A623;
  text-shadow: 0 0 25px rgba(245, 166, 35, 0.5);
}

/* Same font and sizes as the hero h1 */
.wp-ai {
  font-family: Oswald, "Helvetica Neue", "Lucida Grande", Arial, Verdana, sans-serif;
  font-size: 10rem;
  font-weight: 700;
  line-height: 1.1;
  background: linear-gradient(to right, #636BFF, #1b9dff);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: transform 0.4s ease-in-out;
}

.wp-converter:hover .wp-bin { transform: rotate(-3deg); }
.wp-converter:hover .wp-ai  { transform: scale(1.06); }

@media screen and (max-width: 1200px), screen and (max-height: 750px) {
  .wp-ai { font-size: 9rem; }
}

@media only screen and (max-width: 991px) {
  .wp-ai { font-size: 7rem; }
}

@media only screen and (max-width: 768px) {
  .wp-ai { font-size: 6.5rem; }
}

@media only screen and (max-width: 480px) {
  .wp-ai { font-size: 3.6rem; }
}