/* ─────────────────────────────────────────────────────────────────────────────
   Other Programs page — Components/Pages/Public/OtherPrograms.razor. Scoped .nf-op-*.
   Site navy + orange theme (nikalas-theme.css tokens). Hero text styles are shared with
   the Who We Are / Anubhav heroes (.nf-wwp-hero__*); section heading from anubhav-page.css.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Hero: shared photo banner (.nf-wwp-hero, who-we-are-page.css) ────────── */

.nf-op-hero__bg { background-image: url("/_content/RioCommerce.Web.Storefront/images/nikalas/programs/hero-corridor.jpg"); background-position: 75% 30%; }

/* ── Program cards ─────────────────────────────────────────────────────────── */

.nf-op-list { padding-top: clamp(28px, 3vw, 44px); }
.rioc-app ul.nf-op-programs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 2vw, 28px);
}
.nf-op-program {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    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);
}
.nf-op-program:hover { translate: 0 -6px; border-color: rgba(255, 121, 0, .4); box-shadow: var(--nfd-shadow-card-hover); }
.nf-op-program__img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #DFE8F5; }
.rioc-app .nf-op-program__img img[width] {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    transition: scale .5s var(--nfd-ease);
}
.nf-op-program:hover .nf-op-program__img img { scale: 1.05; }
.nf-op-program__badge {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--nfd-orange);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.nf-op-program__body { display: flex; flex-direction: column; flex: 1; padding: 22px 22px 24px; border-top: 3px solid var(--nfd-orange); }
.rioc-app h3.nf-op-program__title { margin: 0; font-size: clamp(22px, 1.8vw, 26px); font-weight: 800; color: var(--nfd-navy); text-transform: none; }
.rioc-app p.nf-op-program__tag { margin: 4px 0 10px; font-size: 15px; font-weight: 600; color: var(--nfd-orange-text); text-transform: none; }
.rioc-app p.nf-op-program__text { flex: 1; margin: 0 0 18px; font-size: var(--nfd-fs-small); line-height: 1.65; color: var(--nfd-muted); text-transform: none; }
.nf-op-program__more {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: 2px solid var(--nfd-orange);
    border-radius: 999px;
    color: var(--nfd-orange-text);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: color .3s ease, background-color .3s ease;
}
.nf-op-program__more svg { width: 17px; height: 17px; transition: translate .3s var(--nfd-ease); }
.nf-op-program__more:hover { color: #fff; background: var(--nfd-orange); }
.nf-op-program__more:hover svg { translate: 4px 0; }
.nf-op-program__more:focus-visible { outline: 2px solid var(--nfd-navy); outline-offset: 3px; }

/* ── Detailed program cards ────────────────────────────────────────────────── */

.nf-op-sec { padding-top: clamp(16px, 2vw, 28px); padding-bottom: clamp(16px, 2vw, 28px); scroll-margin-top: 130px; }
.nf-op-card {
    display: grid;
    align-items: center;
    gap: clamp(24px, 3.4vw, 52px);
    padding: clamp(22px, 2.8vw, 40px);
    border: 1px solid var(--nfd-line);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 26px 54px -30px rgba(16, 47, 101, .4);
}
.nf-op-card--saraav { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.nf-op-card--sadhan { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.rioc-app h2.nf-op-card__title { margin: 0; font-size: var(--nfd-fs-h2); font-weight: 800; line-height: 1.1; color: var(--nfd-navy); text-transform: none; }
.rioc-app p.nf-op-card__tag {
    display: inline-block;
    margin: 12px 0 20px;
    padding: 8px 16px;
    border-left: 4px solid var(--nfd-orange);
    border-radius: 6px 10px 10px 6px;
    background: var(--nfd-orange-tint);
    color: var(--nfd-orange-text);
    font-size: var(--nfd-fs-lead);
    font-weight: 700;
    line-height: 1.3;
    text-transform: none;
}
.nf-op-card__text .nfd-text { max-width: none; }
.nf-op-card__text .nfd-text:last-child { margin-bottom: 0; }
.nf-op-hl { color: var(--nfd-orange-text); font-weight: 800; font-size: 1.08em; }

.rioc-app ul.nf-op-gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.1vw, 14px); }
.nf-op-gallery__cell { min-width: 0; }
.nf-op-gallery__cell--wide { grid-column: span 2; }
.nf-op-gallery__item { display: block; width: 100%; padding: 0; border-width: 4px; border-radius: 14px; cursor: zoom-in; font: inherit; }
.nf-op-gallery__cell--half .nf-op-gallery__item { aspect-ratio: 3 / 2; }
.nf-op-gallery__cell--wide .nf-op-gallery__item { aspect-ratio: 15 / 7; }
.nf-op-gallery__item:hover .nf-ap-grid__zoom,
.nf-op-gallery__item:focus-visible .nf-ap-grid__zoom { opacity: 1; scale: 1; }
.nf-op-gallery__item:focus-visible { outline: 3px solid var(--nfd-orange); outline-offset: 3px; }

.nf-op-sadhan__photo { aspect-ratio: 760 / 1080; border-radius: 18px; }
.rioc-app p.nf-op-kit__lead { margin: 4px 0 12px; font-size: var(--nfd-fs-body); color: var(--nfd-navy); text-transform: none; }
.rioc-app ul.nf-op-kit { list-style: none; margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 22px; }
.nf-op-kit__item { display: flex; align-items: center; gap: 12px; min-width: 0; font-size: var(--nfd-fs-small); font-weight: 500; line-height: 1.35; color: var(--nfd-text); text-transform: none; }
.nf-op-kit__item:last-child { grid-column: span 2; }
.nf-op-kit__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    color: var(--nfd-orange);
    background: var(--nfd-orange-tint);
    transition: color .3s ease, background-color .3s ease, rotate .4s var(--nfd-ease);
}
.nf-op-kit__icon svg { width: 21px; height: 21px; }
.nf-op-kit__item:hover .nf-op-kit__icon { color: #fff; background: var(--nfd-orange); rotate: -8deg; }

/* ── Call to action ────────────────────────────────────────────────────────── */

.nf-op-cta {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    margin-top: clamp(32px, 4vw, 56px);
    padding: clamp(52px, 6vw, 84px) var(--nfd-gutter) clamp(84px, 8vw, 120px);
    color: #fff;
    text-align: center;
    background:
        radial-gradient(circle at 15% 20%, rgba(66, 133, 214, .3) 0%, rgba(66, 133, 214, 0) 45%),
        radial-gradient(circle at 85% 90%, rgba(255, 121, 0, .25) 0%, rgba(255, 121, 0, 0) 40%),
        linear-gradient(135deg, var(--nfd-navy-deep) 0%, var(--nfd-navy) 55%, #174B85 100%);
}
.nf-op-cta::before {                  /* curved top edge from the light page */
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: clamp(30px, 4vw, 60px);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H1440 V14 C1080 58 360 58 0 14Z' fill='%23F5F8FD'/%3E%3Cpath d='M0 22 C360 64 1080 64 1440 22' fill='none' stroke='%23FF7900' stroke-width='3'/%3E%3C/svg%3E") center top / 100% 100% no-repeat;
}
.nf-op-cta__inner { max-width: 780px; }
.rioc-app h2.nf-op-cta__title { margin: 0; font-size: var(--nfd-fs-h2); font-weight: 800; line-height: 1.15; color: #fff; text-transform: none; text-wrap: balance; }
.rioc-app p.nf-op-cta__text { margin: 14px auto 6px; max-width: 34em; font-size: var(--nfd-fs-lead); line-height: 1.65; color: rgba(255, 255, 255, .88); text-transform: none; }
.nf-op-cta__btn { margin-top: 18px; height: 54px; padding: 0 32px; font-size: 17px; }
.nf-op-cta__btn svg { width: 20px; height: 20px; }
.nf-op-cta__btn:focus-visible { outline-color: #fff; }

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

@media (max-width: 1023.98px) {
    .rioc-app ul.nf-op-programs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nf-op-card--saraav, .nf-op-card--sadhan { grid-template-columns: 1fr; }
    .nf-op-sadhan__photo { max-width: 380px; width: 100%; margin-inline: auto; }
}

@media (max-width: 899.98px) {
}

@media (max-width: 599.98px) {
    .rioc-app ul.nf-op-programs { grid-template-columns: 1fr; }
    .nf-op-card { border-radius: 18px; }
    .rioc-app ul.nf-op-kit { grid-template-columns: 1fr; }
    .nf-op-kit__item:last-child { grid-column: auto; }
    .nf-op-gallery__item { border-width: 3px; border-radius: 10px; }
    .nf-op-cta__btn { width: auto; display: inline-flex; }
}

@media (prefers-reduced-motion: reduce) {
    .nf-op-program, .nf-op-program__img img[width], .nf-op-kit__icon, .nf-op-program__more svg { transition: none; }
    .nf-op-program:hover { translate: none; }
    .nf-op-program:hover .nf-op-program__img img, .nf-op-kit__item:hover .nf-op-kit__icon { scale: none; rotate: none; }
}