/* style.css - refined layout adjustments with NOTE card */
:root {
  --bg-white: #ffffff;
  --bg-navy: #1e1e3a;
  --text-dark: #2c2c3e;
  --text-light: #f5f7fa;
  --font-family: 'Inter', sans-serif;
}

* {margin:0;padding:0;box-sizing:border-box;}

body {
  font-family: var(--font-family);
  line-height: 1.6;
  color: var(--text-dark);
  background: var(--bg-white);
  padding-top: 2rem;
}

.wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 2rem;
  row-gap: 1.5rem;
}

.full-width {grid-column: 1 / -1;}
.left-col {grid-column: 1;}
.right-col {grid-column: 2;}

/* Reduce vertical spacing between main sections (≈25 % less) */
section {margin-bottom: 0.9rem;}

/* Visual */
.visual {grid-column: 1 / -1;}
.visual img {width: 100%; height: auto; display: block; object-fit: contain;}

/* Title block */
.title-block .main-title {font-size: 2rem; font-weight: 600; margin-bottom: 0.4rem;}
.title-block .dates,
.title-block .subtitle {font-size: 1rem; margin-bottom: 0.2rem;}

/* Headings */
h2 {font-size: 1.4rem; margin-top: 1.2rem; margin-bottom: 0.6rem; font-weight: 600;}

/* Section divider – thin light gray line */
.section-divider {border: none; border-top: 1px solid #e0e0e0; margin: 0.6rem 0; width: 100%;}

/* ABOUT */
.about .content {max-width: 70vw;}
.about p {margin-bottom: 0.6rem; line-height: 1.8;}

/* INFORMATION – 2×2 grid */
.information {max-width: 70vw;}
.information .info-grid {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 0;
  row-gap: 0.5rem;
  border-top: 1px solid #e0e0e0;
}
.information .info-item {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #e0e0e0;
  padding: 0.4rem 0;
  align-items: flex-start;
}
.information .info-label {
  flex: 0 0 6rem; /* fixed width */
  font-weight: 600;
  margin-right: 0.5rem;
}

.information h2 {
  background: none;
  color: var(--text-dark);
}

.information .info-value {flex: 1;}

/* ARTISTS – unchanged */
.artists {
  background: var(--bg-navy);
  color: var(--text-light);
  padding: 2rem 2rem;
  text-align: left;
}
.artists .small-title {font-size: 0.9rem; margin-bottom: 0.4rem;}
.artists .coming-soon {
  font-size: 2rem;
  font-weight: 600;
  text-align: center;
  opacity: 0.9;
  margin: 1rem 0;
}
.artists .artists-note {text-align: center; font-size: 1rem; margin-top: 0.4rem;}

.artist-grid {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

/* Desktop layout: ensure enough width by limiting to 5 columns */
@media (min-width: 768px) {
  .artist-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}
}

.artist-item {
  font-size: 0.95rem;
}
.artist-item a {
    color: #ffffff;
    text-decoration: none;
}
.artist-item a:visited {
    color: #ffffff;
    text-decoration: none;
}
.artist-item a:hover {
    opacity: 0.85;
    text-decoration: underline;
}

/* PROGRAM – wider text area */
.program .program-grid {max-width: 70vw;}
.program .prog-item {
  border-bottom: 1px solid #e0e0e0;
  padding: 0.8rem 0;
}
.program .prog-item:last-child {border:none;}
.program .prog-num {font-size: 0.8rem; opacity: 0.6; margin-bottom: 0.2rem;}
.program .prog-item h3 {font-size: 1.1rem; margin: 0.4rem 0 0.3rem;}
.program .prog-item p {font-size: 0.95rem; line-height: 1.7;}

/* ONLINE SHOP – full‑width horizontal layout */
.shop.full-width {
  max-width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  column-gap: 1rem;
  padding: 1rem 0;
}
.shop.full-width .shop-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  column-gap: 1rem;
}
.shop.full-width h2 {margin: 0;}
.shop.full-width p {margin: 0;}
.shop.full-width .shop-button {
  background: var(--bg-navy);
  color: var(--text-light);
  padding: 0.6rem 1rem;
  text-decoration: none;
  font-size: 0.95rem;
  margin-left: auto; /* push button to right if space permits */
}

/* NOTE card */
.note .note-card {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  background: var(--bg-white);
  border: 1px solid #e0e0e0; /* thin gray border */
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.note .thumb {
  flex: 0 0 150px; /* thumbnail width */
  max-width: 150px;
  height: auto;
}
.note .thumb img {width: 100%; height: auto; display: block;}
.note .content {
  flex: 1;
  padding: 0.8rem;
  display: flex;
  flex-direction: column;
}
.note .content h3 {font-size: 1.2rem; margin: 0 0 0.4rem; font-weight: 600;}
.note .content p {margin: 0 0 0.6rem; font-size: 0.95rem; line-height: 1.5;}
.note .content .more {margin-top: auto; font-size: 0.9rem; color: var(--bg-navy); font-weight: 500;}
/* Mobile: vertical layout */
@media (max-width: 768px) {
  .note .note-card {flex-direction: column;}
  .note .thumb {flex: none; width: 100%; max-width: none;}
  .note .content {padding: 0.6rem;}
}

/* Footer */
footer {grid-column: 1 / -1; background: var(--bg-navy); color: var(--text-light); text-align: center; padding: 1rem 0; font-size: 0.85rem;}

/* Responsive */
@media (max-width: 768px) {
  .wrapper {grid-template-columns: 1fr;}
  .left-col, .right-col, .full-width {grid-column: 1;}
  .about .content,
  .information,
  .program .program-grid,
  .shop.full-width {max-width: 100%;}
  .information .info-grid {grid-template-columns: 1fr;}
  .information .info-item {flex-direction: column;}
  .information .info-label {margin-bottom: 0.2rem;}
  .shop.full-width {flex-direction: column; align-items: flex-start;}
  .shop.full-width .shop-inner {flex-direction: column; align-items: flex-start;}
  .shop.full-width .shop-button {margin-left: 0; margin-top: 0.6rem;}
}