/* ==========================================================================
   Homepage hero
   Reference: design-reference/final-media/hero-approved.png
   Copy column on the ivory field; the photograph bleeds to the top, end and
   bottom edges of the band and feathers into the ivory on its inner edge.
   ========================================================================== */

.tpl-hero {
	position: relative;
	overflow: hidden;
	background-color: var(--c-ivory);
	background-image:
		radial-gradient(90% 120% at 100% 0%, rgba(145, 161, 132, 0.16) 0%, transparent 60%);
}

[dir="rtl"] .tpl-hero {
	background-image:
		radial-gradient(90% 120% at 0% 0%, rgba(145, 161, 132, 0.16) 0%, transparent 60%);
}

.tpl-hero__inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-4);
	align-items: center;
	padding-block: var(--sp-4) 0;
}

/* --- Text column -------------------------------------------------------- */

.tpl-hero__content {
	position: relative;
	z-index: 2;
	max-inline-size: 36rem;
	padding-block-end: var(--sp-4);
}

/* The reference sets the eyebrow in forest, not muted grey. */
.tpl-hero .tpl-eyebrow {
	color: var(--c-forest);
}

.tpl-hero__title {
	font-size: var(--fs-h1);
	font-weight: var(--fw-display);
	text-wrap: balance;
}

.tpl-hero__lead {
	margin-block-start: var(--sp-2);
	max-inline-size: 34rem;
	color: var(--c-muted);
	font-size: var(--fs-lead);
}

.tpl-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin-block-start: var(--sp-3);
}

/* --- Trust badges ------------------------------------------------------- */

.tpl-hero__badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2);
	margin-block-start: var(--sp-4);
}

.tpl-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-1);
	color: var(--c-forest);
	font-size: var(--fs-small);
}

.tpl-hero__badge .tpl-icon {
	inline-size: 22px;
	block-size: 22px;
	color: var(--c-forest);
}

/* Hairline separators between badges, as in the reference. They are only
   drawn once the three sit on a single row, so a wrapped badge never starts
   with a stray rule. */
/* The badge row is allowed to run wider than the paragraph measure, as in the
   reference, so the three labels stay on one line. Below this width they wrap
   normally, with no stray separator at the start of a wrapped line. */
@media (min-width: 900px) {
	.tpl-hero__badges {
		display: grid;
		grid-template-columns: repeat(3, auto);
		justify-content: start;
		inline-size: max-content;
		max-inline-size: none;
		gap: 0;
	}

	.tpl-hero__badge {
		padding-inline: var(--sp-2);
		white-space: nowrap;
	}

	.tpl-hero__badge:first-child {
		padding-inline-start: 0;
	}

	.tpl-hero__badge + .tpl-hero__badge {
		border-inline-start: 1px solid var(--c-line);
	}
}

/* --- Monogram ----------------------------------------------------------- */

.tpl-hero__mark {
	display: none;
	position: absolute;
	z-index: 1;
	opacity: 0.16;
	pointer-events: none;
}

/* --- Media -------------------------------------------------------------- */

/* Stacked layout: the photograph runs edge to edge rather than sitting in a
   rounded card, so it reads as part of the ivory field on a phone too. */
.tpl-hero__media {
	position: relative;
	margin-inline: calc(var(--gutter) * -1);
}

.tpl-hero__photo {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 5;
	inline-size: 100%;
	/* Stacked layout: keep the portrait from filling a whole tablet screen.
	   Now that it runs edge to edge it is wider, so it is capped in pixels as
	   well as in viewport height. */
	max-block-size: min(70vh, 480px);
	background-color: var(--c-sage-200);
	background-image: url("../img/pattern-repeat-light.svg");
	background-size: 180px auto;
	overflow: hidden;
}

/* The placeholder panel keeps its card shape; only a real photograph bleeds. */
.tpl-hero__photo:not(.tpl-hero__photo--image) {
	margin-inline: var(--gutter);
	border-radius: var(--radius-lg);
}

.tpl-hero__photo--image {
	background-image: none;
	background-color: var(--c-ivory);
}

/* Blend the lower edge only; keep the available hairline visible. */
.tpl-hero__photo--image::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(to top, var(--c-ivory) 0%, rgba(245, 241, 232, 0) 12%);
	pointer-events: none;
}

.tpl-hero__img {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
	object-position: center top;
}

/* Oversized translucent monogram, used only on the placeholder panel. */
.tpl-hero__watermark {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	inline-size: 58%;
	block-size: auto;
	transform: translate(-50%, -50%);
	opacity: 0.22;
	pointer-events: none;
}

[dir="rtl"] .tpl-hero__watermark {
	transform: translate(50%, -50%);
}

.tpl-hero__photo-note {
	position: relative;
	z-index: 1;
	padding: var(--sp-1) var(--sp-3);
	background-color: rgba(245, 241, 232, 0.85);
	border-radius: var(--radius-pill);
	color: var(--c-muted);
	font-size: var(--fs-eyebrow);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
}

html[lang^="ar"] .tpl-hero__photo-note {
	text-transform: none;
}

/* --- Desktop ------------------------------------------------------------ */

@media (min-width: 900px) {
	/* The photograph is lifted out of the grid so it can bleed to the band's
	   top, end and bottom edges exactly as the reference shows. */
	.tpl-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		/* Tracks the reference's band proportion (~0.45 of the width) instead
		   of the viewport height, so the portrait is never squashed. */
		min-block-size: clamp(540px, 44vw, 720px);
		padding-block: var(--sp-5);
	}

	.tpl-hero__content {
		max-inline-size: 33rem;
		padding-block: 0;
	}

	/* Headline and paragraph keep the narrow measure; the badge row does not. */
	.tpl-hero__badges {
		margin-inline-end: calc(var(--sp-5) * -1);
	}

	/*
	 * The media is positioned against the centred container, so `0` would stop
	 * it at the container edge and leave an ivory margin outside it - that gap
	 * is what made the photograph read as a floating box on wide screens.
	 * `calc(50% - 50vw)` is the distance from the container edge out to the
	 * viewport edge, so the photograph bleeds properly at any width. The band
	 * clips the overshoot from the scrollbar, so no page overflow results.
	 */
	.tpl-hero__media {
		position: absolute;
		inset-block: 0;
		inset-inline-end: calc(50% - 50vw);
		z-index: 1;
		inline-size: clamp(420px, 46vw, 900px);
		margin: 0;
	}

	.tpl-hero__photo {
		aspect-ratio: auto;
		block-size: 100%;
		max-block-size: none;
		border-radius: 0;
	}


	/* Feather the inner edge so the photograph melts into the ivory field
	   instead of ending on a hard line. */
	.tpl-hero__photo--image::after {
		content: "";
		position: absolute;
		inset-block: 0;
		inset-inline-start: 0;
		inline-size: 34%;
		background: linear-gradient(to right, var(--c-ivory) 0%, rgba(245, 241, 232, 0) 100%);
		pointer-events: none;
	}

	[dir="rtl"] .tpl-hero__photo--image::after {
		background: linear-gradient(to left, var(--c-ivory) 0%, rgba(245, 241, 232, 0) 100%);
	}

	/* The monogram belongs in the gap between the copy and the photograph. At
	   900-1099px that gap is too narrow, so it only appears once there is room
	   for it to clear the headline entirely. */
	.tpl-hero__mark {
		display: none;
	}
}

@media (min-width: 1200px) {
	.tpl-hero__mark {
		display: block;
		inline-size: clamp(140px, 13vw, 200px);
		block-size: auto;
		inset-block-start: 50%;
		inset-inline-end: 36%;
		transform: translateY(-46%);
	}
}

/* The media width is a clamp against the viewport, so it needs no separate
   wide-screen override. */

/* Transparent editorial portrait: preserve the whole silhouette. */
.tpl-hero--cutout {
 inline-size: 100%;
 max-inline-size: var(--container);
 margin-inline: auto;
 background: var(--c-ivory);
}
[dir="rtl"] .tpl-hero--cutout {
 inline-size: 100%;
 max-inline-size: var(--container);
 margin-inline: auto;
 background: var(--c-ivory);
}
/* Photographic botanical backdrop; mirrored independently from the copy. */
.tpl-hero--cutout::before {
 content: "";
 position: absolute;
 inset: 0;
 background: url("../img/hero-botanical-background.png") left center / cover no-repeat;
 transform: scaleX(-1);
 pointer-events: none;
}
[dir="rtl"] .tpl-hero--cutout::before {
 transform: none;
}
.tpl-hero--cutout .tpl-hero__photo--image {
 background: transparent;
}
.tpl-hero--cutout .tpl-hero__photo--image::before {
 content: none;
}
.tpl-hero--cutout .tpl-hero__photo--image::after {
 content: none;
}
.tpl-hero--cutout .tpl-hero__img {
 object-position: center bottom;
}
[dir="rtl"] .tpl-hero--cutout .tpl-hero__img {
 transform: scaleX(-1);
}
@media (min-width: 900px) {
 .tpl-hero--cutout { overflow: visible; }
 .tpl-hero--cutout .tpl-hero__inner {
  z-index: auto;
  min-block-size: clamp(480px, 38vw, 580px);
  padding-block: 40px;
 }
 .tpl-hero--cutout .tpl-hero__content {
  max-inline-size: 44%;
 }
 .tpl-hero--cutout .tpl-hero__lead {
  color: var(--c-forest);
 }
 .tpl-hero--cutout .tpl-hero__actions { margin-block-start: 24px; }
 .tpl-hero--cutout .tpl-hero__badges {
  margin-block-start: 28px;
  margin-inline-end: 0;
  display: flex;
  flex-wrap: wrap;
  inline-size: auto;
  max-inline-size: 100%;
  gap: 12px;
 }
 .tpl-hero--cutout .tpl-hero__badge { padding-inline: 0; }
 .tpl-hero--cutout .tpl-hero__badge + .tpl-hero__badge { border: 0; }
 .tpl-hero--cutout .tpl-hero__media {
  inset-block: -24px 0;
  inset-inline-end: var(--gutter);
  inline-size: calc(43% - var(--gutter));
  z-index: 51;
  pointer-events: none;
 }
 .tpl-hero--cutout .tpl-hero__photo { overflow: visible; }
}

@media (min-width: 1200px) {
 .tpl-hero--cutout .tpl-hero__mark {
  inline-size: clamp(170px, 14vw, 210px);
  inset-inline-end: 41%;
  inset-block-start: 45%;
  opacity: .24;
  z-index: 1;
 }
}
@media (max-width: 899px) {
 .tpl-hero--cutout::before {
  inset-block-start: auto;
  block-size: 440px;
  inline-size: 100%;
  background-size: auto 100%;
 }
}