/* ==========================================================================
   Kwezi Safaris: Spanish discount notice under the hero (CHANGE 79)
   Scoped to .kwoes-*. Colours carry !important because the theme's global
   stylesheet forces heading and link colours. Hex fallbacks precede OKLCH.
   ========================================================================== */

.kwoes {
	--kwoes-surface:    #3a0c06;
	--kwoes-surface:    oklch(0.27 0.075 32);
	--kwoes-on:         #f3eee0;
	--kwoes-on:         oklch(0.95 0.018 90);
	--kwoes-muted:      #d9cfbb;
	--kwoes-muted:      oklch(0.85 0.03 85);
	--kwoes-accent:     #e9731b;
	--kwoes-accent:     oklch(0.68 0.17 50);
	--kwoes-accent-hi:  #f08a3a;
	--kwoes-accent-hi:  oklch(0.74 0.15 55);
	--kwoes-ink:        #1c1a17;
	--kwoes-ink:        oklch(0.21 0.008 70);
	--kwoes-line:       rgba(243, 238, 224, 0.28);
	--kwoes-focus:      #f3c27a;
	--kwoes-focus:      oklch(0.85 0.11 75);

	background: var(--kwoes-surface) !important;
	color: var(--kwoes-on) !important;
	padding: 32px 32px 24px;
	box-sizing: border-box;
}
.kwoes *,
.kwoes *::before,
.kwoes *::after {
	box-sizing: border-box;
	font-family: 'Public Sans', Arial, sans-serif !important;
}

.kwoes__inner {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 24px;
	max-width: 1200px;
	margin: 0 auto;
}

.kwoes__icon {
	color: var(--kwoes-accent-hi);
	align-self: start;
	margin-top: 4px;
}

.kwoes__eyebrow {
	margin: 0 0 8px !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--kwoes-accent-hi) !important;
}

.kwoes__title {
	margin: 0 0 8px !important;
	font-size: clamp(20px, 1.2rem + 0.8vw, 26px) !important;
	font-weight: 500 !important;
	line-height: 1.25 !important;
	letter-spacing: -0.01em;
	color: var(--kwoes-on) !important;
	text-wrap: balance;
}

.kwoes__text {
	margin: 0 !important;
	max-width: 62ch;
	font-size: 15px !important;
	font-weight: 400 !important;
	line-height: 1.65 !important;
	letter-spacing: 0.01em;
	color: var(--kwoes-on) !important;
	text-wrap: pretty;
}

.kwoes__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: flex-end;
}

.kwoes__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 24px;
	border-radius: 999px;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	text-decoration: none !important;
	white-space: nowrap;
	touch-action: manipulation;
	transition: background-color 160ms ease-out, color 160ms ease-out, transform 120ms ease-out;
}
.kwoes__btn:active { transform: scale(0.97); }
.kwoes__btn:focus-visible {
	outline: 3px solid var(--kwoes-focus);
	outline-offset: 3px;
}

.kwoes__btn--primary {
	background: var(--kwoes-accent) !important;
	color: var(--kwoes-ink) !important;
}
.kwoes__btn--primary:hover { background: var(--kwoes-accent-hi) !important; color: var(--kwoes-ink) !important; }

.kwoes__btn--ghost {
	background: transparent !important;
	color: var(--kwoes-on) !important;
	border: 1px solid var(--kwoes-on);
}
.kwoes__btn--ghost:hover { background: var(--kwoes-on) !important; color: var(--kwoes-ink) !important; }

.kwoes__fine {
	max-width: 1200px;
	margin: 24px auto 0 !important;
	padding-top: 16px;
	border-top: 1px solid var(--kwoes-line);
	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	color: var(--kwoes-muted) !important;
}

/* Tablet: buttons drop under the copy */
@media (max-width: 960px) {
	.kwoes__inner {
		grid-template-columns: auto minmax(0, 1fr);
	}
	.kwoes__actions {
		grid-column: 2;
		justify-content: flex-start;
	}
}

/* Phone: single column, full-width buttons */
@media (max-width: 600px) {
	.kwoes { padding: 24px 16px 16px; }
	.kwoes__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}
	.kwoes__icon { display: none; }
	.kwoes__actions { grid-column: 1; }
	.kwoes__btn { flex: 1 1 100%; }
	.kwoes__fine { margin-top: 16px !important; padding-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.kwoes__btn { transition: none; }
	.kwoes__btn:active { transform: none; }
}