/* ==============================
   HERO ORARI - LAVAGNETTA
============================== */

.hero-hours-board {
  /* Colori */
  --board-bg: rgba(8, 20, 14, 0.88);
  --board-bg-deep: rgba(3, 10, 7, 0.94);
  --board-accent: #6ff29a;
  --board-border: rgba(111, 242, 154, 0.34);
  --board-text: #ffffff;
  --board-muted: rgba(255, 255, 255, 0.68);

  /* Badge */
  --badge-open-bg: #0c0d0ede;
  --badge-open-color: #3bec76;
  --badge-open-border: rgba(111, 242, 154, 0.42);

  --badge-closed-bg: rgba(255, 95, 95, 0.12);
  --badge-closed-color: #f42e2e;
  --badge-closed-border: rgba(255, 95, 95, 0.42);

  /* Layout */
  --board-width: 400px;
  --board-padding-x: 34px;
  --board-padding-y: 30px;
  --board-radius: 28px;

  /* Font */
  --board-season-size: 0.74rem;
  --board-title-size: clamp(1.25rem, 1.7vw, 1.6rem);
  --board-time-size: clamp(1.7rem, 2.35vw, 2.25rem);
  --board-note-size: 0.95rem;
  --board-badge-size: 0.76rem;

  /* Effetti */
  --board-shadow: 0 24px 70px rgba(0, 0, 0, 0.52);
  --board-glow: 0 0 26px rgba(111, 242, 154, 0.075);
  --board-blur: 10px;

  /* Immagine texture lavagna */
  --board-texture-image: none;
  --board-texture-opacity: 0.22;

  /* Puntina */
  --pin-width: 25px;
  --pin-top: -25px;
  --pin-left: 50%;
  --pin-rotate: -22deg;

  /* Decorazione stagionale */
  --decoration-size: 92px;
  --decoration-top: -38px;
  --decoration-side: 22px;

  position: relative;
  width: min(100%, var(--board-width));
  padding: var(--board-padding-y) var(--board-padding-x);
  border-radius: var(--board-radius);
  color: var(--board-text);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.09),
      rgba(255, 255, 255, 0.025) 35%,
      transparent 70%
    ),
    radial-gradient(
      circle at 82% 15%,
      rgba(111, 242, 154, 0.10),
      transparent 38%
    ),
    linear-gradient(
      180deg,
      var(--board-bg),
      var(--board-bg-deep)
    );

  border: 1px solid var(--board-border);
  box-shadow: var(--board-shadow), var(--board-glow);

  backdrop-filter: blur(var(--board-blur)) saturate(115%);
  -webkit-backdrop-filter: blur(var(--board-blur)) saturate(115%);

  overflow: visible;
  isolation: isolate;

  transform: rotate(-0.7deg);
}

/* Texture lavagna pulita */
.hero-hours-board::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;

  background:
    var(--board-texture-image),
    radial-gradient(
      circle at 20% 12%,
      rgba(255, 255, 255, 0.10),
      transparent 24%
    ),
    radial-gradient(
      circle at 88% 90%,
      rgba(111, 242, 154, 0.07),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.025),
      rgba(0, 0, 0, 0.10)
    );

  background-size: cover;
  background-position: center;
  opacity: var(--board-texture-opacity);
}

/* Bordo interno delicato */
.hero-hours-board::after {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: calc(var(--board-radius) - 9px);
  border: 1px solid rgba(255, 255, 255, 0.075);
  pointer-events: none;
}

/* ==============================
   PUNTINA
============================== */

.hero-hours-pin {
  position: absolute;
  top: var(--pin-top);
  left: var(--pin-left);
  width: var(--pin-width);
  height: auto;
  transform: translateX(-50%) rotate(var(--pin-rotate));
  transform-origin: 50% 70%;
  z-index: 10;
  pointer-events: none;
  filter:
    drop-shadow(0 10px 12px rgba(0, 0, 0, 0.42))
    drop-shadow(0 2px 3px rgba(0, 0, 0, 0.28));
}

/* Piccola ombra sotto la puntina */
.hero-hours-board .hero-hours-pin + *::before {
  content: none;
}

/* ==============================
   HEADER
============================== */

.hero-hours-board__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 22px;
}

/* Etichetta stagione */
.hero-hours-board__season {
  font-size: var(--board-season-size);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--board-accent);
  font-weight: 500;
}

/* Badge */
.hero-hours-board__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 999px;
  font-size: var(--board-badge-size);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.hero-hours-board__badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 4px currentColor;
}

.hero-hours-board__badge.is-open {
  color: var(--badge-open-color);
  background: var(--badge-open-bg);
  border: 1px solid var(--badge-open-border);
}

.hero-hours-board__badge.is-closed {
  color: var(--badge-closed-color);
  background: var(--badge-closed-bg);
  border: 1px solid var(--badge-closed-border);
}

/* ==============================
   TESTI
============================== */

.hero-hours-board__title {
  margin: 0 0 14px;
  color: var(--board-text);
  font-size: var(--board-title-size);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

/* Orario */
.hero-hours-board__time {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  color: var(--board-text);
  font-size: var(--board-time-size);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.045em;
}

.hero-hours-board__time.is-today-closed {
  font-size: clamp(1.8rem, 2.35vw, 2.35rem);
  letter-spacing: -0.045em;
  margin-bottom: 14px;
}

.hero-hours-board__time.is-today-closed span {
  color: var(--board-text);
}

.hero-hours-board__time span {
  display: inline-block;
}

.hero-hours-board__divider {
  width: 38px;
  height: 4px;
  border-radius: 999px;
  background: var(--board-accent);
  color: transparent;
  font-size: 0;
  opacity: 0.9;
  transform: translateY(1px);
}

/*-------------------- CHUISURA STRAORDINARA FERIE --------------------
*/
.hero-hours-board__title--closure {
  margin-bottom: 12px;
}

.hero-hours-board__time--closure {
  font-size: clamp(18px, 2vw, 20px);
  line-height: 1.15;
  font-weight: 500;
}

.hero-hours-board__note--closure {
  margin-top: 14px;
  max-width: 360px;
  font-size: 13px;
  line-height: 1.45;
  opacity: 0.72;
}




/* Nota */
.hero-hours-board__note {
  margin: 0;
  color: var(--board-muted);
  font-size: var(--board-note-size);
  line-height: 1.45;
  font-weight: 400;
}

/* Pulsante nascosto */
.hero-hours-board__cta {
  display: none !important;
}

/* ==============================
   DECORAZIONE STAGIONALE
============================== */

.hero-hours-decoration {
  position: absolute;
  z-index: 5;
  width: var(--decoration-size);
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.38));
}

.hero-hours-decoration-sinistra {
  top: var(--decoration-top);
  left: var(--decoration-side);
  transform: rotate(-12deg);
}

.hero-hours-decoration-centro {
  top: calc(var(--decoration-top) - 4px);
  left: 50%;
  transform: translateX(-50%) rotate(-6deg);
}

.hero-hours-decoration-destra {
  top: var(--decoration-top);
  right: var(--decoration-side);
  transform: rotate(12deg);
}

/* ==============================
   MICRO MOVIMENTO
============================== */


/* ==============================
   RESPONSIVE
============================== */

@media (max-width: 1024px) {
  .hero-hours-board {
    --board-width: 360px;
    --board-padding-x: 28px;
    --board-padding-y: 26px;
    --board-title-size: 1.35rem;
    --board-time-size: 2rem;

    --pin-width: 30px;
    --pin-top: -30px;
  }

  .hero-hours-board__divider {
    width: 34px;
    height: 4px;
  }
}

@media (max-width: 767px) {
  .hero-hours-board {
    --board-width: 100%;
    --board-padding-x: 24px;
    --board-padding-y: 24px;
    --board-radius: 24px;
    --board-title-size: 1.05rem;
    --board-time-size: 1.25rem;
--board-note-size: 0.85rem;
    --pin-width: 20px;
    --pin-top: -20px;
    --pin-left: 50%;
    --pin-rotate: -20deg;

    --decoration-size: 74px;
  }

  .hero-hours-board__top {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
  }

  .hero-hours-board__time {
    gap: 10px;
    flex-wrap: wrap;
  }

  .hero-hours-board__divider {
    width: 30px;
    height: 4px;
  }
}