/* ─────────────────────────────────────────────────────────────────────────────
   Homepage "Who We Are" — Components/Shared/FoundationWhoWeAre.razor.
   Layout and decoration only; type, buttons, photo frames and the facts card come
   from nikalas-theme.css (nfd-*).
   ───────────────────────────────────────────────────────────────────────────── */

.nf-wwa {
    background:
        radial-gradient(ellipse 45% 55% at 85% 20%, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, 0) 70%),
        radial-gradient(ellipse 35% 45% at 0% 90%, rgba(214, 230, 250, .6) 0%, rgba(214, 230, 250, 0) 70%),
        var(--nfd-bg);
}

.nf-wwa__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--nfd-gap);
}

/* 2×2 collage on an orange shape with a dot grid in the corner. */
.nf-wwa__collage {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(12px, 1.3vw, 18px);
    padding: 8px;
}
.nf-wwa__blob {
    position: absolute;
    left: -5%;
    top: 10%;
    z-index: -1;
    width: 44%;
    height: 76%;
    border-radius: 58% 42% 52% 48% / 46% 56% 44% 54%;
    background: linear-gradient(160deg, var(--nfd-orange-2) 0%, var(--nfd-orange) 100%);
    opacity: .9;
}
.nf-wwa__dots {
    position: absolute;
    left: -28px;
    top: -22px;
    z-index: -1;
    width: 60px;
    height: 96px;
    background-image: radial-gradient(var(--nfd-orange) 2.6px, transparent 3px);
    background-size: 18px 18px;
    opacity: .85;
}
.nf-wwa__photo { aspect-ratio: 4 / 3; }

/* "2012" reads as the headline figure of the facts card. */
.nfd-feature-text strong.nf-wwa__fact-big { font-size: clamp(22px, 1.8vw, 26px); line-height: 1.1; }

@media (max-width: 899.98px) {
    .nf-wwa__inner { grid-template-columns: 1fr; }
    .nf-wwa__collage { max-width: 600px; width: 100%; margin: 0 auto; }
    .nf-wwa__content { max-width: 640px; margin: 0 auto; }
}

@media (max-width: 599.98px) {
    .nf-wwa__collage { padding: 4px; }
    .nf-wwa__dots { left: -8px; top: -12px; width: 40px; height: 60px; background-size: 14px 14px; }
    .nf-wwa__photo { border-width: 3px; border-radius: 12px; }
}