/* okitoki-v4 — hero (mock-up v-hero). The band (.v-section--hero) lives in 2-layout.css. */

.v-hero {
    position: relative;
    display: flex;
    align-items: center;
    padding: var(--v-space-xl) 0;
    color: rgb(var(--v-color-white));
    text-wrap: pretty;
}
.v-hero__row {
    display: grid;
    flex-grow: 1;
    grid-template-columns: 500px 1fr;
    gap: var(--v-space-xl);
}
.v-hero__info {
    display: grid;
    align-content: center;
    padding: var(--v-space-xl) 0;
}
.v-hero__kicker {
    margin-bottom: var(--v-space-xs);
    color: rgb(var(--v-color-white));
    font-size: var(--v-font-size-sm);
    font-weight: var(--v-font-weight-semibold);
    text-transform: uppercase;
}
.v-hero__heading { margin-bottom: var(--v-space-sm); }
.v-hero__description { margin: 0 0 var(--v-space-xl); }
.v-hero__controls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--v-space);
}
.v-hero__description--rich > :last-child { margin-bottom: 0; }
.v-hero__description--rich a { color: inherit; text-decoration: underline; }
.v-hero__controls:empty { display: none; }
.v-hero__media {
    position: relative;
    min-height: 320px;
}
/* v4: inner pages (price, features, thanks, 404...) — the same band, less height. */
.v-hero--compact { padding: var(--v-space-lg) 0 0; }
.v-hero--compact .v-hero__media { min-height: 240px; }
/* v4: an <img> instead of the mock-up's background div, so the LCP image is discoverable. */
.v-hero__media-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (max-width: 1199.98px) {
    .v-hero__row { grid-template-columns: 1fr; }
    .v-hero__info { text-align: center; }
    .v-hero__controls { justify-content: center; }
    .v-hero__media { display: none; }
}