/**
 * Shared interior-page header (templates/page.html).
 *
 * Every page except the homepage gets this band: the page title on a dark field,
 * so About Us, Services, Contact and the rest open consistently instead of each
 * pattern inventing its own hero.
 *
 * WORKS WITH OR WITHOUT A FEATURED IMAGE — this is the important part.
 *
 * The Cover block is set to useFeaturedImage. Today no page has one, so it renders
 * with just the overlay. Rather than leave that as a flat dark slab, the overlay
 * span itself is repainted with a diagonal gradient plus a faint pinstripe, so:
 *
 *   - no featured image  → the gradient IS the header, over the dark base colour
 *   - featured image set → the same gradient becomes the legibility scrim over it
 *
 * That means when the real site is seeded, setting a Featured Image on a page is
 * the only step needed to give it a photographic header. Nothing here changes.
 *
 * Repainting the overlay span rather than adding a ::after avoids the z-index
 * fight described in services.css — core already layers this span beneath the
 * content, so no stacking work is needed.
 */

.pd-page-hero {
	/* Shows through the gradient's transparent stops when no photo is present. */
	background-color: var( --wp--preset--color--dark );

	/* ONE height for every view, with or without a photograph. This is what stops
	   the page jumping when you click between About and Contact — if photo pages
	   were taller, every navigation would shift the content below the fold. */
	min-height: clamp( 260px, 32vh, 400px );

	/* Positioning for the background image PHP injects (see
	   pacific_drilling_hero_head). The image itself is set inline so the slug->file
	   map has a single home; everything about how it sits lives here. */
	background-size: cover;
	background-position: center 45%;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;

	/**
	 * Angled bottom edge, matching the homepage's section dividers.
	 *
	 * Direction is deliberate: the homepage's about section uses angle-top-right,
	 * whose boundary sits higher on the left and lower on the right. This mirrors
	 * that exact boundary, so an interior page reads as the same design system
	 * rather than a different one.
	 *
	 * Implemented here rather than as one of the is-style-angle-top-* block styles
	 * because those cut the TOP of the following section — which would mean every
	 * page pattern having to opt in. Clipping the hero's own bottom keeps it in the
	 * template, so every page gets it for free.
	 */
	/* Same values as .pd-angle--md in angled-sections.css, so the interior-page
	   slope reads at the same pitch as the homepage's dividers rather than a
	   shallower one of its own. */
	--pd-hero-angle: clamp( 2rem, 5vw, 5rem );
	clip-path: polygon( 0 0, 100% 0, 100% 100%, 0 calc( 100% - var( --pd-hero-angle ) ) );

	/* Keeps the title clear of the clipped corner. */
	padding-bottom: calc( var( --wp--preset--spacing--70 ) + var( --pd-hero-angle ) );
}

.pd-page-hero > .wp-block-cover__background {
	opacity: 1;
	background-color: transparent;

	/* Diagonal through the palette blues, echoing the careers band on the
	   homepage. Partly transparent so a featured image reads through it. */
	/* Scrim strength is parameterised. The defaults below are tuned for a page with
	   NO photograph, where this gradient IS the header and can be near-opaque. A
	   page that sets a hero photo dials all three back so the image reads — see the
	   per-page block at the foot of this file. */
	background-image:
		repeating-linear-gradient(
			135deg,
			rgba( 255, 255, 255, 0.03 ) 0,
			rgba( 255, 255, 255, 0.03 ) 2px,
			transparent 2px,
			transparent 14px
		),
		linear-gradient(
			135deg,
			rgba( 36, 34, 45, var( --pd-scrim-a, 0.94 ) ) 0%,
			rgba( 35, 81, 122, var( --pd-scrim-b, 0.82 ) ) 55%,
			rgba( 43, 102, 153, var( --pd-scrim-c, 0.72 ) ) 100%
		);
}

/**
 * Page title.
 *
 * Tag-qualified at (0,1,1) to beat theme.json's `:root :where(h1)` at (0,1,0) —
 * a lone class would only tie it, and ties go to core, which is enqueued after the
 * theme's stylesheets.
 */
h1.pd-page-hero__title {
	margin: 0;

	/* Insurance for pages with hero photography: a scrim is tuned for the image as
	   a whole, but a title can still land on a bright patch of it. Invisible on the
	   flat-gradient pages, so it can be unconditional. */
	text-shadow: 0 2px 14px rgba( 20, 19, 26, 0.45 );
	max-width: 24ch;
	margin-inline: auto;

	font-size: clamp( 2rem, 4vw, 3rem );
	line-height: 1.15;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

/* Gold rule beneath, matching every section heading on the homepage. */
h1.pd-page-hero__title::after {
	content: "";
	display: block;
	width: 64px;
	height: 4px;
	margin: 1.35rem auto 0;
	background-color: var( --wp--preset--color--gold );
}

/**
 * Secondary line under the title — the post meta row on single.html and the term
 * description on category.html.
 *
 * Both inherit `base` from the block, so this only handles the recession and the
 * link colour: post-date/author/terms render links that would otherwise pick up
 * theme.json's primary blue, which is unreadable on the dark gradient.
 */
.pd-page-hero__meta {
	margin-top: 1.35rem;
	opacity: 0.85;
}

.pd-page-hero__meta a {
	color: var( --wp--preset--color--base );
	text-decoration: none;
}

.pd-page-hero__meta a:hover,
.pd-page-hero__meta a:focus {
	text-decoration: underline;
}

/**
 * The title's gold rule is suppressed when a meta row follows it — rule, then meta,
 * then content reads as two separators stacked. The rule stays on templates whose
 * hero carries the title alone.
 */
.pd-page-hero__title:has( + .pd-page-hero__meta )::after {
	display: none;
}

/**
 * HERO PHOTOGRAPHY
 *
 * Which image each view gets is decided in functions.php
 * (pacific_drilling_hero_image), which injects the background-image inline and
 * preloads it. Keeping the map there rather than as per-slug rules here means the
 * CSS, the preload hint and the body class cannot disagree about which file a page
 * uses.
 *
 * Why code at all, rather than a Featured Image per page:
 *   - it ships with the theme, so it survives a reseed and exists on every
 *     environment, instead of being per-site content someone has to re-attach
 *   - a real Featured Image still wins when one is set: the Cover then renders an
 *     <img class="wp-block-cover__image-background"> over this background, and
 *     pacific_drilling_hero_image() stands down. The client keeps full control from
 *     wp-admin without touching code.
 */

.pd-has-hero-photo .pd-page-hero > .wp-block-cover__background {
	/* Much lighter than before, and that is the whole point of the title panel
	 * below. While the scrim was the only thing making white type readable it had
	 * to sit near 0.86, and that same weight was what made the photographs look
	 * washed out. With legibility handled locally, this only has to tint the image
	 * toward the brand blue and stop the very brightest areas glaring.
	 *
	 * One set of values for every hero, not per page: the five crops span a snowy
	 * white truck and a dark bookshop interior, and a scrim tuned per image would
	 * mean the header visibly changing weight as you move around the site. */
	--pd-scrim-a: 0.52;
	--pd-scrim-b: 0.3;
	--pd-scrim-c: 0.2;
}

/**
 * Title panel.
 *
 * Same move as the homepage hero and the service cards: decouple text contrast
 * from the image treatment. A scrim has to be tuned for the worst patch of an
 * unknown photograph, so it always over-darkens the rest; a panel fixes contrast
 * locally and lets the photograph run bold.
 *
 * `width: fit-content` keeps the panel hugging the title rather than spanning the
 * band — a full-width bar would just be the old heavy scrim in a different shape.
 */
.pd-has-hero-photo h1.pd-page-hero__title {
	width: fit-content;
	max-width: min( 24ch, 100% );
	margin-inline: auto;

	padding: 1rem 2.25rem 1.25rem;
	border-radius: 12px;

	background-color: rgba( 20, 19, 26, 0.55 );
	background-color: color-mix( in srgb, var( --wp--preset--color--dark ) 62%, transparent );

	-webkit-backdrop-filter: blur( 7px );
	backdrop-filter: blur( 7px );

	/* Kept, but light — the panel does the work now. */
	text-shadow: 0 1px 6px rgba( 20, 19, 26, 0.35 );
}

/**
 * Parallax.
 *
 * Desktop pointers only, and never when reduced motion is requested:
 *   - iOS Safari does not honour background-attachment: fixed and renders the
 *     image at the wrong scale, so touch devices are excluded via hover/pointer
 *     rather than a width breakpoint
 *   - fixed backgrounds repaint on scroll, which is exactly the jank we removed
 *     when standardising the hero height
 *
 * Note this changes how `cover` resolves: the image sizes against the VIEWPORT
 * rather than the 260px band, so the visible slice is a window onto a much larger
 * picture. That is the effect, but it also means the focal point shifts, hence the
 * separate background-position below.
 */
@media ( hover: hover ) and ( pointer: fine ) and ( prefers-reduced-motion: no-preference ) {
	.pd-has-hero-photo .pd-page-hero {
		background-attachment: fixed;
		background-position: center 42%;
	}
}