/* ==========================================================
   Residence Mare Pineta - Mini Club Theme
   CSS aggiornato: header/footer pastello, giorni puliti,
   layout 2 colonne quando manca la sera.
   ========================================================== */

:root{
  --sea:#00a6b4;
  --sea-dark:#027887;

  --sky:#e9f8ff;
  --cream:#fff8e7;

  --banana:#ffe37a;
  --banana-soft:#fff7cf;

  --peach:#ffb58f;
  --peach-soft:#fff0e8;

  --lavender:#c6b8ff;
  --lavender-soft:#f5f1ff;

  --mint:#9be4c4;
  --mint-soft:#eefcf5;

  --rose:#ff9fbc;
  --rose-soft:#fff1f6;

  --ink:#17324d;
  --muted:#5f7185;
  --white:#ffffff;

  --radius:28px;
  --shadow:0 20px 50px rgba(23,50,77,.13);
  --shadow-soft:0 10px 26px rgba(23,50,77,.08);
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:'Open Sans', Arial, sans-serif;
  color:var(--ink);
  font-size:17px;
  line-height:1.45;
  background:
    radial-gradient(circle at 8% 7%, rgba(255,227,122,.24), transparent 24%),
    radial-gradient(circle at 94% 11%, rgba(198,184,255,.20), transparent 22%),
    radial-gradient(circle at 50% 0%, rgba(155,228,196,.18), transparent 30%),
    linear-gradient(180deg,#f8fcff 0%,#fffaf1 48%,#ffffff 100%);
}

a{
  color:inherit;
  text-decoration:none;
}

/* Header */

.hero{
  position:relative;
  overflow:hidden;
  padding:34px 18px 104px;
  background:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,.55), transparent 18%),
    linear-gradient(135deg,#ffd7a8 0%,#ffc7d8 42%,#c9f1dc 100%);
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.42;
  background-image:
    radial-gradient(circle at 14% 22%, #ffffff 0 5px, transparent 6px),
    radial-gradient(circle at 31% 72%, #ffffff 0 4px, transparent 5px),
    radial-gradient(circle at 74% 26%, #ffffff 0 6px, transparent 7px),
    radial-gradient(circle at 90% 70%, #ffffff 0 5px, transparent 6px);
  pointer-events:none;
}

.hero::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:92px;
  background:#ffffff;
  clip-path:polygon(0 45%,8% 56%,18% 42%,28% 58%,40% 44%,52% 59%,64% 43%,76% 58%,88% 42%,100% 55%,100% 100%,0 100%);
}

.hero-inner{
  position:relative;
  z-index:2;
  max-width:1120px;
  margin:0 auto;
  display:grid;
  gap:34px;
  align-items:center;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#ffffff;
  font-weight:600;
  font-size:17px;
  padding:9px 15px;
  border-radius:999px;
  background:rgba(255,255,255,.25);
  backdrop-filter:blur(10px);
}

.eyebrow::before{
  content:"★";
  color:#fff4a5;
}

h1{
  margin:18px 0 16px;
  color:#ffffff;
  font-size:clamp(2.7rem,10vw,5.8rem);
  line-height:.92;
  letter-spacing:-.065em;
  font-weight:700;
  text-shadow:0 8px 26px rgba(23,50,77,.16);
}

.hero-copy p{
  max-width:700px;
  margin:0;
  color:#ffffff;
  font-size:clamp(1.08rem,3.5vw,1.35rem);
  font-weight:600;
}

.cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:28px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:999px;
  padding:14px 22px;
  font-weight:700;
  box-shadow:var(--shadow-soft);
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.btn:hover,
.btn:focus{
  transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(23,50,77,.16);
  outline:none;
}

.btn-primary{
  background:#fac100;
  color:#000000;
}

/*.btn-primary::after{
  content:"";
}*/

.logo-box{
  justify-self:center;
  width:min(320px,72vw);
  display:grid;
  place-items:center;
}

.logo-box img{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
}

/* Sections */

.section{
  max-width:1120px;
  margin:0 auto;
  padding:58px 18px;
}

.section-title{
  text-align:center;
  margin-bottom:34px;
}

.section-title h2{
  position:relative;
  display:inline-block;
  margin:0 0 14px;
  font-size:clamp(2.05rem,7vw,3.5rem);
  line-height:1;
  letter-spacing:-.05em;
  font-weight:700;
}

.section-title h2::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:-10px;
  width:86px;
  height:7px;
  transform:translateX(-50%);
  border-radius:999px;
  background:linear-gradient(90deg,#fac100,#ff9fbc,#9be4c4);
}

.section-title p{
  margin:20px auto 0;
  max-width:760px;
  color:var(--muted);
  font-weight:400;
}

/* Days accordion */

.days-list{
  display:grid;
  gap:20px;
}

.day-card{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  background:#ffffff;
  box-shadow:var(--shadow);
  border:2px solid rgba(0,166,180,.08);
}

.day-card::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:8px;
  background:linear-gradient(180deg,#ffd76f,#ffb4ce,#9be4c4);
  pointer-events:none;
}

.day-head{
  width:100%;
  border:0;
  cursor:pointer;
  padding:20px 24px 20px 28px;
  color:#ffffff;
  background:linear-gradient(135deg,#ffa987,#ffb9d0,#9fe7c6);
  display:flex;
  align-items:center;
  justify-content:space-between;
  text-align:left;
  font:inherit;
  font-size:clamp(1.35rem,5vw,1.75rem);
  font-weight:700;
  position:relative;
}

.day-head span:first-child{
  display:flex;
  align-items:center;
  gap:10px;
}

.day-head span:first-child::before{
  content:"";
  width:14px;
  height:14px;
  border-radius:50%;
  background:#ffffff;
  box-shadow:
    0 0 0 5px rgba(255,255,255,.22),
    0 6px 16px rgba(23,50,77,.12);
  flex-shrink:0;
}

.toggle-icon{
  width:42px;
  height:42px;
  border-radius:50%;
  background:rgba(255,255,255,.25);
  color:#ffffff;
  font-size:34px;
  line-height:1;
  font-weight:400;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-left:18px;
  flex-shrink:0;
}

.day-body{
  max-height:0;
  overflow:hidden;
  opacity:0;
  background:
    radial-gradient(circle at 12% 10%, rgba(250,193,0,.08), transparent 22%),
    radial-gradient(circle at 90% 15%, rgba(255,122,168,.08), transparent 20%),
    #ffffff;
  transition:
    max-height .85s cubic-bezier(.22,1,.36,1),
    opacity .35s ease;
  will-change:max-height;
}

.day-card.open .day-body{
  opacity:1;
}

.day-card .toggle-icon{
  transition:transform .35s ease, background .25s ease;
}

.day-card.open .toggle-icon{
  transform:rotate(180deg);
}

/* Layout colonne:
   se la sera contiene "Nessuna attività prevista", nasconde sera e usa 2 colonne.
*/

.blocks{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  padding:20px;
}

.block-evening:has(.event-empty){
  display:none;
}

.blocks:has(.block-evening .event-empty){
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.block{
  position:relative;
  overflow:hidden;
  border-radius:24px;
  padding:18px;
  border:2px solid transparent;
}

.block::after{
  content:"";
  position:absolute;
  right:-34px;
  top:-34px;
  width:105px;
  height:105px;
  border-radius:50%;
  opacity:.25;
  pointer-events:none;
}

.block h3{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:9px;
  margin:0 0 16px;
  font-size:20px;
  font-weight:700;
}

.block-morning{
  background:linear-gradient(180deg,#fff8d6,#fffdf1);
  border-color:#ffeaa6;
}

.block-morning::after{
  background:#fac100;
}

.block-morning h3::before{
  content:"☀";
  color:#e5a900;
}

.block-afternoon{
  background:linear-gradient(180deg,#eafaff,#f7fdff);
  border-color:#c8f0fb;
}

.block-afternoon::after{
  background:#00a6b4;
}

.block-afternoon h3::before{
  content:"✿";
  color:#00a6b4;
}

.block-evening{
  background:linear-gradient(180deg,#fff0f6,#fffafd);
  border-color:#ffd3e3;
}

.block-evening::after{
  background:#ff9fbc;
}

.block-evening h3::before{
  content:"★";
  color:#ff7aa8;
}

/* Events */

.events{
  position:relative;
  z-index:1;
  display:grid;

  gap:10px;
}

.event{
  position:relative;
  display:grid;
  grid-template-columns:116px 1fr;
  gap:12px;
  align-items:start;
  padding:12px;
  border-radius:18px;
  background:#ffffff;
  box-shadow:0 6px 18px rgba(23,50,77,.06);
  border:1px solid rgba(23,50,77,.04);
}

.event::before{
  content:"";
  position:absolute;
  left:-2px;
  top:14px;
  bottom:14px;
  width:5px;
  border-radius:999px;
  background:linear-gradient(180deg,#fac100,#ff7a59);
}

.time{
  color:#027887;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}

.activity{
  color:#24465d;
  font-weight:600;
}

.event-empty{
  display:none;
}

.a-teatro{
  margin:18px 0 7px;
  color:#c06b7a;
  font-size:22px;
  font-weight:700;
  letter-spacing:-0.02em;
}

/* Footer */

footer{
  padding:36px 18px 48px;
  text-align:center;
  color:#ffffff;
  background:linear-gradient(135deg,#ffb58f,#ff9fbc,#9be4c4);
}

.footer-logo{
  width:140px;
  height:auto;
  display:block;
  margin:0 auto 18px;
}

footer strong{
  font-weight:700;
}

footer p{
  margin:8px 0 0;
  opacity:.92;
}

/* Responsive */

@media (min-width:820px){
  .hero{
    min-height:72vh;
  }

  .hero-inner{
    grid-template-columns:1.05fr .7fr;
  }

  .logo-box{
    justify-self:end;
  }
}

@media (max-width:900px){
  .blocks,
  .blocks:has(.block-evening .event-empty){
    grid-template-columns:1fr;
  }
}

@media (max-width:760px){
  .hero{
    padding-bottom:78px;
  }

  .hero-inner{
    text-align:left;
  }

  .cta-row .btn{
    width:100%;
  }

  .section{
    padding:46px 14px;
  }

  .blocks{
    padding:14px;
    gap:14px;
  }

  .block{
    padding:15px;
    border-radius:22px;
  }

  .event{
    grid-template-columns:94px 1fr;
    gap:10px;
  }

  .logo-box{
    width:min(245px,70vw);
  }
}

@media (max-width:420px){
  .day-head{
    padding:18px 18px 18px 22px;
  }

  .toggle-icon{
    width:38px;
    height:38px;
    font-size:31px;
  }

  .event{
    grid-template-columns:1fr;
    gap:4px;
  }

  .time{
    font-size:17px;
  }
}


.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#027887;
  font-weight:700;
  font-size:17px;
  padding:10px 18px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  border:2px solid rgba(255,255,255,.95);
  box-shadow:0 8px 24px rgba(23,50,77,.10);
}

.eyebrow::before{
  content:"★";
  color:#fac100;
}