@import './shared.css';

:root {
  --header-height: 4rem;
}

a4-header {
  display: block;
  padding-bottom: var(--header-height);
}

body > section {
  display: grid;
  grid-template: repeat(3, auto) / 1fr;
  max-width: var(--w-5xl);
  margin: 0 auto;

  padding: 1rem 0.5rem;
  gap: 1rem;

  @media (min-width: 768px) {
    grid-template: repeat(2, auto) / 1fr 2fr;
  }

  & > div {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
      var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
      calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    --tw-ring-color: rgb(17 24 39 / 0.1);
    box-shadow:
      0 4px 6px -1px rgb(0 0 0 / 0.1),
      0 2px 4px -2px rgb(0 0 0 / 0.1),
      var(--tw-ring-offset-shadow),
      var(--tw-ring-shadow),
      var(--tw-shadow, 0 0 #0000);

    padding: 1rem;
    border-radius: 0.5rem;

    &:nth-of-type(1) {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.75rem;

      text-align: center;

      & > h1 {
        font-size: 1.5rem;
        line-height: 1.75rem;
      }

      & > button {
        background-color: var(--color-cyan-600);
        border-radius: var(--rounded-md);
        padding: 0.375rem 0.625rem;
        font-weight: 600;
        color: white;
        box-shadow: var(--shadow-sm);
        transition: 250ms;

        &:hover {
          background-color: var(--color-cyan-500);
        }
      }
    }

    &:nth-of-type(2) {
      & > h3 {
        font-weight: 500;
        font-size: 0.8rem;
      }

      & > form {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin-top: 1rem;

        & > div {
          & > label {
            display: block;
            font-size: 0.875rem;
            line-height: 1.5rem;
            font-weight: 500;
            color: var(--color-gray-900);
          }

          & > div {
            margin-top: 0.25rem;

            & > input {
              display: block;
              width: 100%;
              border-radius: var(--rounded-md);
              border: 0;
              padding: 0.375rem 0.5rem;
              color: var(--color-gray-900);
              box-shadow:
                inset 0 0 0 1px var(--color-gray-300),
                var(--shadow-sm);

              &:focus {
                box-shadow: inset 0 0 0 2px var(--color-cyan-500);
                outline: none;
              }

              &::placeholder {
                color: var(--color-gray-400);
              }

              @media (min-width: 640px) {
                font-size: 0.875rem;
                line-height: 1.5rem;
              }
            }
          }
        }

        & > button {
          background-image: linear-gradient(
            to right,
            var(--color-cyan-500) 0%,
            var(--color-indigo-500) 51%,
            var(--color-cyan-500) 100%
          );
          border-radius: var(--rounded-md);
          background-size: 200% auto;
          padding: 0.375rem 0.625rem;
          font-weight: 600;
          color: white;
          box-shadow: var(--shadow-sm);
          transition: 500ms;

          &:hover {
            background-position: right center;
          }
        }
      }
    }

    &:nth-of-type(3) {
      display: grid;
      gap: 0.5rem;

      @media (min-width: 768px) {
        grid-column: 1/3;
        grid-template: 1fr / repeat(5, 1fr);
      }

      & > div {
        display: none;
        @media (min-width: 768px) {
          display: block;
        }
      }

      & > img {
        border-radius: 0.25rem;
        object-fit: cover;
        transition: transform 250ms ease-in-out;

        /*
         * hi TA! i wrote keyframes for this animation but they looked way worse than
         * just doing it with a transform (firefox bug?) so i did it with a transform
         * sorry!!
         */
        &:hover {
          transform: scale(1.05);
        }

        @media (min-width: 768px) {
          height: 100%;
          width: 100%;
          aspect-ratio: 1/1;
        }
      }
    }
  }
}

footer {
  margin-top: auto;
  padding: 1rem 2rem;
  background-color: var(--color-gray-800);
  color: white;
  text-align: center;
}