/* Samvaad overrides on top of the FiveThingsToSay main.css
   Brand colours sampled from the Samvaad logo artwork. */
:root {
  --sv-orange: #ee5a26;
  --sv-red: #5a0a0a;
  --sv-dark: #1a0806;
  --sv-text: #4e3a34;
  --sv-muted: #7a6660;
  --sv-cream: #fbf8f4;
}

body { background-color: var(--sv-cream); }

/* ---- Header: black field with the round band logo ---- */
body > .row.header-row {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: none;
  min-height: min(100vh, 56rem);
  background-color: #000;
  background-image: radial-gradient(ellipse at center, #2a0b08 0%, #000 70%);
}

body > .row.header-row > [class*='small-'].hero-col {
  margin: 0;
  padding: 2.5rem 1rem 3rem;
  text-align: center;
  background-image: none;
}

img.hero-logo {
  display: block;
  margin: 0 auto;
  width: min(80vw, 56vh);
  height: auto;
}

.hero-video {
  margin: 2rem auto 0;
  width: min(92vw, 56rem);
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(238, 90, 38, .35);
  background: #000;
}

.hero-video iframe {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---- Shows ---- */
.show-list {
  margin: 1.5rem auto 0;
  max-width: 52rem;
  border-top: 1px solid rgba(90, 10, 10, .15);
  text-align: left;
}

.show-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.5rem;
  padding: 1.1rem .5rem;
  border-bottom: 1px solid rgba(90, 10, 10, .15);
}

.show-when {
  flex: 0 0 14rem;
  color: var(--sv-orange);
  letter-spacing: .12rem;
  font-size: 1.1rem;
  font-family: 'Fira Sans Extra Condensed', sans-serif;
}

.show-where { flex: 1 1 16rem; }

h4.show-venue {
  margin: 0;
  color: var(--sv-dark);
  letter-spacing: .08rem;
  font-size: 1.25rem;
  font-family: 'Fira Sans Extra Condensed', sans-serif;
}

p.show-address {
  margin: .15rem 0 0;
  color: var(--sv-muted);
  font-size: .9rem;
  font-family: 'Roboto', sans-serif;
}

.show-action { flex: 0 0 auto; }
.show-action a.link-button.get-btn.reversed-btn { margin-top: 0; padding: .6rem .9rem; font-size: 1rem; }

.show-soldout {
  color: var(--sv-muted);
  text-transform: uppercase;
  letter-spacing: .15rem;
  font-size: .9rem;
  font-family: 'Fira Sans Extra Condensed', sans-serif;
}

@media screen and (max-width: 39.99rem) {
  .show-when { flex-basis: 100%; }
  .show-item { text-align: left; }
}

h1.site-title {
  margin: 0;
  color: var(--sv-orange);
  text-transform: lowercase;
  letter-spacing: 1.5rem;
  font-weight: 400;
  font-size: 3rem;
  font-family: 'Fira Sans Extra Condensed', sans-serif;
}

body > .row.header-row h6.sub-intro {
  margin: 1.5rem 0 2rem;
  color: #d9c3a8;
  text-transform: lowercase;
  letter-spacing: .25rem;
  font-size: 1rem;
  font-family: 'Fira Sans Extra Condensed', sans-serif;
}

a.link-button.button,
a.link-button.button:focus {
  border: .125rem solid var(--sv-orange);
  background-color: transparent;
  color: var(--sv-orange);
  letter-spacing: .2rem;
  transition: background-color .2s, color .2s;
}

a.link-button.button:hover {
  background-color: var(--sv-orange);
  color: #000;
}

@media screen and (min-width: 40rem) {
  h1.site-title { font-size: 5rem; letter-spacing: 2.5rem; }
  body > .row.header-row h6.sub-intro { margin-bottom: 2rem; font-size: 1.25rem; }
}

@media screen and (min-width: 64rem) {
  body > .row.header-row { min-height: min(100vh, 56rem); margin-bottom: 3.75rem; background-size: auto; }
  body > .row.header-row > [class*='small-'].hero-col { margin-right: 0; padding: 2.5rem 1rem 3rem; }
  a.link-button.button { color: var(--sv-orange); background-color: transparent; border-color: var(--sv-orange); }
}

/* ---- Text colours ---- */
h2.section-heading { color: var(--sv-red); }
h3.text-heading { color: var(--sv-dark); }
h4.text-subheading { color: var(--sv-orange); }
p.paragraph.summery-p { color: var(--sv-muted); max-width: 52rem; }
p.paragraph.impression-p { color: var(--sv-text); }
.rule.middle.rule-1 { border-bottom-color: var(--sv-orange); }
.rule.middle.rule-1 hr { border-top-color: var(--sv-orange); }

a.link-button.impression-btn { color: var(--sv-orange); }
a.link-button.get-btn.reversed-btn { color: var(--sv-red); border-color: rgba(90, 10, 10, .3); }
a.link-button.get-btn.reversed-btn:hover { border-color: var(--sv-red); }

/* ---- Images ---- */
.responsive-picture { max-width: none; }
.responsive-picture img { display: block; width: 100%; }

.gallery-square { margin-bottom: 1rem; }
.gallery-square img { aspect-ratio: 1 / 1; object-fit: cover; object-position: center 30%; }

.feature-wide { margin-bottom: 1rem; }
.feature-wide img { aspect-ratio: 16 / 9; object-fit: cover; }

.event-impression img { margin: 0 auto; max-width: 32rem; }

@media screen and (min-width: 64rem) {
  body > .row > [class*='small-'].impression-cnt { min-height: 0; margin-bottom: 2rem; }
}

/* Members: wrap as a grid so uneven bio lengths can't stagger the
   floated Foundation columns (keeps a clean 2 x 2 on desktop). */
body > .row.members-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

body > .row.members-row::before,
body > .row.members-row::after { display: none; }

body > .row.members-row > .columns { float: none; }

/* ---- Footer ---- */
body > .row.footer-row,
body > .row > [class*='small-'].copyright.footor-col {
  background-color: #000;
}

body > .row > [class*='small-'].copyright.footor-col {
  flex-direction: column;
  align-items: center;
  padding-top: 3rem;
}

img.footer-word {
  margin-bottom: 1.25rem;
  width: min(80vw, 22rem);
  height: auto;
}

p.paragraph.copyright { color: #a8968c; }

/* Grey boxes that stand in for images not yet added */
.img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #e9e2da;
  color: #9a8a80;
  text-transform: lowercase;
  letter-spacing: .3rem;
  font-size: .8rem;
  font-family: 'Fira Sans Extra Condensed', sans-serif;
}