/**
 * Inner pages (Rentals, Shortlets, Sales): the shared frame.
 * Everything here reuses the homepage tokens and components from main.css.
 */

/* Hero ==================================================================== */

.rc-hero--inner .rc-hero__title {
	max-width: 15ch;
}

.rc-hero__accent {
	display: block;
	color: var(--teal);
}

/* Page heroes show their own live UI cards in this stage (template-parts/inner/<slug>/hero.php). */
.rc-ihero__stage {
	position: relative;
	height: 340px;
	margin-top: 72px;
	-webkit-clip-path: inset(-80px -80px 0 -80px);
	clip-path: inset(-80px -80px 0 -80px);
}

.rc-ihero__stage:empty {
	display: none;
}

.rc-hero--inner .mk-card {
	animation: rc-float 7s ease-in-out infinite;
	animation-delay: calc(var(--in, 0) * -.7s);
}

/* FAQ ===================================================================== */

.rc-faq__grid {
	display: grid;
	grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
	gap: 40px 64px;
	align-items: start;
}

.rc-faq__side {
	position: sticky;
	top: 120px;
}

.rc-faq__help .rc-link {
	margin-top: 10px;
}

.rc-faq__item {
	margin-bottom: 14px;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--grey);
	transition: background-color .6s var(--ease);
}

.rc-faq__item:not([open]):hover {
	background: var(--grey-2);
}

.rc-faq__item[open] {
	background: var(--teal);
}

.rc-faq__q {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 22px 26px;
	color: var(--ink);
	font-size: 17.5px;
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1.35;
	list-style: none;
	cursor: pointer;
	transition: color .5s var(--ease);
}

.rc-faq__q::-webkit-details-marker {
	display: none;
}

.rc-faq__item[open] .rc-faq__q {
	color: #fff;
}

.rc-faq__plus {
	position: relative;
	flex: none;
	width: 30px;
	height: 30px;
	margin-left: auto;
	border-radius: 50%;
	background: #fff;
	transition: transform .6s var(--ease), background-color .5s var(--ease);
}

.rc-faq__plus::before,
.rc-faq__plus::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 2px;
	margin: -1px 0 0 -6px;
	border-radius: 2px;
	background: var(--ink);
}

.rc-faq__plus::after {
	transform: rotate(90deg);
}

.rc-faq__item[open] .rc-faq__plus {
	background: var(--yellow);
	transform: rotate(45deg);
}

.rc-faq__a {
	padding: 0 26px 24px;
	color: rgba(255, 255, 255, .84);
	animation: rc-faq-in .6s var(--ease) both;
}

.rc-faq__a p {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.65;
}

@keyframes rc-faq-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
}

/* Responsive ============================================================== */

@media (max-width: 960px) {
	.rc-faq__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.rc-faq__side {
		position: static;
	}
}

@media (max-width: 760px) {
	.rc-ihero__stage {
		margin-top: 44px;
	}

	.rc-faq__q {
		padding: 18px 20px;
		font-size: 16px;
	}

	.rc-faq__a {
		padding: 0 20px 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rc-hero--inner .mk-card,
	.rc-faq__a {
		animation: none;
	}
}

/* Inner hero variation: left-aligned split header, breadcrumb, cooler panel. */
.rc-hero--inner .rc-hero__panel {
	background:
		radial-gradient(55% 60% at 100% 0%, rgba(4, 111, 123, .16), transparent 70%),
		radial-gradient(45% 50% at 0% 100%, rgba(251, 201, 1, .16), transparent 70%),
		linear-gradient(160deg, #e9f4f4 0%, #f5f9f8 60%, #fbf7e8 100%);
}

.rc-hero--inner .rc-hero__glow {
	display: none;
}

.rc-hero--inner .rc-hero__content {
	text-align: left;
}

.rc-crumbs {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 28px;
	color: var(--muted);
	font-size: 14px;
}

.rc-crumbs a {
	color: var(--muted);
}

.rc-crumbs a:hover {
	color: var(--teal);
}

.rc-crumbs .rc-icon {
	width: 14px;
	height: 14px;
}

.rc-crumbs span {
	color: var(--ink);
	font-weight: 500;
}

.rc-ihero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
	gap: 24px 64px;
	align-items: end;
}

.rc-hero--inner .rc-hero__title {
	max-width: none;
	margin: 0;
	font-size: clamp(2.2rem, 1rem + 3.4vw, 3.9rem);
}

.rc-hero--inner .rc-hero__text {
	margin: 0;
	max-width: none;
}

.rc-hero--inner .rc-hero__actions {
	justify-content: flex-start;
	margin-top: 26px;
}

.rc-hero--inner .rc-ihero__stage {
	margin-top: 56px;
}

@media (max-width: 960px) {
	.rc-ihero__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 760px) {
	.rc-crumbs {
		margin-bottom: 18px;
	}
}