/****Home Page: About mapua milestones thumbnail*********/

.justify-milestones-wrapper{
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding:0px 30px 0px 30px;
}

.milestones-thumbnail-wrapper{
    width: 47% !important;
    text-align: center;
    border-radius: 5px;
    padding: 35px 10px 10px 10px;
    height:90px;
    margin:20px 10px 10px 10px;
}

/****Home Page: About mapua milestones thumbnail*********/







/****Home Page: Academics Thumbnail with Overlay*********/

.text-on-hover{
    display: none;
    transition: 0.8s ease;
    opacity: 1;
    width: 85% !important;
}

.thumbnail-with-overlay-wrapper{

    position: relative;

    width: 100%;

    height: 400px;

    border-radius: 5px;

    padding:0px;

    overflow: hidden;

}

.top-overlay-thumbnail-wrapper{

    transition: 0.5s ease;

    opacity: 1;

    width: 100% !important;

    min-height: 100px !important;

    position: absolute !important;

    bottom: 0;

    left:0;

    padding:10px;

    background: #000000;

    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(46, 46, 46, 0.86) 78%);

}

.thumbnail-with-overlay-wrapper:hover .top-overlay-thumbnail-wrapper {

  opacity: 1;

  background: #DA291C;

  background: linear-gradient(180deg,rgba(218, 41, 28, 0) 0%, rgba(218, 41, 28, 1) 78%);

}

.thumbnail-with-overlay-wrapper:hover .text-on-hover {
  display: block;
}

.thumbnail-with-overlay-wrapper:hover .thumb-overlay-medium-btn {

    opacity: 1;

    transition: 0.3s ease;

    background-color: #ffffff;

    color: #DA291C;

}

/****Home Page: Academics Thumbnail with Overlay*********/















/****Home Page: News Thumbnail with Overlay*********/

/* Homepage section layouts. These selectors intentionally exclude the site header and footer. */
.home-about-section > .flex-container-without-padding {
    align-items: center;
    gap: clamp(32px, 5vw, 72px);
}

.home-about-copy,
.home-asu-copy {
    min-width: 0;
}

.home-milestones-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    box-sizing: border-box;
}

.home-milestones-grid .milestones-thumbnail-wrapper {
    display: flex;
    width: 100% !important;
    min-width: 0;
    min-height: 150px;
    height: auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 24px 16px;
    box-sizing: border-box;
}

.home-milestones-grid .milestones-thumbnail-wrapper p {
    max-width: 100%;
    margin-top: 4px;
    margin-bottom: 4px;
    overflow-wrap: anywhere;
}

.home-academics-section .carousel-card > a {
    display: block;
    height: 100%;
}

.home-academics-section a.home-academic-card-link {
    display: inline-flex;
    width: 150px;
    height: 35px;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    color: #ffffff;
    text-decoration: none;
    cursor: pointer;
}

/* Keep the original button link above the link covering the rest of the card. */
.home-academics-section .home-academic-card {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

.home-academics-section a.home-academic-card-link {
    position: relative;
    z-index: 2;
}

.home-academics-section a.home-academic-card-link:focus-visible {
    outline: 3px solid #ffb81c;
    outline-offset: 3px;
}

.home-academics-section .top-overlay-thumbnail-wrapper > br {
    display: none;
}

.home-academics-section .top-overlay-thumbnail-wrapper {
    box-sizing: border-box;
}

.home-academics-section .carousel-controls {
    padding-right: 0;
}

.home-academics-section .carousel-dot {
    background-color: rgba(255, 255, 255, 0.55);
}

.home-academics-section .carousel-dot.is-active {
    background-color: #ffffff;
}

.home-academics-section .carousel-next {
    color: #ffffff;
}

.home-asu-section > .flex-container-without-padding {
    align-items: center;
    gap: clamp(32px, 5vw, 72px);
}

.home-asu-image {
    display: block;
    width: 100%;
}

.home-campus-section,
.home-campus-section .explore-campuses-bg-transition-layer {
    background-position: center;
}

.home-news-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.home-news-card {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.home-news-card--featured {
    grid-column: span 2;
}

.home-news-card .news-top-overlay-thumbnail-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    box-sizing: border-box;
    padding: 24px;
}

.home-news-card .news-top-overlay-thumbnail-wrapper > p {
    margin-top: 0;
}

.news-thumbnail-with-overlay-wrapper{

    position: relative;

    height: 300px;

    border-radius: 5px;

    padding:0px;

    overflow: hidden;

}

.news-top-overlay-thumbnail-wrapper{

    transition: 0.5s ease;

    opacity: 1;

    width: 100% !important;

    min-height: 100px !important;

    position: absolute !important;

    bottom: 0;

    left:0;

    padding:10px;

    background: #000000;

    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 78%);

}

.news-thumbnail-with-overlay-wrapper:hover .news-top-overlay-thumbnail-wrapper {

  opacity: 1;

  background: #DA291C;

  background: linear-gradient(180deg,rgba(218, 41, 28, 0) 0%, rgba(218, 41, 28, 1) 78%);

}

.news-thumbnail-with-overlay-wrapper:hover .thumb-overlay-medium-btn {

    opacity: 1;

    transition: 0.3s ease;

    background-color: #ffffff;

    color: #DA291C;

}

/****Home Page: News Thumbnail with Overlay*********/