/*
Theme Name: m.ewald BUILDING
Theme URI: https://mewaldbuilding.com.au
Description: The approved m.ewaldBUILDING design, as a Hello Elementor child theme. The whole design system lives in assets/mewald.css, so every page uses the same colours, type and components, and Elementor only has to carry the content.
Author: Morello Web
Author URI: https://morelloweb.com
Template: hello-elementor
Version: 1.0.0
Text Domain: mewald
*/

/* ------------------------------------------------------------------------
   Letting the design's own layout rules through.

   The page sections carry structural CSS, rules that style "the second child
   of this wrapper" and so on. Elementor wraps every block in several divs of
   its own, which would land in between and stop those rules matching, so the
   grids would quietly fall apart.

   display:contents takes Elementor's wrappers out of the layout entirely
   without removing them from the page, so each section sits directly inside
   the body exactly as it was designed to. Nothing else about Elementor
   changes: the blocks are still blocks, and still editable.

   Only on the live page. Inside the editor the wrappers stay visible, because
   that is what you click on to select a block.
   --------------------------------------------------------------------- */

body:not(.elementor-editor-active) .elementor-section-wrap,
body:not(.elementor-editor-active) .elementor > .e-con,
body:not(.elementor-editor-active) .elementor > .e-con > .e-con-inner,
body:not(.elementor-editor-active) .elementor .elementor-widget-html,
body:not(.elementor-editor-active) .elementor .elementor-widget-html > .elementor-widget-container {
	display: contents;
}

/* Hello Elementor boxes the content in; the design manages its own width. */
.site-main,
.page-content,
main.site-main {
	max-width: none;
	padding: 0;
	margin: 0;
}

body.elementor-page .site-header,
body.elementor-page .site-footer {
	display: none;
}

/* ------------------------------------------------------------------------
   Blog. Built from the pieces the rest of the site already uses, the page
   hero and the project card, with only the few rules a blog needs on top.
   --------------------------------------------------------------------- */

.blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
}

@media (max-width: 980px) {
	.blog-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
	.blog-grid { grid-template-columns: 1fr; }
}

.blog-grid .pcard:hover { transform: translateY(-2px); box-shadow: var(--sh); }
.blog-grid .pcard:hover .pimg img { transform: scale(1.04); }
.blog-grid .pcard .pimg:empty { display: none; }

/* a post that reads comfortably: one column, limited measure */
.post .wrap { max-width: 760px; }

.post-figure {
	margin-bottom: 34px;
	border-radius: var(--r);
	overflow: hidden;
	box-shadow: var(--sh);
}

.post-body { font-size: 1.06rem; line-height: 1.75; color: var(--text); }
.post-body > * + * { margin-top: 1.1em; }
.post-body h2 { font-size: 1.7rem; margin-top: 1.8em; color: var(--ink); }
.post-body h3 { font-size: 1.3rem; margin-top: 1.5em; color: var(--ink); }
.post-body ul,
.post-body ol { padding-left: 1.3em; }
.post-body li + li { margin-top: .4em; }
.post-body a { color: var(--blue-ink); font-weight: 700; text-decoration: underline; }
.post-body img { border-radius: var(--r); margin: 1.4em 0; }
.post-body blockquote {
	border-left: 3px solid var(--gold);
	padding-left: 20px;
	font-family: var(--serif);
	font-size: 1.2rem;
	color: var(--ink);
}

.post-end {
	margin-top: 48px;
	padding: 30px;
	background: var(--cream);
	border: 1px solid var(--line);
	border-radius: var(--r);
	text-align: center;
}
.post-end h2 { font-size: 1.45rem; color: var(--ink); }
.post-end p { margin: 10px 0 20px; color: var(--muted); }
.post-end .btn + .btn { margin-left: 10px; }

@media (max-width: 520px) {
	.post-end .btn { display: flex; justify-content: center; }
	.post-end .btn + .btn { margin: 10px 0 0; }
}

.post-more { padding-top: 0; }
.post-more .eyebrow { display: block; margin-bottom: 20px; }

/* pagination */
.pagination,
.navigation.pagination {
	margin-top: 40px;
	display: flex;
	justify-content: center;
	gap: 10px;
}
.pagination .page-numbers {
	padding: 10px 16px;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-weight: 800;
	font-size: .9rem;
	color: var(--ink);
	background: #fff;
}
.pagination .page-numbers.current { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ------------------------------------------------------------------------
   Gallery. A simple photo grid grouped by job, using the same card
   treatment as everything else on the site.
   --------------------------------------------------------------------- */

.gal-block { padding-top: 54px; padding-bottom: 54px; }
.gal-block + .gal-block { padding-top: 0; }
.gal-block .sec-head { margin-bottom: 26px; }
.gal-block .sec-head p { margin-top: 10px; }
.gal-block .sec-head a { color: var(--blue-ink); font-weight: 800; }

.gal-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}

@media (max-width: 980px) { .gal-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px) { .gal-grid { grid-template-columns: repeat(2, 1fr); } }

.gal-grid figure {
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 10px;
	background: var(--sand);
	border: 1px solid var(--line);
}

.gal-grid img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s;
}

.gal-grid figure:hover img { transform: scale(1.05); }

/* ------------------------------------------------------------------------
   WebP delivery.

   Each photo is offered as WebP first with the original jpg/png behind it,
   which is about 38% fewer bytes on a site that is mostly photographs.

   <picture> is an inline box by default, which would sit between a grid cell
   and the image it stretches. display:contents takes it out of the layout
   entirely, so every existing rule still applies to the img exactly as before.
   --------------------------------------------------------------------- */

picture {
	display: contents;
}

/* ------------------------------------------------------------------------
   Hero slider dots: bigger to tap, same to look at.

   The dots are drawn at 9px, which is a hard thing to hit with a thumb. The
   dot itself is left exactly as designed and an invisible pad is added around
   it, so the target is comfortable without changing anything on screen. The
   gap goes up a little so neighbouring targets cannot overlap.
   --------------------------------------------------------------------- */

.hero-dots {
	gap: 12px;
}

.hero-dots button {
	position: relative;
}

.hero-dots button::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 20px;
	height: 40px;
}

/* ------------------------------------------------------------------------
   Case grid, three across.

   The shared .case-grid is four across, which four other service pages rely
   on. A page showing three photos gets this modifier instead of the shared
   component being changed. The breakpoints are restated because a two-class
   selector outranks the single-class rules inside the existing media queries,
   whatever order they come in.
   --------------------------------------------------------------------- */

.case-grid.cols-3 {
	grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1100px) {
	.case-grid.cols-3 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
	.case-grid.cols-3 { grid-template-columns: 1fr; }
}