/* ===== BASE ===== */

.hover-reveal-widget {
  display: flex;
  align-items: flex-start;
}

.hover-menu {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hover-item {
  display: inline-block;
  margin-bottom: 20px;
  cursor: pointer;
}

.hover-title {
  margin: 0;
  transition: color 0.3s ease, transform 0.25s ease;
  will-change: transform;
}


/* ===== DESKTOP IMAGE ===== */

.hover-image {
  margin-left: 20px;
  position: relative;

  width: 320px;
  aspect-ratio: 3 / 2;

  border-radius: 15px;
  overflow: hidden; /* 👈 ensures all corners clip correctly */
}

.hover-image img {
  position: absolute;  /* 👈 forces full coverage */
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  opacity: 0;
  transform: scale(0.95);

  transition: opacity 0.4s ease, transform 0.35s ease;
}

.hover-image img.is-visible {
  opacity: 1;
  transform: scale(1);
}


/* ===== TABLET (iPad portrait etc.) ===== */

@media (min-width: 768px) and (max-width: 1024px) {

  .hover-reveal-widget {
    flex-direction: column;
    width: 100%;
  }

  .hover-image {
    margin: 20px auto 0 auto;

    width: 70%;
    max-width: 600px;

    aspect-ratio: 3 / 2;

    border-radius: 15px;
    overflow: hidden;
  }

}


/* ===== MOBILE (iPhone etc.) ===== */

@media (max-width: 767px) {

  .hover-reveal-widget {
    flex-direction: column;
    width: 100%;
  }

  .hover-image {
    margin: 20px auto 0 auto;

    width: 90%;
    max-width: 420px;

    aspect-ratio: 3 / 2;

    border-radius: 15px;
    overflow: hidden;
  }

}


/* ===== GLOBAL SAFETY ===== */

html, body {
  overflow-x: hidden;
}