/* --- LOKALNE ZMIENNE (BEZPIECZEŃSTWO NAMESPACE) --- */
/* Te zmienne działają TYLKO wewnątrz naszych dwóch konkretnych kontenerów. 
   Dzięki temu nagłówek i stopka z global.css są w 100% nienaruszone. */
.ice-blue-bar, .building-grid {
    --local-accent: #0044cc;
}

/* --- 1. STALOWY PAS NAGŁÓWKA (STATIC) --- */
.ice-blue-bar {
    width: 100%;
    min-height: 160px; 
    background-color: rgb(66, 109, 140);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 5vw;
    border-bottom: 3px solid rgba(0,0,0,0.1);
    /* Izolacja kontenera poprawia wydajność renderowania DOM */
    contain: layout paint; 
}
        
.ice-blue-bar h1 {
    color: #ffffff;
    font-size: clamp(1.4rem, 4vw, 2.6rem); 
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0;
    max-width: 1100px;      
    text-align: center;      
}

@media (max-width: 768px) {
    .ice-blue-bar {
        min-height: 120px;
        padding: 1.5rem 5vw;
    }
}

/* --- 2. SIATKA KAFELKÓW (GPU ACCELERATED) --- */
.building-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
    /* content-visibility to potężna optymalizacja CSS, przeglądarka renderuje tylko gdy jest na ekranie */
    content-visibility: auto;
}

.building-item {
    background: #ffffff;
    /* ASSEMBLER MAGIC: Jeśli w HTML nie podasz --card-pad, użyje 2.5rem */
    padding: var(--card-pad, 2.5rem);
    border-radius: var(--card-rad, var(--rad-lg));
    border: 1px solid var(--line);
    transition: all var(--transition);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: var(--card-shadow, var(--shadow-float));
    position: relative;
    overflow: hidden;
}

/* Efekt najechania na kartę */
.building-item:hover {
    transform: translateY(var(--hover-lift, -8px));
    box-shadow: var(--shadow-hover);
    border-color: transparent;
}

.building-item strong {
    font-size: 1.2rem;
    color: #0f172a;
    margin-bottom: 10px;
    font-weight: 700;
    transition: color 0.3s ease;
}

.building-item p {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.6;
    margin: 0;
}

.building-icon-box {
    width: 64px;
    height: 64px;
    margin-bottom: 1.5rem;
    background: #f1f5f9;
    padding: 16px;
    border-radius: 14px;
    transition: background-color 0.3s ease, color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--local-accent); /* Zabezpieczony akcent */
}

.building-icon-box svg {
    width: 100%;
    height: 100%;
    display: block; /* Optymalizacja rysowania wektorów */
}

/* --- 3. MACIERZ ZMIENNYCH (ULTRA WYDAJNOŚĆ) --- */
/* Zmienne "wstrzykiwane" w pamięć tylko na poszczególnych kafelkach, nie ładują procesora globalnie */
.item-blue   { --h-bg: #dbeafe; --h-ic-bg: #bfdbfe; --h-ic-c: #1e40af; --h-txt: #1e3a8a; }
.item-green  { --h-bg: #d1fae5; --h-ic-bg: #a7f3d0; --h-ic-c: #065f46; --h-txt: #064e3b; }
.item-purple { --h-bg: #ede9fe; --h-ic-bg: #ddd6fe; --h-ic-c: #5b21b6; --h-txt: #4c1d95; }
.item-orange { --h-bg: #fef3c7; --h-ic-bg: #fde68a; --h-ic-c: #92400e; --h-txt: #78350f; }
.item-red    { --h-bg: #fee2e2; --h-ic-bg: #fecaca; --h-ic-c: #991b1b; --h-txt: #7f1d1d; }
.item-teal   { --h-bg: #ccfbf1; --h-ic-bg: #99f6e4; --h-ic-c: #0f766e; --h-txt: #134e4a; }

/* JEDEN, WSPÓLNY SILNIK HOVER DLA WSZYSTKICH KOLORÓW */
.building-item:hover {
    background-color: var(--h-bg, #f8fafc);
    /* translateZ(0) to znany i potężny hak wymuszający użycie warstwy compositingu karty graficznej */
    transform: translateY(-10px) translateZ(0); 
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    border-color: transparent;
}

.building-item:hover .building-icon-box {
    background-color: var(--h-ic-bg, #e2e8f0);
    color: var(--h-ic-c, #0f172a);
}

.building-item:hover strong {
    color: var(--h-txt, #0f172a);
}