/* --------------------------------------------------------------------------
   Aspect ratio helper (Bootstrap)
   --------------------------------------------------------------------------
   Bootstrap provides the generic `.ratio` utility, but it does NOT ship with a
   `.ratio-3x4` preset by default. The `.ratio` utility reads the CSS variable
   `--bs-aspect-ratio` to compute the element’s height.

   For a portrait 3:4 poster:
   - width : height = 3 : 4
   - height/width = 4/3 = 1.333333...
   - as percentage: 133.3333%
---------------------------------------------------------------------------- */
.ratio-3x4 {
    --bs-aspect-ratio: 133.3333%;
}

/* --------------------------------------------------------------------------
   Poster container
   --------------------------------------------------------------------------
   This is the visible “poster” area that holds the speaker image and the overlay.
   Key points:
   - Rounded top corners to match the Bootstrap card radius.
   - `position: relative` establishes a positioning context for the absolutely
     positioned child elements (the <img> and the overlay).
   - `overflow: hidden` clips the image and overlay to the rounded corners.
   - A light gray background is used as a placeholder while images load or if
     a speaker has no image.
---------------------------------------------------------------------------- */
.speaker-poster {
    border-radius: var(--bs-border-radius);
    position: relative;
    overflow: hidden;
    background-color: #e9ecef;
}

/* --------------------------------------------------------------------------
   Image layer
   --------------------------------------------------------------------------
   The <img> is positioned absolutely to fill the entire poster container.
   `object-fit: cover` ensures:
   - The image covers the full area without distortion
   - Cropping happens if necessary (similar to background-size: cover)

   `z-index: 0` ensures the image sits underneath the overlay.
---------------------------------------------------------------------------- */
.speaker-poster > img {
    position: absolute;
    inset: 0;              /* shorthand for top/right/bottom/left: 0 */
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* --------------------------------------------------------------------------
   Overlay layer
   --------------------------------------------------------------------------
   The overlay covers the whole poster and is hidden by default.
   Key behaviors:
   - Semi-transparent black background to improve text contrast.
   - `opacity: 0` + a slight translate makes the hover effect feel smoother.
   - Transition animates opacity and position when hovering.
   - `z-index: 1` ensures it renders on top of the image.
---------------------------------------------------------------------------- */
.speaker-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.60);
    opacity: 0;
    transform: translateY(8%);
    transition: opacity 0.25s ease, transform 0.25s ease;
    color: #fff;
}

/* --------------------------------------------------------------------------
   Hover interaction
   --------------------------------------------------------------------------
   When the user hovers the card, the overlay becomes visible and slides into place.
   This selector targets the overlay whenever its parent `.card` is hovered.
---------------------------------------------------------------------------- */

/* Overlay hidden by default */
.speaker-overlay {
    opacity: 0;
    transform: translateY(8%);
    transition: opacity .25s ease, transform .25s ease;
}

.speaker-card {
    max-width: clamp(220px, 22vw, 300px);
    margin-inline: auto;
}


/* Desktop/laptop: real hover with mouse/trackpad only */
@media (hover: hover) and (pointer: fine) {
    .card:hover .speaker-overlay {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Touch devices: overlay is shown only when JS adds .is-active */
@media (hover: none), (pointer: coarse) {
    .card.is-active .speaker-overlay {
        opacity: 1;
        transform: translateY(0);
    }
}