/* ==========================================================================
   SSV College — Facilities page
   File: css/Facilities.css   (linked from Facilities.aspx through the "head" placeholder)

   Load order on Facilities.aspx: site-modern.css (tokens, buttons, cards, section heads)
   → css/AboutUs.css (shared .ssv-page-banner / .ssv-crumbs / .ssv-link-card used by the
   hero and the "Explore" quick-nav) → this file (alternating facility blocks only).
   No design tokens are redeclared here — they come from site-modern.css's :root block.
   Everything is prefixed "ssv-" and lives under ".ssv-scope".
   Hover/transition speed for everything below is already handled globally by
   site-modern.css's ".ssv-scope *" / ".ssv-card:hover" reduced-motion rules.

   Contents
     1. Facility block (alternating image + text)
   ========================================================================== */


/* 1. FACILITY BLOCK ---------------------------------------------------------
   Image bleeds to the card edge, so padding moves off .ssv-card onto the body. */
.ssv-facility {
    padding: 0;
    overflow: hidden;
}

.ssv-facility__media {
    position: relative;
    min-height: 240px;
}

    .ssv-facility__media img {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* Selector needs 3 classes' worth of specificity: Bootstrap's
   ".no-gutters > [class*='col-']" (used so the media column can bleed to the
   card edge) zeroes left/right padding on every column, including this one,
   at 2-class specificity — a plain ".ssv-facility__body" rule loses to it. */
.ssv-facility > .row > .ssv-facility__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
}

.ssv-facility__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: .9rem;
    border-radius: 12px;
    background: #FFF1E3;
    color: var(--accent-deep);
    font-size: 1.2rem;
}

.ssv-facility__title {
    margin-bottom: .85rem;
    font-size: clamp(1.3rem, 1.1rem + 1vw, 1.65rem);
}

.ssv-facility__text {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.85;
    color: #334155;
}

@media (max-width: 767.98px) {
    .ssv-facility__media {
        min-height: 220px;
    }
}