/* #region Hero */
.hero {
  color: white;
  background: 
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(/images/hero.jpg) center / cover no-repeat;
}
.hero .container {
  height: 100dvh;
  display: flex;
  align-items: center;
}
.hero h1 {
  font-size: 2em;
}
.hero p {
  font-size: 1.4em;
  line-height: 1.8em;
}
.call-to-actions {
  margin-top: 5em;
  display: flex;
  gap: 1em;
}
.call-to-actions a {
  text-decoration: none;
  font-family: var(--font-main);
  background-color: var(--color-paleblue);
  color: white;
  font-weight: 700;
  font-size: 1em;
  border: .1em solid transparent;
  border-radius: 2em;
  padding: 1em 1em;
}
.call-to-actions .second-call {
  border: .1em solid white;
  background-color: transparent;
}
@media (min-width: 992px) {
  .hero  h1 {
    width: 70%;
    font-size: 4em;
  }
  .hero p {
    padding-top: 1em;
    font-size: 2em;
    width: 70%;
    letter-spacing: .05em;
  }
  .call-to-actions a {
    font-size: 1.6em;
  }
}
/* #endregion */

/* #region Who We Work With */
.who-we-work-with .audience-cards {
  display: flex;
  flex-direction: column;
  gap: 1em;
}
.who-we-work-with article {
  background-color: white;
  border: .1em solid transparent;
  padding: 1em 2em;
  border-radius: 1em;
}
.who-we-work-with .card-title {
  display: flex;
  align-items: center;
  gap: .5em;
}
.who-we-work-with article i {
  color: var(--color-gold);
  font-size: 1.6em;
}
.who-we-work-with article h3 {
  color: var(--color-gray);
}
.who-we-work-with article p {
  color: var(--color-lightgray);
  margin-top: .2em;
}
.who-we-work-with article a {
  text-decoration: none;
  color: var(--color-gray);
}
@media (min-width: 992px) {
  .who-we-work-with .audience-cards {
    font-size: 1.5em;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}
/* #endregion */

/* #region Why Toneroom */
.why-toneroom h2 {
  color: var(--color-dark);
}
.why-toneroom ul {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 1em;
}
.why-toneroom li {
  display: flex;
  gap: 1.5em;
  font-size: 1.5em;
  align-items: center;
  color: var(--color-darkgray);
}
/* Wave Section Base */
.wave-section {
  position: relative;
  padding: 0 .5em 1.3em 0;
}
.wave-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--wave-bg) center/cover no-repeat;
  opacity: 0.04;
  z-index: 0;
}
/* Wave Variations */
.wave-1 { --wave-bg: url('/images/wave.svg'); }
.wave-2 { --wave-bg: url('/images/wave-2.svg'); }
.wave-3 { --wave-bg: url('/images/wave-3.svg'); }
.wave-4 { --wave-bg: url('/images/wave-4.svg'); }
.wave-5 { --wave-bg: url('/images/wave-5.svg'); }
@media (min-width: 992px) {
  .why-toneroom li  {
    font-size: 1.7em;
  }
  .why-toneroom {
    background: url('/images/why-toneroom-background.svg') center/cover no-repeat;
  }
}
/* #endregion */

/* #region Feature Artists */
.feature-artists ul {
  list-style: none;
  padding-left: 0;
}
.artist-grid {
  position: relative;
  min-height: 510px;
}

.artist-grid li {
  position: absolute;
  transition: transform 0.5s ease;
  transform-origin: bottom right;
}

.feature-artists img {
  width: 100%;
  height: auto;
  border-radius: 1em 1em 0 0;
}
.feature-artists .card-info {
  margin-top: -2.2em;
  position: relative;
  color: var(--color-darkgray);
  background-color: white;
  text-align: center;
  border-radius: 1em;
  padding: 1.1em;
  border-bottom: .05em solid black;
}
.feature-artists .card-info h3 {
  margin-top: 0;
}

.feature-artists a {
  text-decoration: none;
  color: black;
}
.feature-artists .card-info i {
  font-size: 2.3em;
  position: absolute;
  top: 35%;
}

.carrusel-arrows {
  opacity: 0;
  pointer-events: none;
}

.carrusel-arrows.show {
  opacity: 1;
  pointer-events: auto;
}

.feature-artists .card-info .move-left {
  left: .2em;
}
.feature-artists .card-info .move-right {
  right: .2em;
}
.feature-artists .card-info .locations {
  display: flex;
  gap: .4em;
  justify-content: center;
}
.feature-artists .card-info .locations .tag {
  font-size: .8em;
  border-radius: 1em;
  padding: 0 .6em;
}
.newcastle {
  background-color: #0B3D91;
  color: white;
}
.central-coast {
  background-color: #ffe368;
  color: black
}
.sydney {
  background-color: #87CEEB;
  color: black;
}
.feature-artists .section-cta {
  border-color: white;
  color: white;
  background-color: var(--color-darkgray);
  
}
@media (min-width:538px) {

  .artist-grid li {
    font-size: 1.2em;
    min-width: 400px;
    position: unset;
  }

  .artist-grid {
    display: flex;
    gap: 2em;
    overflow-x: hidden;
  }
  /* .artist-card {
    left: 30%;
    
  } */
}
/* #endregion */

/* #region Venue Parnerts */
.venue-partners .section-cta {
  color: white;
  border-color: white;
  background-color: var(--color-paleblue);
}
.venue-partners ul {
  list-style: none;
  padding-left: 0;
  display: flex;
  gap: 1em;
  overflow-x: auto;
  cursor: grab;
}
.venue-partners .carrusel {
  position: relative;
}
.venue-partners .carrusel-arrows i {
  top: 45%;
  position: absolute;
  font-size: 2em;
  color: var(--color-paleblue);
}
.venue-partners .move-left {
  left: -2%;
}
.venue-partners .move-right {
  right: -2%;
}
.venue-partners ul::-webkit-scrollbar {
  display: none;
}
.venue-partners .venue-card {
  width: 305px;
  background-color: white;
  color: black;
  padding: .7em .7em;
  border-radius: 1em;
}
.venue-card a {
  font-size: .9em;
  text-decoration: none;
  display: block;
  text-align: right;
  margin-top: 0 !important;
  color: var(--color-verydark);
}
.venue-partners img {
  width: 100%;
  height: auto;
  border-radius: 1em;
}
.venue-partners h3 {
  margin-top: 0;
  margin-bottom: 0;
  color: var(--color-gold);
}
.venue-partners .venue-location {
  margin-top: .3em;
}
.venue-partners p {
  color: var(--color-gray);
}
.venue-partners .venue-type {
  display: flex;
  gap: .4em;
  color: var(--color-darkgray);
  margin-bottom: 0;
}
.venue-partners .venue-type span {
  background-color: var(--color-dark);
  border-radius: .7em;
  color: white;
  padding: 0 .5em;
  font-size: .8em;
}
.venue-partners a {
  margin-top: 2em;
}
@media (min-width: 992px) {
  .venue-partners .venue-card {
    font-size: 1.2em;
  }
}
/* #endregion */

/* #region Feature Gigs */
.upcoming-gigs ul {
  display: flex;
  flex-direction: column;
  gap: 1em;
  list-style: none;
  padding-left: 0;
}
.upcoming-gigs .event-card {
  position: relative;
  background-color: var(--color-verydark);
  color: white;
  padding: 1em 1em;
  border-radius: 2em 2em 0 0;
}
.upcoming-gigs .event-card::before,
.upcoming-gigs .event-card::after {
  content: "";
  position: absolute;
  width: 25px;
  height: 25px;
  top: 17%;
  border-radius: 50%;
  background-color: white;
  z-index: 3;
}
.upcoming-gigs .event-card::before {
  left: -12.5px;
}
.upcoming-gigs .event-card::after {
  right: -12.5px;
}
.upcoming-gigs .event-card h3 {
  margin-top: 0;
}
.upcoming-gigs .event-date {
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: .1em;
  font-size: .7em;
  background-color: white;
  color: var(--color-verydark);
  border-radius: .5em;
  padding: 0 .3em;
}
.upcoming-gigs .event-grid li {
  position: relative;
}
.upcoming-gigs .event-grid li .doted-line {
  position: absolute;
  top: 22%;
  left: -0.5%;
  width: 100%;
  height: .1em;
  z-index: 2;
  background: repeating-linear-gradient(
    to right,
    white 0px,
    white 12px,
    transparent 12px,
    transparent 20px
  );
}
.upcoming-gigs .event-card img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.upcoming-gigs .event-card-content {
  display: flex;
  align-items: center;
  gap: 2em;
}
.upcoming-gigs .section-cta {
  margin-top: 2em;
  background-color: var(--color-paleblue);
}
@media (min-width: 992px) {
  .upcoming-gigs .event-card {
    font-size: 1.4em;
  }
  .upcoming-gigs .event-card-content {
    justify-content: space-evenly;
  }
  .upcoming-gigs ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}
/* #endregion */

/* #region Meet The Team */
.meet-the-team {
  background: 
    linear-gradient(
      rgba(0, 0, 0, 0.5), 
      rgba(0, 0, 0, 0.5)
    ),
    url(/images/meet-the-team.jpg) center / cover no-repeat;
}

.meet-the-team p {
  animation: fadeInScale linear;
  animation-timeline: view();
  animation-range: entry 0% cover 80%;
}

@keyframes fadeInScale {
  from {
    opacity: 0;

  } to {
    opacity: 1;
  }
  
}

/* .meet-the-team p.visible {
  opacity: 1;
} */

.meet-the-team h3 {
  margin-top: 2em;
}
@media (min-width: 992px) {
  .meet-the-team h3,
  .meet-the-team p {
    font-size: 1.7em;
  }
  .meet-the-team p {
    line-height: 2em;
    width: 70%;
  }
  .meet-the-team {
  background: 
    linear-gradient(
      rgba(0, 0, 0, 0.5), 
      rgba(0, 0, 0, 0.5)
    ),
    url(/images/meet-the-team-landscape.jpg) center / cover no-repeat;
  }
}
/* #endregion */

/* #region Conversion CTAs */
.conversion-split {
  display: flex;
  flex-direction: column;
  gap: 1em;
}
.conversion .conversion-card {
  text-align: center;
  padding: 1em;
  border-radius: 1em;
}
.conversion-left {
  /* color: black; */
  color: white;
  border: .1em solid var(--color-verydark);
  /* background-color: white; */
  background-color: var(--color-testimonials-bg);
}
.conversion-left a {
  background-color: var(--color-verydark);
  color: white;
  border-color: var(--color-paleblue);
}
.conversion-right {
  color:white;
  border: .1em solid white;
  /* background-color: var(--color-verydark); */
  background-color: var(--color-testimonials-bg);
}
.conversion-right a {
  /* color: var(--color-paleblue); */
  background-color: white;
  border-color: var(--color-paleblue);
}
.conversion-tertiary {
  color: white;
  background-color: var(--color-testimonials-bg);
  border: .1em solid var(--color-verydark);
}
.conversion-tertiary a {
  background-color: var(--color-verydark);
  /* color: white; */
  color: var(--color-paleblue);
  border-color: white;
}
@media (min-width: 992px) {
  .conversion {
    font-size: 1.3em;
  }
  .conversion a {
    transition: all .5s ease;
  }
  .conversion-split {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
  .conversion-left a {
    color: var(--color-paleblue);
  }
  .conversion-left a:hover {
    border-bottom: .3em solid var(--color-gold);
  }
  
  .conversion-right a {
    color: var(--color-paleblue);
    border-bottom: .3em solid transparent;
  }

  .conversion-right a:hover {
    border-bottom: .3em solid var(--color-gold);
  }
  .conversion-tertiary a:hover {
    border-bottom: .3em solid var(--color-gold);
  }
}
/* #endregion */