/**
 * Locations Landing Page Styles
 * Page: /locations/
 * Page ID: 105608
 */

/* ========================================
   TEAL OVERLAY COLOR FOR HERO
   ======================================== */
.page-locations .hero__image-container.has-teal-background-color {
    background-color: var(--c-blue, #007086);
}

/* ========================================
   CONTENT WIDTH CONSTRAINTS (1240px)
   ======================================== */
.page-locations .holt-page-header .hero__inner {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--hs-default, 20px);
    padding-right: var(--hs-default, 20px);
}

.page-locations #intro > *,
.page-locations #programs > *,
.page-locations #locations > *,
.page-locations .wp-block-group.alignfull[style*="linear-gradient"] > * {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--hs-default, 20px);
    padding-right: var(--hs-default, 20px);
    box-sizing: border-box;
}

/* ========================================
   KICKER / SECTION LABEL STYLING
   ======================================== */
.page-locations .kicker {
    font-family: var(--f-body, "GeneralSans", "Avenir", sans-serif);
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 8px;
    display: block;
}

/* ========================================
   STATS ROW STYLING
   ======================================== */
.page-locations .stats-row {
    margin-top: 48px;
}

.page-locations .stat-number {
    font-family: var(--f-heading, "Rowan", Georgia, serif);
}

/* ========================================
   PROGRAM CARDS
   ======================================== */
.page-locations .program-card {
    transition: all 200ms ease;
}

.page-locations .program-card:hover {
    background: var(--c-white, #fff) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* ========================================
   LOCATIONS GRID
   ======================================== */
.page-locations .locations-grid {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--hs-default, 20px);
    padding-right: var(--hs-default, 20px);
}

.page-locations .locations-grid > .wp-block-group__inner-container {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.page-locations .locations-grid .location-card {
    margin: 0 !important;
}

@media (max-width: 1024px) {
    .page-locations .locations-grid > .wp-block-group__inner-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .page-locations .locations-grid > .wp-block-group__inner-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .page-locations .locations-grid > .wp-block-group__inner-container {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   LOCATION CARDS
   ======================================== */
.page-locations .location-card {
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 250ms ease;
}

.page-locations .location-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 112, 134, 0.2);
}

/* Make entire card clickable */
.page-locations .location-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Card image */
.page-locations .location-card .location-card__image {
    overflow: hidden;
}

.page-locations .location-card .location-card__image .wp-block-cover__image-background {
    transition: transform 300ms ease;
}

.page-locations .location-card:hover .location-card__image .wp-block-cover__image-background {
    transform: scale(1.05);
}

/* Card heading hover effect */
.page-locations .location-card h3 {
    transition: color 150ms ease;
}

.page-locations .location-card:hover h3 {
    color: var(--c-blue, #007086);
}

/* ========================================
   PROGRAM TAGS
   ======================================== */
.page-locations .program-tags {
    gap: 6px;
}

.page-locations .program-tag {
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    background: var(--c-cloud, #f7f8fa);
    color: var(--c-muted, #6a717c);
    margin: 0;
    white-space: nowrap;
}

.page-locations .program-tag--adoption {
    background: rgba(0, 110, 164, 0.1);
    color: #006ea4;
}

.page-locations .program-tag--sponsorship {
    background: rgba(251, 174, 73, 0.15);
    color: #edaf44;
}

.page-locations .program-tag--family {
    background: rgba(227, 80, 48, 0.1);
    color: #e35030;
}

/* ========================================
   REGION FILTER BUTTONS
   ======================================== */
.page-locations .region-filters .wp-block-buttons {
    justify-content: center;
}

.page-locations .region-filters .wp-block-button__link {
    padding: 10px 20px;
    font-weight: 600;
    font-size: 0.95rem;
}

.page-locations .region-filters .filter-btn.is-active .wp-block-button__link {
    background: var(--c-blue, #007086);
    border-color: var(--c-blue, #007086);
    color: #fff;
}

/* ========================================
   HERO SECTION ADJUSTMENTS
   ======================================== */
.page-locations .holt-page-header .hero__content {
    max-width: 700px;
}

.page-locations .holt-page-header .hero__buttons {
    margin-top: 32px;
}

/* Outline button on hero - white */
.page-locations .holt-page-header .is-style-outline .wp-block-button__link {
    border-color: #fff !important;
    color: #fff !important;
}

.page-locations .holt-page-header .is-style-outline .wp-block-button__link:hover {
    background: #fff !important;
    color: var(--c-blue, #007086) !important;
}

/* ========================================
   CTA SECTION
   ======================================== */
.page-locations .wp-block-group.alignfull[style*="linear-gradient"] .is-style-outline .wp-block-button__link {
    border-color: #fff !important;
    color: #fff !important;
}

.page-locations .wp-block-group.alignfull[style*="linear-gradient"] .is-style-outline .wp-block-button__link:hover {
    background: #fff !important;
    color: var(--c-blue, #007086) !important;
}

/* ========================================
   BUTTON STYLES
   ======================================== */
.page-locations .wp-block-button__link {
    border-radius: 12px;
    font-weight: 600;
    transition: all 150ms ease;
}

.page-locations .wp-block-button__link:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}