/* ============================================
   CARD ROWS THAT FADE AND ZOOM (js/index/fade-carousel.js)
   Institutional Reviews, Success Stories and Trusted Partners: one row of
   cards - as many columns as the row shows (3 wide, 2 tablet, 1 phone) - whose
   cards fade and zoom out, and the next ones fade and zoom in, in place.

   The row's column count is FadeCarousel's (data-fc-cols / --fc-cols). The
   sections' own grids set theirs with !important (professional-reviews.css,
   review-cards.css), so this outranks them with a third selector.
   ============================================ */

.hr-grid.fc-grid[data-fc-cols] {
    display: grid !important;
    grid-template-columns: repeat(var(--fc-cols, 3), minmax(0, 1fr)) !important;
    align-items: stretch;
    /* Fewer cards than a full row stay card-sized and centred, not stretched. */
    max-width: min(1200px, calc(var(--fc-cols, 3) * 400px + (var(--fc-cols, 3) - 1) * 1.5rem));
    margin-left: auto;
    margin-right: auto;
}

.fc-slot {
    display: flex;
    min-width: 0;
    transform-origin: center;
    transition: opacity 0.45s ease, transform 0.45s ease;
}

/* The card fills its place, so a row's cards are one height. */
.fc-slot > * {
    flex: 1 1 auto;
    min-width: 0;
}

/* Leaving: fades and zooms out. Arriving: starts here with no transition, then
   the slot's own transition brings it to full size - the zoom in. */
.fc-slot.fc-out,
.fc-slot.fc-in {
    opacity: 0;
    transform: scale(0.88);
}

.fc-slot.fc-in {
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    .fc-slot.fc-out,
    .fc-slot.fc-in {
        transform: none;
    }
}