/*
 * Standard WordPress blocks styled like the old subpages (values measured on the old site).
 * Loaded on the site and in the block editor. Page layout (grid widths) lives in style.css.
 */

/* Gaps: the old responsive spacers were all 100 px high up to 768 px */
:root { --dmd-space-small: 40px; --dmd-space-large: 140px; --dmd-space-50: 50px; --dmd-space-70: 70px; }
@media (max-width: 768px) { :root { --dmd-space-small: 100px; --dmd-space-large: 100px; --dmd-space-50: 100px; --dmd-space-70: 100px; } }

/* Spacer: only the height chosen in the editor */
.wp-block-spacer { margin: 0; }

/* Separator: short grey line on the left, 30 x 2 px, 16 px above and 15 px below */
.wp-block-separator { width: 30px; height: 0; margin: 16px 0 15px; border: 0; border-bottom: 2px solid #c7c7c9; opacity: 1; }

/* Small heading (h4) followed by text: 9 px gap as the old text blocks had; none before another heading.
   Padding, not margin: a margin would merge with the 15 px above a list (old: 9 + 15 = 24 px) */
h4.wp-block-heading:has(+ p, + ul, + ol) { padding-bottom: 9px; }

/* List: bullets inside the text column as before */
ul.wp-block-list,
ol.wp-block-list { margin: 15px 0 0; padding: 0; list-style-position: inside; }
/* A paragraph after a list sits 15 px below it (old text blocks: 15 px list margin, no paragraph margin above) */
ul.wp-block-list:has(+ p),
ol.wp-block-list:has(+ p) { margin-bottom: 15px; }

/* Style "DMD Title" (heading): large white title on an image.
   Sizes as the old theme set them by window width (80/64/56/48/40/32 px, from 1200 px down line height 1.2em). */
.wp-block-heading.is-style-dmd-title,
.wp-block-heading.is-style-dmd-title-offset {
	margin: 0;
	font-family: Montserrat, sans-serif;
	font-size: 80px;
	line-height: 90px;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: uppercase;
	color: #fff;
}
@media (max-width: 1199px) { .wp-block-heading.is-style-dmd-title, .wp-block-heading.is-style-dmd-title-offset { font-size: 64px; line-height: 1.2em; } }
@media (max-width: 999px) { .wp-block-heading.is-style-dmd-title, .wp-block-heading.is-style-dmd-title-offset { font-size: 56px; } }
@media (max-width: 767px) { .wp-block-heading.is-style-dmd-title, .wp-block-heading.is-style-dmd-title-offset { font-size: 48px; } }
@media (max-width: 599px) { .wp-block-heading.is-style-dmd-title, .wp-block-heading.is-style-dmd-title-offset { font-size: 40px; } }
@media (max-width: 479px) { .wp-block-heading.is-style-dmd-title, .wp-block-heading.is-style-dmd-title-offset { font-size: 32px; } }

/* Style "DMD Hero" (group): background image across the full width, cover and centred */
.wp-block-group.is-style-dmd-hero { background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; }

/* Style "DMD Lift" (image): moves up 15 px on hover with a light veil, no shadow */
.wp-block-image.is-style-dmd-lift { position: relative; margin: 0; overflow: hidden; transition: all .3s; }
.wp-block-image.is-style-dmd-lift img { vertical-align: middle; }
.wp-block-image.is-style-dmd-lift::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; background-color: rgba(255, 255, 255, .06); opacity: 0; transition: opacity .2s; }
.wp-block-image.is-style-dmd-lift:hover { transform: translateY(-15px); }
.wp-block-image.is-style-dmd-lift:hover::after { opacity: 1; }

/* Style "DMD Title, right two thirds" (heading), Our Process: the title starts in the right two thirds of the
   (30 px wider) row and is indented there by a share of that column, as the old 1/3 + 2/3 row did:
   padding = column start (100% / 3) + 15 px gutter + share x column width (2/3 - 30 px); right 15 px gutter + gap.
   From 767 px down the column is full width and 1 px lower (the empty first column kept a minimum height of 1 px);
   up to 768 px the title is centred (old page CSS). */
.wp-block-heading.is-style-dmd-title-offset { padding: 0 15px 0 calc(100% / 3 + 15px + (200% / 3 - 30px) * .2); text-align: left; }
@media (max-width: 1440px) { .wp-block-heading.is-style-dmd-title-offset { padding: 0 45px 0 calc(100% / 3 + 15px + (200% / 3 - 30px) * .26); } }
@media (max-width: 1280px) { .wp-block-heading.is-style-dmd-title-offset { padding-left: calc(100% / 3 + 15px + (200% / 3 - 30px) * .23); } }
@media (max-width: 1024px) { .wp-block-heading.is-style-dmd-title-offset { padding-left: calc(100% / 3 + 15px + (200% / 3 - 30px) * .21); } }
@media (max-width: 768px) { .wp-block-heading.is-style-dmd-title-offset { padding-left: calc(100% / 3 + 15px + (200% / 3 - 30px) * .03); text-align: center !important; } }
@media (max-width: 767px) { .wp-block-heading.is-style-dmd-title-offset { padding-top: 1px; padding-left: calc(15px + (100% - 30px) * .03); } }
@media (max-width: 600px) { .wp-block-heading.is-style-dmd-title-offset { padding: 1px 35px 0 calc(15px + (100% - 30px) * .06); } }

/* Style "DMD Parallax" (group): background image in its own size, fixed to the window and centred;
   js/standard-blocks.js moves it while scrolling as the old parallax row did */
.wp-block-group.is-style-dmd-parallax { overflow: hidden; background-repeat: no-repeat; background-position: 50% 0; background-size: auto !important; background-attachment: fixed !important; }

/* Block "Process step" (inc/process-step.php): text tile and image tile, as the old elements holder.
   Side by side as table cells; from 768 px down stacked (inline blocks, vertically centred on the line). */
.dmd-process-step { display: table; width: 100%; table-layout: fixed; }
.dmd-process-item { display: table-cell; width: 50%; height: 100%; vertical-align: middle; }
.dmd-process-text { background-color: #f4f4f4; }
.dmd-process-step:not(.is-image-left) .dmd-process-text { text-align: right; }
/* Padding in % of the tile width; mirrored when the image is on the left (values of the old page per width) */
.dmd-process-text-inner { padding: 35% 15% 35% 19%; }
.is-image-left .dmd-process-text-inner { padding: 35% 19% 35% 15%; }
@media (max-width: 1440px) {
	.dmd-process-text-inner { padding: 35% 8.7% 35% 15.3%; }
	.is-image-left .dmd-process-text-inner { padding: 35% 15.3% 35% 8.7%; }
}
@media (max-width: 1280px) {
	.dmd-process-text-inner { padding: 35% 8% 35% 6%; }
	.is-image-left .dmd-process-text-inner { padding: 35% 6% 35% 8%; }
}
/* Image tile: own stacking context so the image layer stays above the page background */
.dmd-process-image { position: relative; z-index: 0; overflow: hidden; }
.dmd-process-zoom { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background-size: cover; background-position: center center; background-repeat: no-repeat; transition: all .5s cubic-bezier(.6, 0, .26, .99); will-change: transform; backface-visibility: hidden; }
.dmd-process-image:hover .dmd-process-zoom { transform: scale(1.05); }
.dmd-process-link { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; }
@media (max-width: 768px) {
	.dmd-process-item { display: inline-block; width: 100%; height: auto; }
	.dmd-process-step.is-image-left { display: flex; flex-direction: column-reverse; }
	.dmd-process-text-inner,
	.is-image-left .dmd-process-text-inner { padding: 13% 3%; }
	.dmd-process-step h2 { font-size: 28px; text-align: center !important; }
}
/* Image height when stacked: 73 % of the width from 600 to 768 px and up to 480 px.
   Between 481 and 599 px the old page had no height here (images invisible), kept as before (bug list). */
@media (min-width: 600px) and (max-width: 768px), (max-width: 480px) { .dmd-process-image-inner { padding: 36.5% 0; } }

/* Style "DMD Title, 66 px" (heading), Retreat: smaller title on an image. Sizes as the old theme set them for a 66 px custom font:
   66/76 px, from 1199 px down line height 1.2em, 46 px from 767 px, 40 px from 599 px, 33 px from 479 px. */
.wp-block-heading.is-style-dmd-title-66 {
	margin: 0;
	font-family: Montserrat, sans-serif;
	font-size: 66px;
	line-height: 76px;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: uppercase;
	color: #fff;
}
@media (max-width: 1199px) { .wp-block-heading.is-style-dmd-title-66 { line-height: 1.2em; } }
@media (max-width: 767px) { .wp-block-heading.is-style-dmd-title-66 { font-size: 46px; } }
@media (max-width: 599px) { .wp-block-heading.is-style-dmd-title-66 { font-size: 40px; } }
@media (max-width: 479px) { .wp-block-heading.is-style-dmd-title-66 { font-size: 33px; } }

/* Style "DMD Full width" (group): row across the whole window without padding (old full width rows) */
.wp-block-group.is-style-dmd-full-width { padding: 0; }

/* Images on the site: no gap below (core adds 1em); a centred one is as wide as the file, at most the row width (the editor keeps its own centring) */
.dmd-blocks .wp-block-image { margin: 0; }
.dmd-blocks .wp-block-image.aligncenter { display: block; text-align: center; }

/* Buttons: gap below as the old button container had (21.74 px) */
.wp-block-buttons { margin: 0 0 21.7391px; }

/* Style "DMD Blue" (button): the old "sky" button (modern style, rounded) */
.wp-block-button.is-style-dmd-blue .wp-block-button__link {
	display: inline-block;
	padding: 14px 20px;
	border: 1px solid #5aa1e3;
	border-radius: 5px;
	background-color: #5aa1e3;
	background-image: linear-gradient(rgba(255, 255, 255, .2) 0, rgba(255, 255, 255, .01) 100%);
	box-shadow: none;
	font-family: "Open Sans", sans-serif;
	font-size: 14px;
	line-height: normal;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	color: #fff;
	transition: all .2s ease-in-out;
}
.wp-block-button.is-style-dmd-blue .wp-block-button__link:hover,
.wp-block-button.is-style-dmd-blue .wp-block-button__link:focus { border-color: #4092df; background-color: #4092df; color: #f7f7f7; }

/* Style "DMD Carousel" (gallery), output in inc/standard-blocks.php, behaviour in js/carousel.js.
   As the old image gallery carousel: slides of 600 x 600 px, 30 px apart, the current one in the middle of the window,
   50 px padding in the list, dots 40 px below. */
.dmd-carousel { position: relative; display: block; box-sizing: border-box; user-select: none; -webkit-user-select: none; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.dmd-carousel-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0 50px; }
.dmd-carousel-track { position: relative; top: 0; left: 0; display: block; width: 30000px; cursor: grab; }
.dmd-carousel-track::before,
.dmd-carousel-track::after { content: ""; display: table; }
.dmd-carousel-track::after { clear: both; }
.dmd-carousel-slide { float: left; height: 100%; min-height: 1px; margin: 0 15px; outline: none; }
/* Slide size is set inline by the style (inc/standard-blocks.php): 600 x 600 px on Retreat, 200 x 300 px on Paris and Jet Villa */
.dmd-carousel-slide img { display: inline; max-width: none; object-fit: cover; vertical-align: baseline; }
.dmd-carousel-dots { margin: 40px 0 0; padding: 0; list-style: none; text-align: center; }
.dmd-carousel-dots li { display: inline-block; box-sizing: border-box; width: 10px; height: 10px; margin: 0 4px; border-radius: 0; background-color: #c7c7c9; cursor: pointer; }
.dmd-carousel-dots li.is-active { background-color: #f2a8ac; }

/* Lightbox of the carousel (js/carousel.js), as the old prettyPhoto window with the theme's changes:
   black veil at 70 %, image without frame, arrows on hover, counter below, invisible close button. */
.dmd-photo-overlay { position: absolute; top: 0; left: 0; z-index: 10000; background-color: #000; opacity: .7; }
.dmd-photo-clip { position: absolute; top: 0; left: 0; z-index: 10001; width: 100%; overflow: hidden; pointer-events: none; }
.dmd-photo-holder { position: absolute; z-index: 10001; display: none; width: 100px; pointer-events: auto; }
.dmd-photo-container { position: relative; width: 100%; text-align: left; }
.dmd-photo-content { height: 40px; min-width: 40px; margin: 0 auto; }
.dmd-photo-loader { position: absolute; top: 50%; left: 50%; display: block; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 20px; background: #fff url("../img/photo-loader.gif") center center no-repeat; }
.dmd-photo-fade { display: none; }
.dmd-photo-hover { position: absolute; top: 0; z-index: 2000; width: 100%; cursor: pointer; }
.dmd-photo-next,
.dmd-photo-prev { position: absolute; top: 50%; display: block; width: 50px; height: 50px; margin: -25px 0 0; border-radius: 100px; font-size: 27px; line-height: 50px; text-align: center; text-indent: -9999px; color: #f2a8ac; opacity: 0; transform: translateZ(0); transition: opacity .15s ease-out, background-color .15s ease-out, border-color .15s ease-out; }
.dmd-photo-next { right: 10px; }
.dmd-photo-prev { left: 10px; }
.dmd-photo-next::before,
.dmd-photo-prev::before { position: absolute; top: 0; left: 0; display: block; width: 100%; font-family: "dmd-lnr"; font-size: 20px; line-height: inherit; text-align: center; text-indent: 0; color: #fff; }
.dmd-photo-next::before { content: "\e876"; }
.dmd-photo-prev::before { content: "\e875"; }
.dmd-photo-content:hover .dmd-photo-next,
.dmd-photo-content:hover .dmd-photo-prev { opacity: 1; }
.dmd-photo-full { line-height: 1 !important; }
.dmd-photo-image { display: inline; max-width: 100%; height: auto; vertical-align: baseline; }
.dmd-photo-details { position: relative; float: left; margin: 5px 0 2px; opacity: .7; }
.dmd-photo-nav { position: relative; float: left; width: 65px; height: 30px; }
.dmd-photo-counter { position: relative; top: 2px; float: left; margin: 0; padding: 0 20px; font-size: 15px; line-height: 25px; font-weight: 400; white-space: nowrap; color: #fff; }
.dmd-photo-close { position: absolute; top: 0; right: 0; display: block; width: 30px; height: 30px; line-height: 22px; text-indent: -10000px; opacity: 0; cursor: pointer; }
@media (max-width: 1314px) {
	.dmd-photo-holder { right: 20px !important; left: 20px !important; width: auto !important; }
	.dmd-photo-content { width: 100% !important; height: auto !important; }
	.dmd-photo-hover { width: 100% !important; height: 100% !important; }
	.dmd-photo-full img { width: 100% !important; height: auto !important; }
}

/* Style "DMD Price list" (group with a heading and a table), Terms of Cooperation.
   Headings like the site's Montserrat titles, rows in Open Sans with light lines, prices in Montserrat on the right. */
.wp-block-group.is-style-dmd-price-list { max-width: 900px; }
.wp-block-group.is-style-dmd-price-list + .wp-block-group.is-style-dmd-price-list { margin-top: 70px; }
.is-style-dmd-price-list h2.wp-block-heading {
	margin: 0;
	font-size: 26px;
	line-height: 1.3em;
	letter-spacing: 1px;
	overflow-wrap: break-word;
}
/* Short grey line below the heading, as the site's separator (30 x 2 px) */
.is-style-dmd-price-list h2.wp-block-heading::after { content: ""; display: block; width: 30px; margin: 16px 0 10px; border-bottom: 2px solid var(--line); }
.is-style-dmd-price-list .wp-block-table { margin: 0; overflow-x: visible; }
.is-style-dmd-price-list .wp-block-table table { width: 100%; border-collapse: collapse; table-layout: auto; }
.is-style-dmd-price-list .wp-block-table thead { border: 0; }
.is-style-dmd-price-list .wp-block-table th,
.is-style-dmd-price-list .wp-block-table td { border: 0; border-bottom: 1px solid #e3e3e6; padding: 14px 0; vertical-align: top; text-align: left; }
.is-style-dmd-price-list .wp-block-table th {
	padding-top: 12px;
	font-family: Montserrat, sans-serif;
	font-size: 12px;
	line-height: 20px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--dark);
	border-bottom: 2px solid var(--line);
}
.is-style-dmd-price-list .wp-block-table td { font-size: 15px; line-height: 26px; color: var(--text); }
/* Price column: right aligned, never broken */
.is-style-dmd-price-list .wp-block-table th:last-child,
.is-style-dmd-price-list .wp-block-table td:last-child { padding-left: 30px; text-align: right; white-space: nowrap; }
.is-style-dmd-price-list .wp-block-table td:last-child {
	font-family: Montserrat, sans-serif;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .5px;
	color: var(--dark);
}
@media (max-width: 768px) {
	.wp-block-group.is-style-dmd-price-list + .wp-block-group.is-style-dmd-price-list { margin-top: 50px; }
	.is-style-dmd-price-list h2.wp-block-heading { font-size: 22px; }
}
@media (max-width: 480px) {
	.is-style-dmd-price-list h2.wp-block-heading { font-size: 18px; letter-spacing: .5px; }
	.is-style-dmd-price-list .wp-block-table td { font-size: 14px; line-height: 22px; }
	.is-style-dmd-price-list .wp-block-table td:last-child { padding-left: 15px; font-size: 14px; letter-spacing: 0; }
	.is-style-dmd-price-list .wp-block-table th:last-child { padding-left: 15px; }
}
/* More room below the title band and above the footer than the plain pages' 30 px */
.wp-block-group.is-style-dmd-price-list:first-child { margin-top: 40px; }
.wp-block-group.is-style-dmd-price-list:last-child { margin-bottom: 60px; }
@media (max-width: 480px) {
	.wp-block-group.is-style-dmd-price-list:first-child { margin-top: 20px; }
	.wp-block-group.is-style-dmd-price-list:last-child { margin-bottom: 40px; }
}