/* ─────────────────────────────────────────────────────────────────────────────
   Who We Are page — Components/Pages/Public/WhoWeAre.razor. Scoped under .nf-wwp-*.
   Uses the shared tokens and blocks from nikalas-theme.css (nfd-*) and the motion
   layer in nikalas-motion.css; this file adds the page layout and its own effects.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Hero ──────────────────────────────────────────────────────────────────── */

.nf-wwp-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    min-height: clamp(320px, 30vw, 440px);
    display: flex;
    align-items: center;
    padding: clamp(48px, 5vw, 72px) var(--nfd-gutter) clamp(80px, 8vw, 120px);
    color: #fff;
    background: var(--nfd-navy-deep);
}
/* Photo, slowly zooming, under a navy wash that clears to the right. */
.nf-wwp-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background: url("/_content/RioCommerce.Web.Storefront/images/nikalas/who-we-are/hero.jpg") 70% 35% / cover no-repeat;
}
.nf-wwp-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(10, 35, 80, .96) 0%, rgba(16, 47, 101, .88) 34%, rgba(16, 47, 101, .45) 62%, rgba(16, 47, 101, .1) 100%);
}
/* Orange swoosh and a curve of the page background along the bottom. */
.nf-wwp-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: clamp(44px, 6vw, 96px);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 54 C360 96 760 96 1100 50 C1260 28 1370 20 1440 22 L1440 46 C1370 44 1270 52 1120 72 C780 112 380 112 0 74Z' fill='%23FF7900'/%3E%3Cpath d='M0 70 C380 108 780 108 1120 66 C1270 46 1370 40 1440 42 L1440 100 L0 100Z' fill='%23F5F8FD'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
}

.nf-wwp-hero__inner { width: 100%; }
.rioc-app p.nf-wwp-hero__eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--nfd-orange-2);
}
.nf-wwp-hero__eyebrow::before { content: ""; width: 36px; height: 3px; border-radius: 2px; background: var(--nfd-orange); }
.rioc-app h1.nf-wwp-hero__title {
    margin: 0;
    font-size: var(--nfd-fs-hero);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.01em;
    color: #fff;
    text-transform: none;
}
.rioc-app p.nf-wwp-hero__lead {
    max-width: 34em;
    margin: 16px 0 0;
    font-size: var(--nfd-fs-lead);
    font-weight: 500;
    line-height: 1.6;
    color: rgba(255, 255, 255, .92);
    text-transform: none;
}
.nf-wwp-hero__rule { display: block; width: 80px; height: 4px; margin-top: 20px; border-radius: 3px; background: var(--nfd-orange); }

/* ── Story: gallery + text ─────────────────────────────────────────────────── */

.nf-wwp-story { padding-top: clamp(32px, 3.5vw, 52px); }
.nf-wwp-story__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--nfd-gap);
}
.nf-wwp-gallery {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(12px, 1.3vw, 18px);
    padding: 8px;
    perspective: 900px;
}
.nf-wwp-gallery__blob {
    position: absolute;
    left: -6%;
    top: 12%;
    z-index: -1;
    width: 40%;
    height: 74%;
    border-radius: 58% 42% 52% 48% / 46% 56% 44% 54%;
    background: linear-gradient(160deg, var(--nfd-orange-2), var(--nfd-orange));
    opacity: .9;
}
.nf-wwp-gallery__burst { position: absolute; right: -18px; top: -30px; width: 52px; height: 44px; }
.nf-wwp-gallery__photo { aspect-ratio: 4 / 3; }

/* ── Vision & Mission ──────────────────────────────────────────────────────── */

.nf-wwp-vm__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(18px, 2.4vw, 32px);
}
.nf-wwp-vm__card {
    position: relative;
    overflow: hidden;
    display: flex;
    gap: clamp(16px, 1.8vw, 24px);
    padding: clamp(22px, 2.4vw, 32px);
    border: 1px solid var(--nfd-line);
    border-radius: var(--nfd-radius);
    background: #fff;
    box-shadow: var(--nfd-shadow-card);
    transition: translate .35s var(--nfd-ease), box-shadow .35s var(--nfd-ease), border-color .35s var(--nfd-ease);
}
/* Soft orange wave inside the card's lower edge. */
.nf-wwp-vm__card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 46px;
    z-index: 0;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 50' preserveAspectRatio='none'%3E%3Cpath d='M0 30 C120 50 260 50 400 14 L400 50 L0 50Z' fill='%23FFE7CF' opacity='.8'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
}
.nf-wwp-vm__card > * { position: relative; z-index: 1; }
.nf-wwp-vm__card:hover {
    translate: 0 -6px;
    border-color: rgba(255, 121, 0, .35);
    box-shadow: var(--nfd-shadow-card-hover);
}
.nf-wwp-vm__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    color: #fff;
    background: var(--nfd-icon-bg);
    box-shadow: 0 0 0 6px rgba(255, 121, 0, .12), 0 12px 20px -10px rgba(232, 100, 10, .7);
    transition: rotate .45s var(--nfd-ease), scale .45s var(--nfd-ease);
}
.nf-wwp-vm__icon svg { width: 30px; height: 30px; }
.nf-wwp-vm__card:hover .nf-wwp-vm__icon { rotate: -12deg; scale: 1.08; }
.rioc-app h2.nf-wwp-vm__title {
    margin: 4px 0 0;
    font-size: var(--nfd-fs-h3);
    font-weight: 700;
    line-height: 1.2;
    color: var(--nfd-navy);
    text-transform: none;
}
.nf-wwp-vm__rule { display: block; width: 44px; height: 3px; margin: 10px 0 14px; border-radius: 2px; background: var(--nfd-orange); transition: width .4s var(--nfd-ease); }
.nf-wwp-vm__card:hover .nf-wwp-vm__rule { width: 72px; }
.nf-wwp-vm__card .nfd-text { margin-bottom: 0; }

/* ── Director's Message ────────────────────────────────────────────────────── */

.nf-wwp-dir__inner {
    display: grid;
    grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
    align-items: center;
    gap: var(--nfd-gap);
}
.nf-wwp-dir__photo {
    aspect-ratio: 3 / 4;
    max-width: 400px;
    width: 100%;
    margin-inline: auto;
    border-width: 6px;
    border-radius: 24px;
    overflow: visible;
}
.nf-wwp-dir__photo::before {             /* orange shape behind the frame */
    content: "";
    position: absolute;
    left: -22px;
    top: 14%;
    bottom: 14%;
    width: 60%;
    z-index: -1;
    border-radius: 28px;
    background: linear-gradient(160deg, var(--nfd-orange-2), var(--nfd-orange));
}
.rioc-app .nf-wwp-dir__photo img[width] { border-radius: 18px; }
.nf-wwp-dir__photo::after { border-radius: 18px; }

.nf-wwp-quote {
    position: relative;
    margin: 0;
    padding: clamp(22px, 2.4vw, 32px) clamp(22px, 2.6vw, 36px);
    border: 1px solid #FFE1C2;
    border-left: 4px solid var(--nfd-orange);
    border-radius: var(--nfd-radius);
    background: linear-gradient(160deg, #FFF8F1 0%, #FFF1E2 100%);
    box-shadow: 0 18px 36px -26px rgba(212, 94, 0, .45);
}
.nf-wwp-quote__mark { position: absolute; top: -16px; left: 22px; width: 42px; height: 32px; color: var(--nfd-orange); }
.rioc-app .nf-wwp-quote p {
    margin: 0 0 14px;
    font-size: var(--nfd-fs-body);
    font-style: italic;
    line-height: 1.75;
    color: var(--nfd-text);
    text-transform: none;
}
.nf-wwp-quote__by {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 18px;
    padding-left: 14px;
    border-left: 3px solid var(--nfd-orange);
}
.nf-wwp-quote__by strong { font-size: 17px; font-weight: 700; color: var(--nfd-navy); }
.nf-wwp-quote__by span { font-size: 14.5px; color: var(--nfd-muted); }

/* ── Motion ────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
    @keyframes nf-wwp-zoom { from { scale: 1.12; } to { scale: 1; } }
    @keyframes nf-wwp-in   { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
    @keyframes nf-wwp-grow { from { width: 0; } }
    @keyframes nf-wwp-bob  { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }

    .nf-wwp-hero__bg { animation: nf-wwp-zoom 14s ease-out both; }
    .nf-wwp-hero__eyebrow { animation: nf-wwp-in .7s var(--nfd-ease) .1s both; }
    .nf-wwp-hero__title   { animation: nf-wwp-in .8s var(--nfd-ease) .25s both; }
    .nf-wwp-hero__lead    { animation: nf-wwp-in .8s var(--nfd-ease) .45s both; }
    .nf-wwp-hero__rule    { animation: nf-wwp-grow .8s var(--nfd-ease) .8s both; }

    /* Gallery photos tilt in 3D toward the pointer side on hover. */
    .nf-wwp-gallery__photo:hover { transform: rotateY(-7deg) rotateX(5deg) translateY(-6px) scale(1.02); }
    .nf-wwp-gallery__photo:nth-of-type(2n):hover { transform: rotateY(7deg) rotateX(5deg) translateY(-6px) scale(1.02); }
    .nf-wwp-gallery__blob,
    .nf-wwp-dir__photo::before { animation: nf-wwp-bob 7s ease-in-out infinite; }
    .nf-wwp-gallery__burst { animation: nfm-twinkle 3.6s ease-in-out infinite; }
}

/* ── Responsive ────────────────────────────────────────────────────────────── */

@media (max-width: 899.98px) {
    .nf-wwp-story__inner,
    .nf-wwp-dir__inner { grid-template-columns: 1fr; }
    .nf-wwp-gallery,
    .nf-wwp-story__text,
    .nf-wwp-dir__text { max-width: 640px; width: 100%; margin-inline: auto; }
    .nf-wwp-dir__photo { max-width: 320px; }
    .nf-wwp-vm__grid { grid-template-columns: 1fr; }
    .nf-wwp-hero::before { background: linear-gradient(90deg, rgba(10, 35, 80, .95) 0%, rgba(16, 47, 101, .78) 60%, rgba(16, 47, 101, .45) 100%); }
}

@media (max-width: 599.98px) {
    .nf-wwp-gallery { padding: 4px; gap: 10px; }
    .nf-wwp-gallery__photo { border-width: 3px; border-radius: 12px; }
    .nf-wwp-gallery__burst { right: 0; }
    .nf-wwp-vm__card { flex-direction: column; gap: 12px; }
    .nf-wwp-vm__icon { width: 54px; height: 54px; }
    .nf-wwp-vm__icon svg { width: 26px; height: 26px; }
    .nf-wwp-dir__photo::before { left: -10px; }
}