/* ================================================================
   OBSERVATORI GRID — CSS del plugin
   Grid de 3 columnes amb amplada configurable per bloc (1/3, 2/3, 3/3)
   ================================================================ */

.observatori-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: start;
    min-height: 200px;
    position: relative;
}

/* Card base */
.observatori-item {
    background: #fff;
    padding: 0;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
    min-width: 0;
    overflow: hidden;
}

/* ===== Amplades configurables ===== */

/* Auto i 1/3: una columna (per defecte) */
.observatori-item--1-3 {
    grid-column: span 1;
}

/* 2/3: dues columnes */
.observatori-item--2-3 {
    grid-column: span 2;
}

/* 3/3: fila completa */
.observatori-item--3-3 {
    grid-column: 1 / -1;
}

/* Layouts especials (filtres, comparatives) sempre full width, sense card styling */
.observatori-item--3-3:has(.sixtems-observatori-global-comparison-block),
.observatori-item--3-3:has(.sixtems-observatori-filters-bar) {
    background: none;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}

/* La card de comparació necessita overflow visible pel menú desplegable */
.observatori-item--3-3:has(.sixtems-observatori-global-comparison-block) {
    overflow: visible;
}

/* ===== Data-attribute fallback (per compatibilitat amb el renderer) ===== */
.observatori-item:has([data-layout-width="3-3"]) {
    grid-column: 1 / -1;
}

.observatori-item:has([data-layout-width="2-3"]) {
    grid-column: span 2;
}

.observatori-item:has([data-layout-width="1-3"]) {
    grid-column: span 1;
}

/* Legacy: mantenir compatibilitat amb full/half */
.observatori-item:has([data-layout-width="full"]) {
    grid-column: 1 / -1;
}

.observatori-item:has([data-layout-width="half"]) {
    grid-column: span 1;
}

/* ===== Separador de secció (base mínima — el tema sobreescriu els estils visuals) ===== */

.observatori-section-header {
    background: none;
    box-shadow: none;
    border-radius: 0;
}

/* ===== Estils interns de la card ===== */

.observatori-item .sixtems-observatori-chart-title {
    margin: 0;
    border-radius: 12px 12px 0 0;
}

.observatori-item .sixtems-observatori-chart-container,
.observatori-item .sixtems-observatori-table-container {
    padding: 16px;
}

.observatori-item .sixtems-observatori-meta-footer {
    padding: 0 16px 16px;
}

.observatori-item .sixtems-observatori-meta-footer .sixtems-observatori-source {
    padding: 0;
}

.observatori-item > .sixtems-observatori-source,
.observatori-item .sixtems-observatori-chart-wrapper > .sixtems-observatori-source {
    padding: 0 16px 16px;
}

.observatori-item .sixtems-observatori-chart-error {
    padding: 20px 16px;
}

/* Taules més altes */
.observatori-grid .sixtems-observatori-table-container {
    max-height: 600px;
}

/* Assegurar que gràfics i taules no surtin del contenidor */
.observatori-grid .sixtems-observatori-chart-wrapper,
.observatori-grid .sixtems-observatori-table-wrapper {
    max-width: 100%;
    overflow: hidden;
}

/* Loading global ocupa tot el grid */
.observatori-grid #loading-global {
    grid-column: 1 / -1;
}

/* ===== Responsive ===== */

/* Tablet: 2 columnes */
@media (max-width: 1024px) {
    .observatori-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* 2/3 en 2 cols = fila completa */
    .observatori-item--2-3 {
        grid-column: 1 / -1;
    }
}

/* Mòbil: 1 columna */
@media (max-width: 768px) {
    .observatori-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .observatori-item--2-3,
    .observatori-item--3-3 {
        grid-column: 1 / -1;
    }
}