/* ============================================================
 * Sky Car Rental Toolkit — Monthly Hire CTA widgets
 * Split 50/50 (rotating fleet + dark panel) and Gold Panel.
 * ============================================================ */

.crqa-tk-cta {
	--crqa-cta-panel: #0c0b09;
	--crqa-cta-accent: #e8c66a;
	--crqa-cta-heading: #f4efe4;
	--crqa-cta-desc: #ffffff;
	--crqa-cta-btn-text: #0a0a0a;
	--crqa-cta-g1: #f5d98b;
	--crqa-cta-g2: #e8c66a;
	--crqa-cta-g3: #c9a14a;
	--crqa-cta-gold-eyebrow: #5a4716;
	--crqa-cta-gold-heading: #1a1407;
	--crqa-cta-gold-desc: #3a2f12;
	--crqa-cta-gold-btn-bg: #0c0b09;
	--crqa-cta-gold-btn-text: #f4efe4;

	font-family: 'Jost', sans-serif;
	font-weight: 300;
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0 26px 60px -20px rgba(0,0,0,.5);
	color: #f4efe4;
}

/* ---- Split 50/50 ---- */
.crqa-tk-cta--split { display: flex; min-height: 360px; }
.crqa-tk-cta--media-right { flex-direction: row-reverse; }

.crqa-tk-cta__media { flex: 1; position: relative; overflow: hidden; background: #15130f; }
.crqa-tk-cta__layer { position: absolute; inset: 0; background-size: cover; background-position: center;
	opacity: 0; transition: opacity .9s ease; }
.crqa-tk-cta__layer.is-active { opacity: 1; }
.crqa-tk-cta__layer--placeholder {
	background: repeating-linear-gradient(135deg,#15130f,#15130f 12px,#191712 12px,#191712 24px); opacity: 1;
}
.crqa-tk-cta__carname { position: absolute; left: 18px; bottom: 16px; z-index: 2;
	font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
	color: #f4efe4; background: rgba(8,8,7,.62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
	padding: 6px 12px; border-radius: 2px; border: 1px solid rgba(232,198,106,.2); }

.crqa-tk-cta__panel { flex: 1; background: var(--crqa-cta-panel); padding: clamp(30px,4vw,54px);
	display: flex; flex-direction: column; justify-content: center; }

.crqa-tk-cta__eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.crqa-tk-cta__rule { width: 26px; height: 1px; background: var(--crqa-cta-accent); flex: 0 0 auto; }
.crqa-tk-cta__eyebrow span:last-child { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: .26em;
	color: var(--crqa-cta-accent); text-transform: uppercase; }
.crqa-tk-cta__heading { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: clamp(26px,3.4vw,34px);
	text-transform: uppercase; line-height: 1.04; letter-spacing: -.01em; margin: 0 0 14px; color: var(--crqa-cta-heading); }
.crqa-tk-cta__desc { color: var(--crqa-cta-desc); font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 15px; line-height: 1.6; margin: 0 0 26px; max-width: 46ch; }
.crqa-tk-cta__btn { align-self: flex-start; display: inline-block; text-decoration: none; color: var(--crqa-cta-btn-text);
	background: linear-gradient(135deg, var(--crqa-cta-g1), var(--crqa-cta-g2), var(--crqa-cta-g3));
	padding: 16px 36px; border-radius: 2px; font-size: 13px; font-weight: 500; letter-spacing: .12em;
	text-transform: uppercase; white-space: nowrap; transition: filter .2s ease; }
.crqa-tk-cta__btn:hover { filter: brightness(1.08); }

/* ---- Gold panel ---- */
.crqa-tk-cta--gold { background: linear-gradient(135deg, var(--crqa-cta-g1), var(--crqa-cta-g2), var(--crqa-cta-g3));
	padding: clamp(40px,5vw,60px) clamp(28px,5vw,56px); display: flex; flex-wrap: wrap; align-items: center;
	justify-content: space-between; gap: 32px; }
.crqa-tk-cta__gold-text { max-width: 52ch; }
.crqa-tk-cta__gold-eyebrow { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: .28em;
	color: var(--crqa-cta-gold-eyebrow); text-transform: uppercase; margin-bottom: 16px; }
.crqa-tk-cta__gold-heading { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: clamp(26px,3.4vw,34px);
	text-transform: uppercase; line-height: 1.04; letter-spacing: -.01em; margin: 0 0 12px; color: var(--crqa-cta-gold-heading); }
.crqa-tk-cta__gold-desc { color: var(--crqa-cta-gold-desc); font-size: 16px; line-height: 1.6; margin: 0; max-width: 44ch; }
.crqa-tk-cta__gold-btn { flex-shrink: 0; display: inline-block; text-decoration: none; color: var(--crqa-cta-gold-btn-text);
	background: var(--crqa-cta-gold-btn-bg); padding: 18px 40px; border-radius: 2px; font-size: 13px; font-weight: 500;
	letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; transition: filter .2s ease; }
.crqa-tk-cta__gold-btn:hover { filter: brightness(1.12); }

/* Centred (stacked) gold variant */
.crqa-cta-gold-center .crqa-tk-cta--gold { flex-direction: column; text-align: center; }
.crqa-cta-gold-center .crqa-tk-cta__gold-text { max-width: none; }
.crqa-cta-gold-center .crqa-tk-cta__gold-btn { display: block; }

/* ---- Responsive: stack the split ---- */
@media (max-width: 820px) {
	.crqa-tk-cta--split, .crqa-tk-cta--media-right { flex-direction: column; }
	.crqa-tk-cta__media { flex: none; height: 220px; min-height: 220px; }
	.crqa-tk-cta__btn { display: block; text-align: center; align-self: stretch; }
	.crqa-tk-cta__carname { left: 14px; bottom: 14px; }
}