/* ============================================================================
   MASTHEAD — the hero at the top of posts, portfolio items and pages.

   ORDER MATTERS IN THIS FILE. Several rules below have identical specificity,
   so the later one wins. The sequence is:

       shared  ->  posts + pages  ->  single posts  ->  portfolio  ->  per-page

   Moving a block up or down will silently change how a hero looks.
   ============================================================================ */


/* ============================================================
   SHARED
   ============================================================ */

/* Non-fullheight mastheads: a narrow, centred column. */
.section-masthead__inner.container-fluid {
	max-width: 900px;
	padding: 0 !important;
	text-align: left;
	margin: 50px auto 0 !important;
}

/* Fullheight mastheads: full-bleed, content pinned to the bottom.
   Higher specificity than the rule above, so it wins where it applies. */
.section-masthead.section-fullheight .section-masthead__inner.container-fluid {
	max-width: none !important;
	margin: 0 !important;
	padding-left: var(--gutter-horizontal) !important;
	padding-right: var(--gutter-horizontal) !important;
	box-sizing: border-box !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-end !important;
	padding-bottom: 90px !important;
}

/* Post mastheads use this container; page and portfolio mastheads use
   `.section-masthead__header.container`. Horizontal padding for both is
   set by the alignment system in 03-base.css — do not add it here, or
   post titles will drift away from the logo again. */
.section-masthead .section-blog__container {
	max-width: var(--evm-container-max) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	box-sizing: border-box !important;
	width: 100% !important;
	text-align: left !important;
}

/* The parent theme's scroll-down arrow is suppressed everywhere. */
.section-masthead__wrapper-scroll-down {
	display: none !important;
}

/* Kinsey prints an icon before each category; we only want the text. */
.section-masthead__category i {
	display: none !important;
}

.section-masthead__category {
	margin: 0 0 0px !important;
}

.section-masthead__category span {
	font-family: 'Vulf Sans' !important;
	font-size: 22px;
	font-weight: 500 !important; /* Medium — was the 'VulfSans-Medium' family */
	line-height: 29px;
	letter-spacing: 0.06em;
	text-align: left;
	text-transform: uppercase;
	color: var(--evm-ink);
}

/* Heading.

   NOTE: the old child theme pinned this to `font-size: 64px !important` with a
   selector specific enough to beat the clamp() below, which meant post titles
   never scaled down on small screens. The pin has been removed so the clamp
   works. Everything else here is unchanged. */
h1.section-masthead__heading.d-inline-block.my-0.xl.arts-split-text.js-transition-heading {
	font-family: 'Vulf Sans';
	font-weight: 400;
	line-height: 80px;
	letter-spacing: 0em;
	text-align: left;
	color: var(--evm-ink);
}


/* ============================================================
   POSTS + PAGES  (everything except portfolio items)
   ============================================================ */

/* Hero floor */
body:not(.single-arts_portfolio_item) .section-masthead.section-fullheight .section-fullheight__inner {
	min-height: 65vh;
}

body:not(.single-arts_portfolio_item) .section-masthead.section-fullheight .section-fullheight__inner_mobile {
	height: 65vh;
}

/* Title size — responsive */
body:not(.single-arts_portfolio_item) .section-masthead .section-masthead__heading.xl {
	font-size: clamp(2rem, 5vw, 4rem) !important;
	line-height: 1.4 !important;
}

/* Title measure */
body:not(.single-arts_portfolio_item) .section-masthead .section-masthead__heading {
	display: block !important;
	max-width: var(--evm-masthead-title-max) !important;
	background: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* A single white pill wrapping the whole category line. */
body:not(.single-arts_portfolio_item) .section-masthead__category {
	display: inline-block !important;
	background-color: var(--evm-surface-footer) !important;
	color: #000 !important;
	padding: 8px 26px 10px 26px !important;
	margin-bottom: 12px !important;
}


/* ============================================================
   SINGLE POSTS  — must stay AFTER the block above

   These override the white pill with plain white text, matching the
   portfolio treatment. Same specificity as the rules above, so position
   in this file is what makes them win.
   ============================================================ */
body.single-post .section-masthead.section-fullheight,
body.single-post .section-masthead.section-fullheight .section-fullheight__inner {
	height: 75vh !important;
	min-height: 75vh !important;
}

body.single-post .section-masthead.section-fullheight .section-fullheight__inner_mobile {
	height: 75vh !important;
}

body.single-post .section-masthead__category {
	display: block !important;
	background-color: transparent !important;
	padding: 0 !important;
	margin-bottom: 0.5rem !important;
}

body.single-post .section-masthead__category span {
	color: var(--evm-ink-inverse) !important;
	font-size: 18px !important;
	letter-spacing: 0.1em !important;
}

.single-post section.section.section-masthead {
	padding-bottom: 0 !important;
	margin-bottom: 0 !important;
}


/* ============================================================
   PORTFOLIO ITEMS
   ============================================================ */

/* Hero height */
body.single-arts_portfolio_item .section-masthead.section-fullheight,
body.single-arts_portfolio_item .section-masthead.section-fullheight .section-fullheight__inner {
	height: 75vh !important;
	min-height: 75vh !important;
}

body.single-arts_portfolio_item .section-masthead.section-fullheight .section-fullheight__inner_mobile {
	height: 75vh !important;
}

/* Title size */
body.single-arts_portfolio_item .section-masthead .section-masthead__heading.xl {
	font-size: clamp(2rem, 5vw, 4.5rem) !important;
	line-height: 1.47 !important;
	letter-spacing: 0 !important;
}

/* Parallax headroom — the image is taller than the frame so it can drift. */
body.single-arts_portfolio_item .section-masthead__background .mask-reveal__layer-1 {
	position: relative !important;
	height: 120% !important;
	top: -10% !important;
}

/* Title sits low in the hero image. */
body.single-arts_portfolio_item .section-masthead__inner {
	justify-content: flex-end !important;
	padding-bottom: 6vh !important;
}

/* Gap between the hero and the first Elementor section. */
body.single-arts_portfolio_item .section-masthead {
	margin-bottom: 80px !important;
}

/* Header stacks so the chips can sit above the title. */
body.single-arts_portfolio_item .section-masthead__header {
	display: flex;
	flex-direction: column;
}

body.single-arts_portfolio_item .section-masthead__category {
	order: -1;
	display: block !important;
	margin-top: 0 !important;
	margin-bottom: 0.5rem !important;
	list-style: none !important;
}

/* Category chips.

   TODO: the chips currently sit inline with no row layout. The old rule that
   was meant to lay them out in a flex row targeted `.split-li-wrapper`, which
   does not exist in the rendered markup — it never applied and has been
   removed. Rebuilding this properly means targeting the real container,
   `li.post-meta__categories_chips` (emitted by
   template-parts/list/list-categories.php). Doing so WILL change spacing,
   so it is deliberately not done here. */
body.single-arts_portfolio_item .evm-chip {
	background: transparent;
	color: var(--evm-ink-inverse);
	padding: 0;
	border-radius: 0px;
	font-size: 18px;
	line-height: 1.4;
	letter-spacing: 0.1em;
}


/* ============================================================
   PER-PAGE OVERRIDES

   These key off numeric page IDs, which break if a page is ever deleted
   and recreated. Worth replacing with body classes derived from the page
   slug — see the theme-mode note in 03-base.css.

     3121 = Work      3499 = About      3537 = Approach
   ============================================================ */
body.page-id-3121 .section-masthead .section-masthead__heading,
body.page-id-3499 .section-masthead .section-masthead__heading,
body.page-id-3537 .section-masthead .section-masthead__heading {
	display: none !important;
}

/* Collapse the now-empty masthead. */
body.page-id-3121 .section-masthead,
body.page-id-3499 .section-masthead,
body.page-id-3537 .section-masthead {
	min-height: 0 !important;
	padding-top: 80px !important;
	padding-bottom: 80px !important;
}

/* Work: hide the portfolio filter. */
body.page-id-3121 .section-filter,
body.page-id-3121 .js-filter,
body.page-id-3121 .filter {
	display: none !important;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media screen and (max-width: 800px) {
	.section-masthead__inner.container-fluid {
		padding: 0 5% !important;
	}
}

@media (max-width: 767px) {
	body:not(.single-arts_portfolio_item) .section-masthead__category,
	body:not(.single-arts_portfolio_item) .section-masthead__category .post-meta,
	body:not(.single-arts_portfolio_item) .section-masthead__category li,
	body:not(.single-arts_portfolio_item) .section-masthead__category a,
	body:not(.single-arts_portfolio_item) .section-masthead__category span {
		font-size: 10px !important;
	}

	body:not(.single-arts_portfolio_item) .section-masthead__category {
		padding: 1px 14px 2px 14px !important;
	}

	body:not(.single-arts_portfolio_item) .section-masthead .section-masthead__heading.xl {
		letter-spacing: 0 !important;
	}

	body:not(.single-arts_portfolio_item) .section-masthead__heading .arts-split-text__line {
		padding: 0px 14px 8px 14px !important;
	}

	body.single-arts_portfolio_item .evm-chip {
		font-size: 10px !important;
		padding: 0 !important;
	}
}

@media screen and (max-width: 600px) {
	.section-masthead__inner.container-fluid {
		padding: 20px !important;
	}
}