/* =====================================================================
   sbr/faq — accordion. Native <details>/<summary> for zero-JS keyboard
   a11y; view.js adds smooth height animation + single-open-at-a-time.
   Synchronized close: item visual cues use [open]:not(.is-closing) so
   JS can revert everything in lockstep with the panel height animation
   (no two-stage "first the panel, then the visual cues" effect).
   ===================================================================== */

.sbr-faq{padding:64px 22px;
	position:relative;width:100vw;margin-inline:calc(50% - 50vw)}
.sbr-faq__in{max-width:880px;margin:0 auto}

/* CSS vars live on the LIST (not the section) so the accordion works
   identically inside the sbr/faq block AND when the helper renders
   just the list inline in other contexts (e.g., service detail layouts). */
.sbr-faq__list{--ease:cubic-bezier(.4,0,.2,1);--dur:.3s}

.sbr-faq--bg-paper  {background:var(--paper);color:var(--ink)}
.sbr-faq--bg-surface{background:var(--surface);color:var(--ink)}

/* ---- header ---- */
.sbr-faq__head{text-align:center;margin-bottom:44px}
.sbr-faq__kicker{justify-content:center;color:var(--accent-strong);margin-bottom:16px}
.sbr-faq__title{font-size:clamp(26px,5.2vw,40px);line-height:1.08;font-weight:800;letter-spacing:-.02em;
	margin:0 0 14px;color:var(--ink)}
.sbr-faq__title em{font-style:normal;color:var(--accent-strong)}
.sbr-faq__sub{font-size:clamp(15px,2.3vw,17px);line-height:1.6;margin:0 auto;max-width:58ch;
	color:var(--fg-soft)}

/* ---- list ---- */
.sbr-faq__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
/* (CSS vars --ease, --dur defined above on .sbr-faq__list so the accordion
   works both inside the full .sbr-faq section AND standalone in other
   page contexts like service detail layouts.) */
.sbr-faq__item{background:var(--surface);
	border:1px solid var(--line);border-radius:14px;
	overflow:hidden;
	transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur) var(--ease)}
.sbr-faq--bg-surface .sbr-faq__item{background:var(--paper)}

/* Open state — but NOT if currently closing. The .is-closing class is
   added by JS the instant a close starts, so all the open-state CSS rules
   stop applying immediately and their transitions revert in sync with
   the panel max-height animation (same duration --dur). */
.sbr-faq__item:has(>.sbr-faq__d[open]:not(.is-closing)){
	border-color:rgba(224,162,60,.55);
	box-shadow:0 14px 36px -20px rgba(29,26,22,.22);
	background:var(--surface)}
.sbr-faq--bg-surface .sbr-faq__item:has(>.sbr-faq__d[open]:not(.is-closing)){background:#fbf8f1}

.sbr-faq__d{display:block;position:relative}
.sbr-faq__d > summary{list-style:none}
.sbr-faq__d > summary::-webkit-details-marker{display:none}

/* Right-edge accent bar — composited animation via opacity (no width
   transition; width-based animations force layout/paint per frame). */
.sbr-faq__d::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;
	background:var(--accent);
	opacity:0;
	transition:opacity var(--dur) var(--ease);
	border-radius:0 14px 14px 0;
	pointer-events:none}
.sbr-faq__d[open]:not(.is-closing)::before{opacity:1}

/* ---- question (summary) ---- */
.sbr-faq__q{display:flex;align-items:center;gap:16px;
	padding:20px 24px;cursor:pointer;
	font-size:clamp(15.5px,2.4vw,17px);font-weight:700;line-height:1.4;letter-spacing:-.005em;
	color:var(--ink);
	transition:background .2s var(--ease)}
.sbr-faq__q:hover{background:rgba(29,26,22,.04)}
.sbr-faq--bg-surface .sbr-faq__q:hover{background:rgba(29,26,22,.035)}
.sbr-faq__d[open]:not(.is-closing) > .sbr-faq__q{background:transparent}

.sbr-faq__qtext{flex:1;text-align:right}
.sbr-faq__chev{flex:0 0 auto;display:grid;place-items:center;
	width:32px;height:32px;border-radius:50%;
	background:var(--paper);color:var(--ink);
	transition:transform var(--dur) var(--ease),background var(--dur) var(--ease),color var(--dur) var(--ease)}
.sbr-faq--bg-surface .sbr-faq__chev{background:var(--surface)}
.sbr-faq__q:hover .sbr-faq__chev{background:var(--ink);color:var(--paper)}
.sbr-faq__chev svg{width:16px;height:16px;stroke-width:2.4}
.sbr-faq__d[open]:not(.is-closing) .sbr-faq__chev{transform:rotate(180deg);
	background:var(--accent);color:var(--accent-ink)}

/* ---- answer ---- */
.sbr-faq__a{padding:0 24px 24px;font-size:15.5px;line-height:1.75;color:var(--fg-soft)}
.sbr-faq__a > *{margin:0 0 12px}
.sbr-faq__a > *:last-child{margin-bottom:0}
.sbr-faq__a a{color:var(--accent-strong);text-decoration:underline;text-decoration-thickness:1.5px;
	text-underline-offset:3px;font-weight:600}
.sbr-faq__a a:hover{color:var(--ink)}
.sbr-faq__a ul,.sbr-faq__a ol{padding-inline-start:22px}
.sbr-faq__a li{margin-bottom:6px}
.sbr-faq__a strong{color:var(--ink)}

/* JS-controlled animation; CSS hides closed panels (display:none avoids
   them counting toward layout when closed) */
.sbr-faq__d:not([open]) .sbr-faq__a{display:none}

/* keyboard focus */
.sbr-faq__q:focus-visible{outline:2px solid var(--accent);outline-offset:-3px;border-radius:11px}

/* ===================== TABLET (≥640px) ===================== */
@media(min-width:640px){
	.sbr-faq{padding:84px 28px}
	.sbr-faq__head{margin-bottom:52px}
	.sbr-faq__q{padding:22px 28px}
	.sbr-faq__a{padding:0 28px 26px}
}

/* ===================== DESKTOP (≥960px) ===================== */
@media(min-width:960px){
	.sbr-faq{padding:104px 32px}
	.sbr-faq__list{gap:12px}
}

/* ===================== motion respect ===================== */
@media(prefers-reduced-motion:reduce){
	.sbr-faq__item,.sbr-faq__chev,.sbr-faq__d::before,.sbr-faq__q{transition:none}
}