/* ─────────────────────────────────────────────────────────────────────────────
   Anubhav page — Components/Pages/Public/Anubhav.razor. Scoped under .nf-ap-*.
   Hero shell comes from who-we-are-page.css (.nf-wwp-hero*), the quote card from the
   same file (.nf-wwp-quote), shared blocks from nikalas-theme.css (nfd-*).
   ───────────────────────────────────────────────────────────────────────────── */

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

.nf-ap-hero__bg { background-image: url("/_content/RioCommerce.Web.Storefront/images/nikalas/anubhav/hero.jpg"); background-position: 60% 40%; }
.rioc-app p.nf-ap-hero__sub {
    margin: 8px 0 0;
    font-size: var(--nfd-fs-h3);
    font-weight: 600;
    line-height: 1.25;
    color: #fff;
    text-transform: none;
}
@media (prefers-reduced-motion: no-preference) {
    .nf-ap-hero__sub { animation: nf-wwp-in .8s var(--nfd-ease) .35s both; }
}

/* ── Section heading with orange rules either side ─────────────────────────── */

.rioc-app h2.nf-ap-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin: 0 0 clamp(24px, 3vw, 40px);
    font-size: clamp(26px, 2.4vw, 38px);
    font-weight: 800;
    line-height: 1.15;
    color: var(--nfd-navy);
    text-align: center;
    text-transform: none;
}
.nf-ap-heading::before,
.nf-ap-heading::after { content: ""; flex: none; width: clamp(28px, 4vw, 52px); height: 3px; border-radius: 2px; background: var(--nfd-orange); }

/* ── Gallery ───────────────────────────────────────────────────────────────── */

.nf-ap-gallery { padding-top: clamp(28px, 3vw, 44px); }
.rioc-app ul.nf-ap-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 1.6vw, 22px);
}
.nf-ap-grid > li { min-width: 0; }
.nf-ap-grid__item {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    padding: 0;
    border-radius: 16px;
    cursor: zoom-in;
    font: inherit;
}
.nf-ap-grid__zoom {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--nfd-navy);
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 6px 14px rgba(0, 0, 0, .2);
    opacity: 0;
    scale: .8;
    transition: opacity .3s ease, scale .3s var(--nfd-ease);
}
.nf-ap-grid__zoom svg { width: 20px; height: 20px; }
.nf-ap-grid__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 28px 14px 10px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    background: linear-gradient(180deg, rgba(10, 35, 80, 0) 0%, rgba(10, 35, 80, .85) 100%);
    opacity: 0;
    translate: 0 8px;
    transition: opacity .3s ease, translate .3s var(--nfd-ease);
}
.nf-ap-grid__item:hover .nf-ap-grid__zoom,
.nf-ap-grid__item:focus-visible .nf-ap-grid__zoom { opacity: 1; scale: 1; }
.nf-ap-grid__item:hover .nf-ap-grid__caption,
.nf-ap-grid__item:focus-visible .nf-ap-grid__caption { opacity: 1; translate: 0 0; }
.nf-ap-grid__item:focus-visible { outline: 3px solid var(--nfd-orange); outline-offset: 3px; }

/* ── About ─────────────────────────────────────────────────────────────────── */

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

/* ── Objectives ────────────────────────────────────────────────────────────── */

.rioc-app ul.nf-ap-obj__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(14px, 1.6vw, 22px);
}
.nf-ap-obj__card {
    position: relative;
    overflow: hidden;
    min-width: 0;
    padding: clamp(20px, 2vw, 26px) clamp(18px, 1.8vw, 24px) 40px;
    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);
}
/* Orange swoosh in the bottom-right corner. */
.nf-ap-obj__card::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 70%;
    height: 34px;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 34' preserveAspectRatio='none'%3E%3Cpath d='M0 34 C80 30 150 20 200 0 L200 34Z' fill='%23FFA33A' opacity='.85'/%3E%3Cpath d='M40 34 C110 30 165 22 200 10 L200 34Z' fill='%23FF7900'/%3E%3C/svg%3E") right bottom / 100% 100% no-repeat;
    transition: height .35s var(--nfd-ease);
}
.nf-ap-obj__card:hover {
    translate: 0 -6px;
    border-color: rgba(255, 121, 0, .35);
    box-shadow: var(--nfd-shadow-card-hover);
}
.nf-ap-obj__card:hover::after { height: 44px; }
.nf-ap-obj__icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin-bottom: 14px;
    border-radius: 16px;
    color: var(--nfd-orange);
    background: var(--nfd-orange-tint);
    transition: color .35s ease, background-color .35s ease, rotate .45s var(--nfd-ease);
}
.nf-ap-obj__icon svg { width: 27px; height: 27px; }
.nf-ap-obj__card:hover .nf-ap-obj__icon { color: #fff; background: var(--nfd-orange); rotate: -8deg; }
.rioc-app h3.nf-ap-obj__title {
    margin: 0 0 8px;
    font-size: clamp(16.5px, 1.25vw, 19px);
    font-weight: 700;
    line-height: 1.3;
    color: var(--nfd-navy);
    text-transform: none;
}
.rioc-app p.nf-ap-obj__text {
    margin: 0;
    font-size: var(--nfd-fs-small);
    line-height: 1.6;
    color: var(--nfd-muted);
    text-transform: none;
}
.rioc-app p.nf-ap-obj__kits { max-width: 880px; margin: clamp(26px, 3vw, 40px) auto 0; text-align: center; }

/* ── Closing ───────────────────────────────────────────────────────────────── */

.nf-ap-close { padding-top: 0; padding-bottom: calc(var(--nfd-section-py) * .7); }
.nf-ap-close__quote { max-width: 980px; margin-inline: auto; }
.rioc-app .nf-ap-close__quote p { margin: 0; font-size: var(--nfd-fs-lead); }

/* ── Lightbox ──────────────────────────────────────────────────────────────── */

.nf-ap-lb {
    position: fixed;
    inset: 0;
    z-index: 100002;
    display: grid;
    place-items: center;
    padding: 64px 72px;
    background: rgba(4, 18, 44, .9);
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
    outline: none;
    animation: nf-ap-fade .25s ease;
}
.nf-ap-lb__figure { margin: 0; max-width: min(1200px, 100%); animation: nf-ap-zoom .3s var(--nfd-ease); }
.nf-ap-lb__figure img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 170px);
    max-height: calc(100dvh - 170px);
    width: auto;
    height: auto;
    margin: 0 auto;
    border: 4px solid #fff;
    border-radius: 14px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, .5);
}
.nf-ap-lb__figure figcaption {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 12px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
}
.nf-ap-lb__figure figcaption span { color: rgba(255, 255, 255, .7); font-weight: 500; }
.nf-ap-lb__btn {
    position: absolute;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: rgba(255, 255, 255, .14);
    cursor: pointer;
    transition: background-color .2s ease;
}
.nf-ap-lb__btn svg { width: 24px; height: 24px; }
.nf-ap-lb__btn:hover { background: var(--nfd-orange); }
.nf-ap-lb__btn:focus-visible { outline: 2px solid #FFB066; outline-offset: 3px; }
.nf-ap-lb__close { top: 16px; right: 16px; }
.nf-ap-lb__prev { left: 14px; top: 50%; translate: 0 -50%; }
.nf-ap-lb__next { right: 14px; top: 50%; translate: 0 -50%; }
@keyframes nf-ap-fade { from { opacity: 0; } }
@keyframes nf-ap-zoom { from { opacity: 0; scale: .94; } }

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

@media (max-width: 1099.98px) {
    .rioc-app ul.nf-ap-obj__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 899.98px) {
    .rioc-app ul.nf-ap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nf-ap-about__inner { grid-template-columns: 1fr; }
    .nf-ap-about__inner > * { max-width: 680px; width: 100%; margin-inline: auto; }
    /* Touch screens have no hover: show the caption bar permanently. */
    .nf-ap-grid__caption { opacity: 1; translate: 0 0; padding-top: 22px; font-size: 13px; }
}

@media (max-width: 599.98px) {
    .rioc-app ul.nf-ap-grid { gap: 10px; }
    .nf-ap-grid__item { border-width: 3px; border-radius: 12px; }
    .nf-ap-grid__caption { font-size: 12px; padding: 18px 8px 6px; }
    .rioc-app ul.nf-ap-obj__grid { grid-template-columns: 1fr; }
    .nf-ap-lb { padding: 60px 12px 80px; }
    .nf-ap-lb__prev, .nf-ap-lb__next { top: auto; bottom: 16px; translate: none; }
    .nf-ap-lb__prev { left: calc(50% - 60px); }
    .nf-ap-lb__next { right: calc(50% - 60px); }
}

@media (max-width: 379.98px) {
    .rioc-app ul.nf-ap-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .nf-ap-lb, .nf-ap-lb__figure { animation: none; }
    .nf-ap-obj__card, .nf-ap-obj__card::after, .nf-ap-obj__icon, .nf-ap-grid__zoom, .nf-ap-grid__caption { transition: none; }
    .nf-ap-obj__card:hover { translate: none; }
    .nf-ap-obj__card:hover .nf-ap-obj__icon { rotate: none; }
}