/* UX Narrative Patterns — built from UX Layer primitives */

.ux-hero-detail {
    display: grid;
    gap: var(--ea-grid-gap);
    align-items: center;
    width: 100%;
    max-width: var(--ea-content-wide, var(--ea-content-max));
    margin-inline: auto;
    padding-inline: var(--ea-pad-inline);
}

@media (min-width: var(--ea-bp-md)) {
    .ux-hero-detail {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.ux-section-value-proof {
    display: flex;
    flex-direction: column;
    gap: var(--ea-space-lg);
    width: 100%;
    max-width: var(--ea-content-max);
    margin-inline: auto;
    padding-inline: var(--ea-pad-inline);
}

.ux-section-value-proof .ux-proof-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--ea-grid-col-min), 1fr));
    gap: var(--ea-grid-gap-tight);
    width: 100%;
    max-width: var(--ea-content-wide, var(--ea-content-max));
    margin-inline: auto;
}

.ux-manifesto {
    display: flex;
    flex-direction: column;
    gap: var(--ea-space-xl);
    width: 100%;
    max-width: var(--ea-content-max);
    margin-inline: auto;
    padding-inline: var(--ea-pad-inline);
}

.ux-manifesto .ux-manifesto-block {
    display: flex;
    flex-direction: column;
    gap: var(--ea-space-sm);
}

.ux-case-study {
    display: flex;
    flex-direction: column;
    gap: clamp(1.5vw, 2.5vw, 3.5vw);
    width: 100%;
    max-width: var(--ea-content-max);
    margin-inline: auto;
    padding: clamp(2vw, 3vw, 4vw);
    background: rgba(255,255,255,0.025);
    border: clamp(0.08vw, 0.12vw, 0.16vw) solid rgba(255,255,255,0.07);
    backdrop-filter: blur(6px);
    border-radius: clamp(0.8vw, 1vw, 1.6vw);
}

.ux-case-study .ux-case-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--ea-grid-col-min), 1fr));
    gap: var(--ea-grid-gap);
    width: 100%;
    max-width: var(--ea-content-wide, var(--ea-content-max));
    margin-inline: auto;
}

.ux-faq {
    display: flex;
    flex-direction: column;
    gap: var(--ea-space-md);
    width: 100%;
    max-width: var(--ea-content-max);
    margin-inline: auto;
    padding-inline: var(--ea-pad-inline);
}

.ux-faq .ux-accordion {
    gap: var(--ea-space-sm);
    width: 100%;
    max-width: var(--ea-content-max);
}