/*
 * Components used on more than one page: section openers, the feature grid, the
 * closing call to action, photograph credits.
 *
 * In the base bundle rather than per-template because every one of these
 * appears on the home page AND on every interior page as those are built.
 * Splitting them per template would mean four copies of the same rules and, in
 * time, four that disagree.
 *
 * Transcribed from the design source's SectionIntro, FeatureGrid, CtaSection
 * and Credit components.
 *
 * @package Slovenia_Concierge
 */

/* ------------------------------------------------------- section opener */
.sintro__title {
	margin-block-start: var( --wp--preset--spacing--s );
	max-width: 24ch;
}

.center .sintro__title {
	margin-inline: auto;
}

.sintro p:not( .eyebrow ) {
	max-width: 62ch;
}

.center.sintro p:not( .eyebrow ) {
	margin-inline: auto;
}

/* --------------------------------------------------------- feature grid */
.fgrid {
	display: grid;
	gap: var( --wp--preset--spacing--l );
}

.fgrid__item {
	padding-block-start: var( --wp--preset--spacing--m );
	border-block-start: var( --wp--custom--hairline ) solid var( --wp--custom--border--on-light-faint );
}

.fgrid--on-dark .fgrid__item {
	border-block-start-color: var( --wp--preset--color--black-line );
}

.fgrid__num {
	display: block;
	margin-block-end: var( --wp--preset--spacing--2-xs );
	font-size: var( --wp--preset--font-size--eyebrow );
	font-weight: 500;
	letter-spacing: var( --wp--custom--letter-spacing--eyebrow );
	color: var( --wp--preset--color--gold-deep );
}

.fgrid--on-dark .fgrid__num {
	color: var( --wp--preset--color--gold-light );
}

.fgrid__title {
	font-size: var( --wp--preset--font-size--h-4 );
}

.fgrid--on-dark .fgrid__title {
	color: var( --wp--preset--color--white );
}

.fgrid__body {
	margin-block-start: var( --wp--preset--spacing--2-xs );
	color: var( --wp--preset--color--text-muted );
	max-width: 42ch;
}

.fgrid--on-dark .fgrid__body {
	color: var( --wp--preset--color--text-on-dark-muted );
}

@media ( min-width: 40rem ) {
	.fgrid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( min-width: 64rem ) {
	.fgrid--3 {
		grid-template-columns: repeat( 3, 1fr );
	}
}

/* ------------------------------------------------ closing call to action */
.cta__title {
	max-width: 20ch;
	margin-inline: auto;
}

.cta__body {
	max-width: 54ch;
	margin-inline: auto;
}

.cta__row {
	margin-block-start: var( --wp--preset--spacing--l );
}

/* ---------------------------------------------------- photograph credit */
/*
 * A credit is a CONDITION OF USE for the Bled Tourist Board photographs, not
 * decoration. It is never hidden: `display: none` on any breakpoint would be a
 * licence breach, not a layout decision.
 *
 * It sits ON the photograph, in white at reduced opacity with a tight shadow —
 * the treatment the design source uses. Below the picture in dark type it read
 * as a caption belonging to the page; over the picture it reads as belonging to
 * the picture, which is what a credit is.
 *
 * Every wrapper that holds a credited image is `position: relative`, so this
 * anchors to the photograph rather than escaping to the nearest ancestor.
 */
.credit {
	position: absolute;
	inset-block-end: 0.5rem;
	inset-inline-end: 0.75rem;
	z-index: 3;
	margin: 0;
	font-size: 0.625rem;
	letter-spacing: 0.08em;
	line-height: 1.4;
	color: var( --wp--custom--credit--color );
	text-shadow: var( --wp--custom--credit--shadow );
	pointer-events: auto;
}

.credit a {
	color: inherit;
	text-decoration: none;
}

.credit a:hover,
.credit a:focus-visible {
	text-decoration: underline;
}

/* ------------------------------------------- floating WhatsApp affordance */
.fab {
	position: fixed;
	inset-block-end: var( --wp--preset--spacing--m );
	inset-inline-end: var( --wp--preset--spacing--m );
	z-index: 60;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 50%;
	/*
	 * The site's own black and gold, not WhatsApp green: the mark inside
	 * already says which channel this is, and a green disc is the one thing on
	 * the page that would not belong to the brand.
	 */
	background: var( --wp--preset--color--black );
	color: var( --wp--preset--color--gold-light );
	border: var( --wp--custom--hairline ) solid var( --wp--custom--gold-hairline );
	box-shadow: var( --wp--custom--shadow--fab );
	transition:
		transform var( --wp--custom--transition--base ) var( --wp--custom--transition--ease ),
		box-shadow var( --wp--custom--transition--base ) var( --wp--custom--transition--ease );
}

.fab svg {
	width: 1.6rem;
	height: 1.6rem;
}

/*
 * The button sits above the header so it clears every other control, which also
 * put it on top of the open mobile menu, hovering over the last row. While the
 * menu is open the menu is the only offer on screen.
 */
html.nav-open .fab {
	display: none;
}

.fab:hover,
.fab:focus-visible {
	transform: translateY( -2px );
	border-color: var( --wp--preset--color--gold );
	color: var( --wp--preset--color--gold-light );
	box-shadow: var( --wp--custom--shadow--fab-hover );
}

/* The label is decoration for pointer users; the accessible name is on the link. */
.fab__tip {
	position: absolute;
	inset-inline-end: calc( 100% + 0.6rem );
	padding: 0.35rem 0.7rem;
	border-radius: 2px;
	background: var( --wp--preset--color--black );
	color: var( --wp--preset--color--gold-light );
	border: var( --wp--custom--hairline ) solid var( --wp--custom--gold-hairline );
	font-size: var( --wp--preset--font-size--eyebrow );
	letter-spacing: var( --wp--custom--letter-spacing--eyebrow );
	text-transform: uppercase;
	white-space: nowrap;
	opacity: 0;
	transform: translateX( 0.4rem );
	pointer-events: none;
	transition:
		opacity var( --wp--custom--transition--base ) var( --wp--custom--transition--ease ),
		transform var( --wp--custom--transition--base ) var( --wp--custom--transition--ease );
}

.fab:hover .fab__tip,
.fab:focus-visible .fab__tip {
	opacity: 1;
	transform: translateX( 0 );
}

@media ( min-width: 64rem ) {
	.fab {
		inset-block-end: var( --wp--preset--spacing--l );
		inset-inline-end: var( --wp--preset--spacing--l );
		width: 3.5rem;
		height: 3.5rem;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.fab,
	.fab__tip {
		transition: none;
	}
}

/* ---------------------------------------------------- inner-page hero */
/*
 * Shared by the service pages and the About page, so it lives in the base
 * bundle. It was briefly in service.css, where the About page could not see
 * it — the hero would have rendered unstyled on a template that uses the same
 * markup.
 */
.phero {
	position: relative;
	display: grid;
	align-items: end;
	min-height: min( 58svh, 32rem );
	padding-block: calc( var( --wp--custom--header--band ) + var( --wp--preset--spacing--xl ) ) var( --wp--custom--section-y-tight );
	background: var( --wp--preset--color--black );
	color: var( --wp--preset--color--text-on-dark );
	isolation: isolate;
}

.phero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
}

.phero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.phero__scrim {
	position: absolute;
	inset: 0;
	/*
	 * Directional, matching the home page hero: dark enough on the left for the
	 * H1, clear on the right so the image reads.
	 */
	background: var( --wp--custom--hero--page-scrim );
}

.phero__title {
	max-width: 18ch;
	margin-block-start: var( --wp--preset--spacing--m );
	color: var( --wp--preset--color--white );
}

.phero__lead {
	max-width: 50ch;
	margin-block-start: var( --wp--preset--spacing--m );
	font-size: var( --wp--preset--font-size--lead );
	color: var( --wp--preset--color--text-on-dark );
}

@media ( min-width: 64rem ) {
	.phero {
		padding-block: calc( var( --wp--custom--header--band-desktop ) + var( --wp--preset--spacing--xl ) ) var( --wp--custom--section-y-tight );
	}
}

/* ------------------------------------------------------------- watermark */
/*
 * The house monogram, ghosted into a corner. Approved by the client from a
 * preview on 2026-09-21.
 *
 * Lives in the base bundle, not the front page's, because the mark now
 * appears on every page type. WHERE it appears is still decided one template
 * at a time and is deliberately sparse - see template-parts/watermark.php.
 *
 * The section clips it, so the mark can hang off the corner and be cut by the
 * edge — that overhang is the whole effect. Without `overflow: hidden` it
 * would widen the page instead.
 */
.has-watermark {
	position: relative;
	overflow: hidden;
}

/* Content sits above the mark. Without this the mark paints over the text. */
.has-watermark > * {
	position: relative;
	z-index: 1;
}

.watermark {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	user-select: none;
	white-space: nowrap;
	font-family: var( --wp--preset--font-family--display );
	font-weight: 300;
	line-height: 0.78;
	letter-spacing: -0.04em;
	/*
	 * Size is set by a modifier; `md` is the one that was approved and is
	 * what this falls back to if a modifier is ever missing.
	 *
	 * Every step is a clamp whose floor, preferred value and ceiling move
	 * together, so the mark keeps ITS PROPORTION of the screen rather than
	 * its pixel count. The first version pinned a 14rem floor, and the
	 * result was one design on a 1372px desktop (32% of the width) and a
	 * quite different one on a 375px phone (60%).
	 */
	font-size: clamp( 8rem, 32vw, 32rem );
}

.watermark[data-tone="light"] {
	color: var( --wp--preset--color--black );
	opacity: 0.035;
}

.watermark[data-tone="dark"] {
	color: var( --wp--preset--color--gold );
	opacity: 0.09;
}

/*
 * Block bleed: the section's own top or bottom edge does the cutting.
 * Only for a boundary the eye can see - light section against dark one.
 */
.watermark--bottom-end {
	inset-inline-end: -0.08em;
	inset-block-end: -0.22em;
}

.watermark--top-start {
	inset-inline-start: -0.06em;
	inset-block-start: -0.24em;
}

/*
 * Inline bleed, the default: the page's left or right edge does the
 * cutting, and nothing is cut off the top or the bottom.
 *
 * Centred in the section rather than pinned to a corner, so between two
 * sections of near-identical cream the mark sits whole on the surface and
 * only runs off the side of the screen - an edge that is unmistakably
 * there. Pinned to a corner it would be sliced along a line nobody can
 * see, which reads as a drawing mistake.
 */
.watermark--side-end,
.watermark--side-start {
	inset-block-start: 50%;
	transform: translateY( -50% );
}

.watermark--side-end {
	inset-inline-end: -0.08em;
}

.watermark--side-start {
	inset-inline-start: -0.06em;
}

/*
 * The three steps. Sized so they read as a deliberate set and not as a
 * mistake: each is roughly a third larger than the one below it, which is
 * enough to notice side by side and not enough to shout on its own page.
 */
.watermark--sm {
	font-size: clamp( 6rem, 23vw, 23rem );
}

.watermark--md {
	font-size: clamp( 8rem, 32vw, 32rem );
}

.watermark--lg {
	font-size: clamp( 10.5rem, 42vw, 42rem );
}