/* ==========================================================================
   Property manager (/property-manager), dal mockup di Gaia (8/10/2026).
   Si carica dopo prodotto.css (fondi .fondo-*, hero d'area, .pagina-*,
   .spunte-n). Prefisso pm-.
   ========================================================================== */

/* --- Il lavoro che conosciamo: cinque card che portano alle sezioni ------ */
.pm-problemi {
  list-style: none;
  margin: clamp(2rem, 3.5vw, 2.75rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
}
.pm-problemi > li { display: flex; }
.pm-problema {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  padding: 1.5rem 1.25rem;
  border-top: 6px solid var(--teal-scuro);
  border-radius: 20px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pm-problema:hover { transform: translateY(-3px); box-shadow: var(--ombra-2); }
@media (prefers-reduced-motion: reduce) { .pm-problema:hover { transform: none; } }
.pm-problema__testa { display: flex; align-items: center; justify-content: space-between; }
.pm-problema .card__icona { width: 34px; height: 34px; border-radius: 10px; background: var(--teal-scuro); color: #fff; }
.pm-problema__num { font-family: var(--font-titoli); font-size: 1.875rem; font-weight: 800; line-height: 1; color: #cfe3e5; }
.pm-problema h3 { font-size: 1.25rem; font-weight: 800; line-height: 1.2; }
.pm-problema p { font-size: 0.875rem; line-height: 1.6; color: var(--grigio); }
.pm-problema__link { margin-top: auto; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sh-ruggine); }
@media (max-width: 1100px) { .pm-problemi { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .pm-problemi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .pm-problemi { grid-template-columns: minmax(0, 1fr); } }

/* --- Righe: le schermate larghe come nel mockup --------------------------
   Non meno di 561px: a 560 i mockup del booking engine passano alla versione
   da telefono, stretta e lunga (Luca, 8/10/2026). */
@media (min-width: 1001px) {
  .pm .pagina-riga { grid-template-columns: minmax(0, 1fr) minmax(0, 38.75rem); }
  .pm .pagina-riga.pm-riga--sx { grid-template-columns: minmax(0, 38rem) minmax(0, 1fr); }
}

/* --- E poi: due card sul fondo scuro ------------------------------------- */
.pm-regia__testa h2 { margin-top: 0.875rem; font-size: clamp(2.125rem, 2.4vw + 1.25rem, 3.25rem); line-height: 1.1; color: #fff; }
.pm-regia__etichetta { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.17em; text-transform: uppercase; color: var(--sh-arancio); }
.pm-regia__testa .pm-regia__etichetta { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.2em; }
.pm-regia {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.pm-regia__card { display: flex; flex-direction: column; gap: 0.875rem; padding: 2.25rem 2.25rem 2rem; border-radius: 24px; background: #15545c; }
.pm-regia__card h3 { font-size: clamp(1.5rem, 1vw + 1.1rem, 2rem); font-weight: 700; line-height: 1.15; color: #fff; }
.pm-regia__card p:not(.pm-regia__etichetta) { font-size: clamp(1rem, 0.2vw + 0.95rem, 1.0625rem); line-height: 1.65; color: #cfe3e5; }
.pm-regia__link { margin-top: auto; padding-top: 0.375rem; font-weight: 600; color: #7fd0d7; text-decoration: none; }
.pm-regia__link:hover { color: #fff; text-decoration: underline; text-underline-offset: 0.2em; }
@media (max-width: 900px) { .pm-regia { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .pm-regia__card { padding: 1.75rem 1.375rem; } }

/* --- Rimando a hotel e villaggi ------------------------------------------ */
.pm-altro { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.375rem; border-top: 1px solid #e6d9c6; font-size: 1rem; color: var(--grigio); }
.pm-altro a { font-weight: 600; color: var(--teal-scuro); text-decoration: none; }
.pm-altro a:hover { text-decoration: underline; text-underline-offset: 0.2em; }