:root {
     --baptist-green: #2ea84a;
     --baptist-green-accessible: #018920;
     --baptist-mint: #7de69b;
     --nicklaus-teal: #0091b5;
     --nicklaus-pink: #d2126d;
     --fiu-blue: #081E3F;
     --fiu-bright-gold: #FFCC00
}


a.header-logo:before {
    content: "";
    display: block;
    width: 65px;
    height: 30px;
    position: absolute;
    background: url(https://digicdn.fiu.edu/core/_assets/images/logo-top.svg);
    background-size: cover;
    background-repeat: no-repeat;
    top: 3px;
}

a.header-logo span {
    padding-left: 5rem;
}


/* styles for homepage only */
#banner.home {
    background-color: #469dc2 !important;
    @media (max-width: 640px) {
        .border-bottom {
            display: none;
        }
        .banner-content {
            h1 {
                display: none;
            }
        }
    }
}

body:has(.banner-container.home) 
{
    h2.fiu-blue {
        font-size: 2rem;
        @media (min-width: 641px) {
            font-size: 3rem;
        }
        @media (min-width: 1025px) {
            font-size: 4rem;
        }
    }

    h2:not(.fiu-blue):not(.panel *) {
        text-align: center;
        @media (min-width: 1025px) {
            text-align: left;
        }
    }
    #nav {
        @media (min-width: 641px) {
            display: none;        
        }
    }
    
    .panel {
        border-radius: 0 !important;
        background-color: #FFF!important;
    }
    
    @media (min-width: 1025px) {
        .multimedia-bg .wrapper .panel {
            margin: 5rem 1.4rem 5rem;
            max-width: calc(90ch + 2rem);
            padding: 4rem 6rem;
        }
    }
    
    @media (min-width: 1025px) {
        .smaller-panel.multimedia-bg .wrapper .panel {
            max-width: calc(76ch + 2rem);
        }
    }
    
    .wrapper {
        min-height: 60rem !important;
    }

    @media (min-width: 1025px) {
        .module-giving.multimedia-bg .wrapper {
            max-width: 100% !important;            
        }
    } 
    
    .contain-row {
        max-width: var(--row-max-width) !important;
        margin: 0 auto !important;
    }
    
    .font-weight-100 {
        font-weight: 100 !important;
    }


    /* Faculty Spotlights */
    .faculty-spotlights {
        h2 {
            margin-top: 3rem;
        }
        .row.additional-content-before+.row {
            padding: 0;
            .columns {
                padding: 0;
            }
        }
        .row.additional-content-before {
            @media (max-width: 1024px){
                padding: 0;
            }
        }
            
    }
    
    .faculty-spotlights .thumbnail-grid {
        display: flex;
        gap: 1rem;
        flex-direction: column;

        @media (max-width: 1024px){
            max-width:40rem;
            margin:0 auto;
            padding:1rem;
        }
        @media (min-width: 1025px){
          gap: 2rem;
          flex-direction: row;
        }
        
        li {
            position: relative;
            padding:0 !important;
            overflow: hidden;
            width:100%;
            @media (min-width: 1025px){
                width:50%;     
            }
            
            &:hover img {
                transform: scale(1.02);
            }
        }
        
        img {
            object-fit: cover;
            margin:0;
            transition: ease 0.2s transform;
            aspect-ratio: 45 / 50;
            @media (min-width: 641px){
                aspect-ratio: 63 / 50;
            }
        }
        .content-wrapper {
            position: absolute;
            bottom: 0;
            z-index: 5;
            padding: 2rem;
            background: linear-gradient(180deg, rgba(21, 79, 165, 0.0) 0%, #081E3F 100%);
            color: white;
            width: 100%;
            a,p,span,h2,h3 {
                color: white !important;
            }
            p,h3 {
                margin-bottom: 0.6rem;
            }
        }
    }

    /* Alumni Profiles */
    .alumni-profiles .card-grid {
        display: flex;
        gap: 1rem;
        flex-direction: column; 

        @media (max-width: 1024px){
            max-width: 38rem;
            margin:0 auto;
        }
 
        @media (min-width: 1025px){
          flex-direction: row; 
        }
        
        li {
            position: relative;
            padding:0 !important;
            width:100%;
            box-shadow: 0 10px 37px 0 rgba(0, 0, 0, 0.15);
            transition: ease 0.2s box-shadow;
            background:white;
            
            @media (min-width: 1025px){
                width:33.3333%;border-radius: 0 !important;     
            }
            &:hover img {
                transform: scale(1.02);
            }
            &:hover  {
                box-shadow: 0 10px 37px 0 rgb(148 148 148) !important;
            }
            
            a {
                text-decoration: none !important;
            }
            p.name {
                color: #333;
            }
        }

        .grid-content {
            height: auto !important;
            padding: 0;
            border-radius: 0 !important;
            border:none;
        }
        
        .grid-content-image {
            margin: 0;
            overflow: hidden;
        }
        
        img {
            object-fit: cover;
            aspect-ratio: 41 / 43;
            margin:0;
            transition: ease 0.2s transform;
            border-radius: 0;
            width: 100%;
        }
        
        .grid-content-wrapper {
            position: relative;
            margin: 0;
            padding: 2rem;
            background: white;
        }
        
        .content-wrapper {
            position: absolute;
            bottom: 100%;              
            left: 0;
            right: 0;
            z-index: 5;
            padding: 2rem 2rem 1.25rem;
            display: flex;
            align-items: flex-end;    
            background: linear-gradient(180deg, rgba(21, 79, 165, 0.0) 0%, #081E3F 100%);
            color: white;
            a,p,span,h2,h3 {
                color: white !important;
            }
            h3 {
                margin: 0;
            }
            p {
                margin-bottom: 0.6rem;
            }
        }
    }
    
    
    .research-spotlights .thumbnail-grid {
        display: grid;
        gap: 1rem;
        grid-template-columns: 1fr;
        max-width: 78rem;
        margin: 0 auto;
        @media (max-width: 1024px){
             max-width: 38rem;
             margin:0 auto;
        }
        li {
            position: relative;
            padding: 0 !important;
            overflow: hidden;
            width: auto !important;
            aspect-ratio: 45 / 50;
            @media (min-width: 641px){
                aspect-ratio: 63 / 50;
            }

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

        @media (min-width: 1025px) {
            grid-template-columns: repeat(5, minmax(0, 1fr));
            grid-template-rows: 30rem 25rem 22rem;
            grid-template-areas:
                "top1 top1 top1 top2 top2"
                "tall tall side1 side1 side1"
                "tall tall side2 side2 side2";

            li {
                aspect-ratio: auto;
            }

            li:nth-child(1) { grid-area: top1; }
            li:nth-child(2) { grid-area: top2; }
            li:nth-child(3) { grid-area: tall; }
            li:nth-child(4) { grid-area: side1; }
            li:nth-child(5) { grid-area: side2; }
        }

        img {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            margin: 0;
            transition: ease 0.2s transform;
            object-position: 50% 0;

        }

        .content-wrapper {
            position: absolute;
            bottom: 0;
            z-index: 5;
            padding: 2rem;
            background: linear-gradient(180deg, rgba(21, 79, 165, 0.0) 0%, #081E3F 100%);
            color: white;
            width: 100%;
            a,p,span,h2,h3 {
                color: white !important;
            }
            p,h3 {
                margin-bottom: 0.6rem;
            }
        }
    }

}


.banner-flex.banner-container.home {
    .banner-logo {
        margin: 4rem 0;
         @media (min-width: 641px) {
            margin: 10rem 0 7rem;
        }
    }
    .content {
        padding: 0 !important;
        border-bottom: 1.5rem #FFCC00 solid;
    }
    .flex:has(.banner-description) {
        display: flex;
        flex-direction: column-reverse;
        @media (min-width: 641px) {
            flex-direction: row;
        }
    }
    .banner-description{
        background: white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
        padding:2rem;
        
        @media (min-width: 641px) {
            width: 64%;
            box-sizing: border-box;
            align-items: flex-start;
            padding-left: max(2rem, calc((100% - 80.625rem) / 2 + 1.2rem));
        }
    }
    
    .banner-content {
        max-width: 46rem;
        h1 {
            margin-bottom: 2rem;
        }
    }
    .banner-decoration {
        
        @media (min-width: 641px) {
            width: 36%;
        }
        @media (min-width: 1400px) {
            max-height: 36rem;            
        }
        img {
            object-fit: cover;
            aspect-ratio: 1;
            height: 100%;
            max-height: 10rem;
            @media (min-width: 641px) {
                max-height: 100%;
            }
        }
        @media (max-width: 640px) {
            img {
                max-height: unset;
            }
        }
    }
    .headline-container {
        background-color: transparent !important;
    }
    .headline-container > .row {
        max-width: 100%;
        & > .columns {
       	    padding: 0;
        }
    
    }
}

/* Philanthropy Spotlights */
.philanthropy-spotlights {
    @media (min-width: 641px) and (max-width: 1025px) {
        h3 {
            font-size: 1.1rem !important;
            margin:0 0 0.5rem;
        }

        p {
            font-size:1rem !important;
        }
    }
}

@media only screen and (min-width: 64.0625em) {
  #blogPost .large-9.small-centered {
    width: 100%;
  }
}

#blogPost header .meta .category {
    font-size: 1.375rem;    
}

#blogPost blockquote:not(.blockquote-container blockquote):before,
#blogPost blockquote:not(.blockquote-container blockquote):after {
  display: none;
}
#blogPost blockquote:not(.blockquote-container blockquote) {
  margin: 2rem 0;
  max-width:100%;
}
#blogPost blockquote:not(.blockquote-container blockquote),
#blogPost blockquote:not(.blockquote-container blockquote) p {
  color:inherit;
  padding:0;
  font-size: 1.125em;
  border:none
}
#blogPost blockquote:not(.blockquote-container blockquote) p {
  border-left: 3px solid #081e3f;
  margin: 0;
  padding: 1rem;
}
#blogPost blockquote:not(.blockquote-container blockquote) p + p {
  padding-top: 0.5rem;
}
#blogPost blockquote:not(.blockquote-container blockquote) cite,
#blogPost blockquote:not(.blockquote-container blockquote) p.cite {
  font-size: 0.875em;
  padding-left: 20%;
}
#blogPost blockquote:not(.blockquote-container blockquote) cite p,
#blogPost blockquote:not(.blockquote-container blockquote) p.cite {
  border-left: 0;
  text-align: right;
}

/* Inline Gallery Collage */
ul.inline-gallery.collage {
    display: grid !important;
    grid-template-columns: 2fr 3fr 2fr;
    grid-template-rows: repeat(4, minmax(0, 1fr));
    height: clamp(420px, 46vw, 720px);
    gap: 1rem;
    margin: 1rem auto;
    max-width: 1100px;
    align-items: stretch;
}

ul.inline-gallery.collage li { width: auto !important; height: auto !important; overflow: hidden; }
ul.inline-gallery.collage li a { display: block; width: 100%; height: 100%; }
ul.inline-gallery.collage li img { width: 100% !important; height: 100% !important; border: 0 !important; object-fit: cover; }

ul.inline-gallery.collage li:nth-child(1) { grid-column: 1; grid-row: 1; }
ul.inline-gallery.collage li:nth-child(2) { grid-column: 1; grid-row: 2; }
ul.inline-gallery.collage li:nth-child(3) { grid-column: 1; grid-row: 3; }
ul.inline-gallery.collage li:nth-child(4) { grid-column: 1; grid-row: 4; }
ul.inline-gallery.collage li:nth-child(7) { grid-column: 3; grid-row: 1; }
ul.inline-gallery.collage li:nth-child(8) { grid-column: 3; grid-row: 2; }
ul.inline-gallery.collage li:nth-child(5) { grid-column: 2; grid-row: 1 / 3; }
ul.inline-gallery.collage li:nth-child(6) { grid-column: 2 / 4;  grid-row: 3 / 5; }

.border-bottom {
    border-bottom: 1.5rem var(--fiu-blue) solid !important;
    margin: 0;
}