/* ================================================
   RED POINT — SPEC / FAQ PANEL  (Figma 109:1445)
   ================================================
   tabs     one dark strip, two tabs · Futurism 24 · selected marked by a red underline
            (the Figma drew two collapsible bars with carets; the client asked for tabs)
   panel    backdrop image · px 60 · py 50 · rows (right) + 652x450 photo (left)
   row      50px · rgba(250,250,250,.6) · 1px #E1E1E1 · 8px radius · 16 semibold black
   ================================================ */

.rp-spec {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
}

/* Button reset for the headers/rows. */
.rp-spec button {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	border: 0;
	background: none;
	box-shadow: none;
	font: inherit;
	color: inherit;
	cursor: pointer;
}

/* ------------------------------------------------
   TABS  (client product-page comment #7)
   ------------------------------------------------
   These were two full-width stacked bars, each folding its panel away. They are a tablist now:
   side by side on one dark strip, exactly one selected. The row sets the 60px page gutter the
   panels use, so the tab labels line up with the content beneath them. */
.rp-spec__tabs {
	display: flex;
	align-items: stretch;
	gap: 8px;
	padding: 16px 60px 0;
	background-color: #0C0C0C;
}

.rp-spec .rp-spec__header {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 16px;
	/* auto, not 100% — the old bars each filled the row, which is what made them read as
	   stacked sections rather than tabs. */
	width: auto;
	padding: 10px 20px 18px;
	background-color: #0C0C0C;
	/* The selected marker lives on the border, so switching tabs cannot shift the row's
	   height — a transparent border reserves the space on every tab. */
	border-bottom: 3px solid transparent;
	opacity: 0.55;
	transition: opacity 0.15s ease, border-color 0.15s ease;
}

.rp-spec .rp-spec__header:hover {
	opacity: 0.85;
}

.rp-spec .rp-spec__header.is-open {
	opacity: 1;
	border-bottom-color: #FF3B3B;
}

/* Keyboard focus has to be visible — the tablist is one tab stop and arrows move within it,
   so without this the selection moves invisibly. */
.rp-spec .rp-spec__header:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: -4px;
}

/* Hold the header background on focus/active — Hello/Woo paints a magenta (#CC3366)
   button:focus background that would otherwise flash on click. Scoped selector is (0,3,0),
   above the theme's focus rule. */
.rp-spec .rp-spec__header:focus,
.rp-spec .rp-spec__header:focus-visible,
.rp-spec .rp-spec__header:active {
	background-color: #0C0C0C;
}

.rp-spec__htitle {
	font-family: 'Futurism', sans-serif;
	font-size: 24px;
	line-height: 0.9;
}

.rp-spec__hlead {
	font-weight: 300;
	color: #FFFFFF;
}

.rp-spec__haccent {
	color: #FF3B3B;
}

/* ------------------------------------------------
   PANELS
   ------------------------------------------------ */
.rp-spec__panel {
	position: relative;
	display: none;
	width: 100%;
	padding: 50px 60px;
	overflow: hidden;
	box-sizing: border-box;
}

.rp-spec__panel.is-open {
	display: block;
}

.rp-spec .rp-spec__backdrop {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

/* Rows first so RTL paints them RIGHT, photo LEFT. */
.rp-spec__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 16px;
	width: 100%;
	max-width: 1320px;
	margin: 0 auto;
}

.rp-spec__rows {
	display: flex;
	flex-direction: column;
	gap: 16px;
	flex: 1;
	min-width: 0;
}

.rp-spec__row {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Title RIGHT, caret LEFT (justify-between). */
.rp-spec .rp-spec__rowhead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 50px;
	width: 100%;
	padding: 10px 24px;
	border: 1px solid #E1E1E1;
	border-radius: 8px;
	background-color: rgba(250, 250, 250, 0.6);
	text-align: right;
	transition: background-color 0.15s ease;
}

.rp-spec .rp-spec__rowhead:hover,
.rp-spec .rp-spec__rowhead:focus,
.rp-spec .rp-spec__rowhead:focus-visible,
.rp-spec .rp-spec__rowhead:active {
	background-color: rgba(250, 250, 250, 0.85);
}

.rp-spec__rowtitle {
	font-family: 'Google Sans', sans-serif;
	font-weight: 600;
	font-size: 16px;
	line-height: 1.3;
	color: #000000;
}

.rp-spec__rcaret {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: #FF3B3B;
	transition: transform 0.15s ease;
}

.rp-spec__row.is-open .rp-spec__rcaret {
	transform: rotate(180deg);
}

.rp-spec__rowbody {
	display: none;
	width: 100%;
	padding: 0 8px;
}

.rp-spec__row.is-open .rp-spec__rowbody {
	display: block;
}

.rp-spec__rowbody p {
	margin: 0;
	font-family: 'Google Sans', sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: #2D2D2D;
	text-align: right;
}

/* Photo — 652x450, left. Ancestor selector so height beats `.elementor img{height:auto}`. */
.rp-spec .rp-spec__photo {
	width: 652px;
	max-width: 100%;
	height: 450px;
	flex-shrink: 0;
	object-fit: cover;
	border-radius: 16px;
}

/* ------------------------------------------------
   RESPONSIVE
   ------------------------------------------------ */
@media (max-width: 1024px) {
	.rp-spec__tabs {
		padding: 16px 24px 0;
	}
	.rp-spec .rp-spec__header {
		padding: 10px 12px 16px;
	}
	.rp-spec__htitle {
		font-size: 18px;
	}
	.rp-spec__panel {
		padding: 32px 24px;
	}
	/* `align-items` FLIPS AXIS WITH THE DIRECTION, and that is what left the rows half-width.
	   The base rule sets `flex-start` to top-align the photo against the rows in the desktop
	   ROW. In a COLUMN it stops meaning "top" and starts meaning the horizontal cross axis —
	   which under RTL is the RIGHT — so the rows shrank to their text width and sat in a gutter
	   of empty background. `stretch` is what a column wants: children fill the width.

	   Exactly the same trap as the gallery's `flex: 1`: a property that reads as vertical in a
	   row silently becomes horizontal in a column. Worth checking on every flex block that
	   changes direction at a breakpoint. */
	.rp-spec__inner {
		flex-direction: column;
		align-items: stretch;
	}
	.rp-spec .rp-spec__photo {
		width: 100%;
		height: 320px;
		order: -1;
	}
}

@media (max-width: 560px) {
	/* The 60px desktop gutter is already down to 24px above; on a phone the rows need the
	   width more than the panel needs the margin. */
	.rp-spec__panel {
		padding: 24px 16px;
	}
	.rp-spec .rp-spec__rowhead {
		padding: 10px 16px;
	}
	.rp-spec .rp-spec__photo {
		height: 240px;
	}
}