/* Meteo della scheda del luogo.
   Prima era un riquadro sovrapposto in alto a destra e finiva sopra il
   pulsante «Condividi». Ora è una barra nella colonna del contenuto: sta
   sopra i comandi e non copre mai nulla, a nessuna larghezza di schermo. */
.detail-head { position: relative; }

.place-weather-slot {
  position: static;
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  margin: 0 0 14px;
  color: #173d3a;
}

.place-weather-slot:focus-visible {
  outline: 3px solid rgba(44, 86, 76, .28);
  outline-offset: 2px;
  border-radius: 14px;
}

.place-weather-slot.is-ready {
  border: 1px solid rgba(44, 86, 76, .16);
  border-radius: 14px;
  background: rgba(255, 253, 247, .84);
  box-shadow: 0 10px 24px rgba(37, 48, 42, .08);
  backdrop-filter: blur(10px);
  overflow: hidden;
  cursor: pointer;
}

.place-weather-top { display: flex; align-items: center; gap: 10px; padding: 9px 12px; }
.weather-sun-mark { position: relative; display: block; width: 26px; height: 26px; flex: 0 0 26px; border: 2px solid #c78840; border-radius: 50%; background: #f3cb7b; box-shadow: 0 0 0 5px rgba(243, 203, 123, .2); }
.weather-sun-mark:before, .weather-sun-mark:after { content: ""; position: absolute; inset: -6px; border-top: 1px solid #d6a259; border-bottom: 1px solid #d6a259; border-radius: 50%; transform: rotate(45deg); }
.weather-sun-mark:after { transform: rotate(-45deg); }
.weather-eyebrow { display: block; color: #719087; font-size: .58rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.weather-temperature { display: inline-block; margin-right: 6px; color: #173d3a; font-family: Georgia, serif; font-size: 1.3rem; line-height: 1; font-weight: 600; }
.weather-condition { color: #61736f; font-size: .72rem; font-weight: 700; }
.weather-chevron { margin-left: auto; color: #9b8060; font-size: 1.1rem; line-height: 1; transition: transform .2s ease; }

.place-weather-slot.is-ready:hover .weather-chevron,
.place-weather-slot.is-ready:focus-within .weather-chevron,
.place-weather-slot.is-expanded .weather-chevron { transform: rotate(180deg); }

.weather-forecast { max-height: 0; padding: 0 12px; overflow: hidden; opacity: 0; transition: max-height .28s ease, opacity .22s ease, padding .28s ease; }
.place-weather-slot.is-ready:hover .weather-forecast,
.place-weather-slot.is-ready:focus-within .weather-forecast,
.place-weather-slot.is-expanded .weather-forecast { max-height: 170px; padding: 0 12px 11px; opacity: 1; }
.weather-forecast p { margin: 0 0 7px; border-top: 1px solid rgba(44, 86, 76, .12); padding-top: 8px; color: #8a6c4f; font-size: .58rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.weather-forecast ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.weather-forecast li { display: grid; gap: 2px; min-width: 0; padding: 7px 4px; border-radius: 10px; background: rgba(255, 255, 255, .55); color: #6d7c77; text-align: center; font-size: .58rem; }
.weather-forecast li strong { color: #214944; font-size: .78rem; }
.weather-forecast li small { color: #9aa49f; font-size: .62rem; }
.weather-day { color: #315f59; font-weight: 900; text-transform: capitalize; }
.weather-day-state { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .54rem; }

.weather-loading { display: flex; align-items: center; gap: 9px; padding: 12px 13px; border: 1px solid rgba(44, 86, 76, .12); border-radius: 14px; background: rgba(255, 253, 247, .75); }
.weather-loading-line { display: block; width: 74px; height: 8px; border-radius: 8px; background: linear-gradient(90deg, #eadfce, #f8f1e7, #eadfce); background-size: 200% 100%; animation: weatherShimmer 1.2s infinite; }
.weather-loading-line.short { width: 48px; height: 14px; }
.weather-unavailable { display: block; padding: 11px 13px; border: 1px solid rgba(44, 86, 76, .1); border-radius: 14px; background: rgba(255, 253, 247, .7); color: #7d8983; font-size: .68rem; font-weight: 700; }
@keyframes weatherShimmer { to { background-position: -200% 0; } }

@media (max-width: 560px) {
  .place-weather-slot { margin-bottom: 11px; }
  .place-weather-top { padding: 8px 10px; }
  .weather-sun-mark { width: 22px; height: 22px; flex-basis: 22px; }
  .weather-eyebrow { font-size: .52rem; }
  .weather-temperature { font-size: 1.1rem; }
  .weather-condition { display: block; margin-top: 2px; font-size: .62rem; }
  .weather-forecast li { padding: 6px 3px; }
}

@media (prefers-reduced-motion: reduce) {
  .weather-forecast, .weather-chevron { transition: none; }
}