/* white-pages.css — layout for the white pages copied from Simvoly by
   port-white-pages.py (21 Sep 2026). Rebuilds Simvoly's rows and columns
   simply: a row is a centred band, columns sit side by side on wide screens
   and stack on phones. Colours and fonts match the white homepage
   (home-white.css). */
main:has(.w-row) { max-width: none; width: 100%; padding: 0; }

.w-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px 16px;
  font-family: "Open Sans", Arial, sans-serif;
  color: #3e3e3e;
}
.w-row.w-has-bg {
  max-width: none;
  background-size: cover;
  background-position: center;
  color: #ffffff;
  padding: 56px 16px;
}
.w-row.w-has-bg h1, .w-row.w-has-bg h2, .w-row.w-has-bg h3,
.w-row.w-has-bg .w-text { color: #ffffff; text-shadow: 0 1px 3px rgba(0,0,0,.45); }

.w-col { min-width: 0; padding: 8px 12px; box-sizing: border-box; }
.w-col.w-has-bg { background-size: cover; background-position: center; min-height: 220px; border-radius: 4px; }
.w-gap { padding: 0; }

.w-row h1, .w-row h2, .w-row h3 {
  font-family: "Poiret One", "Open Sans", Arial, sans-serif;
  font-weight: 400;
  text-align: center;
  color: #3e3e3e;
  line-height: 1.2;
  margin: 8px 0 16px;
}
.w-row h1 { font-size: clamp(36px, 7vw, 60px); }
.w-row h2 { font-size: clamp(26px, 5vw, 36px); }
.w-row h3 { font-size: clamp(22px, 4vw, 28px); }
.w-row h4 { font-size: 19px; margin: 0 0 6px; }

.w-text { font-size: 17px; line-height: 1.65; color: #6a6a6a; }
.w-text p { margin: 0 0 12px; }
.w-text ul, .w-text ol { padding-left: 1.3em; margin: 0 0 12px; }
.w-text a { color: #2f50ef; }
.w-text img { max-width: 100%; height: auto; }

.al-center { text-align: center; }
.al-right { text-align: right; }
.al-justify { text-align: justify; }

.w-img { text-align: center; }
.w-img img { max-width: 100%; height: auto; display: inline-block; margin: 6px auto; }

.w-embed { width: 100%; }
.w-embed iframe { max-width: 100%; }

.w-icon { padding: 8px 0; }
.w-icon p { font-size: 15px; color: #6a6a6a; }

.w-sp { height: 12px; }
.w-row hr { width: 100%; border: 0; border-top: 1px solid #d6d6d6; margin: 16px 0; }

.w-btn {
  display: inline-block;
  background: #61bd6d;
  color: #ffffff !important;
  text-decoration: none;
  border-radius: 56px;
  padding: 12px 30px;
  font-family: Arial, sans-serif;
  font-size: 19px;
  margin: 6px 0;
}
.w-btn:hover { filter: brightness(1.08); }

.w-toggles details { border-bottom: 1px solid #e2e2e2; padding: 10px 0; }
.w-toggles summary { cursor: pointer; font-weight: 600; font-size: 17px; color: #3e3e3e; }
.w-toggles .w-text { padding-top: 8px; }

/* Social-media icons (port-white-pages.py social_icons): Simvoly's Font Awesome 4
   icons, in the colours, size and corner rounding set on each Simvoly widget. */
.w-social { text-align: center; margin: 8px 0 12px; }
.w-sm { display: inline-block; margin: 3px; text-decoration: none; }
.w-sm i {
  display: inline-block;
  box-sizing: content-box;
  background: var(--sm-bg, #333);
  color: var(--sm-fg, #fff);
  font-size: var(--sm-size, 20px);
  width: var(--sm-size, 20px);
  height: var(--sm-size, 20px);
  line-height: var(--sm-size, 20px);
  border-radius: var(--sm-radius, 0);
  padding: 10px;
  text-align: center;
  transition: background .3s;
}
.w-sm:hover i { background: var(--sm-hover, #666); }

/* YouTube/Vimeo videos: full column width at 16:9 (a bare iframe is 300x150). */
.w-embed iframe.w-video,
.w-embed iframe[src*="youtube.com/embed"],
.w-embed iframe[src*="player.vimeo.com"] {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}

@media (max-width: 700px) {
  .w-col { flex-basis: 100% !important; }
  .w-gap { display: none; }
}

/* /riddims: BeatStars' player needs a fixed height (Simvoly kept a tall ratio box). */
.w-beatstars { position: relative; max-width: 1024px; margin: 0 auto; }
.w-beatstars iframe { display: block; width: 100%; height: 1100px; border: 0; }

/* If a band's background image ever fails to load, keep its white text readable. */
.w-row.w-has-bg { background-color: #2a2a2a; }