/* =========================================================
   PAGINA NOLEGGI
   Caricato solo dal modello "Noleggi" (page-templates/noleggi.php, vedi Pharmanatura_Rentals::enqueue_assets). Hero, bottoni, occhielli,
   intestazioni di sezione e card riusano le regole di style.css: qui ci sono solo le varianti e i componenti propri della pagina.
   ========================================================= */

/* Altezza dell'header sticky (style.css), usata per agganciare sotto di
   esso la barra delle categorie. */
.pn-rentals { --pn-header-h: 77px; --pn-rentals-nav-h: 60px; }

/* =========================================================
   HERO
   ========================================================= */
/* Una sola colonna senza immagine: titolo, testo e vantaggi occupano tutta
   la larghezza del contenuto. position: relative tiene il testo sopra il
   riflesso decorativo (.pn-hero__glow). */
.pn-hero__inner { position: relative; padding-top: 40px; padding-bottom: 88px; }
.pn-hero--rentals .pn-breadcrumb { margin-bottom: 40px; }
.pn-hero--rentals .pn-eyebrow { margin-bottom: 20px; }
.pn-hero--rentals .pn-hero__lead { max-width: 760px; }

.pn-hero__perks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 26px; padding-top: 26px; border-top: 1px solid var(--pn-border); font-size: 14px; line-height: 1.5; color: var(--pn-muted); }
.pn-hero__perks li { padding-left: 14px; border-left: 1px solid rgba(31, 111, 74, .18); }

/* =========================================================
   INDICE CATEGORIE
   La card riusa icona, titolo e testo di .pn-card (servizi in home).
   ========================================================= */
.pn-rentals-index { padding-top: 16px; padding-bottom: 96px; }
.pn-rentals-index .pn-section-head { margin-bottom: 44px; }
.pn-rentals-index__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.pn-rentals-index__grid > li { display: flex; min-width: 0; }

.pn-category-card { display: flex; flex-direction: column; width: 100%; background: var(--pn-white-dark); border: 1px solid var(--pn-border); border-radius: 22px; overflow: hidden; color: var(--pn-text); transition: border-color .18s ease; }
.pn-category-card:hover { border-color: rgba(31, 111, 74, .45); color: var(--pn-text); }
.pn-category-card:focus-visible { outline: 2px solid var(--pn-green); outline-offset: 3px; }

.pn-category-card__media { height: 210px; background: var(--pn-badge-bg); border-bottom: 1px solid var(--pn-border-soft); }
.pn-category-card__media img { width: 100%; height: 100%; object-fit: cover; }

.pn-category-card__body { display: flex; flex-direction: column; flex: 1; padding: 26px 26px 24px; }
.pn-category-card__icon { margin-bottom: 20px; }
.pn-category-card__text { margin-bottom: 24px; text-wrap: pretty; }

.pn-category-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--pn-border-soft); font-size: 14.5px; font-weight: 500; color: var(--pn-nav-text); }
.pn-category-card__more { color: var(--pn-green); }

/* =========================================================
   BARRA CATEGORIE (sticky)
   Resta agganciata sotto l'header finché si scorre il catalogo
   (.pn-rentals-catalog); la voce della sezione visibile riceve
   aria-current da assets/js/rentals-nav.js.
   ========================================================= */
.pn-rentals-nav { position: sticky; top: var(--pn-header-h); z-index: 40; background: rgba(246, 243, 235, .92); backdrop-filter: blur(14px); border-top: 1px solid var(--pn-border); border-bottom: 1px solid var(--pn-border); }
.pn-rentals-nav__inner { display: flex; align-items: center; gap: 16px; padding-top: 10px; padding-bottom: 10px; }

.pn-rentals-nav__list { display: flex; gap: 8px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.pn-rentals-nav__list::-webkit-scrollbar { display: none; }

.pn-rentals-nav__link { display: block; padding: 9px 16px; border-radius: 999px; font-size: 14.5px; font-weight: 500; white-space: nowrap; color: var(--pn-nav-text); transition: background-color .18s ease, color .18s ease; }
.pn-rentals-nav__link:hover { background: var(--pn-badge-bg); color: var(--pn-green-dark); }
.pn-rentals-nav__link[aria-current] { background: var(--pn-green); color: var(--pn-bg); }
/* Offset negativo: la lista scorre in orizzontale e taglierebbe un contorno esterno. */
.pn-rentals-nav__link:focus-visible { outline: 2px solid var(--pn-green-dark); outline-offset: -2px; }

.pn-rentals-nav__note { flex: none; margin: 0 0 0 auto; font-size: 13.5px; color: var(--pn-muted-light); white-space: nowrap; }

/* =========================================================
   SEZIONI E CARD PRODOTTO
   ========================================================= */
/* scroll-margin si somma allo scroll-padding di html (header): lascia
   spazio anche alla barra categorie quando si arriva da un'ancora. */
.pn-rentals-section { padding-top: 88px; padding-bottom: 32px; scroll-margin-top: var(--pn-rentals-nav-h); }
.pn-rentals-section__head { gap: 28px 56px; margin-bottom: 40px; }
.pn-rentals-section__intro { max-width: 700px; }
.pn-rentals-section__intro .pn-section-head__title { margin-bottom: 16px; }
.pn-rentals-section__text { font-size: 17.5px; line-height: 1.62; color: var(--pn-body-text); margin: 0; text-wrap: pretty; }

.pn-rentals-section__benefits { display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; color: var(--pn-body-text); }
.pn-rentals-section__benefits li { display: flex; align-items: center; gap: 10px; }
.pn-rentals-section__benefits li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--pn-dot); }

.pn-rentals-section__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.pn-rentals-section__grid > li { display: flex; min-width: 0; }

.pn-product-card { display: flex; flex-direction: column; width: 100%; background: var(--pn-white-dark); border: 1px solid var(--pn-border); border-radius: 22px; overflow: hidden; scroll-margin-top: calc(var(--pn-rentals-nav-h) + 16px); transition: border-color .18s ease, box-shadow .18s ease; }
.pn-product-card:hover { border-color: rgba(31, 111, 74, .45); }
/* Evidenzia la card quando ci si arriva dal vecchio URL del prodotto. */
.pn-product-card:target { border-color: var(--pn-green); box-shadow: 0 0 0 3px var(--pn-selection); }

.pn-product-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #FFFFFF; border-bottom: 1px solid var(--pn-border-soft); }
.pn-product-card__media img { width: 100%; height: 100%; object-fit: contain; }

.pn-product-card__badge { position: absolute; top: 14px; left: 14px; display: flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: var(--pn-green-dark); color: var(--pn-bg); font-size: 12.5px; font-weight: 500; }

.pn-product-card__body { display: flex; flex-direction: column; flex: 1; padding: 22px; }
.pn-product-card__title { font-family: 'Newsreader', serif; font-weight: 500; font-size: 22px; line-height: 1.2; letter-spacing: -.2px; color: var(--pn-green-dark); margin: 0 0 4px; text-wrap: balance; }
.pn-product-card__model { font-size: 13.5px; color: var(--pn-muted-light); margin: 0 0 2px; }

.pn-product-card__desc { font-size: 14.5px; line-height: 1.6; color: var(--pn-card-text); margin: 10px 0 16px; text-wrap: pretty; }
.pn-product-card__desc p { margin: 0 0 8px; }
.pn-product-card__desc > :last-child { margin-bottom: 0; }

.pn-product-card__features { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 18px; font-size: 14px; color: var(--pn-nav-text); }
.pn-product-card__desc + .pn-product-card__features { margin-top: 0; }
.pn-product-card__features li { display: flex; align-items: flex-start; gap: 9px; line-height: 1.4; }
.pn-product-card__features .pn-icon { color: var(--pn-green); margin-top: 1px; }

.pn-product-card__tags { margin-bottom: 20px; }
.pn-product-card__tags-label, .pn-product-card__price-label { font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--pn-muted-light); margin: 0 0 9px; }
.pn-product-card__tags-list { display: flex; flex-wrap: wrap; gap: 6px; }
.pn-product-card__tags-list li { padding: 5px 11px; border-radius: 999px; background: var(--pn-badge-bg); color: var(--pn-green); font-size: 13px; }

.pn-product-card__footer { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--pn-border-soft); }
.pn-product-card__price { display: flex; align-items: baseline; gap: 6px; min-height: 30px; margin: 0 0 6px; }
.pn-product-card__amount { font-family: 'Newsreader', serif; font-size: 30px; line-height: 1; letter-spacing: -.5px; color: var(--pn-green-dark); }
.pn-product-card__unit { font-size: 14px; color: var(--pn-muted); }
.pn-product-card__price--ask { align-items: center; font-size: 16px; line-height: 1.4; color: var(--pn-green-dark); }
.pn-product-card__price-note { font-size: 14.5px; color: var(--pn-green-dark); margin: 0 0 14px; font-weight: bold; }
.pn-product-card__price-note--hidden { visibility: hidden; }

.pn-product-card__cta { justify-content: center; gap: 9px; padding: 13px 16px; font-size: 14.5px; text-align: center; white-space: normal; }

.pn-rentals-empty { padding-top: 16px; padding-bottom: 24px; }
.pn-rentals-empty__text { font-size: 17.5px; line-height: 1.62; color: var(--pn-body-text); max-width: 640px; margin: 16px 0 0; }

/* =========================================================
   COME FUNZIONA
   ========================================================= */
.pn-rentals-how { margin-top: 72px; background: var(--pn-badge-bg); border-top: 1px solid var(--pn-border); border-bottom: 1px solid var(--pn-border); }
.pn-rentals-how__inner { padding-top: 96px; padding-bottom: 96px; }
.pn-rentals-how .pn-section-head { margin-bottom: 48px; }

.pn-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px; margin: 0 0 56px; padding: 0; list-style: none; }
.pn-steps__item { display: flex; flex-direction: column; gap: 12px; padding-top: 22px; border-top: 1.5px solid rgba(31, 111, 74, .3); }
.pn-steps__item:first-child { border-top-color: var(--pn-green); }
.pn-steps__num { font-family: 'Newsreader', serif; font-size: 34px; line-height: 1; color: var(--pn-green); }
.pn-steps__title { font-family: 'Newsreader', serif; font-weight: 500; font-size: 22px; color: var(--pn-green-dark); margin: 0; }
.pn-steps__text { font-size: 15px; line-height: 1.6; color: var(--pn-card-text); margin: 0; }

/* Righe sottili tra le celle: il gap da 1px lascia vedere lo sfondo della griglia. */
.pn-rentals-terms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 0; background: var(--pn-border); border: 1px solid var(--pn-border); border-radius: 22px; overflow: hidden; }
.pn-rentals-terms__item { padding: 26px 26px 28px; background: var(--pn-white-dark); }
.pn-rentals-terms dt { font-size: 15.5px; font-weight: 500; color: var(--pn-green-dark); margin: 0 0 8px; }
.pn-rentals-terms dd { font-size: 14.5px; line-height: 1.6; color: var(--pn-card-text); margin: 0; }

/* =========================================================
   CONTATTO (banda scura prima del footer)
   ========================================================= */
.pn-cta-band { background: var(--pn-green-dark); color: #EDF2E8; border-bottom: 1px solid var(--pn-divider-dark); }
.pn-cta-band__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 48px; padding-top: 88px; padding-bottom: 88px; }
.pn-cta-band__eyebrow { color: var(--pn-label-dark); margin-bottom: 22px; }
.pn-cta-band__title { font-family: 'Newsreader', serif; font-weight: 400; font-size: clamp(34px, 4vw, 47px); line-height: 1.14; letter-spacing: -1px; color: var(--pn-white-dark); margin: 0 0 20px; text-wrap: balance; }
.pn-cta-band__title em { font-style: italic; color: var(--pn-label-dark); }
.pn-cta-band__text { font-size: 18px; line-height: 1.66; color: var(--pn-body-on-dark); max-width: 560px; margin: 0; text-wrap: pretty; }
.pn-cta-band__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.pn-cta-band__phone { padding: 6px 4px; font-size: 15.5px; color: var(--pn-body-on-dark); }
.pn-cta-band__phone:hover { color: var(--pn-white-dark); }

/* =========================================================
   RESPONSIVE — stessi breakpoint di style.css
   ========================================================= */
@media (max-width: 1000px) {
  /* Header più basso sotto i 1000px (padding e logo ridotti in style.css). */
  .pn-rentals { --pn-header-h: 65px; }
  .pn-hero__perks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pn-rentals-terms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .pn-rentals-nav__note { display: none; }
}

@media (max-width: 560px) {
  .pn-hero__perks { grid-template-columns: minmax(0, 1fr); }
  .pn-rentals-terms { grid-template-columns: minmax(0, 1fr); }
}