/*
 * Velvet Skin Beauty: core blocks on the template's markup.
 *
 * Pages and synced patterns are built from core blocks that carry the template's
 * classes (Group, Heading, Paragraph, List, Image, Buttons, Custom HTML). Most of the
 * template's CSS then applies as it is. These rules cover the few places where a core
 * block prints different markup from the template: a <p> where the template has a
 * <span> or bare text, a <figure> around each <img>, and a wrapper around buttons.
 *
 * Loaded after style.css on the site and in the block editor (inc/blocks.php).
 * Rules for one page or section go in assets/css/blocks/<name>.css instead.
 * See theme/import/BLOCKS-GUIDE.md.
 */

/* ---------------------------------------------------------------------------
 * Script heading (template: <span class="saint-text">). A Paragraph with the
 * class saint-text prints a <p>, so the template's paragraph rules
 * (.trending-top p, .discount-info p and the like) would reach it. This puts back
 * what the span had. Rules such as .discount-info .saint-text still win.
 * ------------------------------------------------------------------------ */
p.saint-text {
	max-width: none;
	margin: 0;
	padding: 0;
	font-family: "Mrs Saint Delafield";
	font-size: 50px;
	font-weight: inherit;
	line-height: inherit;
	color: #d05278;
}
@media screen and (max-width: 767px) {
	p.saint-text {
		font-size: 40px;
	}
}

/* ---------------------------------------------------------------------------
 * Page banner (.detail-block): the line under each box heading is bare text in
 * the template and a Paragraph here. It takes the box's own size and colour.
 * ------------------------------------------------------------------------ */
.detail-block__item-info > p {
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

/* ---------------------------------------------------------------------------
 * Images. WordPress sets vertical-align: bottom on images in Image blocks; the
 * template's images keep the browser default. Where the template's <img> sits
 * straight inside a flex row or a text line, the Image block's <figure> steps
 * out of the layout (display: contents) so the <img> lays out as in the
 * template. Not in the editor, where the figure is the block you click.
 * ------------------------------------------------------------------------ */
.wp-block-image img {
	vertical-align: baseline;
}
.subscribe-form__img > .wp-block-image:not(.block-editor-block-list__block),
.testimonials-author > .wp-block-image:not(.block-editor-block-list__block),
.promo-video__block > .wp-block-image:not(.block-editor-block-list__block),
.main-logos > .wp-block-image:not(.block-editor-block-list__block),
.profile-aside__subscribe > .wp-block-image:not(.block-editor-block-list__block) {
	display: contents;
}

/* ---------------------------------------------------------------------------
 * Buttons. inc/blocks.php prints each Button block as the template's
 * <a class="btn">. The Buttons wrapper is a flex row in WordPress; here it
 * flows like the template's inline button, so the parent's text-align places
 * it (for example right-aligned in .discount-info on phones).
 * ------------------------------------------------------------------------ */
.wp-block-buttons.is-layout-flex {
	display: block;
}
.wp-block-buttons.is-content-justification-center {
	text-align: center;
}
.wp-block-buttons.is-content-justification-right {
	text-align: right;
}
.wp-block-buttons.is-content-justification-left {
	text-align: left;
}

/* ---------------------------------------------------------------------------
 * Instagram strip (synced pattern "Instagram strip"). Each photo is an Image
 * block with the class insta-photo and a link. The template's dark hover layer
 * with the Instagram icon (.insta-photo__hover) is drawn on the link instead.
 * ------------------------------------------------------------------------ */
.insta-photo > a {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
}
.insta-photo > a::after {
	content: "\e90a";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	background-color: #222222;
	color: #fff;
	font-family: "icomoon" !important;
	font-size: 70px;
	font-style: normal;
	font-weight: normal;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	opacity: 0;
	-webkit-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	transition: all 0.3s linear;
}
.insta-photo:hover > a::after {
	opacity: 0.5;
}
@media screen and (max-width: 1200px) {
	.insta-photo > a::after {
		font-size: 50px;
	}
}

/* Contact page variants: the Instagram strip and Logos patterns inside a Group
 * with the template's modifier class (insta-photos_contacts, main-logos_contacts). */
.insta-photos_contacts > .insta-photos {
	margin-top: 0;
}
.wp-block-group.main-logos_contacts {
	padding-bottom: 0;
}
@media screen and (min-width: 1280px) {
	.main-logos_contacts > .main-logos {
		padding-bottom: 182px;
	}
}