/*
 * Homepage components.
 */

.vdm-home-hero {
    position: relative;
    overflow: hidden;
    background: var(--vdm-color-navy);
}

.vdm-home-hero::before {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgb(19 38 52 / 98%) 0%, rgb(19 38 52 / 92%) 58%, rgb(19 38 52 / 72%) 100%),
        repeating-linear-gradient(135deg, rgb(255 255 255 / 2%) 0 18px, transparent 18px 36px);
    content: "";
    pointer-events: none;
}

.vdm-home-hero > .e-con-inner,
.vdm-home-hero > .elementor-element,
.vdm-home-hero .vdm-container {
    position: relative;
    z-index: 1;
}

body.vdm-site .vdm-home-hero .elementor-heading-title {
    max-width: 13ch;
}

body.vdm-site .vdm-home-hero .vdm-section-intro,
body.vdm-site .vdm-home-hero .vdm-section-intro p {
    max-width: 760px;
    color: rgb(255 255 255 / 74%) !important;
}

.vdm-home-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vdm-space-3);
}

.vdm-home-section-heading {
    display: grid;
    max-width: 760px;
    gap: var(--vdm-space-3);
    margin-bottom: var(--vdm-space-6);
}

.vdm-home-category-grid {
    display: grid;
    gap: var(--vdm-space-4);
}

.vdm-home-category-grid--primary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: var(--vdm-space-4);
}

.vdm-home-category-grid--secondary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vdm-home-category {
    display: flex;
    overflow: hidden;
    height: 100%;
    flex-direction: column;
    color: var(--vdm-color-ink);
    border: 1px solid var(--vdm-color-border);
    border-radius: var(--vdm-radius-md);
    background: var(--vdm-color-surface);
    box-shadow: var(--vdm-shadow-card);
    text-decoration: none;
    transition:
        border-color var(--vdm-transition),
        box-shadow var(--vdm-transition),
        transform var(--vdm-transition);
}

.vdm-home-category:hover,
.vdm-home-category:focus-visible {
    color: var(--vdm-color-ink);
    border-color: color-mix(in srgb, var(--vdm-color-brass) 50%, var(--vdm-color-border));
    box-shadow: var(--vdm-shadow-card-hover);
    transform: translateY(-3px);
}

.vdm-home-category__media {
    position: relative;
    display: grid;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    place-items: center;
    background: var(--vdm-color-background);
}

.vdm-home-category--secondary .vdm-home-category__media {
    aspect-ratio: 16 / 8;
}

.vdm-home-category__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 300ms ease;
}

.vdm-home-category:hover .vdm-home-category__image,
.vdm-home-category:focus-visible .vdm-home-category__image {
    transform: scale(1.025);
}

.vdm-home-category__placeholder {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgb(19 38 52 / 7%), rgb(169 118 54 / 12%)),
        repeating-linear-gradient(135deg, transparent 0 18px, rgb(19 38 52 / 4%) 18px 36px),
        var(--vdm-color-background);
}

.vdm-home-category__placeholder::before,
.vdm-home-category__placeholder::after {
    position: absolute;
    top: 50%;
    left: 50%;
    content: "";
    transform: translate(-50%, -50%);
}

.vdm-home-category__placeholder::before {
    width: 74px;
    height: 74px;
    border: 1px solid rgb(19 38 52 / 16%);
    border-radius: 50%;
}

.vdm-home-category__placeholder::after {
    width: 38px;
    height: 8px;
    border-radius: 999px;
    background: var(--vdm-color-brass);
    transform: translate(-50%, -50%) rotate(-35deg);
}

.vdm-home-category__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--vdm-space-2);
    padding: var(--vdm-space-4);
}

.vdm-home-category--secondary .vdm-home-category__body {
    padding: var(--vdm-space-3) var(--vdm-space-4) var(--vdm-space-4);
}

.vdm-home-category__title {
    color: var(--vdm-color-navy);
    font-family: var(--vdm-font-display);
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.2;
}

.vdm-home-category--secondary .vdm-home-category__title {
    font-size: 1.15rem;
}

.vdm-home-category__description {
    color: var(--vdm-color-muted);
    font-size: var(--vdm-font-size-sm);
    line-height: 1.55;
}

.vdm-home-category__link {
    margin-top: auto;
    padding-top: var(--vdm-space-2);
    color: var(--vdm-color-brass-dark);
    font-size: var(--vdm-font-size-sm);
    font-weight: 700;
}

.vdm-home-info-grid,
.vdm-home-audience-grid,
.vdm-home-process-grid {
    display: grid !important;
    gap: var(--vdm-space-4);
}

.vdm-home-info-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.vdm-home-audience-grid,
.vdm-home-process-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vdm-home-info-card,
.vdm-home-process-card,
.vdm-home-audience-card {
    display: flex;
    height: 100%;
    flex-direction: column;
    gap: var(--vdm-space-3);
    padding: var(--vdm-space-4);
}

.vdm-home-process-card {
    border-top: 3px solid var(--vdm-color-brass);
}

.vdm-home-step-number,
body.vdm-site .elementor-widget-text-editor.vdm-home-step-number,
body.vdm-site .elementor-widget-text-editor.vdm-home-step-number p {
    color: var(--vdm-color-brass-dark) !important;
    font-family: var(--vdm-font-display) !important;
    font-size: 2rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
}

.vdm-home-brands {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--vdm-space-2);
}

.vdm-home-brand {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    padding: 0.6rem 1rem;
    color: var(--vdm-color-navy);
    border: 1px solid var(--vdm-color-border);
    border-radius: var(--vdm-radius-sm);
    background: var(--vdm-color-surface);
    font-size: var(--vdm-font-size-sm);
    font-weight: 600;
}

.vdm-home-cta-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--vdm-space-6);
}

.vdm-home-categories__notice {
    padding: var(--vdm-space-3);
    color: var(--vdm-color-warning);
    border: 1px solid var(--vdm-color-warning);
    background: var(--vdm-color-warning-bg);
}

@media (max-width: 1024px) {
    .vdm-home-category-grid--primary,
    .vdm-home-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vdm-home-category-grid--secondary,
    .vdm-home-audience-grid,
    .vdm-home-process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    body.vdm-site .vdm-home-hero .elementor-heading-title {
        max-width: none;
    }

    .vdm-home-actions,
    .vdm-home-actions .elementor-widget-button,
    .vdm-home-actions .elementor-button-wrapper {
        width: 100%;
    }

    .vdm-home-category-grid--primary,
    .vdm-home-category-grid--secondary,
    .vdm-home-info-grid,
    .vdm-home-audience-grid,
    .vdm-home-process-grid,
    .vdm-home-cta-inner {
        grid-template-columns: 1fr;
    }

    .vdm-home-cta-inner {
        gap: var(--vdm-space-4);
    }
}