/*
 * FAQs page (prototype: faqs.html). Exact replica: values are the prototype's.
 *
 * The accordion is core/details sharing one name, so opening a question closes the others as
 * the prototype's script does. The number is a <strong> inside the summary; the "+" is drawn.
 */

/* .faq-section */
.pitalua-faqs {
	position: relative;
	overflow: hidden;
	padding: clamp( 74px, 8vw, 108px ) 0;
	background: var( --ivory );
}

.pitalua-faqs::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 50%;
	background: url( "../../img/decor/patron-claro.webp" ) center / 280px repeat;
	opacity: 0.32;
	-webkit-mask-image: linear-gradient( to right, rgba( 0, 0, 0, 1 ) 20%, transparent 95% );
	mask-image: linear-gradient( to right, rgba( 0, 0, 0, 1 ) 20%, transparent 95% );
	pointer-events: none;
}

/* .faq-layout */
.pitalua-faqs__rejilla {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: clamp( 40px, 5vw, 72px );
	align-items: start;
}

/* .accordion */
.pitalua-faqs__lista {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

/* .faq-item */
.pitalua-faq {
	margin: 0;
	border: 1px solid var( --line );
	border-left: 3px solid transparent;
	background: #fffaf5;
	transition: all 0.3s var( --ease );
}

/* .faq-item.active */
.pitalua-faq[open] {
	border-left-color: var( --gold );
	background: #fff;
	box-shadow: 0 8px 24px rgba( 82, 40, 74, 0.06 );
}

/* .faq-header + .faq-title-wrap + .faq-question */
.pitalua-faq summary {
	display: grid;
	grid-template-columns: auto 1fr auto;
	column-gap: 16px;
	align-items: baseline;
	padding: 24px 28px;
	color: var( --plum );
	font-family: var( --serif );
	font-size: clamp( 1.05rem, 1.25vw, 1.22rem );
	font-weight: 600;
	line-height: 1.35;
	list-style: none;
	cursor: pointer;
}

.pitalua-faq summary::-webkit-details-marker {
	display: none;
}

/* .faq-num */
.pitalua-faq summary strong {
	color: var( --gold );
	font-size: 0.84rem;
	font-weight: 600;
	line-height: 1.6;
}

/* .faq-icon */
.pitalua-faq summary::after {
	content: "+" / "";
	align-self: center;
	margin-left: 4px;
	color: var( --gold );
	font-family: var( --sans );
	font-size: 1.35rem;
	font-weight: 300;
	line-height: 1;
	transition: transform 0.3s var( --ease );
}

.pitalua-faq[open] summary::after {
	transform: rotate( 45deg );
}

/* .faq-body */
.pitalua-faq > p {
	margin: 0;
	padding: 0 28px 14px 48px;
	color: #4f444e;
	font-size: clamp( 0.92rem, 1.02vw, 0.98rem );
	line-height: 1.85;
}

.pitalua-faq > p:last-child {
	padding-bottom: 28px;
}

.pitalua-faq strong {
	color: var( --plum );
	font-weight: 600;
}

/* .faq-sidebar */
.pitalua-faqs__lateral {
	position: sticky;
	top: 110px;
	display: flex;
	flex-direction: column;
	gap: 28px;
}

/* .sidebar-box */
.pitalua-faqs__consulta {
	position: relative;
	overflow: hidden;
	padding: 36px 32px;
	border: 1px solid var( --line );
	border-top: 3px solid var( --plum );
	background: #fffaf5;
}

/* .sidebar-box h3: an h2 here, same look (the prototype's h3 inherits the UA bold). */
.pitalua-faqs__consulta h2 {
	margin: 0 0 14px;
	color: var( --plum );
	font-family: var( --serif );
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: normal;
	line-height: 1.3;
}

.pitalua-faqs__consulta p {
	margin: 0 0 24px;
	color: var( --muted );
	font-size: 0.88rem;
	line-height: 1.75;
}

.pitalua-faqs__consulta .wp-block-button,
.pitalua-faqs__consulta .wp-block-button__link {
	width: 100%;
}

/* .sidebar-highlight */
.pitalua-faqs__reunion {
	position: relative;
	overflow: hidden;
	padding: 32px 28px;
	border: 1px solid rgba( 195, 155, 76, 0.3 );
	background: var( --plum-deep );
	color: var( --ivory );
}

.pitalua-faqs__reunion::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url( "../../img/decor/patron-ciruela.webp" ) center / 200px repeat;
	opacity: 0.14;
}

/* .sidebar-highlight-inner */
.pitalua-faqs__reunion > * {
	position: relative;
	z-index: 1;
}

/* .sidebar-highlight h4: an h3 here, same look. */
.pitalua-faqs__reunion h3 {
	margin: 0 0 10px;
	color: var( --gold );
	font-family: var( --serif );
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.3;
}

.pitalua-faqs__reunion p {
	margin: 0;
	color: #dfd2dc;
	font-size: 0.84rem;
	line-height: 1.75;
}

@media ( max-width: 980px ) {

	.pitalua-faqs__rejilla {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.pitalua-faqs__lateral {
		position: static;
	}
}

@media ( max-width: 640px ) {

	.pitalua-faq summary {
		column-gap: 10px;
		padding: 20px;
	}

	.pitalua-faq summary::after {
		margin-left: 4px;
	}

	.pitalua-faq > p {
		padding: 0 20px 14px 36px;
	}

	.pitalua-faq > p:last-child {
		padding-bottom: 22px;
	}
}