/*
db   db d88888b d8888b.  .d88b.  
88   88 88'     88  `8D .8P  Y8. 
88ooo88 88ooooo 88oobY' 88    88 
88~~~88 88~~~~~ 88`8b   88    88 
88   88 88.     88 `88. `8b  d8' 
YP   YP Y88888P 88   YD  `Y88P'  
*/

section#hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  position: relative;

  justify-items: center;

  .hero-background {
    grid-area: 1 / 1; /* spans entire grid */
    justify-self: start;
    margin-right: 40%;
    height: 100%;

    @media (max-width: 768px) { /* on mobile, center background below logo */
      margin-right: 0px;
      margin-top: 7rem;  /* about the size of the logo */
    }

    .hero-image {
      &::before {
        content: "";
        inset: 0;
        position: absolute;
        max-width: 100%;

        background: linear-gradient(
          90deg,
          color-mix(in srgb, var(--primary-bg-color) 0%, transparent),
          color-mix(in srgb, var(--primary-bg-color) 0%, transparent),
          color-mix(in srgb, var(--primary-bg-color) 0%, transparent),
          color-mix(in srgb, var(--primary-bg-color) 50%, transparent),
          color-mix(in srgb, var(--primary-bg-color) 100%, transparent),
          color-mix(in srgb, var(--primary-bg-color) 100%, transparent),
          color-mix(in srgb, var(--primary-bg-color) 100%, transparent),
          color-mix(in srgb, var(--primary-bg-color) 100%, transparent)
        );

        @media (max-width: 768px) {
          background: linear-gradient(
            180deg, /* Only change here: vertical on mobile */
            color-mix(in srgb, var(--primary-bg-color) 0%, transparent),
            color-mix(in srgb, var(--primary-bg-color) 0%, transparent),
            color-mix(in srgb, var(--primary-bg-color) 0%, transparent),
            color-mix(in srgb, var(--primary-bg-color) 60%, transparent),
            color-mix(in srgb, var(--primary-bg-color) 90%, transparent),
            color-mix(in srgb, var(--primary-bg-color) 100%, transparent),
            color-mix(in srgb, var(--primary-bg-color) 100%, transparent),
            color-mix(in srgb, var(--primary-bg-color) 100%, transparent),
            color-mix(in srgb, var(--primary-bg-color) 100%, transparent),
            color-mix(in srgb, var(--primary-bg-color) 100%, transparent)
          );
        }
      }

      img { /* Hero background image */
        width: 100%;
        height: min(80vh, 800px); /* Limit height to 80% of viewport or 800px */
        object-fit: cover;
        display: block;

        @media (max-width: 768px) { /* on mobile, make image full width */
          width: 100vw;
          height: auto;
        }
      }
    }
  }

  .hero-overlay {
    position: relative;
    grid-area: 1 / 1; /* spans entire grid */
    z-index: 1; /* above background image */
    margin-left: 40%; /* push content to right of background image */

    @media (max-width: 768px) { /* on mobile, center content */
      margin: 0;
    }

    .hero-content {
      h1 {
        margin-top: .3em; /* space below logo */
        margin-bottom: 1.5rem;

        text-align: left;

        @media (max-width: 768px) { /* on mobile, center h1 */
          text-align: center;
        }
      }

      .logo {
        @media (max-width: 768px) { /* on mobile, reduce logo size and add spacing */
          margin-bottom: 40vh;
          justify-self: center;
        }

        img {
          height: 6em; /* This is balanced to look good with the hero <h1> text */
          aspect-ratio: 1 / 1;
        }
      }

      .selling-points {
        margin-bottom: 2rem;

        font-weight: 600;

        @media (max-width: 768px) { /* on mobile, center selling points */
          padding: .5rem 0;
        }

        .keyword {
          padding: .2rem 1rem;
          margin: 0 20% 1rem 5%;
          width: 70%;
          justify-self: left;

          font-family: var(--monospace-font);
          text-align: left;

          border: 2px solid #ffffff00; /* transparent border for alignment */
          transition: all 0.3s ease;

          cursor: pointer;

          @media (max-width: 768px) { /* on mobile, center keywords and use hyphens between syllables */
            width: 100%;
            margin: .5rem 0;
            justify-self: center;

            text-align: center;
            hyphens: manual;
          }

          &:hover { /* hover state */
            transform: scale(1.05);
          }

          &.active { /* highlighted state */
            transform: scale(1.05);

            border-radius: 999px;
            border: 2px solid color-mix(in srgb, var(--primary-accent-color) 70%, transparent);
            box-shadow:
              0 5px 15px rgba(0, 0, 0, 0.1);
          }
        }
      }

      .info-box {
        p {
          text-align: justify;

          @media (max-width: 768px) {
            text-align: center;
          }
        }
      }

      .btn-container {
        justify-content: left;

        @media (max-width: 768px) {
          margin-bottom: 3rem;
          justify-content: center;
        }

        .cta {
          margin-top: 1.5rem;

          @media (max-width: 768px) { /* on mobile, adjust cta button */
            width: min-content;

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

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


/*
db    db  .d8b.  db      db    db d88888b        d8888b. d8888b.  .d88b.  d8888b. 
88    88 d8' `8b 88      88    88 88'            88  `8D 88  `8D .8P  Y8. 88  `8D 
Y8    8P 88ooo88 88      88    88 88ooooo        88oodD' 88oobY' 88    88 88oodD' 
`8b  d8' 88~~~88 88      88    88 88~~~~~ C8888D 88~~~   88`8b   88    88 88~~~   
 `8bd8'  88   88 88booo. 88b  d88 88.            88      88 `88. `8b  d8' 88      
   YP    YP   YP Y88888P ~Y8888P' Y88888P        88      88   YD  `Y88P'  88      
*/

section#value-proposition {
  .value-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;

    align-items: start;

    @media (max-width: 768px) { /* single column on mobile */
      grid-template-columns: 1fr;
    }

    .value-item {
      display: grid;
      grid-template-rows: auto 1fr auto;

      hr { /* underline below header */
        width: 30%;
        margin: .1rem auto;
        height: 2px;

        background: var(--primary-accent-color);
      }

      .value-header {
        display: flex;
        height: 3rem;
        justify-content: center;

        h3 {
          margin-bottom: 0.75rem;
          align-self: flex-end;
        }
      }
    }
  }
}


/*
.d8888. d88888b d8888b. db    db d888888b  .o88b. d88888b .d8888. 
88'  YP 88'     88  `8D 88    88   `88'   d8P  Y8 88'     88'  YP 
`8bo.   88ooooo 88oobY' Y8    8P    88    8P      88ooooo `8bo.   
  `Y8b. 88~~~~~ 88`8b   `8b  d8'    88    8b      88~~~~~   `Y8b. 
db   8D 88.     88 `88.  `8bd8'    .88.   Y8b  d8 88.     db   8D 
`8888Y' Y88888P 88   YD    YP    Y888888P  `Y88P' Y88888P `8888Y' 
*/

section#services {
  max-width: 100%;

  .card-panel {
    display: flex;
    margin: 0 auto;
    gap: 1rem;
    flex-wrap: wrap;

    justify-content: center;

    .card {
      flex: 0 1 220px;
      aspect-ratio: 4 / 5;
      position: relative;

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

      overflow: hidden;

      @media (max-width: 768px) { /* on mobile, adjust size */
        max-height: 160px;
        min-width: 220px;
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.6s ease;
      }

      h3 {
        margin-bottom: 1rem;

        font-size: 1.2rem;
        color: #fff;
      }

      .card-overlay {
        padding: 1.5rem;
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;

        justify-content: flex-end;
        align-items: center;

        background: linear-gradient(
          to top,
          rgba(0,0,0,0.55),
          rgba(0,0,0,0.05)
        );
      }

      &:hover {
        img {
          transform: scale(1.1);
        }
      }
    }
  }
}


/*
db   d8b   db  .d88b.  d8888b. db   dD d88888b db       .d88b.  db   d8b   db 
88   I8I   88 .8P  Y8. 88  `8D 88 ,8P' 88'     88      .8P  Y8. 88   I8I   88 
88   I8I   88 88    88 88oobY' 88,8P   88ooo   88      88    88 88   I8I   88 
Y8   I8I   88 88    88 88`8b   88`8b   88~~~   88      88    88 Y8   I8I   88 
`8b d8'8b d8' `8b  d8' 88 `88. 88 `88. 88      88booo. `8b  d8' `8b d8'8b d8' 
 `8b8' `8d8'   `Y88P'  88   YD YP   YD YP      Y88888P  `Y88P'   `8b8' `8d8'  
*/

section#workflow {
  text-align: center;

  h2 {
    margin-top: 4rem;
    margin-bottom: 2.5rem;
  }
  
  .workflow-image {
    width: 200px;
    margin-bottom: 3.5rem;
    border-radius: 7%;
    overflow: hidden;
    justify-self: center;

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

  .workflow-step {
    h3 {
      font-family: var(--monospace-font);
    }

    .lucide {
      font-size: 1.5rem;
    }
  }
}


/*
 .d8b.  d8888b.  .d88b.  db    db d888888b      .88b  d88. d88888b 
d8' `8b 88  `8D .8P  Y8. 88    88 `~~88~~'      88'YbdP`88 88'     
88ooo88 88oooY' 88    88 88    88    88         88  88  88 88ooooo 
88~~~88 88~~~b. 88    88 88    88    88         88  88  88 88~~~~~ 
88   88 88   8D `8b  d8' 88b  d88    88         88  88  88 88.     
YP   YP Y8888P'  `Y88P'  ~Y8888P'    YP         YP  YP  YP Y88888P 
*/

section#about-me {
  max-width: 100%;

  .about-me-content {
    max-width: 900px;
    margin: 0 auto;

    .btn-container {
      width: 100%;
      text-align: center;

      .simple-btn {
        display: inline-block;
        margin-top: 2rem;
        padding: 0.3rem 1.2rem;

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

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

  .about-me-image {
    width: 300px;
    max-width: 100%;
    margin: 0 auto 2rem;

    /*Fade out towards bottom*/
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0));
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0));

    float: left;
    shape-outside: rectangle();

    @media (max-width: 768px) { /* center image on mobile, no float */
      margin: 0 auto 2rem;

      float: none;
      shape-outside: none;
      clip-path: none;
    }

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

  .about-me-text {
    p {
      margin-bottom: 1rem;

      line-height: 1.6;
      text-align: justify;
    }
  }

  .simple-btn {
    margin-top: 1rem !important;
    padding: .5rem 1.5rem !important;
    width: min-content;

    font-size: .9rem !important;
  }

  .cta {
    margin-top: 1.5rem;

    @media (max-width: 768px) { /* on mobile, adjust cta button */
      width: min-content;

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

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