/* ===== CONCERTS SECTION - Modern & Elegant ===== */

#upcoming_concerts {
  max-width: var(--max-width, 1400px);
  margin: auto;
  padding: clamp(3rem, 5vw, 5rem) clamp(1rem, 3vw, 2rem);
  background: linear-gradient(180deg, #181818 0%, #0f0f0f 100%);
  position: relative;
  text-align: center;
}

/* Subtle radial glow */
#upcoming_concerts::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 50% 50%, rgba(212, 175, 55, 0.025) 0%, transparent 65%);
  pointer-events: none;
}

/* Griglia card */
#concerts_list.concerts-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1.5rem, 3vw, 2rem);
  align-items: stretch;
  position: relative;
  z-index: 1;
}

/* Card concerto con glassmorphism */
.concert-card {
  /* Glassmorphism background - usa variables */
  background: var(--card-bg-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  /* Gold accent border */
  border: var(--card-border);
  border-radius: 14px;

  /* Multi-layer shadows */
  box-shadow: var(--card-shadow);

  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.4s var(--ease-smooth);
  cursor: pointer;
  will-change: transform, box-shadow, border-color;
}

.concert-card:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: rgba(212, 175, 55, 0.45);
  box-shadow: var(--card-shadow-hover);
}
  
/* Poster intero (letterbox) con effetto overlay */
.concert-card .concert-media {
  position: relative;
  background: linear-gradient(180deg, #0a0a0a 0%, #0f0f0f 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 280px;
  overflow: hidden;
}

/* Subtle vignette overlay on poster */
.concert-card .concert-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 0%,
    rgba(0, 0, 0, 0.3) 100%
  );
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.concert-card:hover .concert-media::after {
  opacity: 0.5;
}

.concert-card .concert-poster {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  transition: transform 0.5s ease, filter 0.3s ease;
  filter: brightness(0.95);
}

.concert-card:hover .concert-poster {
  transform: scale(1.05);
  filter: brightness(1);
}
  
/* Testi con enhanced typography */
.concert-card .concert-content {
  padding: 1.2rem 1.3rem 1.3rem;
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.concert-card .concert-meta {
  margin: 0 0 0.6rem;
  color: rgba(231, 219, 182, 0.9);
  line-height: 1.4;
}

.concert-card .concert-date {
  font-weight: 700;
  color: var(--accent-color);
  letter-spacing: 0.03em;
  margin-bottom: 0.2rem;
  font-size: clamp(0.95rem, 1.8vw, 1.05rem);

  /* Subtle glow */
  text-shadow: 0 2px 10px rgba(212, 175, 55, 0.15);
  transition: text-shadow 0.3s ease;
}

.concert-card:hover .concert-date {
  text-shadow: 0 2px 14px rgba(212, 175, 55, 0.25);
}

.concert-card .concert-place {
  font-size: clamp(0.92rem, 1.7vw, 1rem);
  opacity: 0.88;
  letter-spacing: 0.01em;
}

.concert-card .concert-title {
  margin: 0.5rem 0 0.7rem;
  color: #fffbe9;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.1rem, 2.2vw, 1.25rem);
  font-weight: 600;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

/* Azioni nella card (solo layout; stile bottoni ereditato) */
.concert-card .concert-actions {
  margin-top: 0.5rem;
  display: flex;
  justify-content: center;
}

/* CTA globale */
#upcoming_concerts .section-cta {
  text-align: center;
  margin-top: 2rem;
  position: relative;
  z-index: 1;
}
  
  /* Responsive */
  @media (max-width: 960px) { .concert-card .concert-media { height: 230px; } }
  @media (max-width: 640px) { #upcoming_concerts { padding: 2.2rem 1rem; } .concert-card .concert-media { height: 210px; } }
  
  /* ==========================================================================
     LIGHTBOX (Home concerts)
     ========================================================================== */
  
  .concert-lightbox.hidden { display: none; }
  .concert-lightbox { position: fixed; inset: 0; z-index: 1100; }
  .concert-lightbox .lightbox-backdrop { position: absolute; inset: 0; background: rgba(10,10,10,.82); backdrop-filter: blur(2px); }
  .concert-lightbox .lightbox-dialog {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: min(980px, 92vw); max-height: 86vh; background: #171515;
    border: 2px solid var(--accent-color, #cba135); border-radius: 16px; box-shadow: 0 18px 52px rgba(0,0,0,.55);
    overflow: hidden; outline: none;
  }
  .concert-lightbox .lightbox-close { position: absolute; top: .4rem; right: .5rem; z-index: 2; }
  .concert-lightbox .lightbox-content { display: grid; grid-template-columns: 1fr 1.1fr; max-height: 86vh; overflow: auto; }
  .concert-lightbox .lb-body { display: contents; }
  .concert-lightbox .lb-media {
    background: #0f0f0f; padding: 1rem; display: flex; align-items: center; justify-content: center;
  }
  .concert-lightbox .lb-media img {
    max-width: 100%; max-height: 80vh; width: auto; height: auto; object-fit: contain; display: block;
    border-radius: 10px; box-shadow: 0 2px 16px rgba(0,0,0,.45);
  }
  .concert-lightbox .lb-info { padding: 1.1rem 1.2rem 1.2rem; overflow: auto; }
  .concert-lightbox .lb-title { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; margin: 0 0 .6rem; color: #fffbe9; }
  .concert-lightbox .lb-meta { list-style: none; padding: 0; margin: 0 0 .8rem; color: #e7dbb6; line-height: 1.4; }
  .concert-lightbox .lb-program h4, .concert-lightbox .lb-notes h4 { margin: .5rem 0 .3rem; color: var(--accent-color, #cba135); }
  .concert-lightbox .lb-program pre {
    white-space: pre-wrap; font-family: inherit; color: #f0e6c1; background: #111; border: 1px solid #2a2418;
    border-radius: 8px; padding: .6rem .75rem;
  }
  .concert-lightbox .lb-actions { margin-top: .8rem; display: flex; gap: .6rem; flex-wrap: wrap; }
  
  @media (max-width: 960px) { .concert-lightbox .lightbox-content { grid-template-columns: 1fr; } }