/**
 * Locations index page (public/locations.php).
 *
 * No dedicated "Locations index" frame exists anywhere in the Figma
 * "02 - Public Website" file - confirmed by listing every top-level
 * 1440px page frame in the file (16 total: homepage, property listing,
 * about/services/investment/contact/consultation, journal listing/
 * article, newsletter, 404, privacy, terms, success states, the single-
 * location/category/collection templates, and the Google Ads landing
 * page). The only "location" content is the single-location template
 * (location-template-ikoyi, routed by slug) and its own internal
 * "Location-Overview" section - there is no separate overview/index page
 * for browsing all 6 locations at once.
 *
 * Built as a simple, functional utility page instead, per explicit
 * instruction: the header/footer nav already link to /locations.php, so
 * it needs a working destination, not a new visual pattern invented for
 * it. Reuses the homepage's Curated Collections card treatment (tall
 * image, bottom-gradient overlay, title) - same classes/rules as
 * homepage.css's .collection-card, just in its own file (not linking
 * homepage.css itself, which carries a lot of homepage-only CSS this
 * page doesn't use) and arranged as a grid instead of a 4-up flex row,
 * since 6 locations don't fit that row width as comfortably as 4 did.
 */

.loc-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 96px 80px 64px;
    text-align: center;
    background: var(--color-ivory);
}

.loc-hero__kicker {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    color: var(--color-champagne-gold);
    margin: 0;
}

.loc-hero__title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 42px;
    color: var(--color-primary-green);
    margin: 0;
}

.loc-hero__desc {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: #717171;
    max-width: 640px;
    margin: 0;
}

.loc-grid-section {
    padding: 80px;
}

.loc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.loc-card {
    position: relative;
    height: 340px;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px;
    text-decoration: none;
}

.loc-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease-out;
}

.loc-card:hover img {
    transform: scale(1.04);
}

.loc-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.75) 100%);
}

.loc-card__title {
    position: relative;
    z-index: 1;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 24px;
    color: var(--color-white);
    margin: 0 0 6px;
}

.loc-card__count {
    position: relative;
    z-index: 1;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--color-white);
    opacity: 0.85;
    margin: 0;
}

@media (max-width: 1024px) {
    .loc-hero,
    .loc-grid-section {
        padding-left: 24px;
        padding-right: 24px;
    }

    .loc-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .loc-hero__title {
        font-size: 30px;
    }

    .loc-grid {
        grid-template-columns: 1fr;
    }
}