/******* GRID *******/

.grid {
    --min-column-size: 15rem;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--min-column-size), 100%), 1fr));
}

/* each card family sets its own aspect-ratio */
.grid .card {
    position: relative;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
}

.grid .card:hover {
    scale: 1.03;
}

.grid .title {
    font-size: 1rem;
    font-weight: 600;
}

/*---------------------------------------------------------------
---                       V I D E O S                         ---
---------------------------------------------------------------*/

.videos-grid .card {
    aspect-ratio: 16 / 10;
}

.videos-grid .lil-img::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 8px;
    --color-bottom: rgb(0 0 0 / .7);
    --color-top: transparent;
    background: linear-gradient(to top,
        var(--color-bottom) 0%, var(--color-bottom) 10%,
        var(--color-top) 100%);
}

.videos-grid * {
  transition-property: filter, scale, opacity;
  transition-duration: 300ms;
  transition-timing-function: ease-in-out;
}

.videos-grid .card:not(:hover) .lil-img {
    filter: grayscale(35%) brightness(0.9);
}

.videos-grid a {
    display: contents;
    color: inherit;
}

.videos-grid .lil-img {
    width: 100%;
    height: 100%;
}

.videos-grid img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    display: block;
    position: relative;
    object-fit: cover;
}

.videos-grid .play-badge {
    position: absolute;
    /* sits above centre so it stays clear of the caption at the bottom */
    top: calc(40% - 1.2rem);
    left: calc(50% - 1.2rem);
    width: 2.4rem;
    height: 2.4rem;
    color: rgb(255 255 255 / .85);
    opacity: .75;
    pointer-events: none;
}

.videos-grid .card:hover .play-badge {
    opacity: 1;
}

.videos-grid .texts {
    position: absolute;
    bottom: 0;
    --_padding: 1rem;
    padding: var(--_padding);
    width: calc(100% - var(--_padding) * 2);
    text-align: center;
    color: rgb(255 255 255 / .95);
}

.videos-grid .texts .title {
    font-size: 0.95rem;
    font-weight: 400;
    margin-bottom: 0.35rem;
}

.videos-grid .texts .parag {
    font-size: .75rem;
    opacity: 0.9;
    font-weight: 300;
}

/* a card holding a playing video isn't a link to press anymore */
.videos-grid .card.playing {
    cursor: default;
}

.videos-grid .card.playing:hover {
    scale: 1;
}

/*---------------------------------------------------------------
---                       C L I E N T S                       ---
---------------------------------------------------------------*/

.clients-grid {
    /* an open card grows, and shouldn't stretch the others in its row */
    align-items: start;
}

.clients-grid .card {
    /* the ratio is kept whether the card is open or not. it sets the collapsed
     * size, and it gives .lil-img below a height that does not depend on the
     * card growing, which is what stops the logo shifting on open. */
    aspect-ratio: 30 / 26;
    background-color: var(--panel-color);
    /* every card opens by exactly this much, so they all end up the same size.
     * the copy is kept to a similar length so this stays tight. */
    --reveal-height: 10.5rem;
    --scale-time: 150ms;
    transition: scale var(--scale-time);
}

.clients-grid .lil-img {
    /* 100% resolves against the ratio-derived height, not the grown height */
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.clients-grid img {
    /* the logos range from square to very wide wordmarks, so cap both axes */
    width: 58%;
    height: auto;
    max-height: 40%;
    object-fit: contain;
    display: block;
}

/* the reveal is pulled up into the spare room under the logo so an open card is
 * not overly tall. it must stay smaller than that gap or the copy would sit on
 * top of the logo, so the mobile value is smaller (the cards are shorter there). */
.clients-grid .lil-text-content {
    margin-top: -3rem;
    /* reserves the chevron's strip below the window, so the copy can never
     * slide under the arrow, mid-animation or once open */
    margin-bottom: 2.5rem;
    height: 0;
    overflow: hidden;
    transition: height 500ms ease-in-out;
}

.clients-grid .card.expanded .lil-text-content {
    height: var(--reveal-height);
}

.clients-grid .text-content {
    text-align: center;
    padding-inline: 1.25rem;
}

.clients-grid .title {
    margin-top: 0;
}

.clients-grid .subtitle {
    font-size: .9rem;
    font-weight: 200;
    margin-bottom: 12px;
    margin-top: -12px;
}

.clients-grid .body-text {
    font-size: .9rem;
    line-height: 1.4;
}

.clients-grid .chevron {
    position: absolute;
    bottom: 20px;
    left: calc(50% - 15px);
    transform-origin: 50%;
    transform: rotate(180deg);
    transition: transform 700ms;
}

.clients-grid .card.expanded .chevron {
    transform: rotate(0deg);
}

.clients-grid .card:hover:not(.expanded) .chevron {
    animation-name: wiggle;
    animation-duration: 400ms;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-delay: calc(var(--scale-time) * 7);
}