/*
 * Theme Name: Vanderbilt News
 * Theme URI: https://news.vanderbilt.edu
 * Description: Vanderbilt FutureVU Child Theme
 * Template: anchordown-futurevu
 * Version: 1.0
 * Author: Vanderbilt University Division of Communications, Digital Strategies Team
 * Author URI: https://web.vanderbilt.edu
 */

/* News Home Page */
.topper-news-grid__heading {
    margin-top: 0;
}
@media (min-width: 600px) {
    .topper-news-grid__heading {
        margin-top: 20px;
    }
}
@media (min-width: 768px) {
    .topper-news-grid__heading {
        margin-top: 15px;
    }
}
.vanderbilt-news-home .story-tease__image,
.vanderbilt-news-home .story-list-mini__image {
    width: 100%;
    padding-top: 75%;
}
.vanderbilt-news-home .story-tease__image img,
.vanderbilt-news-home .story-list-mini__image img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    overflow: hidden;
    margin: 0 auto;
    object-fit: cover;
}

/* Story List Module */
.story-list--stack .story-list__image-link {
    width: 25%;
    padding-top: 25%;
}
.story-list--row .story-list__image-link {
    width: 100%;
    padding-top: 75%;
}
.story-list--stack .story-list__image-link img,
.story-list--row .story-list__image-link img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    overflow: hidden;
    margin: 0 auto;
    object-fit: cover;
}
@media(min-width: 600px) {
    .story-list--grid li.story-list__list-item.story-list__list-item--index-0,
	.story-list--grid li.story-list__list-item.story-list__list-item--index-3 {
		width: 66.6666666667%;
	}
	.story-list--grid li.story-list__list-item.story-list__list-item--index-1,
	.story-list--grid li.story-list__list-item.story-list__list-item--index-2 {
        width: 33.3333333333%;
    }
    .story-list--grid li.story-list__list-item.story-list__list-item--index-0 {
        padding-right: 60px;
		padding-left: .5vw;
    }
	.story-list--grid li.story-list__list-item.story-list__list-item--index-1 {
        padding-right: .5vw;
		padding-left: .5vw;
    }
	.story-list--grid li.story-list__list-item.story-list__list-item--index-2 {
        padding-right: .5vw;
		padding-left: .5vw;
    }
    .story-list--grid li.story-list__list-item.story-list__list-item--index-3 {
        padding-right: .5vw;
		padding-left: 60px;
    }
}
@media(min-width: 768px) {
    .story-list--grid li.story-list__list-item.story-list__list-item--index-0 {
        padding-right: 120px;
		padding-left: .5vw;
    }
	.story-list--grid li.story-list__list-item.story-list__list-item--index-1 {
        padding-right: .5vw;
		padding-left: .5vw;
    }
	.story-list--grid li.story-list__list-item.story-list__list-item--index-2 {
        padding-right: .5vw;
		padding-left: .5vw;
    }
    .story-list--grid li.story-list__list-item.story-list__list-item--index-3 {
        padding-right: .5vw;
		padding-left: 120px;
    }
}

/* Articles */
.article-page .site-content .topper-article--serif .topper-article__title {
    font-variant-numeric: lining-nums;
}
.article-page__content .link-list ul.link-list__list.media-contact__info {
    margin-bottom: 3em;
}
.article-page__content .link-list ul.link-list__list.media-contact__info li {
    line-height: 30px;
}
.article-page__content .link-list ul.link-list__list.media-contact__info a,
.article-page__content .link-list ul.link-list__list.media-contact__info svg {
    height: 30px;
    width: 30px;
    float: right;
}
.article-page__content .responsive-embed-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    margin: 30px 0;
    overflow: hidden;
}
.article-page__content .responsive-embed-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
@media (min-width: 768px) {
    .article-page__content .theme-list.news-tags-wide {
        margin: 0 4.1666666667%;
    }
    .article-page__content .theme-list.news-tags-wide .theme-list__inner::after {
        background-color: transparent;
    }
}
.article-page__content .news-grid__item.news-grid__item--middle-center {
    border: none;
}
.article-page__content .story-list-mini__image {
    width: 100%;
    padding-top: 75%;
}
.article-page__content .story-list-mini__image img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    overflow: hidden;
    margin: 0 auto;
    object-fit: cover;
}
.article-page__content .subscribe-cta {
	padding: 0 .5vw;
}
[data-theme="dark"] .article-page__content .subscribe-cta .button.button--standard,
[data-theme="dark"] .article-page__content .subscribe-cta .button.button--standard:visited {
    color: var(--c-bg);
	background-color: var(--c-text);
	border: 1px solid var(--c-text);
}
[data-theme="dark"] .article-page__content .subscribe-cta .button.button--standard:hover,
[data-theme="dark"] .article-page__content .subscribe-cta .button.button--standard:active {
    color: var(--c-text);
	background-color: var(--c-bg);
	border: 1px solid var(--c-card-text-muted);
}
[data-theme="dark"] .article-page__content .share-tools .share-tools__link,
[data-theme="dark"] .article-page__content .share-tools .share-tools__link:visited {
    color: var(--c-text);
    background-color: var(--c-card-text-muted);
	border: 1px solid var(--c-card-text-muted);
}
[data-theme="dark"] .article-page__content .share-tools .share-tools__link:hover,
[data-theme="dark"] .article-page__content .share-tools .share-tools__link:active {
    color: var(--c-text);
	background-color: var(--c-bg);
	border: 1px solid var(--c-card-text-muted);
}

/* Specific Posts */
.article-page__content #post-1405666 .rich-text {
    display: inline-block;
}
.article-page__content #post-1420509 .rich-text p:not(:last-child),
.article-page__content #post-1405666 .rich-text p:not(:last-child) {
    margin-bottom: 10px !important;
}

/* Stacked Modules in the Right Column */
.sidebar-clear > div > div.link-list--align-right,
.sidebar-clear > div > div.info-text--align-right {
    clear: both;
}
.info-text--align-right ul {
    padding: 0;
    margin: 0;
}
.info-text--align-right ul li {
    padding: 0;
    margin: 0 0 12px 0;
}

/* Jetpack Galleries */
.article-page__content .tiled-gallery {
    clear: none;
}
@media (min-width: 600px) {
    .article-page__content .tiled-gallery {
        clear: both;
    }
}
@media (min-width: 1200px) {
    .article-page__content .tiled-gallery {
        clear: none;
    }
}
.article-page__content .rich-text {
    padding-left: 0;
    padding-right: 0;
}

/* Thumbnail Grid option helper classes for Jetpack galleries */
.article-page__content .gallery {
    margin: 1em 0;
}
.article-page__content .gallery-item {
    display: inline-block;
    text-align: center;
    vertical-align: top;
    width: 100%;
	position: relative;
}
@media (min-width: 768px) {
    .article-page__content .gallery-columns-2 .gallery-item {
        max-width: 50%;
    }
    .article-page__content .gallery-columns-3 .gallery-item {
        max-width: 33.33%;
    }
    .article-page__content .gallery-columns-4 .gallery-item {
        max-width: 25%;
    }
    .article-page__content .gallery-columns-5 .gallery-item {
        max-width: 20%;
    }
    .article-page__content .gallery-columns-6 .gallery-item {
        max-width: 16.66%;
    }
    .article-page__content .gallery-columns-7 .gallery-item {
        max-width: 14.28%;
    }
    .article-page__content .gallery-columns-8 .gallery-item {
        max-width: 12.5%;
    }
    .article-page__content .gallery-columns-9 .gallery-item {
        max-width: 11.11%;
    }
}
.article-page__content .gallery-item a {
    display: block;
}
.article-page__content .gallery-caption {
    position: absolute;
    bottom: 0;
    color: #333;
    background: #f0f0f1;
    background: rgba(255, 255, 255, 0.8);
    width: 100%;
    padding: 10px;
	display: none;
}
.article-page__content .gallery-item:hover .gallery-caption {
    display: block;
}

/* Change made by Binh on 07/19/2021: This is a temporary fix to push down the right column and pull up the body content but we will, ultimately, want this for the parent theme and can delete it here once that change is made */
/* For screen size 600px and smaller */
@media screen and (max-width: 600px) {
	.article-page__body {
		display: flex;
		flex-flow: column;
	}
	.article-col-3 {
		order: 3;
	}
	.article-col-2 {
		order: 2;
	}
	.article-col-1 {
		order: 1;
	}
	.yarpp-related {
		order: 4;
	}
}

/* Making the YARPP stories responsive at smaller widths */
@media (max-width: 600px) {
	.yarpp-related .story-list-mini--scroll-indicator::before {
		background: none;
	}
	.yarpp-related ul.story-list-mini__list {
        display: block;
		padding: 0 8px;
    }
    .yarpp-related ul.story-list-mini__list li.story-list-mini__list-item {
        width: 100%;
        padding: 0;
    }
}

/* Move sidebar to bottom for 601px to 1200px screen sizes */
@media (min-width: 601px) and (max-width: 1199px) {
    .article-page__body {
        display: flex;
        flex-flow: column;
    }
    .article-col-3 {
        order: 3;
        width: 100% !important;
        margin: 0 !important;
    }
    .article-col-2 {
        order: 1;
    }
    .article-col-1 {
        order: 2;
    }
    .yarpp-related {
        order: 4;
    }
}

/* Commencement Profiles Tag Archive Template */
@media (min-width: 1200px) {
    .article-page.commencement-profiles-page .article-page__body,
	.article-page.commencement-profiles-page .topper-article .topper-article__text {
        width: 75%;
    }
}
@media (min-width: 2000px) {
    .article-page.commencement-profiles-page .article-page__body,
	.article-page.commencement-profiles-page .topper-article .topper-article__text {
        width: 50%;
    }
}
@media (min-width: 600px) {
    .commencement-profiles__wrapper {
        display: flex;
        flex-wrap: wrap;
        column-gap: 4%;
    }
    .commencement-profiles__profile {
		flex-basis: 48%;
    }
}
.commencement-profiles__profile h3.story-list__title {
    margin: 10px 0;
}

/* Sticky Right Sidebar on Posts */
@media (min-width: 1200px) {
	.article-page .article-page__body {
		position: relative;
	}
	.article-page .article-page__body .article-col-1 {
        position: relative;
		overflow: hidden;
    }
    .article-page .article-page__body .article-col-1 figure[style] {
        width: auto !important;
    }
    .article-page .article-page__body .article-col-3 {
        position: sticky;
        top: 0;
    }
}