/* Page styles for home. Moved verbatim from the inline <style> block of
   app/views/site/home.view.php (php-wapi, git HEAD~1). Unlayered on purpose, exactly as
   the inline block was, so it keeps winning over the layered site styles. */


main .wrapper {
  width: calc(100% - 4em);
  margin-inline: auto;
}

#hero {
  color: white;

  padding-block-start: 7em;
  padding-block-end: 2em;

  background-size: cover;
  background-color: hsl(0, 0%, 0%, 0.6);
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: overlay;

  & .logo {
    margin-inline: auto;
  }

  & h2 {
    font-size: 3.5rem;
    text-transform: uppercase;
    margin-block-end: 1rem;
  }
}

.home-heading {
  text-transform: uppercase;
  font-size: 1.9rem;
  font-weight: 600;

  & .dot {
    color: #b8084b;
  }
}

#services {
  background-color: hsl(0, 0%, 0%, 0.6);
  background-blend-mode: overlay;
  background-position: center;
  background-size: cover;
  color: white;
  padding-block: 0.5em;


  & ul {
    list-style: none;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    gap: 1em;

    & li:first-child {
      flex: 0 1 auto;
      max-width: 530px;
    }

    & .service {
      width: min(160px, 100%);
      height: 230px;
      overflow: hidden;
      text-align: center;

      &>p,
      &>a {
        transition: all 500ms ease-out;
      }

      &>*:not(p, a) {
        transition: all 300ms ease-in-out;
      }

      &:hover>* {
        transform: translateY(-160px);
      }

      & h3 {
        font-weight: normal;
        font-size: 1rem;
        margin-block-end: 4em;
      }

      &:hover h3 {
        margin-block: 1em;
      }

      & p {
        font-size: 0.75rem;
        margin-block-end: 1em;
      }

      & .global-button {
        font-size: 0.75rem;
        margin-inline: auto;
      }
    }
  }
}

#saas {
  text-align: center;
  padding-block-start: 2em;

  & .description {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    gap: 1em;
    padding-block: 1em;

    & p {
      max-width: 120ch;
    }
  }

  & hr {
    border-color: #b8084b;
    border-width: 4px;
  }

  & hr+p {
    margin-block: 1em;
  }

  & .templates {
    list-style: none;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 260px;

    isolation: isolate;

    & .template {
      overflow: hidden;
      z-index: 1;


      & * {
        transition: all 100ms ease-in-out;
      }

      &:hover {
        scale: 1.05;
        z-index: 3;
        box-shadow: 1px 1px 2px 2px hsl(0, 0%, 0%, 0.25);

        & .preview {
          translate: 0 0;
        }
      }

      & a {
        display: block;
        height: 100%;
        width: 100%;
        position: relative;

        &>* {
          position: absolute;
        }

        & p {
          bottom: 1em;
          inset-inline: 0;
          margin-inline: auto;
        }

        & .preview {
          opacity: 1;
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: top;
          translate: 0 -100%;

        }

        & .bg {
          inset: 0;
          object-fit: cover;
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}

@media screen and (width < 1024px) {
  #saas .templates {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (width < 768px) {
  #saas .templates {
    grid-template-columns: 1fr;
  }
}

#process {
  padding-block: 2em;
  background-size: cover;
  background-position: bottom;
  background-blend-mode: overlay;
  background-color: hsl(0, 0%, 100%, 0.9);

  & .wrapper {
    isolation: isolate;
    max-width: 1200px;

    &>div {
      position: relative;

      & a {
        z-index: 3;
        position: absolute;
        left: 2em;
        top: 50%;
        opacity: 0.5;
        text-align: center;
        color: black;
        text-decoration: none;
        font-size: 0.75rem;

        &:hover {
          opacity: 1;

          & img {
            rotate: 12deg;
          }
        }

        & img {
          width: 128px;
        }
      }
    }
  }

  & ul {
    padding-block: 2em;
    list-style: none;

    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    gap: 2em;

    & li {
      position: relative;
      isolation: isolate;

      display: grid;
      grid-template-columns: auto 1fr;
      grid-template-rows: auto auto;
      grid-template-areas:
        "image title"
        "image text"
      ;
      row-gap: 0.5em;
      column-gap: 0.75em;

      width: min(512px, 80%);

      &::after {
        content: "";
        display: block;
        width: 100px;
        aspect-ratio: 1 / 1;
        background-image: url(../../images/process-arrow.png);
        background-size: contain;
        background-repeat: no-repeat;
        position: absolute;
        z-index: -1;
        opacity: 0.2;
        right: 2em;
        top: 4em;
      }

      &:nth-child(1)::after,
      &:nth-child(2)::after {
        scale: 1 -1;
        rotate: -60deg;
      }

      &:nth-child(3)::after {
        scale: 1 -1;
        rotate: -10deg;
      }

      &:nth-child(4)::after {
        scale: 1 -1;
        rotate: 0deg;
      }

      &:nth-child(5)::after {
        display: none;
      }

      & img {
        grid-area: image;
        width: 56px;
        aspect-ratio: 1 / 1;
        opacity: 0.75;
      }

      & h3 {
        grid-area: title;
      }

      & p {
        grid-area: text;
      }
    }
  }
}

@media screen and (width > 1024px) {
  #process ul {
    align-items: flex-end;
  }

  #process ul li:nth-child(1),
  #process ul li:nth-child(5) {
    margin-inline: auto;
  }

  #process ul li:nth-child(2),
  #process ul li:nth-child(4) {
    margin-inline-end: 10vw;
  }


}

#video {
  position: relative;
  padding-block: 2em;

  & h2 {
    margin-block-end: 0.5em;
  }

  & .preview {
    position: relative;
    width: 100%;
    min-height: 400px;
    aspect-ratio: 300 / 169;
    overflow: hidden;

    background-color: black;

    & img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.4;
    }

    & .info {
      position: absolute;
      inset: 0;
      padding: 1em;

      display: grid;
      grid-template-columns: 1fr 1fr;
      place-items: center;

      text-transform: uppercase;
      text-align: center;
      text-shadow: 1px 1px 2px hsl(0, 0%, 0%, 0.5);

      & button {
        aspect-ratio: 1 / 1;
        width: min(140px, 30vw);
        padding: 1em;

        background-color: transparent;
        color: #b8084b;
        border: none;
        filter: drop-shadow(1px 1px 2px hsl(0, 0%, 0%, 0.25));
        cursor: pointer;
      }

      & h3 {
        color: #b8084b;
        font-size: clamp(1.2rem, 10vw, 3rem);
        line-height: 1;

        margin-block-end: 0.5em;
      }

      & a {
        color: white;
        font-size: 1.5rem;
        font-weight: bold;
      }
    }
  }

  & dialog {
    &::backdrop {
      background: hsl(0, 0%, 0%, 0.8);
    }

    padding: 0;
    overflow: visible;

    & .modal {
      isolation: isolate;
      position: relative;
      width: 890px;
      max-width: 100%;
      aspect-ratio: 16 / 9;
    }

    & button {
      display: block;
      position: absolute;
      top: -1em;
      right: -1em;
      z-index: 2;
      padding: 0.5em;
      aspect-ratio: 1 / 1;
      height: 2.4rem;
      background-color: #b8084b;
      border-radius: 100%;
      cursor: pointer;
      align-content: center;
      border: none;

      & svg {
        width: 1.5rem;
        aspect-ratio: 1 / 1;
        color: white;
      }
    }

    & iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }
  }
}

@media screen and (width < 768px) {
  #video .preview .info {
    grid-template-columns: 1fr;
    grid-auto-rows: 1fr;
  }

}

#portfolio {
  padding-block: 2em;
  background-color: hsl(0, 0%, 100%, 0.6);
  background-blend-mode: overlay;
  background-size: cover;
  text-align: center;

  & ul {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 256px;
    gap: 2em;
    padding-block-start: 2em;
    padding-block-end: 2em;
    isolation: isolate;

    & li:hover img {
      scale: 1.05;
      box-shadow: 1px 1px 16px 16px hsl(0, 0%, 0%, 0.05);
      z-index: 6;
    }

    & li * {
      transition: all 200ms ease-in-out;
    }

    & a {
      color: black;
      text-decoration: none;
    }

    & img {
      width: 100%;
      height: 216px;
      object-fit: cover;
      object-position: top;
      box-shadow: 1px 1px 4px 2px hsl(0, 0%, 0%, 0.1);
    }

    & p {
      margin-block: 1em;
    }
  }
}

@media screen and (width < 1024px) {
  #portfolio ul {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (width < 768px) {
  #portfolio ul {
    grid-template-columns: 1fr;
  }
}

#reviews {
  padding: 2em;

  & h2 {
    margin-block-end: 1em;
  }

  & iframe {
    display: block;
    width: min(35rem, 90%);
    aspect-ratio: 16 / 9;
    margin-inline: auto;
  }
}

#contact-cta {
  background-color: hsl(0, 0%, 0%, 0.9);
  background-blend-mode: overlay;
  background-size: cover;
  background-position: center;
  color: white;
  padding-block: 2em;

  & .wrapper {
    width: min(1200px, 100%);
  }

  & h2 {
    font-size: 3rem;
    text-align: center;
  }

  & p {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1em;

    text-transform: uppercase;
    font-size: 2rem;
    font-weight: bold;
    padding: 1em 2em;
    margin-block: 1em;
    background-image: linear-gradient(90deg, #b8084b 75%, hsl(337, 92%, 50%));

    & a {
      background-color: white;
      padding: 0.45em 0.9em;
      border-radius: 4px;
      font-size: 1.2rem;
      text-decoration: none;
    }
  }
}

@media screen and (width < 768px) {
  #contact-cta .wrapper p {
    justify-content: center;
  }
}