// =================================================================
// Listicle Styles - Configurable
// =================================================================
//
//
// Styles in this file should mainly be for layout, width, etc that are
// not able to be overwritten by the variables in the global sass array
//
//

.wp-block-editorial-listicle {
	@extend %container-styles;
	max-width: 975px;
	margin-bottom: 35px;

	@include breakpoint( $sm ) {
		margin-bottom: 70px;
	}

	.wp-blocks-components-share-tools {
		display: none;
	}
}

.wp-block-editorial-listicle-figure {
	padding-bottom: $padding-small;

	@include breakpoint( $xs ) {
		padding-bottom: 40px;
	}

	img {
		height: auto;
		width: 100%;

		@include breakpoint( $xs ) {
			@include object-fit( cover );
			height: 350px;
		}

		@include breakpoint( $sm ) {
			height: 500px;
		}

		@include breakpoint( $md ) {
			height: 645px;
		}
	}

	.wp-caption-text {
		text-align: right;
	}
}

.wp-block-background-video-iframe {

	.wp-block-editorial-listicle & {
		margin-bottom: 14px;
		padding-bottom: 56.2%;
		padding-top: 45px;
		position: relative;

		div,
		embed,
		object,
		iframe {
			height: 100% !important;
			left: 0;
			position: absolute;
			top: 0;
			width: 100% !important;
		}
	}
}

.wp-block-editorial-listicle-header {
	padding-bottom: $padding-small;

	@include breakpoint( $xs ) {
		padding-bottom: 40px;
	}

	.has-number & {
		display: flex;
	}
}

.wp-block-editorial-listicle-header-number {
	font-size: 4em;
	line-height: 1;
	margin: 0 25px 0 0;

	@include breakpoint( $xs ) {
		font-size: 6.5em;
	}
}

.wp-block-editorial-listicle-header-content-hed {
	@extend %font-size-2;
	font-weight: 700;
	margin: 0;
}

.wp-block-editorial-listicle-header-content-dek {
	@extend %font-size-3;
	margin: 5px 0 0;
}

.wp-block-editorial-listicle-section {
	margin-top: 0;
	padding-bottom: $padding;

	.has-sidebar & {
		@extend %clearfix;
	}
}

.wp-block-editorial-listicle-section-content {

	.has-sidebar & {
		@extend %col-md-two-third;
	}
}

.wp-block-editorial-listicle-section-meta {

	.has-sidebar & {
		@extend %col-full;
		@extend %col-md-third;
		font-family: $font-family-sans-serif;
		font-size: 0.85em;

		@include breakpoint( $md ) {
			padding: 0 0 0 30px;
		}
	}

	.icon-action {
		@include icon( action, before );
		color: $color-grayscale-0 !important;

		&:before {
			@include border-radius( 50% );
			background-color: $color-grayscale-0;
			color: $color-grayscale-f;
			height: 40px;
			line-height: 38px;
			text-align: center;
			width: 40px;
		}

		&:hover {
			text-decoration: underline;
		}
	}

	[target="_blank"] {
		@include icon( redirect, after );

		&::after {
			font-size: 0.8em;
		}
	}
}

.wp-block-editorial-listicle-footer-title {
	@extend %font-size-4;
	text-transform: uppercase;
}

.wp-block-editorial-listicle-footer-list {
	list-style-type: none;
	padding-left: 0 !important;

	li {
		margin-bottom: 8px;
	}

	a {
		font-family: $font-family-sans-serif;
		font-size: 0.9em;
		text-decoration: underline;

		&:hover,
		&:focus {
			text-decoration: none;
		}
	}
}