/* Yuvalim City Boy - owner cards on the about page.
   Clicking the photo or the name swaps the name and role for the owner's quote,
   and a second click swaps back. The quote is an ordinary Elementor paragraph
   inside the card (marked data-yv-quote), so its text is edited in Elementor;
   this file only stacks the two in one slot and switches between them. */

/* One slot next to the photo holds both the name box and the quote, so the card
   keeps its width (444px in the design) and nothing jumps when they swap.
   .e-con plus the attribute out-specifies Elementor's own .elementor .e-xxxx. */
.elementor .e-con[data-yv-owner]{
  display: grid;
  grid-template-columns: auto clamp(140px, 11.98vw, 230px);
  align-items: center;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
.elementor [data-yv-owner] > :not([data-yv-owner-name]):not([data-yv-quote]){ grid-column: 1; grid-row: 1; }
.elementor [data-yv-owner] > [data-yv-owner-name],
.elementor [data-yv-owner] > [data-yv-quote]{
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
}

/* closed: name showing, quote waiting just below */
.elementor [data-yv-owner] > [data-yv-owner-name]{
  transition: opacity .45s ease, transform .6s cubic-bezier(.22,1,.36,1), visibility 0s;
}
.elementor [data-yv-owner] > [data-yv-quote]{
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .35s ease, transform .6s cubic-bezier(.22,1,.36,1), visibility 0s linear .35s;
}

/* open: the quote comes in, the name steps out */
.elementor [data-yv-owner].is-quote > [data-yv-owner-name]{
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity .35s ease, transform .6s cubic-bezier(.22,1,.36,1), visibility 0s linear .35s;
}
.elementor [data-yv-owner].is-quote > [data-yv-quote]{
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .45s ease .1s, transform .6s cubic-bezier(.22,1,.36,1) .1s, visibility 0s;
}

/* a small lift on the photo so the card reads as something to press */
.elementor [data-yv-owner] img{ transition: transform .7s cubic-bezier(.22,1,.36,1); }
.elementor [data-yv-owner]:hover img{ transform: scale(1.05); }

/* Phone: photo on top, the slot underneath and centred, like the mobile design */
@media (max-width: 767px){
  .elementor .e-con[data-yv-owner]{
    grid-template-columns: 100%;
    justify-items: center;
  }
  .elementor [data-yv-owner] > [data-yv-owner-name],
  .elementor [data-yv-owner] > [data-yv-quote]{
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
  }
}

@media (prefers-reduced-motion: reduce){
  .elementor [data-yv-owner] > *,
  .elementor [data-yv-owner] img{ transition: none !important; transform: none !important; }
}