/* okitoki-v4 — icon tiles (mock-up v-integrations). */

.v-integrations {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--v-space-lg);
}
.v-integrations__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--v-space-xs);
    color: inherit;
    text-align: center;
    text-decoration: none;
}
.v-integrations__item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    overflow: hidden;
    border-radius: var(--v-radius);
    background-color: rgb(var(--v-color-white));
    color: rgb(var(--v-color-primary));
}
.v-integrations__item-icon-src {
    width: 100%;
    max-width: 100%;
    height: 87px;
    object-fit: contain;
}
.v-integrations__item-heading {
    margin: 0;
    color: rgb(var(--v-color-text));
    font-size: var(--v-font-size);
    font-weight: var(--v-font-weight-bold);
    line-height: var(--v-font-line-height-heading);
}
a.v-integrations__item:hover .v-integrations__item-heading { color: rgb(var(--v-color-accent)); }

@media (max-width: 991.98px) { .v-integrations { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .v-integrations { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--v-space); } }
@media (max-width: 575.98px) { .v-integrations { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Industries — the current site's tiles: white card with a soft shadow, five per row,
 * 50px icon, 14px centred label, accent on hover (v3 .industry-box). */
.v-integrations--cards {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px 28px;
}
.v-integrations--cards .v-integrations__item {
    justify-content: flex-start;
    gap: 20px;
    padding: 20px 10px;
    border-radius: var(--v-radius);
    background: rgb(var(--v-color-white));
    box-shadow: 0 4px 20px rgba(var(--v-color-black), .1);
    transition: transform var(--v-duration) var(--v-timing);
}
.v-integrations--cards .v-integrations__item-icon {
    width: auto;
    background: transparent;
}
.v-integrations--cards .v-integrations__item-icon-src {
    width: auto;
    height: 50px;
}
.v-integrations--cards .v-integrations__item-heading {
    font-size: var(--v-font-size-sm);
    line-height: 1.25;
}
.v-integrations--cards a.v-integrations__item:hover { transform: translateY(-2px); }

@media (max-width: 991.98px) { .v-integrations--cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .v-integrations--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--v-space); } }