/************* PORTFOLIO  ****************/
/*****************************************/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #portfolio {
    overflow: hidden;
    position: relative;
    z-index: 1;
    padding: var(--sectionPadding);
    background-color:  var(--primaryLight);
  }
  #portfolio .container {
    width: 100%;
    /* changes to 1440px on desktop */
    max-width: 43.75rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #portfolio .flex {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #portfolio .topper {
    color: var(--textBlack);
    margin-bottom: 1.25rem;
  }
  #portfolio .title {
    max-width: 30ch;
    color: var(--textBlack);
    margin-bottom: 1rem;
  }
  #portfolio .overview {
    margin-bottom: 1rem;
  }
  #portfolio .text {
    color: var(--textBlack);
  }
  #portfolio .content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #portfolio .card-group {
    /* max-width: fit-content; */
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    gap: 1.25rem;
    width: 100%;
  }
  #portfolio .item {
    flex: 1 1 250px;
    max-width: 31.25rem;
    display: flex;
    align-items: stretch;
    background-color: var(--lightGray);
    padding: 0.75rem;
    border-radius: 1rem;
    border: 4px solid var(--textBlack);
    transition: background-color 0.3s ease, border-color 0.3s ease;
  }
  #portfolio .link {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    text-decoration: none;
  }
  #portfolio .picture,
  #portfolio .link h3,
  #portfolio .description{
    flex: 0 0 auto;
  }
  #portfolio .link h3 {
    color: var(--textBlack);
    font-size: 1.5rem;
    font-style: italic;
    margin-bottom: 0.5rem;
    text-wrap: nowrap;
  }
  #portfolio .description {
    margin: 0.75rem;
    line-height: 1.4;
    /* Keeps the buttons aligned at the bottom regardless of how text shifts. Change 4 to however many lines that need to be reserved */
    min-height: calc(1.4em * 4);

    /* Clamp to N lines, will cut text */
    /* display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: visible; */
  }
  #portfolio .button {
    margin-bottom: auto;
    display: inline-flex;
    justify-content: center;
    align-self: center;
    font-size: 1.25rem;
    line-height: 3.5rem;
    text-decoration: none;
    font-weight: 700;
    overflow: hidden;
    margin: 0;
    color: #fff;
    padding: 0.5rem 2rem;
    border-radius: 1.875rem;
    background-color: var(--accentColor);
    transition: background-color ease 0.3s;
  }
  #portfolio .item:hover {
    background-color: white;
    border-color: var(--lightAccentColor);
  }
  #portfolio .item:hover .button {
    background-color: var(--lightAccentColor);
  }
  #portfolio .picture {
    width: 100%;
    aspect-ratio: 12 / 9;
    overflow: hidden;
  }
  #portfolio .picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

}
/* Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
    #portfolio .container {
    max-width: 100rem;
    }
    #portfolio .card-group {
        flex-direction: row;
        justify-content: center;
    }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode #portfolio {
        background-color: var(--dark);
    }
    body.dark-mode #portfolio .title,
    body.dark-mode #portfolio h3,
    body.dark-mode #portfolio .text {
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode #portfolio .topper {
        color: var(--darkModeAccent);
    }
    body.dark-mode #portfolio .item {
        background: var(--medium);
        border-color: var(--darkModeAccent);
    }
    body.dark-mode #portfolio .item:hover {
        border-color: var(--lightAccentColor);
        background-color: var(--accent);
    }
    body.dark-mode #portfolio .item:hover .button {
        background-color: var(--lightAccentColor);
    }
}

/************* CUSTOM WORK ***************/
/*****************************************/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #custom-work {
        padding: var(--sectionPadding);
    }
    #custom-work .container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #custom-work .content {
        /* set text align to left if content needs to be left aligned */
        text-align: center;
        width: 100%;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: center;
    }

    #custom-work .card-group {
        width: 100%;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        /* 16px - 20px */
        gap: clamp(1rem, 1.6vw, 1.25rem);
    }
    #custom-work .item {
        list-style: none;
        width: 100%;
        max-width: 31.25rem;
        border-radius: 0.5rem;
        position: relative;
        z-index: 1;
        transition:
            box-shadow 0.3s,
            transform 0.3s;
    }
    #custom-work .item:hover {
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
        transform: translateY(-0.4375rem);
    }
    #custom-work .item:hover .picture img {
        opacity: 0.3;
        transform: scale(1.1);
    }
    #custom-work .item:hover .h3 {
        color: var(--primaryLight);
    }
    #custom-work .item:before {
        /* border, done in pseudo so it can sit under the picture */
        content: "";
        width: 100%;
        height: 100%;
        border-radius: 0.5rem;
        border: 1px solid #e8e8e8;
        /* prevents border from affecting height and width */
        box-sizing: border-box;
        background: transparent;
        opacity: 1;
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        z-index: -1;
    }
    #custom-work .link {
        text-decoration: none;
        /* 16px - 24px */
        padding-bottom: clamp(1rem, 2.2vw, 1.5rem);
        display: block;
    }
    #custom-work .picture {
        width: 100%;
        height: 15rem;
        /* 16px - 24px */
        margin-bottom: clamp(1rem, 2.2vw, 1.5rem);
        border-radius: 0.5rem 0.5rem 0 0;
        background-color: var(--primaryLight);
        /* clips the img tag corners */
        overflow: hidden;
        display: block;
        position: relative;
        z-index: 10;
    }
    #custom-work .picture img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
        transition:
            transform 0.6s,
            opacity 0.3s;
    }
    #custom-work .h3 {
        /* 20px - 25px */
        font-size: clamp(1.25rem, 3vw, 1.5625rem);
        line-height: 1.2em;
        font-weight: 700;
        color: var(--headerColor);
        margin: 0 0 0.75rem 0;
        /* 16px - 24px */
        padding: 0 clamp(1rem, 2vw, 1.5rem);
        transition: color 0.3s;
    }
    #custom-work .item-text {
        /* 14px - 16px  */
        font-size: clamp(0.875rem, 1.5vw, 1rem);
        line-height: 1.5em;
        color: var(--bodyTextColor);
        margin: 0;
        /* 16px - 24px */
        padding: 0 clamp(1rem, 2.2vw, 1.5rem);
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #custom-work .card-group {
        flex-direction: row;
    }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode #custom-work .topper {
        color: var(--primaryLight);
    }
    body.dark-mode #custom-work .title,
    body.dark-mode #custom-work .text,
    body.dark-mode #custom-work .h3,
    body.dark-mode #custom-work .item-text {
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode #custom-work .item:before {
        opacity: 0.3;
    }
}

/************* WHY CHOOSE US *************/
/*****************************************/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #why-choose {
        padding: var(--sectionPadding);
        background-color: #fafbfc;
    }
    #why-choose .container {
        width: 100%;
        /* changes to 1280px on tablet */
        max-width: 34.375rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #why-choose .content {
        /* set text align to left if content needs to be left aligned */
        text-align: left;
        width: 100%;
        max-width: 39rem;
        margin-right: auto;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: flex-start;
    }
    #why-choose .topper {
        font-size: var(--topperFontSize);
        line-height: 1.2em;
        text-transform: uppercase;
        text-align: center;
        letter-spacing: 0.1em;
        margin-bottom: 0.25rem;
        display: block;
    }
    #why-choose .title {
        font-size: var(--headerFontSize);
        font-weight: 900;
        line-height: 1.2em;
        text-align: inherit;
        max-width: 43.75rem;
        margin: 0 0 1rem 0;
        color: var(--headerColor);
        position: relative;
    }
    #why-choose .text {
        font-size: var(--bodyFontSize);
        line-height: 1.5em;
        text-align: inherit;
        width: 100%;
        max-width: 40.625rem;
        margin: 0;
        color: var(--bodyTextColor);
    }
    #why-choose .text {
        margin-bottom: 1rem;
    }
    #why-choose .text:last-of-type {
        margin-bottom: 2rem;
    }
    #why-choose .card-group {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 1.25rem;
    }
    #why-choose .item {
        text-align: left;
        list-style: none;
        width: 100%;
        /* 32px - 44px top & bottom, 24px - 32px left & right */
        padding: clamp(2rem, 4vw, 2.75rem) clamp(1.5rem, 4vw, 2rem);
        margin: 0;
        border-radius: 0.3125rem;
        border: 2px solid #c1c0c7;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
        /* 16px - 32px */
        column-gap: clamp(1rem, 2vw, 2rem);
        /* 24px - 28px */
        row-gap: clamp(1.5rem, 1.5vw, 1.75rem);
        /* prevents padding from adding to height and width */
        box-sizing: border-box;
    }
    #why-choose .icon {
        /* 70px - 80px */
        width: clamp(4.375rem, 7vw, 5rem);
        height: auto;
        margin: 0;
        display: block;
    }
    #why-choose .h3 {
        /* 25px - 31px */
        font-size: clamp(1.5625rem, 2vw, 1.9375rem);
        line-height: 1.2em;
        font-weight: 750;
        text-align: inherit;
        width: 55%;
        margin: 0;
        color: var(--headerColor);
        word-wrap: normal;
        
    }
    #why-choose .item-text {
        font-size: 1rem;
        line-height: 1.5em;
        text-align: inherit;
        width: 100%;
        margin: auto 0 0 0;
        color: var(--bodyTextColor);
    }
    #why-choose .button-solid {
        display: none;
    }
    #why-choose .mobile-button {
        display: inline-block;
    }
    
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #why-choose .container {
        max-width: 80rem;
    }
    #why-choose .content {
        width: 70%;
    }
    #why-choose .card-group {
        /* switch to grid since there's no chance of adding or removing cards in this design.  We can be more set and rigid in our layout of this section and use grid for better spacing */
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
        /* if different boxes are different heights, this makes them all the same height so the grid is always even */
        align-items: stretch;
    }
    #why-choose .item {
        grid-column: span 1;
    }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #why-choose .container {
        flex-direction: row;
        justify-content: space-between;
    }
    #why-choose .card-group {
        width: 60%;
        max-width: 47.375rem;
        /* prevents flexbox from squishing it */
        flex: none;
    }
    #why-choose .button-solid {
        display: inline-block;
    }
    #why-choose .mobile-button {
        display: none;
    }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode #why-choose {
        background-color: var(--Dark);
    }
    body.dark-mode #why-choose .title,
    body.dark-mode #why-choose .text,
    body.dark-mode #why-choose .h3,
    body.dark-mode #why-choose .item-text {
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode #why-choose .icon {
        filter: invert(1) brightness(2);
    }
    body.dark-mode #why-choose .item {
        background-color: var(--heroBG);
    }
    body.dark-mode #why-choose .button-solid {
        background-color: var(--accentColor);
    }
}