@keyframes spin {
  from { rotate: 0deg; }
  to { rotate: 360deg; }
}

@layer layouts {
  :root {
    --registration-form-width: 460px;
    --registration-form-height: 590px;
    --theme-main-light: var(--theme-gradient-end);
  }

  #hero {
    display: grid;
    padding-bottom: 8rem;
    grid: auto auto auto / 1fr var(--registration-form-width);
    gap: 0 2rem;
    background: radial-gradient(circle 60vh at 70% 100%,
      var(--theme-gradient-end),
      var(--theme-gradient-start)
    );
    h1 {
      margin: 1rem 0;
      font-size: clamp(2.5rem, 7vw - .3rem, 3.7rem);
    }
    header {
      padding-top: 4rem;
      img {
        width: auto;
        height: 1.6rem;
      }
    }
    time {
      display: flex;
      flex-direction: column;
      gap: .2rem;
      margin: 2.5rem 0;
      font-size: 1.2rem;
      img {
        display: inline-block;
        width: 1.5rem;
        height: 1.5rem;
        margin: .15rem .6rem .15rem 0;
        float: left;
      }
    }
    p {
      margin: 0;
      font-size: 1.15rem;
      font-weight: 500;
    }
    .best-for {
      display: block;
      margin-bottom: 1rem;
      color: var(--theme-main-dark);
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: .1ch;
      text-transform: uppercase;
    }
    header, time, p { grid-column: 1; }
    #registration {
      grid-area: 1 / 2 / -1 / -1;
      place-self: center;
      width: min(30rem, 100%);
      padding: 2rem;
      margin: calc(8rem - var(--nav-height)) 0 0;
      box-sizing: border-box;
      position: relative;
      border-radius: 1.2rem;
      background-color: white;
      box-shadow: 3px 4px 13px rgb(35 59 82 / 25%);
      h2, h3 {
        margin: 2rem 0 1.5em;
        text-align: center;
        font-size: clamp(1.3rem, 1.4vw + 1rem, 1.8rem);
      }
      label {
        display: block;
        margin: 1rem 0;
        span {
          display: block;
          font-weight: 600;
          margin: .25rem 0;
        }
        small {
          font-size: .875rem;
        }
        a {
          color: #245aff;
          text-decoration: none;
          &:hover { text-decoration: underline; }
        }
      }
      input:is([type="email"], [type="text"]) {
        width: 100%;
        padding: .7rem 1rem;
        box-sizing: border-box;
        background: #eff5f9;
        border: none;
        border-radius: .25rem;
        outline: none;
        font-size: 1rem;
        &::placeholder {
          color: #929cb5;
          opacity: 1;
        }
      }
      input[type="checkbox"]{
        width: 1rem;
        height: 1rem;
      }
      button {
        display: block;
        padding: 1rem 2rem;
        margin: 2rem auto;
        color: white;
        background-color: black;
        position: relative;
        border: none;
        border-radius: .4rem;
        font-weight: 600;
        font-size: 1rem;
        text-transform: uppercase;
        cursor: pointer;
        &[disabled]{
          opacity: .6;
          color: transparent;
          pointer-events: none;
          &::after {
            content: "";
            display: block;
            width: 1rem;
            height: 1rem;
            position: absolute;
            inset: 50% auto auto 50%;
            translate: -50% -50%;
            border: 2px solid transparent;
            border-radius: 50%;
            border-color: transparent transparent white white;
            animation: spin 1s linear infinite;
          }
        }
      }
    }

    #registration-success, #registration-fail {
      display: flex;
      flex-flow: column;
      gap: 2rem;
      justify-content: center;
      padding: 4rem;
      box-sizing: border-box;
      position: absolute;
      inset: 0;
      background-color: white;
      border-radius: inherit;
      &[hidden]{ display: none; }
      h3 { margin: 0; }
      p {
        font-weight: normal;
        text-align: center;
      }
    }

    @media(width < 1000px){
      grid: auto / 1fr;
      #registration {
        grid-area: auto;
        margin: 4rem auto 0;
      }
    }
    @media(width < 500px){
      #registration {
        width: auto;
        margin-inline: -1rem;
      }
    }
  }

  #introduction {
    max-width: 800px;
    padding: 4rem max((100% - 1200px) / 2 + 2rem, 2rem);
    font-size: 1.25rem;
  }

  #hosts {
    font-size: 1.1rem;
    h2 {
      margin: .5em 0 1.5em;
      font-size: clamp(2rem, 1.2vw + 2rem, 3rem);
      text-align: center;
    }
    ul {
      list-style: none;
      max-width: 1000px;
      padding: 0;
      margin: 0 auto;
    }
    li {
      display: grid;
      grid: 1fr auto auto auto 1fr / auto 1fr;
      gap: 0 2.5rem;
      margin: 4rem 0;
    }
    img {
      grid-area: 1 / 1 / -1 / 2;
      width: min(15rem, 100vw - 4rem);
      height: auto;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      border-radius: 1rem;
    }
    .host-name {
      grid-row: 2;
      font-size: 1.4rem;
      line-height: 1.4;
      font-weight: 600;
    }
    .host-role {
      grid-row: 3;
      b { font-weight: 600; }
    }
    .host-introduction {
      grid-area: 4;
      a {
        color: #3d39ff;
        text-decoration: underline transparent;
        &:hover { text-decoration-color: currentcolor; }
      }
      & > p:last-child { margin-bottom: 0; }
    }
    @media(width < 600px){
      li { grid: auto / 1fr; }
      img {
        place-self: center;
        margin-bottom: 1rem;
      }
      :is(.host-name, .host-role){ text-align: center; }
    }
  }

  #about {
    display: grid;
    grid: auto 1fr auto / 1fr 1fr;
    gap: 0 8rem;
    width: min(1200px, 100%);
    margin: 0 auto;
    padding: 6rem clamp(2rem, 12.5vw - 3rem, 7rem) 8rem;
    box-sizing: border-box;
    color: white;
    background: center no-repeat url("/-/layouts/prewebinar/about-bg.svg?v=PNFy0Bf124"),
      #081d34;
    border-radius: clamp(0px, 100vw - 80rem, 1.5rem);
    h2 {
      font-size: clamp(2rem, 1.2vw + 2rem, 3rem);
      margin: 0 0 5rem;
      position: relative;
      &::after {
        content: "";
        width: 40%;
        height: .5rem;
        position: absolute;
        inset: 5rem auto 0 0;
        background-color: var(--theme-main-light);
      }
    }
    #details { font-size: 1.1rem; }
    #highlights {
      grid-area: 1 / 2 / span 2 / -1;
      place-self: center;
      padding: 3rem clamp(2rem, 16vw - 1.7rem, 3rem);
      color: black;
      background-color: white;
      border-radius: 1.2rem;
      h3 {
        margin: 1rem 0 2rem;
        font-weight: 600;
        font-size: 1.4rem;
      }
      ul { padding: 0 0 0 1rem; }
      li {
        margin: .5rem 0;
        padding: 0 0 0 .5rem;
      }
    }
    & > a:last-child {
      grid-column: span 2;
      display: block;
      width: fit-content;
      padding: 1.2rem 1.7rem;
      margin: 6rem auto 0;
      color: #081d34;
      background-color: var(--theme-main-light);
      text-decoration: none;
      text-transform: uppercase;
      font-weight: 600;
      border-radius: .4rem;
      transition: opacity .2s;
      &:hover { opacity: .8; }
    }

    @media(width < 1000px){
      display: block;
      #highlights { margin-top: 6rem; }
    }
  }
}