/* ===== GREASY & FUNKY — styles.css ===== */
:root{
  --bg:#000;
  --fg:#eee;
  --muted:#bdbdbd;
  --accent:#f59e0b;
  --border:rgba(255,255,255,.08);
  --card:#0d0d0d;
  --shadow:0 12px 28px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--fg);
  background:var(--bg);
  line-height:1.6;
}

/* Layout helpers */
.section{padding:20px 0}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.container.narrow{max-width:60vw} /* 60% of viewport width as requested */
.container.wide{max-width:1200px}
@media (max-width: 1024px){
  .container.narrow{max-width:80vw}
}
@media (max-width: 640px){
  .container.narrow{max-width:92vw}
}

/* 1) HERO PHOTO */
.hero-media{
  display:flex;
  justify-content:center;
  align-items:center;
  margin:0;
}
.hero-media img{
  width:80vw;
  max-width:100%;
  height:auto;
  border-radius:14px;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}
@media (max-width: 640px){
  .hero-media img{width:100%}
}

/* 2) BAND INFO */
.band-head {
  display: flex;
  flex-direction: column;   /* ✅ logo sopra, titolo sotto */
  align-items: center;      /* ✅ centrati orizzontalmente */
  gap: 12px;
  margin-bottom: 20px;
}

.band-logo {
  height: 120px;   /* puoi regolare la dimensione */
  width: auto;
}

.band-title {
  font-family: 'Kirang Haerang', cursive;  /* 🔹 nuovo font */
  font-size: clamp(40px, 6vw, 80px);
  line-height: 1.2;
  margin: 0;
  text-align: center;
  letter-spacing: .5px;
}
.band-meta {
  color: var(--muted);
  font-weight: 600;
  border-top: 1px solid var(--border);
  padding-top: 10px;
  margin-bottom: 14px;
  text-align: center;   /* ✅ centra orizzontalmente il testo */
}
.band-bio {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  box-shadow: var(--shadow);
  text-align: justify;   /* ✅ giustifica il testo */
}

.band-bio p {
  margin: 0 0 12px 0;
}

.band-bio p:last-child {
  margin-bottom: 0;
}
.band-contact {
  margin-top: 6px;
  font-size: 1rem;
  text-align: center;
  
  /* 🔹 allinea icona + testo */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px; /* spazio tra icona e testo */
}
.band-contact img {
  display: block;
}

.band-contact a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
}

.band-contact a:hover {
  color: var(--fg);
  text-decoration: underline;
}


/* 3) GRID 2x4 */
.grid-2x4{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 100px;   /* altezza fissa per riga */
  gap:16px;
}

.card {
  display: flex;
  justify-content: center;   /* centra orizzontalmente */
  align-items: center;       /* centra verticalmente */
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: linear-gradient(45deg, #AAAAAA, #444444);
  padding: 12px;
}
.card-media {
  width: auto;
  height: 100%;   /* 🔹 metà della cella */
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-media img {
  max-width: 100%;     /* mai più larga della cella */
  max-height: 75%;     /* mai più alta del 50% della cella */
  height: auto;        /* mantiene proporzioni */
  width: auto;         /* mantiene proporzioni */
  object-fit: contain; /* non ritaglia, solo ridimensiona */
  border-radius: 10px;
  display: block;
}
/* Responsive grid */
@media (max-width: 1024px){
  .grid-2x4{grid-template-columns: repeat(2, 1fr)}
}
@media (max-width: 640px){
  .grid-2x4{grid-template-columns: 1fr}
}

/* 4) VIDEO (centered, 40% width) */
.video-wrap{
  display:flex;
  justify-content:center;
}
.video-embed{
  width:40vw;
  max-width: 960px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  background:#000;
  aspect-ratio: 16 / 9; /* consistent ratio */
}
.video-embed iframe{
  width:100%;
  height:100%;
  display:block;
}
@media (max-width: 980px){
  .video-embed{width:60vw}
}
@media (max-width: 640px){
  .video-embed{width:92vw}
}