/* =========================================================================
   Card sections: About, YouTube, SoundCloud and Bookings.

   Each section is a .row holding a card (.box) and its header, either a
   heading (ABOUT / BOOKINGS) or a logo (YouTube / SoundCloud). The header
   sticks out on one side and tucks under the card's top corner:
     .card-right  card shifted right, header on the left
     .card-left   card shifted left, header on the right
   so the cards zig-zag down the page.
   ========================================================================= */

/* ---------- Spacing between sections ----------
   The space from one card to the next section's header is --section-gap.
   Each padding = that gap + the part of the header above its card. */

/* sections headed by a logo */
section.card-section {
  padding-top: calc(var(--section-gap) + var(--logo-h) + var(--logo-gap));
  /* links like music.ar5had.com/#bookings land with the header 40px
     from the top of the screen */
  scroll-margin-top: -80px;
}

/* the logos sit a little lower (see .brand-logo below), so their
   sections need that much less room */
section.card-section.yt-section {
  padding-top: calc(
    var(--section-gap) + var(--logo-h) * 0.9385 + var(--logo-gap) + var(--logo-extra)
  );
}

section.card-section.sc-section {
  padding-top: calc(
    var(--section-gap) + var(--logo-h) * 0.875 + var(--logo-gap) + var(--logo-extra)
  );
}

/* sections headed by ABOUT / BOOKINGS */
section.card-section.heading-section {
  padding-top: calc(
    var(--section-gap) + var(--title-size) + var(--title-pad-y) * 2 - var(--cover)
  );
}

/* About follows the header closely: the header already ends with the
   space where the social icons sit on the first screen */
#about.card-section {
  padding-top: calc(
    var(--first-gap) + var(--title-size) + var(--title-pad-y) * 2 - var(--cover)
  );
  scroll-margin-top: calc(40px - var(--first-gap));
}

/* ---------- Row and card ---------- */

.row {
  --side: 100px; /* room on each side of the card */
  --offset: 70px; /* how far each card shifts sideways (the zig-zag) */
  position: relative;
  display: flex;
  align-items: flex-start;
}

.box {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  width: calc(100% - 2 * var(--side));
  min-width: 0;
  margin: 0 auto;
  padding: 24px 30px 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}

.row.card-left > .box {
  margin-left: calc(var(--side) - var(--offset));
  margin-right: auto;
}

.row.card-right > .box {
  margin-left: auto;
  margin-right: calc(var(--side) - var(--offset));
}

/* The card's shadow is a separate layer underneath the headers, so the
   card covers their corners but its shadow doesn't darken them. */
.row::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  pointer-events: none;
}

/* the deep shadow band under each card, a smooth gradient */
.row::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 100%;
  height: 58px;
  background: radial-gradient(
    ellipse 48% 100% at 50% 0%,
    rgba(0, 0, 0, 0.95) 0%,
    rgba(0, 0, 0, 0.6) 35%,
    rgba(0, 0, 0, 0) 100%
  );
  pointer-events: none;
}

.row.card-left::before,
.row.card-left::after {
  left: calc(var(--side) - var(--offset));
  right: calc(var(--side) + var(--offset));
}

.row.card-right::before,
.row.card-right::after {
  left: calc(var(--side) + var(--offset));
  right: calc(var(--side) - var(--offset));
}

/* ---------- Headers (shared) ---------- */

.row > .brand-logo,
.row > .section-title {
  position: absolute;
  z-index: 1;
}

/* headers move sideways with their card */
.row.card-left > .brand-logo,
.row.card-left > .section-title {
  right: 0;
  transform: translateX(calc(var(--offset) * -1));
}

.row.card-right > .brand-logo,
.row.card-right > .section-title {
  left: 0;
  transform: translateX(var(--offset));
}

/* ---------- Headings: ABOUT, BOOKINGS ----------
   Uppercase Roboto. The box is sized by its padding; the diagonal lines
   are a separate layer behind the word, shifted toward the card so both
   headings tuck under their card the same way. */
.section-title {
  --pad-x: 44px;
  --shift: 16px; /* how far the lines are offset from the box */
  bottom: calc(100% - var(--cover));
  display: flex;
  align-items: center;
  height: calc(1em + var(--title-pad-y) * 2);
  margin: 0;
  padding: 0 var(--pad-x);
  font-family: "Roboto", var(--font);
  font-size: var(--title-size);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 3px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text);
}

.section-title .lines {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.16) 0 1px,
    transparent 1px 8px
  );
}

.section-title .word {
  position: relative;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
}

/* heading on the right (Bookings): lines go down and left */
.row.card-left > .section-title {
  right: -10px;
}

.row.card-left > .section-title .lines {
  transform: translate(calc(var(--shift) * -1), var(--shift));
}

/* heading on the left (About): lines go down and right */
.row.card-right > .section-title {
  left: -10px;
}

.row.card-right > .section-title .lines {
  transform: translate(var(--shift), var(--shift));
}

/* ---------- Logos: YouTube, SoundCloud ----------
   Both sit on their card by the bottom of their letters, the same
   distance as the heading letters (+ --logo-extra). */
.brand-logo {
  display: block;
}

.brand-logo img,
.brand-logo svg {
  display: block;
  width: 100%;
  height: auto;
}

/* YouTube: the red icon reaches the bottom of the logo, but the letters
   stop 6.15% higher. The logo is 90:20, so 4.5 x its height wide; the
   card's edge lines up 40% into it, where the "Y" starts. */
.yt-logo {
  width: calc(var(--logo-h) * 4.5);
}

.row > .brand-logo.yt-logo {
  bottom: calc(100% + var(--logo-gap) + var(--logo-extra) - var(--logo-h) * 0.0615);
}

.row.card-left > .brand-logo {
  right: calc(var(--side) - var(--logo-h) * 4.5 * (1 - 0.4));
}

/* SoundCloud: the official cloud plus real text, as tall as the YouTube
   logo. The letters sit 12.5% of the text size above the bottom of their
   line (Apple's system font); the cloud lines up with them. */
.sc-logo {
  display: flex;
  align-items: baseline;
  gap: calc(var(--logo-h) * 0.18);
  height: var(--logo-h);
  font-size: var(--logo-h);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
  color: #fff;
  text-decoration: none;
}

.brand-logo.sc-logo svg {
  flex: 0 0 auto;
  width: calc(var(--logo-h) * 1.44);
  height: auto;
}

.row > .brand-logo.sc-logo {
  bottom: calc(100% + var(--logo-gap) + var(--logo-extra) - var(--logo-h) * 0.125);
}

.row.card-right > .brand-logo {
  left: -50px;
}

/* ---------- Tablet ---------- */

@media (min-width: 561px) and (max-width: 860px) {
  section.card-section {
    scroll-margin-top: -60px;
  }

  .row {
    --side: 56px;
    --offset: 32px;
  }

  .row.card-left > .brand-logo {
    right: -10px;
  }

  .row.card-right > .brand-logo {
    left: -10px;
  }

  .section-title {
    --pad-x: 32px;
    --shift: 12px;
  }

  .row.card-left > .section-title {
    right: 0;
  }

  .row.card-right > .section-title {
    left: 0;
  }
}

/* ---------- Phones ---------- */

@media (max-width: 560px) {
  section.card-section {
    scroll-margin-top: -40px;
  }

  .row {
    --side: 22px;
    --offset: 14px;
  }

  .box {
    padding: 18px 20px 26px;
  }

  .section-title {
    --pad-x: 26px;
    --shift: 10px;
    letter-spacing: 2px;
  }

  .row.card-left > .section-title,
  .row.card-left > .brand-logo {
    right: 0;
  }

  .row.card-right > .section-title,
  .row.card-right > .brand-logo {
    left: 0;
  }
}

/* very narrow phones: don't shift the SoundCloud logo with its card, so it
   stays on screen */
@media (max-width: 359px) {
  .row.card-right > .brand-logo {
    transform: none;
  }
}