/**
 * Olimpia API Sync - Utility Classes
 *
 * Shared CSS utility classes used across multiple shortcodes.
 *
 * @package OlimpiaApiSync
 */

/* ─────────────────────────────────────────────────────────────────────────────
   White Shadow Utility — bottom fade on the image

   Replaces the legacy box-shadow approach. Paints a bottom-up
   white-to-transparent gradient as an ::after overlay so the image fades into
   the page background, creating the "lifted from white" look used across the
   site (staff, roster, shop products, shop category showcase).

   Two classes, dual role:

     .has-white-shadow
       Marker on the card container (<article> / <a> / <button>). Provides a
       positioning context only — it does NOT paint anything itself, so
       textual content rendered below the image (name, role, price…) stays
       fully visible.

     .white-shadow
       Goes on the inner element that actually carries the image (the photo
       wrapper, an <img>-wrapping <div>, or a <div> with a CSS
       `background-image`). The gradient is scoped to this image region only.

   HTML pattern:

     <article class="oas-card has-white-shadow">
         <div class="oas-card__photo white-shadow">
             <img src="..." alt="...">
         </div>
         <h3>Title</h3>
         <p>Subtitle</p>
     </article>

   Note on "double background":
     When .white-shadow is applied to a <div> that already carries a CSS
     `background-image`, do NOT set a `background` shorthand on the same
     element (it would wipe the image). Set only `background-image` (and
     optionally `background-size` / `background-position`) on the host —
     .white-shadow paints the gradient via ::after, so the two layers never
     collide.
   ───────────────────────────────────────────────────────────────────────────── */

.has-white-shadow,
.white-shadow {
	position: relative;
}

.white-shadow::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, #fff 0%,rgba(255, 255, 255, 0.3) 15%, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0) 25%);
	pointer-events: none;
	z-index: 1;
}