/* ============================================================================
 * news / blog
 * ============================================================================
 * Sketch Club Theme
 */

/* ----------------------------------------------------------------------------
 * masthead
 * ----------------------------------------------------------------------------
 * where 850px is the breakpoint below which the menu is reduced to an icom
 */

@media screen and (max-width: 850px) {

	#sketch_pad_masthead {
		border-top: var(--wp--custom--border-meta);
		border-bottom: var(--wp--custom--border-meta);
		margin-bottom: var(--wp--preset--spacing--50);
		padding-top: var(--wp--preset--spacing--20);
		padding-bottom: var(--wp--preset--spacing--20);
		}

		#sketch_pad_masthead div p {
			font-size: var(--wp--preset--font-size--fs-small);
			letter-spacing: calc( 10% + 0.2vw);
			text-align: center;
			text-transform: uppercase;
			color: var(--wp--preset--color--grey-mid);
			}

	}

@media screen and (min-width: 851px) {

	#sketch_pad_masthead div {
		border-top: var(--wp--custom--border-meta);
		border-bottom: var(--wp--custom--border-meta);
		margin-top: var(--wp--preset--spacing--50);
		margin-bottom: var(--wp--preset--spacing--10);
		padding-top: var(--wp--preset--spacing--10);
		padding-bottom: var(--wp--preset--spacing--10);
		}
	
		#sketch_pad_masthead div p {
			font-size: var(--wp--preset--font-size--fs-normal);
			letter-spacing: 0.1vw;
			text-align: center;
			text-transform: uppercase;
			color: var(--wp--preset--color--grey-mid);
			}

	}

s
/* ----------------------------------------------------------------------------
 * news landing page
 * --------------------------------------------------------------------------*/

.main-news_home { margin-top: var(--wp--preset--spacing--90); }

.sb_block-list-articles.card-article li p.wp-block-post-excerpt__excerpt, .sb_block-list-articles.card-article li div.description p:not(p.taxonomy-category) {
	margin-top: var(--wp--preset--spacing--50);
	margin-bottom: var(--wp--preset--spacing--60);
	}
	
@media screen and (max-width: 600px) {

	.sb_block-list-articles li {

		/* the image masking in sketch pad listings does not play nicely with a
		* margin applied to the <figure>, so the margin must instead be applied
		* to this div
		*/

		/* excluding sketch pad list as the whole <li> is inset */

		margin: 0 var(--wp--preset--spacing--70) var(--wp--preset--spacing--70) var(--wp--preset--spacing--70);
		}

}
	

@media screen and (max-width: 600px) {

	.sp_listing_thumbnail:not(.sb_block-list-articles .sp_listing_thumbnail) {

		/* the image masking in sketch pad listings does not play nicely with a
		 * margin applied to the <figure>, so the margin must instead be applied
		 * to this div
		 */

		/* excluding sketch pad list as the whole <li> is inset */

		margin: var(--wp--preset--spacing--70);
		}

	

	}


/* ----------------------------------------------------------------------------
 * post
 * --------------------------------------------------------------------------*/

/*.page-template-page-news div.listing { margin-bottom: var(--wp--preset--spacing--70); }  which page does this act upon? looks to be safe to delete */

.single-post .is-style-intro-block::first-letter {

	/* initial-letter: 2; support not yet universal */

	/* font-family: var(--wp--preset--font-family--font-heading);
	font-size: 270%;
	font-weight: var(--fw_bold);
	float: left;
	padding: 10px 5px 0 0;
	text-transform: uppercase;*/

	}

#post-meta {
	border-top: var(--wp--custom--border-meta);
	border-bottom: var(--wp--custom--border-meta);
	margin-top: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--20) 0;
	}

	#post-meta:not(#sb_article-header #post-meta):not(aside#sb_event #post-meta) { margin-bottom: var(--wp--preset--spacing--80); }

	#post-meta p { margin-bottom: 0; }

		#post-meta p span {
			font-family: var(--wp--preset--font-family--font-heading);
			font-weight: var(--wp--custom--fw-heading);
			font-size: var(--fs_ginormous);
			}

.taxonomy-post_tag {

	/* native WordPress tag container */

	margin: var(--wp--preset--spacing--80) 0;
	}


/* ----------------------------------------------------------------------------
 * 'image' post format > image
 * ----------------------------------------------------------------------------
 * post format: image
 * prevent the single image from getting too big for its boots
 * 
 * enables: patterns/single-post-content.php
 */

 .sb_post_type-image img {
	max-width: 100%;
	height: auto;
	}


/* ----------------------------------------------------------------------------
 * mask image
 * ----------------------------------------------------------------------------
 * used here to make the featured images in news listings square.
 * applied at the parent container (<ul>) level but also works when applied
 * at child level (<li>).
 */

.sb_listing_thumbnail { 
	/*max-width: 100%;
	margin: 50px;*/ }

.mask-image-square figure, .mask-image-square picture {

	/* this horrible hack ensure that the parent element is square */
	height: 0;
	width: 100%;
	padding-bottom: 100%;

	/* mask image */
	overflow: hidden;

	/* must declare in order to get height hack to work */
	position: relative;

	}

.mask-image-square img {
	clip-path: square;
	position: absolute;

	/* ensure image fills picture element */
	object-fit: cover;
	height: 100%;
	}