/* okitoki-v4 — layout (layer 2): the container primitive and page sections.
 * One container, the mock-up's ladder (540/720/960/1140, 1340 for --large) — the same
 * box the current site header and contacts page sit on, so v4 pages line up with them.
 * Breakpoints in the whole theme: 500 / 768 / 992 / 1200 (and 1400 for --large only). */

.v-site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.v-site__main {
    flex: 1 0 auto;
}

/* ---------- Container ---------- */
.v-container {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--v-space);
}
@media (min-width: 576px)  { .v-container { max-width: var(--v-container-sm); } }
@media (min-width: 768px)  { .v-container { max-width: var(--v-container-md); } }
@media (min-width: 992px)  { .v-container { max-width: var(--v-container-lg); } }
@media (min-width: 1200px) { .v-container { max-width: var(--v-container-xl); } }
@media (min-width: 1400px) { .v-container--large { max-width: var(--v-container-xxl); } }
.v-container--small { max-width: var(--v-container-lg); }

/* ---------- Section ---------- */
.v-section {
    position: relative;
    padding-bottom: var(--v-space-xl);
    margin-bottom: calc(var(--v-section-gap) - var(--v-space-xl));
    background-color: rgb(var(--v-color-surface));
}
.v-section:last-child {
    margin-bottom: 0;
}
/* Several parts in one band (tabs + reviews, cards + FAQ): the mock-up's 120px between them. */
.v-section__part + .v-section__part {
    margin-top: var(--v-space-3xl);
}
/* Grey bands: the wave edges reach 110px above and 135px below the band (mock-up), so the
 * gap on both sides never drops under the wave, whatever the fluid section gap is. */
.v-section--contrast {
    --v-wave-top: 110px;
    --v-wave-bottom: 137px;
    padding-top: var(--v-space-xl);
    margin-bottom: max(calc(var(--v-section-gap) - var(--v-space-xl)), calc(var(--v-wave-bottom) + var(--v-space-md)));
}
.v-section:has(+ .v-section--contrast) {
    margin-bottom: max(calc(var(--v-section-gap) - var(--v-space-xl)), calc(110px + var(--v-space-md)));
}
/* Plain page body under the solid header (no hero): breathing room above the title. */
.v-section--page {
    padding-top: var(--v-space-3xl);
}

/* Hero: wave background, sits under the transparent header. */
.v-section--hero {
    margin-bottom: 0;
    padding-top: var(--v-header-height);
    padding-bottom: var(--v-space-4xl);
    background: url('../img/bg-hero.webp') 50% / cover no-repeat;
}

/* Primary: blue wave band, white text. */
.v-section--primary {
    margin-bottom: 0;
    padding-bottom: var(--v-space-2xl);
    color: rgb(var(--v-color-white));
    background: url('../img/bg-primary.webp') 50% / cover no-repeat;
}

/* Contrast: grey band framed by the site's wave edges (v4: local files, not hotlinked). */
.v-section--contrast {
    background-color: rgb(var(--v-color-surface-contrast));
}
.v-section--contrast::before,
.v-section--contrast::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    pointer-events: none;
}
.v-section--contrast::before {
    top: 0;
    height: 160px;
    background-image: url('../img/wave-top.webp');
    transform: translateY(-110px);
}
.v-section--contrast::after {
    bottom: -135px;
    height: 137px;
    background-image: url('../img/wave-bottom.webp');
}
.v-section--hero.v-section--contrast::before,
.v-section--hero.v-section--contrast + .v-section::before {
    display: none;
}

.v-section__header {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: var(--v-container-md);
    margin-bottom: var(--v-space-xl);
    text-wrap: balance;
}
.v-section__header--center {
    align-items: center;
    margin-inline: auto;
    text-align: center;
    text-wrap: pretty;
}
.v-section__heading {
    margin-bottom: var(--v-space-xs);
}
.v-section__heading:last-child,
.v-section__description:last-child {
    margin-bottom: 0;
}
.v-section__description {
    max-width: var(--v-container-md);
    margin-bottom: var(--v-space-lg);
    color: rgb(var(--v-color-text-secondary));
}
.v-section--primary .v-section__description {
    color: rgba(var(--v-color-white), .85);
}
.v-section__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--v-space);
}
.v-section__controls--center {
    justify-content: center;
    margin-top: var(--v-space-xl);
}

@media (max-width: 1199.98px) {
    .v-section--hero {
        padding-bottom: var(--v-space-xl);
    }
}
@media (max-width: 767.98px) {
    .v-section--contrast { --v-wave-bottom: 70px; }
    .v-section--contrast::before { height: 80px; transform: translateY(-55px); }
    .v-section--contrast::after  { height: 70px; bottom: -68px; }
    .v-section:has(+ .v-section--contrast) { margin-bottom: max(calc(var(--v-section-gap) - var(--v-space-xl)), calc(55px + var(--v-space-md))); }
}