/* VerFinder reference design template.
   Page-specific foundation content + reusable lower-area treatment. */

.vf-foundation-page {
    max-width: var(--vf-container);
    margin-left: auto;
    margin-right: auto;
    color: var(--vf-ink);
}

.vf-foundation-page .vf-foundation-hero {
    min-height: 390px;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: clamp(36px, 6vw, 76px);
    box-sizing: border-box;
    position: relative;
}

.vf-foundation-page .vf-foundation-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 820px;
    color: var(--vf-ink);
}

.vf-foundation-page .vf-foundation-eyebrow {
    margin-bottom: 12px;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--vf-ink);
}

.vf-foundation-page .vf-foundation-title {
    margin: 0;
    color: var(--vf-ink);
    font-size: clamp(42px, 5vw, 64px);
    line-height: 1.05;
    font-weight: 700;
}

.vf-foundation-page .vf-foundation-content {
    display: grid;
    gap: var(--vf-space);
    margin-top: var(--vf-space);
    margin-bottom: var(--vf-space);
}

.vf-foundation-page .vf-foundation-card {
    background: var(--vf-mist);
    padding: clamp(28px, 4vw, 46px);
    color: var(--vf-ink);
}

.vf-foundation-page .vf-foundation-card h2 {
    margin-top: 0;
    margin-bottom: 16px;
    color: var(--vf-ink);
}

.vf-foundation-page .vf-foundation-card p {
    margin: 0;
    max-width: 980px;
    color: var(--vf-ink);
}

/* Remove YOOtheme's full-viewport expansion only on pages using the reference template. */

body.vf-design-template #tm-main {
    min-height: 0 !important;
    height: auto !important;
    padding-bottom: 0 !important;
}

body.vf-design-template #tm-main .uk-article > .uk-margin-medium {
    margin-bottom: 0 !important;
}

@media (max-width: 1239px) {
    .vf-foundation-page {
        width: calc(100% - (2 * var(--vf-page-gutter)));
        max-width: calc(100% - (2 * var(--vf-page-gutter)));
    }
}

@media (max-width: 639px) {
    .vf-foundation-page .vf-foundation-hero {
        min-height: 310px;
        padding: 28px 22px;
    }

    .vf-foundation-page .vf-foundation-eyebrow {
        font-size: 13px;
    }

    .vf-foundation-page .vf-foundation-content {
        gap: var(--vf-space-mobile);
        margin-top: var(--vf-space-mobile);
        margin-bottom: var(--vf-space-mobile);
    }

}

/* Homepage keeps one base rhythm interval between category imagery and the lower menu. */
body.vf-design-template.vf-home-reference-layout #tm-main {
    padding-bottom: var(--vf-space) !important;
}

@media (max-width: 639px) {
    body.vf-design-template.vf-home-reference-layout #tm-main {
        padding-bottom: var(--vf-space-mobile) !important;
    }
}
