/* Layout principale ZenArt Management: quattro bolle sempre visibili nel primo schermo. */
.hero {
  min-height: 100svh;
  padding-top: 82px;
  padding-bottom: 42px;
}

.hero-shell {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  grid-template-columns: minmax(310px, .88fr) minmax(520px, 1.12fr);
  align-items: center;
  gap: clamp(28px, 5vw, 80px);
}

.hero-content { width: auto; }
.hero .brand { width: min(184px, 48vw); margin-bottom: 22px; }
.hero h1 { font-size: clamp(42px, 5.4vw, 72px); }

.entry-grid {
  position: relative;
  display: grid;
  width: min(620px, 100%);
  aspect-ratio: 1.18 / 1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(8px, 1.2vw, 16px);
  background: transparent;
  isolation: isolate;
}

.entry-grid::before {
  position: absolute;
  inset: 12% 10%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 182, 101, .18), transparent 68%);
  filter: blur(10px);
  content: "";
}

.entry {
  min-width: 0;
  min-height: 0;
  align-items: center;
  justify-content: center;
  padding: clamp(18px, 2.2vw, 29px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 48% 52% 45% 55% / 54% 43% 57% 46%;
  background: linear-gradient(145deg, rgba(31, 39, 55, .96), rgba(13, 17, 26, .96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 18px 40px rgba(0, 0, 0, .3);
  text-align: center;
  transform: translateZ(0);
  animation: management-float-a 6.8s ease-in-out infinite;
  will-change: transform;
}

.entry:nth-child(2) {
  border-radius: 55% 45% 56% 44% / 44% 56% 44% 56%;
  animation-name: management-float-b;
  animation-duration: 7.6s;
  animation-delay: -1.8s;
}

.entry:nth-child(3) {
  border-radius: 44% 56% 47% 53% / 58% 42% 58% 42%;
  animation-name: management-float-c;
  animation-duration: 7.1s;
  animation-delay: -3.2s;
}

.entry:nth-child(4) {
  border-radius: 53% 47% 43% 57% / 46% 55% 45% 54%;
  animation-name: management-float-d;
  animation-duration: 8.2s;
  animation-delay: -4.1s;
}

.entry:hover,
.entry:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  animation-play-state: paused;
  transform: scale(1.035);
}

.entry > span {
  position: absolute;
  top: 15%;
  left: 18%;
  font-size: 10px;
}

.entry h2 {
  margin: 0;
  font-size: clamp(23px, 2.25vw, 34px);
  line-height: 1.02;
}

.entry p {
  max-width: 210px;
  margin: 9px auto 0;
  font-size: 12px;
}

.entry b { margin-top: 14px; }
.entry.artists { background: linear-gradient(145deg, #29354a, #111722); }
.entry.tours { background: linear-gradient(145deg, #4c3325, #1b1b22); }
.entry.events { background: linear-gradient(145deg, #bd6c3d, #71391f); }
.entry.story { background: linear-gradient(145deg, #20242e, #0d1018); }

@keyframes management-float-a {
  0%, 100% { transform: translate3d(0, -3px, 0) rotate(-.4deg); }
  50% { transform: translate3d(4px, 5px, 0) rotate(.7deg); }
}

@keyframes management-float-b {
  0%, 100% { transform: translate3d(2px, 4px, 0) rotate(.6deg); }
  50% { transform: translate3d(-4px, -4px, 0) rotate(-.5deg); }
}

@keyframes management-float-c {
  0%, 100% { transform: translate3d(-3px, 3px, 0) rotate(.4deg); }
  50% { transform: translate3d(4px, -5px, 0) rotate(-.7deg); }
}

@keyframes management-float-d {
  0%, 100% { transform: translate3d(3px, -2px, 0) rotate(-.6deg); }
  50% { transform: translate3d(-3px, 5px, 0) rotate(.5deg); }
}

@media (max-width: 980px) {
  .hero {
    padding-left: clamp(18px, 4vw, 42px);
    padding-right: clamp(18px, 4vw, 42px);
  }

  .hero-shell {
    grid-template-columns: minmax(250px, .8fr) minmax(410px, 1.2fr);
    gap: 22px;
  }

  .hero h1 { font-size: clamp(38px, 5.4vw, 55px); }
  .lead { font-size: 15px; }
}

@media (max-width: 780px) {
  .topbar { padding: calc(10px + env(safe-area-inset-top)) 14px 8px; }
  .app-switch { padding: 8px 11px; font-size: 9px; }

  .hero {
    min-height: 100svh;
    padding: calc(57px + env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
    align-items: stretch;
    background: linear-gradient(180deg, rgba(7, 9, 15, .92), rgba(7, 9, 15, .66)), url('/events-news-hero.png') 68% center / cover;
  }

  .hero-shell {
    display: flex;
    min-height: calc(100svh - 71px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    flex-direction: column;
    justify-content: center;
    gap: 12px;
  }

  .hero-content { text-align: center; }
  .hero .brand { width: min(128px, 38vw); margin: 0 auto 8px; padding: 7px 9px; }
  .hero .eyebrow { font-size: 8px; }
  .hero h1 { margin: 7px 0 5px; font-size: clamp(29px, 8.6vw, 39px); line-height: .96; }
  .lead { max-width: 430px; margin: 0 auto; font-size: clamp(11px, 3.2vw, 14px); line-height: 1.35; }
  .hero-actions { display: none; }

  .entry-grid {
    width: min(420px, 94vw);
    height: auto;
    max-height: 52svh;
    aspect-ratio: 1.08 / 1;
    margin: 0 auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .entry { min-height: 0; padding: 13px 9px; }
  .entry > span { top: 13%; left: 17%; font-size: 8px; }
  .entry h2 { font-size: clamp(19px, 5.5vw, 25px); }
  .entry p { margin-top: 6px; font-size: clamp(9px, 2.65vw, 11px); line-height: 1.25; }
  .entry b { margin-top: 8px; font-size: 8px; }
}

@media (max-width: 380px), (max-height: 700px) {
  .hero-shell { gap: 8px; }
  .hero .brand { width: 100px; margin-bottom: 5px; }
  .hero h1 { font-size: 28px; }
  .lead { display: none; }
  .entry-grid { width: min(340px, 92vw); max-height: 57svh; }
  .entry p { display: none; }
  .entry h2 { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .entry { animation: none; }
}