/*
db      d888888b d8b   db db   dD d88888b d8888b. d888888b d8b   db      d8888b.  .d88b.  .d8888. d888888b .d8888. 
88        `88'   888o  88 88 ,8P' 88'     88  `8D   `88'   888o  88      88  `8D .8P  Y8. 88'  YP `~~88~~' 88'  YP 
88         88    88V8o 88 88,8P   88ooooo 88   88    88    88V8o 88      88oodD' 88    88 `8bo.      88    `8bo.   
88         88    88 V8o88 88`8b   88~~~~~ 88   88    88    88 V8o88      88~~~   88    88   `Y8b.    88      `Y8b. 
88booo.   .88.   88  V888 88 `88. 88.     88  .8D   .88.   88  V888      88      `8b  d8' db   8D    88    db   8D 
Y88888P Y888888P VP   V8P YP   YD Y88888P Y8888D' Y888888P VP   V8P      88       `Y88P'  `8888Y'    YP    `8888Y' 
*/

section#linkedin {
  padding: 2rem;
  justify-items: center;

  h2 { /* Special headers for the contact site */
    margin-bottom: 2rem;

    font-family: var(--monospace-font);
    font-size: 2rem;
  }

  .linkedin-profile-image {
    width: 180px;
    max-width: 100%;
    margin: 0 auto 2rem;

    img {
      width: 100%;
      display: block;

      /* Fade to transparent at the bottom */
      -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
      mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-size: 100% 100%;
      mask-size: 100% 100%;
    }
  }

  p {
    margin-bottom: 1rem;
    opacity: .85;
  }

  .cta {
    margin-top: 1.5rem;
    margin-bottom: 5rem;

    @media (max-width: 768px) {
      width: min-content;

      font-size: 0.9rem;
      text-align: right;

      .icon-push {
        width: 2.5rem;
        height: 2rem;
      }
    }
  }

  .linkedin-embeds {
    margin: 0 auto;
    margin-left: calc(50% - 45vw); /* Centered breakout to cover 90vw */
    margin-right: calc(50% - 45vw);
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;

    justify-content: center;

    iframe {
      flex: 1 1 100px;
      min-width: 350px;
      max-width: 350px;
      height: fit-content;
      position: relative;
      overflow: hidden;

      aspect-ratio: 4 / 5;
      border-radius: 20px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.15);

      transition: transform 0.6s ease;

      @media (max-width: 768px) {
        max-width: 100%;  /* never overflow container */
        min-width: 220px;
      }

      &:hover {
        transform: scale(1.05);
      }
    }
  }
}


/*
 .o88b.  .d88b.  d8b   db d888888b  .d8b.   .o88b. d888888b      d88888b  .d88b.  d8888b. .88b  d88. 
d8P  Y8 .8P  Y8. 888o  88 `~~88~~' d8' `8b d8P  Y8 `~~88~~'      88'     .8P  Y8. 88  `8D 88'YbdP`88 
8P      88    88 88V8o 88    88    88ooo88 8P         88         88ooo   88    88 88oobY' 88  88  88 
8b      88    88 88 V8o88    88    88~~~88 8b         88         88~~~   88    88 88`8b   88  88  88 
Y8b  d8 `8b  d8' 88  V888    88    88   88 Y8b  d8    88         88      `8b  d8' 88 `88. 88  88  88 
 `Y88P'  `Y88P'  VP   V8P    YP    YP   YP  `Y88P'    YP         YP       `Y88P'  88   YD YP  YP  YP 
*/

section#form {
  margin: 0 auto 2rem;
  padding: 2rem;

  justify-items: center;

  h2 { /* Special headers for the contact site */
    margin-bottom: 2rem;

    font-family: var(--monospace-font);
    font-size: 2rem;
  }

  .contact-intro {
    margin-bottom: 1rem;
    opacity: .85;
  }

  .contact-form-image {
    width: 200px;
    max-width: 100%;
    margin: 0 auto 2rem;

    border-radius: 50%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);

    overflow: hidden;

    img {
      width: 100%;
      display: block;
    }
  }

  p#form-error {
    margin: -2rem auto 1rem;
    display: none;

    color: red;
  }

  .contact-form {
    display: grid;
    gap: 1.2rem;
    width: 100%;
    max-width: 640px;
    min-width: 0;

    label {
      font-weight: 600;
    }

    input,
    select,
    textarea {
      padding: .6rem .7rem;
      width: 100%;
      max-width: 100%;
      min-width: 0;

      font-size: 1rem;

      border-radius: 6px;
      border: 1px solid #ccc;
    }

    textarea {
      resize: vertical;
    }

    button {
      margin-top: -.1rem;
      width: max-content;
      max-width: 100%;
      justify-self: center;
      border: none;
    }
  }

  .required-info {
    margin-top: -0.5rem;
    opacity: 0.7;
    justify-self: end;

    font-size: 0.85rem;
  }
}


/*
d888888b db   db  .d8b.  d8b   db db   dD      db    db  .d88b.  db    db 
`~~88~~' 88   88 d8' `8b 888o  88 88 ,8P'      `8b  d8' .8P  Y8. 88    88 
   88    88ooo88 88ooo88 88V8o 88 88,8P         `8bd8'  88    88 88    88 
   88    88~~~88 88~~~88 88 V8o88 88`8b           88    88    88 88    88 
   88    88   88 88   88 88  V888 88 `88.         88    `8b  d8' 88b  d88 
   YP    YP   YP YP   YP VP   V8P YP   YD         YP     `Y88P'  ~Y8888P' 
*/

section#thankyoumsg {
  margin: 2rem auto;
  padding: 2rem;
  min-height: 80vh;
  display: none; /* hidden by default */
  opacity: 0;
  transition: opacity 0.5s ease;

  text-align: center;

  justify-items: center;

  .lucide {
    margin-top: 100%;
    margin-bottom: 1rem;

    color: color-mix(in srgb, green 70%, transparent);
    font-size: 3rem;
  }

  h1 {
    margin-bottom: 2rem;
  }

  .thankyou-image {
    width: min(400px, 100%);
    max-width: 100%;
    margin: 0 auto 2rem;

    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);

    overflow: hidden;

    img {
      width: 100%;
      display: block;
    }
  }

  p {
    margin-bottom: 2.5rem;
    opacity: .85;
  }

  .btn-container {
    margin: 3% .5rem 5%;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;

    justify-content: center;

    .simple-btn {
      display: inline-block;
      padding: .5rem 1rem;

      font-size: 1rem;
      font-family: var(--monospace-font);

      box-shadow:
        0 5px 15px rgba(0, 0, 0, 0.1);

      &.linkedin-btn {
        color: #fff;

        background-color: #0077B5;
        border: none;

        &:hover {
          background-color: #005582;
        }
      }
    }
  }
  .linkedin-embeds {
    margin: 0 auto;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;

    justify-content: center;

    iframe {
      flex: 1 1 300px;
      max-height: 400px;
      position: relative;
      overflow: hidden;
      transition: transform 0.6s ease;

      aspect-ratio: 4 / 5;
      border-radius: 20px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.15);

      @media (max-width: 768px) {
        max-width: 100%;  /* never overflow container */
        min-width: 220px;
      }

      &:hover {
        transform: scale(1.05);
      }
    }
  }
}