/*
 * Site media sizing
 * ------------------------------------------------------------------
 * The theme only sets `img { max-width: 100% }`, so every thumbnail kept the
 * aspect ratio of whatever was uploaded: a portrait photo produced a tall card
 * and a landscape photo a short one, and the grids never lined up. Each media
 * box below gets a fixed ratio and the image is cropped to fill it, so all
 * cards in a grid are identical no matter what the admin uploads.
 */

.xs-media {
    display: block;
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: #ededed;
}

.xs-media > img,
.xs-media > iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}

.xs-media-wide {
    aspect-ratio: 16 / 9;
}

.xs-media-portrait {
    aspect-ratio: 3 / 4;
}

/*
 * Athlete and coach grids. The theme markup already supplies the cropping
 * container (.xs-team-thumb is position:relative + overflow:hidden and carries
 * the hover slide that reveals the social overlay), so only the ratio and the
 * fill behaviour are added here and the Blade markup stays untouched.
 */
.xs-team-thumb {
    aspect-ratio: 3 / 4;
}

.xs-team-thumb img {
    height: 100%;
    object-fit: cover;
}

/*
 * News cards. Equalising the image box alone still leaves the date row floating
 * at a different height per card, because titles and excerpts wrap to different
 * line counts. Clamping both and pinning the meta row to the bottom keeps the
 * whole grid aligned.
 */
.xs-news-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.xs-news-body {
    flex: 1 1 auto;
}

.xs-news-title,
.xs-news-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.xs-news-title {
    -webkit-line-clamp: 2;
}

.xs-news-text {
    -webkit-line-clamp: 3;
}

.xs-news-meta {
    margin-top: auto;
}