/* okitoki-v4 — FAQ (mock-up v-faq) on <details>, plus the v3 faqImage variant (--media). */

.v-faq__item { margin-bottom: var(--v-space); }
.v-faq__item:last-child { margin-bottom: 0; }
.v-faq__item[open] { margin-bottom: var(--v-space-lg); }
.v-faq__control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--v-space);
    padding-bottom: var(--v-space-sm);
    border-bottom: 1px solid rgb(var(--v-color-border-element));
    list-style: none;
    cursor: pointer;
    transition: border-color var(--v-duration) var(--v-timing);
}
.v-faq__control::-webkit-details-marker { display: none; }
.v-faq__heading {
    margin: 0;
    font-size: var(--v-font-size);
    font-weight: var(--v-font-weight-bold);
    line-height: var(--v-font-line-height-heading);
    transition: color var(--v-duration) var(--v-timing);
}
.v-faq__arrow {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: rgb(var(--v-color-text-secondary));
    transition: color var(--v-duration) var(--v-timing), transform var(--v-duration) var(--v-timing);
}
.v-faq__control:hover .v-faq__heading,
.v-faq__control:hover .v-faq__arrow { color: rgb(var(--v-color-accent)); }
.v-faq__control:focus-visible { outline: none; box-shadow: var(--v-focus-ring); border-radius: var(--v-radius-sm); }
.v-faq__item[open] .v-faq__arrow { transform: rotate(180deg); }
.v-faq__content {
    padding-top: var(--v-space);
    color: rgb(var(--v-color-text-secondary));
}
.v-faq__intro { margin: 0 auto var(--v-space-xl); max-width: var(--v-container-lg); }
.v-faq__outro { margin: var(--v-space-xl) auto 0; max-width: var(--v-container-lg); }

/* faqImage: questions left, the open answer's picture right (inline under the answer on mobile). */
.v-faq--media {
    /* Same column as the intro/outro prose around it, not the full container. */
    max-width: var(--v-container-lg);
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: var(--v-space-xl);
    align-items: start;
}
.v-faq__media { position: sticky; top: calc(var(--v-header-height) + var(--v-space-lg)); display: grid; }
.v-faq__media-image {
    grid-area: 1 / 1;
    width: 100%;
    height: auto;
    border-radius: var(--v-radius);
    opacity: 0;
    transition: opacity var(--v-duration-long) var(--v-timing);
}
.v-faq__media-image.is-active { opacity: 1; }
.v-faq__inline-media { display: none; }

@media (max-width: 991.98px) {
    .v-faq--media { grid-template-columns: 1fr; }
    .v-faq__media { display: none; }
    .v-faq__inline-media { display: block; margin-top: var(--v-space); }
    .v-faq__inline-media img { width: 100%; height: auto; border-radius: var(--v-radius); }
}