/* okitoki-v4 — icon list (mock-up v-info-list) and its titled groups (v-section__subsection). */

.v-info-list {
    display: grid;
    grid-template-columns: repeat(var(--v-info-cols, 2), minmax(0, 1fr));
    gap: var(--v-space-xl);
}
/* v4: v3 tool groups chose 2-4 columns per group (column_icon_blocks). */
.v-info-list--cols-3 { --v-info-cols: 3; }
.v-info-list--cols-4 { --v-info-cols: 4; }
.v-info-list__item {
    display: flex;
    align-items: flex-start;
    gap: var(--v-space);
    line-height: var(--v-font-line-height);
    text-wrap: pretty;
}
.v-info-list__icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-start;
}
.v-info-list__icon-src {
    width: 50px;
    height: 50px;
    object-fit: contain;
}
.v-info-list__content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.v-info-list__heading { font-weight: var(--v-font-weight-bold); }
.v-info-list__description { color: rgb(var(--v-color-text-secondary)); }
.v-info-list__description > :last-child { margin-bottom: 0; }
/* v4: the v3 "more" link under a tool item (a page, or the video info dialog). */
.v-info-list__more {
    align-self: flex-start;
    margin-top: var(--v-space-xs);
    padding: 0;
    border: 0;
    background: none;
    font-size: var(--v-font-size-sm);
    cursor: pointer;
}

.v-section__subsection { margin-bottom: var(--v-space-2xl); }
.v-section__subsection:last-child { margin-bottom: 0; }
.v-section__subsection-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: var(--v-space-xl);
}
.v-section__subsection-header--center {
    align-items: center;
    text-align: center;
}
/* Group prose (v3 tools html) reads left-aligned across the full column as on the current
 * site; only the title stays centred. */
.v-section__subsection-header--center > .v-content {
    align-self: stretch;
    max-width: none;
    text-align: left;
}
.v-section__subsection-heading { margin-bottom: var(--v-space-xs); }
.v-section__subsection-heading:last-child { margin-bottom: 0; }

/* v4: v3 "show all tools" toggle (display_accordion_block). */
.v-collapse { display: grid; justify-items: center; gap: var(--v-space-xl); }
.v-collapse__body { width: 100%; }

@media (max-width: 1199.98px) {
    .v-info-list--cols-4 { --v-info-cols: 2; }
}
@media (max-width: 991.98px) {
    .v-info-list,
    .v-info-list--cols-3 { --v-info-cols: 1; }
    .v-info-list--cols-4 { --v-info-cols: 1; }
}