/*
 * Erenpreiss Inspired Blocks - supplemental styles.
 *
 * Colours, type, spacing and layout widths come from theme.json.
 * Only the things core blocks cannot express live here.
 * This file is also loaded inside the block editor (see functions.php),
 * so the editor preview matches the front end.
 */

/* ---------------------------------------------------------------
 * 1. Safety net for full-bleed sections inside <main>
 * ------------------------------------------------------------- */

/* Header and footer template parts must span the full viewport, not the
 * root container's content width. */
.wp-site-blocks > .wp-block-template-part {
	max-width: none;
}

main.alignfull.wp-block-group {
	padding-left: 4vw;
	padding-right: 4vw;
}

main.alignfull.wp-block-group > .alignfull {
	margin-left: -4vw;
	margin-right: -4vw;
	max-width: none;
	width: auto;
}

/* ---------------------------------------------------------------
 * 2. Fixed, transparent header that floats over the hero
 * ------------------------------------------------------------- */

.wp-site-blocks > .site-header-fixed {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 20;
	padding-left: 4vw;
	padding-right: 4vw;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
	pointer-events: none;
	/* It is already viewport-width; cancel the alignfull negative margins. */
	margin-left: 0;
	margin-right: 0;
}

.site-header-fixed a,
.site-header-fixed button,
.site-header-fixed .wp-block-navigation {
	pointer-events: auto;
}

.site-header .wp-block-site-title a,
.site-header .wp-block-navigation a,
.site-header .header-actions a {
	color: var(--wp--preset--color--base);
}

.site-header .wp-block-site-logo img {
	max-height: 48px;
	width: auto;
}

.site-header .header-actions p {
	white-space: nowrap;
}

/* The editor renders template parts inline, so undo the fixed position there. */
.editor-styles-wrapper .site-header-fixed {
	position: relative;
	pointer-events: auto;
}

/* ---------------------------------------------------------------
 * 3. Hero and other full-bleed covers
 *
 * Core resets the inner container margins on covers that use a custom
 * content position, so these selectors deliberately out-specify it and
 * re-centre the text on the site's content width.
 * ------------------------------------------------------------- */

/* Match the site gutter instead of the cover block's default 1em. */
.hero.wp-block-cover,
.video-section.wp-block-cover {
	padding-left: 4vw;
	padding-right: 4vw;
}

.hero.wp-block-cover.has-custom-content-position.has-custom-content-position.is-position-bottom-left .wp-block-cover__inner-container,
.video-section.wp-block-cover.has-custom-content-position.has-custom-content-position .wp-block-cover__inner-container {
	width: 100%;
	max-width: var(--wp--style--global--content-size, 1120px);
	margin-left: auto;
	margin-right: auto;
}

/* ---------------------------------------------------------------
 * 4. Model grid
 * ------------------------------------------------------------- */

.model-card {
	min-height: clamp(240px, 30vw, 320px) !important;
}

.model-card .wp-block-cover__inner-container {
	width: 100%;
}

@media (max-width: 900px) {
	.model-grid.model-grid,
	.testimonials-grid.testimonials-grid,
	.news.news {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 700px) {
	.model-grid.model-grid,
	.testimonials-grid.testimonials-grid,
	.promo.promo,
	.news.news,
	.collage.collage {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------
 * 5. Photo collage
 * ------------------------------------------------------------- */

.collage.collage {
	grid-auto-rows: 190px;
}

.collage .collage-item {
	margin: 0;
	height: 100%;
}

.collage .collage-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.collage .collage-span-2 {
	grid-column: span 2;
}

@media (max-width: 700px) {
	.collage .collage-span-2 {
		grid-column: auto;
	}
}

/* ---------------------------------------------------------------
 * 6. Custom block styles registered in functions.php
 * ------------------------------------------------------------- */

.is-style-erenpreiss-grayscale img,
.is-style-erenpreiss-grayscale .wp-block-cover__image-background {
	filter: grayscale(100%);
	transition: filter 0.3s ease;
}

.is-style-erenpreiss-grayscale:hover img,
.is-style-erenpreiss-grayscale:hover .wp-block-cover__image-background {
	filter: grayscale(0%);
}

.is-style-erenpreiss-card {
	border: 1px solid #dddddd;
	background: var(--wp--preset--color--base);
}

.is-style-erenpreiss-panel {
	border-radius: 4px;
}

.is-style-erenpreiss-tracked {
	letter-spacing: var(--wp--custom--tracking--x-wide, 0.22em);
}

.is-style-erenpreiss-kicker {
	letter-spacing: var(--wp--custom--tracking--wide, 0.14em);
	text-transform: uppercase;
}

/* ---------------------------------------------------------------
 * 7. Cards and news
 * ------------------------------------------------------------- */

.news-card .news-image {
	margin: 0;
}

.news-card .wp-block-post-title a:hover,
.news-card h3 a:hover {
	text-decoration: underline;
}

/* ---------------------------------------------------------------
 * 8. Footer
 * ------------------------------------------------------------- */

.site-footer {
	padding-left: 4vw;
	padding-right: 4vw;
}

.site-footer .footer-mark img {
	max-width: 220px;
	height: auto;
	display: block;
}

.site-footer .footer-menu {
	list-style: none;
	margin: 0;
}

.site-footer .footer-menu li + li {
	margin-top: 0.55rem;
}

.site-footer .footer-contact p {
	color: #d4d4d4;
}

.site-footer .wp-block-social-links .wp-social-link {
	border: 1px solid #999999;
	border-radius: 50%;
}

@media (max-width: 900px) {
	.site-footer .footer-grid {
		flex-wrap: wrap;
	}
}

/* ---------------------------------------------------------------
 * 9. Inner pages sit below the fixed header
 * ------------------------------------------------------------- */

.generic-content .wp-block-post-content > * {
	margin-block-start: var(--wp--preset--spacing--40);
}

.editor-styles-wrapper .generic-content {
	padding-top: var(--wp--preset--spacing--50);
}