/**
 * Hero cover module — headline + ingress sizing.
 * Headline pulled down from 8.75rem display preset; ingress sits
 * between 1rem (mobile) and 1.25rem (desktop) so it feels secondary
 * to the headline without disappearing on large screens.
 */
.wp-block-cover .wp-block-cover__inner-container > .wp-block-group > h1.wp-block-heading {
	font-size: clamp(2.75rem, 6vw, 7.5rem) !important;
}

.wp-block-cover .wp-block-cover__inner-container > .wp-block-group > p.has-large-font-size {
	font-size: clamp(1.25rem, 1.2vw, 1.25rem) !important;
	line-height: 1.5 !important;
}

/* Single-post / page H1 (post-title) inherits the theme.json display preset
   (140px), which dominates short-to-medium post titles. Pull it down to
   a comfortable scale. Scope strictly to the H1 — the same block is used
   as H3 inside the story-modul cards and must keep its small card-title
   sizing (defined in story-modul.css). */
main h1.wp-block-post-title {
	font-size: clamp(2rem, 4.5vw, 4rem) !important;
	line-height: 1.1 !important;
}

/* Prod-imported pages have a common pattern: <figure.wp-block-image>
   followed by a <wp-block-group> that ships with inline
   margin-top:0;padding-top:0, so the body text sits flush against the
   image with no breathing room. Force a top margin on any group/heading/
   paragraph/cover that immediately follows a top-level image. */
main .entry-content > figure.wp-block-image + .wp-block-group,
main .entry-content > figure.wp-block-image + .wp-block-heading,
main .entry-content > figure.wp-block-image + .wp-block-paragraph,
main .entry-content > figure.wp-block-image + p,
main .entry-content > figure.wp-block-image + .wp-block-cover,
main .wp-block-post-content > figure.wp-block-image + .wp-block-group,
main .wp-block-post-content > figure.wp-block-image + .wp-block-heading,
main .wp-block-post-content > figure.wp-block-image + .wp-block-paragraph,
main .wp-block-post-content > figure.wp-block-image + p,
main .wp-block-post-content > figure.wp-block-image + .wp-block-cover {
	margin-top: clamp(24px, 4vh, 48px) !important;
	padding-top: 0 !important;
}

/* Many pages from prod use a 100vh hero cover, which is too tall for the
   new layout. Cap the first full-bleed cover in <main> to a reasonable
   range so it doesn't dominate the viewport.
   The DOM is <main><.entry-content><.wp-block-cover ...>, so the selector
   has to go through the WP post-content wrapper.
   Per-page overrides (e.g. .page-id-2717 in kostnadsfri-cards.css) win
   via specificity. */
main .entry-content > .wp-block-cover.alignfull:first-of-type,
main .wp-block-post-content > .wp-block-cover.alignfull:first-of-type {
	min-height: clamp(380px, 60vh, 560px) !important;
	max-height: 560px !important;
}
@media (max-width: 768px) {
	main .entry-content > .wp-block-cover.alignfull:first-of-type,
	main .wp-block-post-content > .wp-block-cover.alignfull:first-of-type {
		min-height: clamp(320px, 55vh, 420px) !important;
		max-height: 420px !important;
	}
}

/* Front-page hero gets its own treatment: taller than the subpage cap so the
   headline + ingress + button breathe, and *no* max-height so growing
   ingress text pushes the cover taller instead of overflowing behind the
   following stories module. Generous bottom padding keeps content off the
   bottom edge even when text is short. */
body.home main .entry-content > .wp-block-cover.alignfull:first-of-type,
body.home main .wp-block-post-content > .wp-block-cover.alignfull:first-of-type {
	min-height: clamp(560px, 85vh, 820px) !important;
	max-height: none !important;
	height: auto !important;
	padding-top: clamp(40px, 6vh, 80px) !important;
	padding-bottom: clamp(70px, 10vh, 120px) !important;
}
@media (max-width: 768px) {
	body.home main .entry-content > .wp-block-cover.alignfull:first-of-type,
	body.home main .wp-block-post-content > .wp-block-cover.alignfull:first-of-type {
		min-height: clamp(520px, 78vh, 700px) !important;
		padding-bottom: clamp(90px, 14vh, 140px) !important;
	}
}

/* Prod-imported media-text blocks (image + text side-by-side, "Som medlem
   får du tillgång till:", "Bli medlem i nätverket", etc.) carry inline
   grid-template-columns and side padding that, on mobile, leave the text
   noticeably narrower than the image. Force both children to full width
   with matching gutters so they align visually. */
@media (max-width: 768px) {
	main .wp-block-media-text.is-stacked-on-mobile {
		grid-template-columns: 100% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		display: grid !important;
	}
	main .wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__content,
	main .wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__media {
		width: 100% !important;
		max-width: 100% !important;
		grid-column: 1 / -1 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	main .wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__content {
		padding: 0 24px !important;
		box-sizing: border-box !important;
	}
	main .wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__content > *,
	main .wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__content ul,
	main .wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__content ol {
		margin-right: 0 !important;
		max-width: 100% !important;
	}
	main .wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__media {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	main .wp-block-cover .wp-block-media-text.is-stacked-on-mobile {
		padding-top: 16px !important;
		padding-bottom: 16px !important;
	}
	/* The white-overlay cover that wraps the "Som medlem" media-text uses
	   min-height: 461px which dwarfs the actual content on mobile. */
	main .wp-block-cover:not(.alignfull:first-of-type):has(.wp-block-media-text) {
		min-height: 0 !important;
	}
}