/* ===========================================================================
   PENTACOLO ESOTERICO — home.css
   ===========================================================================
   Solo per la home: hero e riquadri delle categorie in evidenza.
   Richiede base.css e componenti.css.
   =========================================================================== */

/* --- 11b. HERO DELLA HOME ----------------------------------------------- */
.pe-hero{
  background: var(--pe-blu);
  color: var(--pe-bianco);
  padding: clamp(2.25rem, 5vw, 3.75rem) 0;
  position: relative;
  overflow: hidden;
}

/* alone appena percepibile dietro il logo, per staccarlo dal fondo pieno */
.pe-hero::before{
  content: "";
  position: absolute;
  top: 50%; right: 6%;
  width: min(58vw, 600px); height: min(58vw, 600px);
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(255,255,255,.09) 0%, rgba(255,255,255,0) 62%);
  pointer-events: none;
}
.pe-hero > .container{ position: relative; z-index: 1; }

.pe-hero-testo{ text-align: center; }

.pe-hero-marchio{
  font-family: var(--pe-font-titoli);
  font-size: .95rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  margin: 0 0 .6rem;
  max-width: none;
}

.pe-hero-titolo{
  color: var(--pe-bianco);
  margin: 0 0 1rem;
  font-size: clamp(1.9rem, 4.4vw, 3rem);
}

.pe-hero-sottotitolo{
  color: rgba(255,255,255,.88);
  font-size: clamp(.98rem, 1.5vw, 1.1rem);
  margin: 0 auto 1.6rem;
  max-width: 56ch;
}

.pe-hero-logo{ text-align: center; }
.pe-hero-logo img{
  max-width: 290px;
  width: 100%;
  height: auto;
}

/* fila delle categorie: contorno bianco, perché il blu pieno sparirebbe */
.pe-hero-categorie{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.18);
}

.pe-hero-categoria{
  display: inline-block;
  padding: .38rem 1rem;
  font-size: .88rem;
  color: var(--pe-bianco);
  background: transparent;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 30px;
  transition: background var(--pe-transizione), color var(--pe-transizione),
              border-color var(--pe-transizione);
}
.pe-hero-categoria:hover,
.pe-hero-categoria:focus-visible{
  background: var(--pe-bianco);
  color: var(--pe-blu);
  border-color: var(--pe-bianco);
  text-decoration: none;
}

/* --- 11c. CATEGORIE IN EVIDENZA ----------------------------------------- */
/* Le immagini arrivano senza scritta: il nome è testo sovrapposto, così
   resta leggibile dai motori di ricerca e si adatta a ogni schermo. */
.pe-categoria-riquadro{
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--pe-raggio);
  background: var(--pe-blu);
}

.pe-categoria-riquadro img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* velo scuro in basso: senza, il testo bianco sparirebbe sulle foto chiare */
.pe-categoria-riquadro::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
              rgba(0,0,0,.72) 0%,
              rgba(0,0,0,.35) 38%,
              rgba(0,0,0,0) 68%);
}

.pe-categoria-nome{background: rgb(36,73,99,0.5);
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: .9rem 1rem;
  font-family: var(--pe-font-titoli);
  font-size: clamp(1.3rem, 2.5vw, 2rem);
  color: var(--pe-bianco);
  line-height: 1.25;
}

/* al passaggio del mouse resta solo un filetto blu in basso */
.pe-categoria-riquadro::before{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--pe-blu);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--pe-transizione);
  z-index: 3;
}
.pe-categoria-riquadro:hover::before,
.pe-categoria-riquadro:focus-visible::before{ transform: scaleX(1); }

/* --- RESPONSIVE --------------------------------------------------------- */
@media (min-width: 992px){
  .pe-hero-testo{ text-align: left; }
  .pe-hero-sottotitolo{ margin-left: 0; margin-right: 0; }
  .pe-hero-categorie{ justify-content: flex-start; }
}

@media (max-width: 575.98px){
  .pe-hero-logo img{ max-width: 190px; }
  .pe-hero-categorie{ margin-top: 1.75rem; padding-top: 1.25rem; }
  .pe-hero-categoria{ font-size: .8rem; padding: .32rem .8rem; }
  .pe-categoria-riquadro{ aspect-ratio: 4 / 3; }
  .pe-categoria-nome{ padding: .6rem .7rem; }
}