/*
Theme Name: WP XXX Child Theme
Author: Chris McCoy
Description: Example of a Child Theme for WPXXX with Alternate Full Width
Version: 1.0.1
Template: wpxxx
*/

/*

Add your Custom Styles Here

*/

/*
 * Wide single layout: content left, "Recommended For You" right.
 *
 * The parent's core.css already defines this two-column layout as a CSS table
 * at >=1020px (.video-container{display:table}, .video-column/.right-column
 * {display:table-cell}, .right-column{width:420px}). sidebar.css then flattens
 * it with `.video-container, .video-column { display:block !important }`.
 * `.right-column` keeps its table-cell from core, so we only need to un-flatten
 * the container and the content column to restore the native layout.
 *
 * We use the table layout (not flexbox) on purpose: a flex item wrapping an
 * overflow:auto scroller triggered a Chrome paint bug where the recommended
 * thumbs stayed unpainted until a reflow. The table layout is what the theme
 * was built for and does not exhibit it.
 *
 * `.video-container.no-sidebar` (two classes + !important) outranks the parent's
 * single-class `!important` rule.
 */
@media all and (min-width: 1020px) {
	.video-container.no-sidebar {
		display: table !important;
		width: 100%;
	}

	.video-container.no-sidebar .video-column {
		display: table-cell !important;
		width: auto;
		vertical-align: top;
	}

	/*
	 * Let the recommended list run down the page instead of scrolling inside a
	 * short box. The parent caps .swiper.vertical (max-height 220-450px per
	 * breakpoint) and pins .right-column to height:300px on wide screens.
	 */
	.video-container.no-sidebar .right-column {
		height: auto !important;
	}

	.video-container.no-sidebar .thumbs.swiper.vertical {
		max-height: none;
	}
}