/* Homepage category covers are separate from the map's category icons. */
.homepage-hotspot-categories {
    padding: var(--hp-space-hotspot-categories-desktop-top, 56px) 0 var(--hp-space-hotspot-categories-desktop-bottom, 56px);
    background: #f5f7fa;
    color: var(--hp-section-hotspot-categories-foreground, var(--hp-text, #242b3d));
}

.homepage-hotspot-categories > .container {
    max-width: 1280px;
}

.homepage-hotspot-categories-heading {
    margin-bottom: 28px;
}

.homepage-hotspot-categories-heading .title {
    margin-bottom: 0;
    color: inherit;
}

.homepage-hotspot-category-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 20px;
}

.homepage-hotspot-category-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    color: var(--hp-text, #242b3d);
    text-align: center;
    text-decoration: none;
    background: var(--hp-surface, #fff);
    border: 1px solid var(--hp-border, #e5e9ee);
    border-radius: var(--hp-radius, 12px);
    box-shadow: 0 4px 16px rgb(21 48 67 / 4%);
    transition: border-color .2s, box-shadow .2s, transform .2s;
}

a.homepage-hotspot-category-card:hover {
    color: var(--hp-primary, #315af3);
    border-color: var(--hp-primary, #315af3);
    box-shadow: 0 8px 22px rgb(21 48 67 / 10%);
    transform: translateY(-3px);
}

.homepage-hotspot-category-image-frame {
    display: grid;
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--hp-background, #edf4f1);
}

.homepage-hotspot-category-image,
.homepage-hotspot-category-placeholder {
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
}

.homepage-hotspot-category-image {
    object-fit: cover;
}

.homepage-hotspot-category-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hp-primary, #538779);
    background: linear-gradient(135deg, var(--hp-background, #edf4f1), var(--hp-surface, #fff));
    font-size: 32px;
}

.homepage-hotspot-category-name {
    padding: 15px 10px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.homepage-hotspot-category-status {
    margin: 24px 0 0;
    text-align: center;
    font-size: 15px;
    color: inherit;
}

.homepage-hotspot-categories-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin-top: 28px;
}

.homepage-hotspot-browse-link,
.homepage-hotspot-category-retry {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 12px;
    font-size: 16px;
    font-weight: 600;
    color: var(--hp-primary, #315af3);
}

.homepage-hotspot-category-retry {
    background: var(--hp-surface, #fff);
    border: 1px solid currentColor;
    border-radius: 8px;
}

.homepage-hotspot-categories a:focus-visible,
.homepage-hotspot-categories button:focus-visible {
    outline: 3px solid var(--hp-primary, #315af3);
    outline-offset: 4px;
}

.homepage-hotspot-categories [hidden] {
    display: none !important;
}

.homepage-hotspot-category-skeleton .homepage-hotspot-category-image-frame,
.homepage-hotspot-category-skeleton-label {
    background: #e8edf0;
}

.homepage-hotspot-category-skeleton-label {
    display: block;
    width: 60%;
    height: 18px;
    margin: 17px auto;
    border-radius: 4px;
}

@media (max-width: 1199.98px) {
    .homepage-hotspot-category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
    .homepage-hotspot-categories {
        padding-top: var(--hp-space-hotspot-categories-mobile-top, 40px);
        padding-bottom: var(--hp-space-hotspot-categories-mobile-bottom, 40px);
    }
    .homepage-hotspot-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
    .homepage-hotspot-category-name { padding: 12px 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .homepage-hotspot-category-card { transition: none; }
    a.homepage-hotspot-category-card:hover { transform: none; }
}