/* =========================================================
   Ocupació de cases — mobile-first: targetes en graella, agrupades
   per mes, amb un color amb sentit (quant falta), no decoratiu.
   ========================================================= */

.ocup-llegenda{display:flex;flex-wrap:wrap;gap:14px;margin:2px 0 16px;padding-bottom:12px;border-bottom:1px dashed var(--linia)}
.ocup-lleg-item{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--gris)}
.ocup-lleg-punt{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.ocup-punt-ara{background:var(--verd-fort)}
.ocup-punt-proper{background:#f0b429}
.ocup-punt-neutre{background:var(--linia-forta)}

.ocup-tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:18px}
.ocup-tab{padding:8px 15px;border-radius:20px;font-size:12.5px;font-weight:700;background:#fbfcfb;border:1px solid var(--linia);color:var(--gris)}
.ocup-tab:hover{border-color:var(--verd-mig);background:var(--verd-clar);color:var(--verd-fort)}
.ocup-tab.on{background:var(--verd-fort);color:#fff;border-color:var(--verd-fort)}

.ocup-mes-tit{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--gris);margin:22px 0 10px}
.ocup-mes-tit:first-child{margin-top:0}

.ocup-graella{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}

.ocup-card{position:relative;background:var(--card);border:1px solid var(--linia);border-left:4px solid var(--linia-forta);border-radius:12px;padding:13px 14px;box-shadow:var(--ombra);transition:.15s;display:flex;flex-direction:column;gap:6px}
.ocup-card:hover{box-shadow:var(--ombra-hover);transform:translateY(-1px)}

/* Codi de color: quant falta per a l'estada, no quina casa és */
.ocup-card.ocup-ara{border-left-color:var(--verd-fort);background:linear-gradient(180deg,var(--verd-clar) 0%,var(--card) 55%)}
.ocup-card.ocup-aviat{border-left-color:var(--verd-mig)}
.ocup-card.ocup-proper{border-left-color:#f0b429}
.ocup-card.ocup-neutre{border-left-color:var(--linia-forta)}

.ocup-card-cap{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.ocup-casa-pill{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--verd-fort);background:var(--verd-clar);padding:3px 9px;border-radius:20px}
.ocup-ara-pill{align-self:flex-start;font-size:10px;font-weight:800;color:#fff;background:var(--verd-fort);padding:3px 9px;border-radius:20px}

.ocup-data{font-size:11.5px;font-weight:700;color:var(--gris);text-transform:capitalize;white-space:nowrap}

.ocup-titol{font-size:13.5px;font-weight:600;color:var(--tinta);line-height:1.4}
a.ocup-titol-link{text-decoration:none}
a.ocup-titol-link:hover{color:var(--blau-fort);text-decoration:underline}

.ocup-durada{font-size:11.5px;color:var(--gris-clar);font-weight:600;margin-top:2px}

/* La graella (auto-fill + minmax) es col·lapsa sola a 1 columna en
   pantalles estretes, sense necessitat de cap regla especial de
   mòbil — mai pot sortir-se de l'amplada de la pantalla. */
@media(max-width:640px){
  .ocup-tab{padding:7px 12px;font-size:11.5px}
  .ocup-card{padding:12px 13px}
  .ocup-titol{font-size:13px}
  .ocup-mes-tit{margin:18px 0 8px;font-size:11.5px}
  .ocup-llegenda{gap:10px;font-size:11px}
}

.ocup-contactes{display:flex;flex-wrap:wrap;gap:10px;margin-top:2px}
.ocup-contacte{font-size:11px;font-weight:600;color:var(--blau-fort);text-decoration:none}
.ocup-contacte:hover{text-decoration:underline}