/* ==========================================================================
   IRIA Sign - WPBakery element [iria_sign]
   Artwork comes from the designer SVGs in /assets/signs/ (see iria-sign.php).
   Classes: .iria-sign--{red|yellow|green|lightblue|blue}
            .iria-sign--posts-{top|bottom|left|right|none}
            .iria-sign--{wide|narrow|tall}
   ========================================================================== */

.iria-sign {
	/* Brand colours (used for the fallback sign and anything matching the sign) */
	--sign-fill: #d62d28;

	/* Default width per size, ratio comes from the SVG */
	--sign-w: 280px;

	/* Text padding inside the artwork: top right bottom left */
	--pad-t: 24px;
	--pad-r: 30px;
	--pad-b: 20px;
	--pad-l: 30px;

	/* How much of the handles graphic overlaps the sign (0 to 1).
	   .38 matches the designer's complete signs: 16 of the 42 unit handles sit on the sign. */
	--handles-overlap: .38;
	/* How far side handles overlap the sign */
	--side-overlap: 14px;

	position: relative;
	display: block;
	box-sizing: border-box;
	width: var(--sign-w);
	max-width: 100%;
	color: #fff;
	text-decoration: none;
}

/* Colours */
.iria-sign--red       { --sign-fill: #d62d28; }
.iria-sign--yellow    { --sign-fill: #fdaf35; }
.iria-sign--green     { --sign-fill: #009805; }
.iria-sign--lightblue { --sign-fill: #52b1ee; }
.iria-sign--blue      { --sign-fill: #0076bf; }

/* Sizes */
.iria-sign--wide  { --sign-w: 280px; }
.iria-sign--narrow { --sign-w: 140px; --pad-t: 20px; --pad-r: 18px; --pad-b: 18px; --pad-l: 18px; }
/* Tall: 261 x 280 artwork with the pole drawn in on the left. The sign face runs from
   36 to 251 units across, so padding is in % of the sign width to scale with it. */
.iria-sign--tall  { --sign-w: 261px; --pad-t: 10%; --pad-r: 10%; --pad-b: 8%; --pad-l: 19%; }

/* Tall sign flipped for a right-hand pole: swap the side padding */
.iria-sign--tall.iria-sign--mirror { --pad-r: 19%; --pad-l: 10%; }

/* Extra room for top handles that overlap the sign */
.iria-sign--posts-top { --pad-t: 32px; }
.iria-sign--narrow.iria-sign--posts-top { --pad-t: 28px; }

/* Alignment */
.iria-sign--align-center { margin-inline: auto; }
.iria-sign--align-right  { margin-left: auto; }

/* Panel: the sign artwork sits on ::before so it can be flipped without flipping the text */
.iria-sign__panel {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	aspect-ratio: var(--sign-ratio, auto);
	padding: var(--pad-t) var(--pad-r) var(--pad-b) var(--pad-l);
}

.iria-sign--has-art .iria-sign__panel::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--sign-bg) no-repeat center / 100% 100%;
	pointer-events: none;
}

.iria-sign--mirror .iria-sign__panel::before { transform: scaleX(-1); }

/* Fallback when the SVG for this colour and size is not uploaded yet */
.iria-sign--no-art .iria-sign__panel {
	min-height: 185px;
	background: var(--sign-fill);
	border: 14px solid #333;
	border-radius: 10px;
	padding: 20px 24px;
}
.iria-sign--no-art.iria-sign--tall .iria-sign__panel { min-height: 280px; border-color: #555; }

.iria-sign__notice {
	position: absolute;
	right: 4px;
	bottom: 4px;
	z-index: 3;
	padding: 2px 6px;
	font: 600 11px/1.3 sans-serif;
	color: #fff;
	background: rgba(0, 0, 0, .65);
	border-radius: 3px;
}

/* Text */
.iria-sign__content {
	position: relative;
	z-index: 1;
	color: #fff;
	line-height: 1.1;
}
.iria-sign__content :is(h1, h2, h3, h4, h5, h6, p, .grve-h4, .grve-h5) {
	color: inherit;
	margin: 0 0 .25em;
}
.iria-sign__content > :last-child,
.iria-sign__content > :last-child > :last-child {
	margin-bottom: 0;
}

/* Handles */
.iria-sign__handles {
	position: relative;
	z-index: 2;
	display: block;
	aspect-ratio: var(--handles-ratio, 6);
	background: var(--handles-bg) no-repeat center / 100% 100%;
	pointer-events: none;
}

/* Top and bottom: full sign width, overlapping the sign by --handles-overlap.
   Percentage margins are based on width, so width / ratio x overlap = overlap in px. */
/* Width is the handles' share of the sign (from the viewBoxes), centred.
   Percentage margins are based on the sign width, so
   sign width x scale / ratio x overlap = overlap in px. */
.iria-sign--posts-top .iria-sign__handles,
.iria-sign--posts-bottom .iria-sign__handles {
	width: calc(100% * var(--handles-scale, 1));
	margin-inline: auto;
}
.iria-sign--posts-top .iria-sign__handles {
	margin-bottom: calc(-100% * var(--handles-scale, 1) * var(--handles-overlap) / var(--handles-ratio, 6));
}
.iria-sign--posts-bottom .iria-sign__handles {
	margin-top: calc(-100% * var(--handles-scale, 1) * var(--handles-overlap) / var(--handles-ratio, 6));
}

/* Left and right: pole runs the full sign height beside the sign */
.iria-sign--posts-left,
.iria-sign--posts-right {
	display: flex;
	align-items: stretch;
	width: fit-content;
	max-width: 100%;
}
.iria-sign--posts-left .iria-sign__panel,
.iria-sign--posts-right .iria-sign__panel {
	flex: 0 1 auto;
	width: var(--sign-w);
	min-width: 0;
}
/* Pole width = sign height x pole ratio, where sign height = sign width / sign ratio */
.iria-sign--posts-left .iria-sign__handles,
.iria-sign--posts-right .iria-sign__handles {
	flex: 0 0 auto;
	align-self: stretch;
	aspect-ratio: auto;
	width: calc(var(--sign-w) / var(--sign-ratio, 1.5) * var(--handles-ratio, .2));
}
.iria-sign--posts-left .iria-sign__handles  { margin-right: calc(var(--side-overlap) * -1); }
.iria-sign--posts-right .iria-sign__handles { margin-left: calc(var(--side-overlap) * -1); transform: scaleX(-1); }

/* Linked sign */
a.iria-sign--link,
a.iria-sign--link:hover { color: #fff; }
a.iria-sign--link .iria-sign__panel { transition: filter .2s ease; }
a.iria-sign--link:hover .iria-sign__panel { filter: brightness(1.08); }
a.iria-sign--link:focus-visible { outline: 3px solid #333; outline-offset: 4px; }

/* Tall / stat: images inside the sign (carried over from .ws-card-sign-blue-stat) */
.iria-sign--tall .grve-image .grve-thumbnail { padding-top: 0 !important; height: auto !important; margin-bottom: 15px; }
.iria-sign--tall .grve-image .grve-thumbnail img { position: static !important; width: auto !important; max-width: 100%; height: auto !important; max-height: 126px; }

/* Tablet: sign column fixed, text column fills (carried over from the ws-card-sign rows) */
@media (min-width: 769px) and (max-width: 1200px) {
	.grve-row-inner:has(:is(.iria-sign--wide, .iria-sign--narrow)) {
		display: grid !important;
		grid-template-columns: 280px minmax(0, 1fr);
		gap: 30px;
		margin-inline: 0;
	}
	.grve-row-inner:has(:is(.iria-sign--wide, .iria-sign--narrow)) > .grve-column-inner {
		width: 100%;
		min-width: 0;
		padding-inline: 0;
	}
	.grve-row-inner:has(.iria-sign--red) .grve-text h5 { font-size: 22px; line-height: 1.3; }
}

@media (max-width: 1023px) and (min-width: 769px) {
	.iria-sign--tall .iria-sign__content :is(h4, .grve-h4) { font-size: 32px; line-height: 1.1; }
	.iria-sign--tall .iria-sign__content :is(h5, .grve-h5) { font-size: 16px; line-height: 1.2; }
}

@media (max-width: 768px) {
	#grve-main-content .grve-column-inner:has(.iria-sign) { width: 100%; }
	#grve-main-content .iria-sign { margin-inline: auto; }
	#grve-main-content .iria-sign--tall { --sign-w: 220px; }
	#grve-main-content .iria-sign--tall .iria-sign__content :is(h4, .grve-h4) { font-size: 40px; line-height: 1.1; }
	#grve-main-content .iria-sign--tall .iria-sign__content :is(h5, .grve-h5) { font-size: 18px; line-height: 1.2; }
}

/* IRIA Sign Box: tidy spacing of WPBakery elements inside the sign */
.iria-sign__content > .grve-element,
.iria-sign__content > .wpb_content_element,
.iria-sign__content .grve-title {
	margin-bottom: 0 !important;
}

.iria-sign__content .grve-counter {
	margin-bottom: 0;
}