/* Block: Section (acf/section)
   Ported from the Dexter Yard theme and restyled onto Pinnacle's grid.
   Mobile-first throughout; the only breakpoint used is the lg tier (992px),
   which is where Pinnacle's own type scale steps up. */

.section--block {
	position: relative;
}

/* --- Editor canvas only --------------------------------------------------
   Two corrections, both scoped to .acf-block-preview (which never exists on
   the front end).

   1. style.css gives every ACF preview `font-size:12px` + a grey frame and a
      floating [data-blockname] tag. That convention suits the theme's
      render-only blocks, but this one is edited inline in the canvas, so the
      copy has to read at its real size. section.php omits data-blockname for
      the same reason; `content:none` stops the empty tag box painting anyway.
   2. ACF puts the block's native padding on its own wrapper div, one level
      above our <section>, so a background image/video would stop at the
      padding edge. section.php re-applies that padding to the <section> in
      preview, so the wrapper's copy has to go — it is an inline style, hence
      the !important. */
.acf-block-preview > section.section--block {
	font-size: 0.9375rem;
	border: 0;
	min-height: 0;
}

.acf-block-preview > section.section--block::before {
	content: none;
}

.acf-block-preview.wp-block-acf-section {
	padding: 0 !important;
}

/* --- Background image / video / overlay ---------------------------------- */

/* Background image (set inline via the ACF field in section.php). */
.section--block.has-background-image {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* Background video: silent loop covering the section, under the overlay.
   The section clips it so a short section doesn't leak video. */
.section--block.has-background-video {
	overflow: hidden;
}

.section--block > .section--bg-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
	z-index: 0;
}

/* Optional transparent overlay over the background image/video.
   Opacity is driven by --section-overlay-opacity (0–1) from the ACF range
   field. Tinted with the brand navy rather than flat black so photography
   sits in the same family as the rest of the site.

   Dexter draws this on ::before; here it has to be ::after, because
   style.css already owns `.acf-block-preview > section:before` for the grey
   [data-blockname] tag it floats over every ACF preview. One element has one
   ::before, so sharing it would mean the overlay and the tag fighting over
   the same pseudo-element in the canvas. */
.section--block.has-overlay::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--theme-dk-blue, #001C33);
	opacity: var(--section-overlay-opacity, 0.5);
	pointer-events: none;
	z-index: 1;
}

/* Keep content above the video and overlay. */
.section--inner {
	position: relative;
	z-index: 2;
}

/* --- Content width -------------------------------------------------------
   The background always spans the window; only the columns are constrained.
   "Contained" matches Bootstrap's .container (1200px + 15px gutters) so a
   Section lines up with every other block on the page. */
.section--inner {
	margin-inline: auto;
	padding-inline: 15px;
	width: 100%;
}

.section--width-contained {
	max-width: 1200px;
}

.section--width-narrow {
	max-width: 900px;
}

.section--width-full {
	max-width: none;
}

@media (min-width: 992px) {
	.section--width-full {
		padding-inline: 30px;
	}
}

/* --- Minimum height locked to the background's aspect ratio ---------------
   --section-ratio is set inline from the ACF field. aspect-ratio is a
   preferred size: content taller than the ratio expands the section past it.
   Flex column carries the vertical alignment; the video/overlay stay absolute
   and unaffected. Not an is-layout-flex container, so core's flex-child
   margin-zeroing doesn't apply. */
.section--block.has-ratio-lock {
	aspect-ratio: var(--section-ratio);
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.section--block.has-ratio-lock > .section--inner {
	width: 100%;
}

.section--block.section--valign-center {
	justify-content: center;
}

.section--block.section--valign-bottom {
	justify-content: flex-end;
}

/* --- Typography ----------------------------------------------------------
   theme.json deliberately ships settings only and no `styles` key, so the
   presets stay available in the editor without restyling the 27 core headings
   already live elsewhere on the site. Pinnacle's type scale is therefore
   applied here, scoped to this block. Core emits its preset font-size classes
   with !important, so an explicit choice in the Typography panel still wins
   over every rule below. */
.section--block :is(h1, h2, h3, h4, h5, h6) {
	font-weight: 500;
	line-height: 1.2;
	margin-bottom: 20px;
}

.section--block h1 {
	font-size: var(--wp--preset--font-size--display, 3.563rem);
}

.section--block h2 {
	font-size: var(--wp--preset--font-size--x-large, 2.625rem);
}

.section--block h3 {
	font-size: var(--wp--preset--font-size--heading, 1.75rem);
}

.section--block h4 {
	font-size: var(--wp--preset--font-size--subhead, 1.5rem);
}

.section--block h5 {
	font-size: var(--wp--preset--font-size--medium, 1.25rem);
}

.section--block h6 {
	font-size: var(--wp--preset--font-size--body-large, 1.15rem);
}

.section--block p,
.section--block li {
	line-height: 1.6;
}

.section--block p:last-child {
	margin-bottom: 0;
}

/* Link colour has to follow the background the editor picked, so the two
   readable defaults are handled rather than assuming a light section. */
.section--block a:not(.wp-element-button) {
	color: var(--theme-lt-blue, #3CA4D4);
	text-decoration: underline;
}

.section--block.has-dk-blue-background-color,
.section--block.has-black-background-color {
	color: #fff;
}

/* --- Columns -------------------------------------------------------------
   Core stacks columns below 782px on its own. Pinnacle's ladder puts the real
   break at lg, so the intermediate tier gets a little breathing room instead
   of three cramped columns on a tablet. */
.section--block .wp-block-columns {
	gap: 30px;
	margin-bottom: 0;
}

@media (min-width: 992px) {
	.section--block .wp-block-columns {
		gap: 40px;
	}
}

.section--block .wp-block-column > *:first-child {
	margin-top: 0;
}

/* Icons: a core/image sized small enough to read as an icon rather than a
   photo. Sizing set in the editor (width/height attributes) still wins. */
.section--block .wp-block-image img {
	max-width: 100%;
	height: auto;
}

.section--block .wp-block-image {
	margin-bottom: 20px;
}

/* Buttons live in css/buttons.css, which dresses this block's core/buttons in
   the hero's speech-bubble outline (and holds the shared SVG the hero draws
   from). Only the spacing is this block's business. */
.section--block .wp-block-buttons {
	margin-top: 30px;
}