/*
 * blok7 — "Got any questions left?": an FAQ list where one answer opens at a time (js/blok7.js).
 * The answer opens with a grid-rows transition (0fr → 1fr); the "+" turns into "−".
 * Colours: --d0-faq-* in colors.css; fonts: --d0-font-display / --d0-font-text in fonts.css.
 */
.d0-faq {
    --faq-edge: clamp(16px, 3.4vw, 56px);
    --faq-dur: 420ms;
    --faq-ease: cubic-bezier(.2, .7, .1, 1);
    --faq-sign: 22px;
    position: relative;
    padding: clamp(80px, 12vw, 180px) 0 clamp(72px, 10vw, 150px);
    color: var(--d0-faq-ink);
    background: var(--d0-faq-ground);
    font-family: var(--d0-font-text);
}
.d0-faq__wrap {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 120px);
    max-width: 1520px; margin: 0 auto; padding: 0 var(--faq-edge);
}
.d0-faq__head { align-self: start; position: sticky; top: calc(var(--header-h, 70px) + 32px); }
.d0-faq__kicker {
    margin: 0 0 18px; color: var(--d0-faq-sign);
    font: 700 13px/1 var(--d0-font-text); letter-spacing: 0.24em; text-transform: uppercase;
}
.d0-faq__title {
    margin: 0; font: 900 clamp(44px, 6.4vw, 112px)/0.9 var(--d0-font-display);
    letter-spacing: -0.035em; text-transform: uppercase; text-wrap: balance;
}
.d0-faq__lead { max-width: 30ch; margin: 28px 0 0; color: var(--d0-soft); font-size: clamp(17px, 1.3vw, 21px); line-height: 1.45; }

.d0-faq__list { border-top: 1px solid var(--d0-faq-line); }
.d0-faq__item { border-bottom: 1px solid var(--d0-faq-line); }
.d0-faq__q { margin: 0; font: inherit; }
.d0-faq__toggle {
    display: grid; grid-template-columns: var(--faq-num, 64px) 1fr var(--faq-sign); align-items: center; gap: 12px;
    width: 100%; padding: clamp(20px, 2vw, 30px) 0; border: 0; background: none; color: inherit; cursor: pointer;
    text-align: left; font: 700 clamp(20px, 1.9vw, 30px)/1.2 var(--d0-font-display); letter-spacing: -0.01em;
    transition: color var(--faq-dur) var(--faq-ease);
}
.d0-faq__toggle:hover, .d0-faq__toggle[aria-expanded="true"] { color: var(--d0-faq-sign); }
.d0-faq__toggle:focus-visible { outline: 2px solid var(--d0-faq-sign); outline-offset: 4px; border-radius: 4px; }
.d0-faq__num { color: var(--d0-mute); font: 500 14px/1 var(--d0-font-text); letter-spacing: 0.08em; }
.d0-faq__sign { position: relative; width: var(--faq-sign); height: var(--faq-sign); }
.d0-faq__sign::before, .d0-faq__sign::after {
    content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 2px; margin-top: -1px;
    background: currentColor; transition: transform var(--faq-dur) var(--faq-ease);
}
.d0-faq__sign::after { transform: rotate(90deg); }
.d0-faq__toggle[aria-expanded="true"] .d0-faq__sign::after { transform: rotate(0deg); }

.d0-faq__a {
    display: grid; grid-template-rows: 0fr; visibility: hidden;
    transition: grid-template-rows var(--faq-dur) var(--faq-ease), visibility 0s linear var(--faq-dur);
}
.d0-faq__item.is-open .d0-faq__a { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
.d0-faq__a-in { min-height: 0; overflow: hidden; }
.d0-faq__a p {
    max-width: 62ch; margin: 0; padding: 0 var(--faq-sign) clamp(22px, 2vw, 32px) calc(var(--faq-num, 64px) + 12px);
    color: var(--d0-soft); font-size: clamp(16px, 1.15vw, 19px); line-height: 1.6;
}
.d0-faq__note { margin: 28px 0 0; color: var(--d0-mute); font-size: 14px; line-height: 1.5; }

@media (max-width: 899px) {
    .d0-faq__wrap { grid-template-columns: 1fr; }
    .d0-faq__head { position: static; }
    .d0-faq { --faq-num: 40px; }
    .d0-faq__a p { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .d0-faq { --faq-dur: 1ms; }
}