/************ MOBILE - 360PX *************/
/*****************************************/
@media only screen and (min-width: 0em) {
    /************** BANNER *******************/
    /*****************************************/
    #banner {
        /* 175px - 260px top */
        padding: clamp(10.9375rem, 20vw, 16.25rem) 1rem clamp(6.25rem, 14vw, 12vw);
        /* clips svg wave from causing overflow issues */
        overflow: hidden;
        position: relative;
        z-index: 1;
      }
      #banner .container {
        text-align: center;
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-direction: column;
        gap: 1rem;
      }
      #banner .int-title {
        /* 39px - 61px */
        font-size: clamp(2.4375rem, 6.4vw, 3.8125rem);
        font-weight: 900;
        line-height: 1.2em;
        text-align: inherit;
        padding: 1.25rem;
        color: var(--textLight);
        position: relative;
      }
      #banner .background {
        width: 100%;
        height: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
      }
      #banner .background:before {
        /* background color overlay */
        content: "";
        position: absolute;
        display: block;
        height: 100%;
        width: 100%;
        background: var(--primaryDark);
        opacity: 1;
        top: 0;
        left: 0;
        z-index: 1;
      }
      #banner .wave {
        /* we're stretching the svg wider than the viewport so it's taller and has more of a presence */
        width: 48rem;
        height: auto;
        display: block;
        position: absolute;
        left: 50%;
        bottom: -1px;
        transform: translateX(-50%);
        z-index: -1;
      }

    /**************  BLOG ********************/
    /*****************************************/
    #article {
        background-color: var(--primaryLight);
        margin-top: 3rem;
        padding: 1rem;
        position: relative;
    }
    #article .blog-container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        /* 48px - 64px */
        gap: 2.5rem;
        box-sizing: border-box;
        position: relative;
        z-index: 1;
    }
    #article .main-content {
        padding: 0.5rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        row-gap: 3.125em;
    }
    #article .blog-article {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
    }
    #article .blog-content {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    #article .blog-mainImage {
        width: 100%;
        height: 22rem;
        overflow: hidden;
        display: block;
        border-radius: 1.25rem;
    }
    #article .blog-mainImage img {
        width: 100%;
        height: 100%;
        object-fit: cover;       /* Fills space without stretching */
        object-position: center; /* Keeps subject centered */
        display: block;
    }
    #article .blog-authorGroup {
        /* font-size: clamp(0.5rem, 1vw, 1rem); */
        display: flex;
        /* justify-content: center; */
        gap: 0.75rem;
        align-items: center;
    }
    #article .blog-authorImage {
        width: 4rem;
        height: 4rem;
    }
    #article .blog-articleTitle {
        color: var(--primaryDark);
        font-size: 1.75rem;
    }
    #article .blog-description {
        color: rgb(53, 53, 53);
    }
    #article .blog-header {
        font-size: 1.5rem;
        width: 100%;
        height: auto;
        display: block;
        text-align: center;
        position: relative;
        margin-bottom: 1rem;
    }
    #article .blog-header::after {
        /* This all controls the divider line under blog-header */
        content: "";
        display: block;
        width: 7rem;
        height: 4px;
        margin: 0.5rem auto 0; /* space above */
        background-color: var(--accentColor);
        border-radius: 2px;
    }
    #article .blog-link {
        z-index: 1;
        position: relative;
        display: inline-block;
        border-radius: 0.25rem;
        margin: auto;
        background-color: var(--accentColor);
        min-width: 9.375rem;
        box-sizing: border-box;
        padding: 0 1.5rem;
        text-decoration: none;
        font-size: 1rem;
        line-height: clamp(2.875em, 5.5vw, 3.5em);
        font-weight: 700;
        color: #fff;
        transition: color 0.3s;
        text-align: center;
    }
    #article .blog-featuredGroup {
        padding: 0.75rem;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 1rem;
        border: 1px solid rgba(211, 211, 211, 0.849);
    }
    #article .blog-feature {
        width: 100%;
        height: auto;
        display: flex;
        padding: 1.5rem 0;
        justify-content: flex-start;
        border-bottom: 1px solid rgb(235, 235, 235);
        align-items: center;
        text-decoration: none;
        gap: 2rem;

    }
    #article .blog-featureImage {
        margin: 0;
        padding: 0;
       /*  This keeps the container square always */
       width: clamp(4.5rem, 5vw, 6.75rem);
        aspect-ratio: 1/1;
        position: relative;
        overflow: hidden;
        display: block;
        border-radius: 50%;
        /* This prevents shrinking in flexbox */
        flex-shrink: 0;
        cursor: pointer;
    }
    #article .blog-featureImage img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
    }
    #article .feature-h3 {
        color: var(--primaryDark);
        font-size: 1.1rem;
    }
    #article .feature-date {
        color: var(--accentColor);
    }
    #article .button {
        margin: 3rem;
        padding: 0 3rem;
        line-height: 3.5rem;
        text-decoration: none;
        font-weight: 700;
        overflow: hidden;
        color: #fff;
        border-radius: 1.875rem;
        background-color: var(--accentColor);
        display: inline-block;
        position: relative;
        z-index: 1;
        display: flex;
        justify-content: center;
        justify-self: center;
        transition: color 0.3s;
        font-size: 0.85rem;
        max-width: 13.37rem;
    }
}

/************ TABLET - 768PX *************/
/*****************************************/
@media only screen and (min-width: 48rem) {
    /*************** BANNER ******************/
    /*****************************************/
    #banner .wave {
        width: 100%;
        left: 0;
        transform: none;
    }
}


/************ DESKTOP - 1024PX ***********/
/*****************************************/
@media only screen and (min-width: 64rem) {
    /************** BANNER *******************/
    /*****************************************/
    #banner .int-title{
        padding: clamp(2.75rem, 25vw ,3rem);
    }
    /***************** BLOG ******************/
    /*****************************************/
    #article .blog-container {
        flex-direction: row;
        gap: 2rem;
    }
    #article .main-content {
        flex: 3;
    }
    #article .blog-sidebar {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    #article .blog-featuredGroup {
        width: 100%;
    }
    
}

/************** DARK MODE ****************/
/*****************************************/
@media only screen and (min-width: 0em) {
    body.dark-mode #article {
        background-color: var(--dark);
    }
    body.dark-mode #article .blog-articleTitle,
    body.dark-mode #article .blog-author,
    body.dark-mode #article .blog-date,
    body.dark-mode #article .feature-h3,
    body.dark-mode #article .blog-header,
    body.dark-mode #article .feature-date {
        color: var(--textLight);
    }
    body.dark-mode #article .blog-authorImage img {
        filter: grayscale(2) brightness(100);
    }
    body.dark-mode #article .blog-mainImage,
    body.dark-mode #article .blog-featureImage {
        opacity: 0.8;
    }
}