/* =====================================================================
   NASC SHARED STYLESHEET  —  templates/shaper_helixultimate/css/custom.css
   Version 1.7  ·  2026-11-01  ·  Home page converted from SP Page Builder
   1.1: nasc-mobile-only / nasc-desktop-only added
   1.3: home page top gap fixed (page class is on <body> and on div.article-details)
   1.4: News & Events (cards, date badge, home slider, All Events page, event page)
   1.5: "Upcoming"/"Today" ribbon on event cards; designed empty state
   1.6: nothing over event photos (badge and tags moved below); whole photo on
        blurred fill; home News & Events / Spotlights boxes equal height
   1.7: fix - equal-height rule no longer touches Helix page-level rows

   RULES
   - Every class starts with "nasc-". Never style Helix/Bootstrap classes
     directly unless the rule is in section 1 (Base).
   - Colours, radii and shadows come ONLY from the variables in section 0.
   - No inline style="..." and no <style> tags inside articles.
   - Layout (rows/columns/spacing) uses Bootstrap 5 classes that ship with
     Joomla: row, col-md-6, mb-4 ...
   - New look needed on a page? Add a component here, bump the version,
     list it in the index below.

   INDEX
   0  Tokens (colours, radii, shadows)
   1  Base and page helpers ............ nasc-home, nasc-full-bleed,
                                         nasc-mobile-only, nasc-desktop-only
   2  Section box and titles ........... nasc-section, nasc-section-title
   3  Buttons and pills ................ nasc-btn, nasc-pill
   4  Hero video ....................... nasc-hero-video
   5  News ticker ...................... nasc-ticker
   6  Logo grid ........................ nasc-logo-grid, nasc-logo-card
   7  Feature box ...................... nasc-feature-box
   8  CTA banner ....................... nasc-cta-banner
   9  Panel and quick links ............ nasc-panel, nasc-quick-links
   10 Marquee (auto-scrolling row) ..... nasc-marquee
   11 Person card (toppers, exams) ..... nasc-person-card
   12 Placement card ................... nasc-placement-card
   13 Slider ........................... nasc-slider
   14 Support cards .................... nasc-support-grid, nasc-support-card
   15 Image cards with caption ......... nasc-image-grid, nasc-image-card
   16 Logo marquee items ............... nasc-logo-item
   17 News list (Articles module) ...... nasc-news-list
   18 Small blocks ..................... nasc-mini-heading, nasc-link-list,
                                         nasc-figure-link, nasc-events-legacy
   19 News & Events .................... nasc-date-badge, nasc-event-card,
                                         nasc-carousel, nasc-event-grid,
                                         nasc-events-hero, nasc-event
   ===================================================================== */


/* ---------- 0. TOKENS ---------- */
:root{
    --nasc-primary:        #233559;   /* navy: titles, borders, buttons */
    --nasc-primary-light:  #2f4a7c;
    --nasc-primary-dark:   #1b2a47;
    --nasc-accent:         #fda71c;   /* saffron: highlights, hovers */
    --nasc-teal:           #0A607D;
    --nasc-news-date:      #2e4805;

    --nasc-text-muted:     #666;
    --nasc-text-soft:      #888;
    --nasc-border:         #e5e5e5;
    --nasc-white:          #ffffff;

    --nasc-surface-grad:   linear-gradient(180deg,#f8f9fc,#ffffff);
    --nasc-panel-bg:       #f4f7fc;

    --nasc-radius-sm:      6px;
    --nasc-radius:         12px;
    --nasc-radius-lg:      14px;

    --nasc-shadow-sm:      0 2px 8px rgba(0,0,0,.05);
    --nasc-shadow:         0 3px 10px rgba(0,0,0,.08);
    --nasc-shadow-lg:      0 8px 25px rgba(0,0,0,.12);

    /* exam badge colours */
    --nasc-net:  #0A607D;
    --nasc-gate: #198754;
    --nasc-csir: #6f42c1;
    --nasc-psc:  #dc3545;
    --nasc-cat:  #fd7e14;
    --nasc-jam:  #7c3aed;
}


/* ---------- 1. BASE AND PAGE HELPERS ---------- */
body{ overflow-x:clip; }

/* Page Class " nasc-home" (menu item -> Page Display -> Page Class).
   The class lands in two places: on <body> (Helix) and on the article
   wrapper div.article-details (Joomla). Both are used below. */

/* a) Remove Helix's top/bottom spacing around the content area */
.nasc-home #sp-main-body,
.nasc-home #sp-main-body > .container,
.nasc-home #sp-main-body .container-inner,
.nasc-home #sp-component,
.nasc-home #sp-component > .sp-column{
    padding-top:0;
    margin-top:0;
}
.nasc-home #sp-main-body{ padding-bottom:0; }

/* b) Inside the article wrapper, hide everything Helix prints around the
      article body (title, info, edit buttons, empty spacers). Only
      children that contain our own nasc- markup stay visible. */
.article-details.nasc-home > :not(:has([class*="nasc-"])){
    display:none !important;
}
.article-details.nasc-home{
    margin-top:0;
    padding-top:0;
}

/* Show a block only on phones (below 768px) or only on tablet/desktop.
   Same breakpoint SP Page Builder used for "hide on tablet/desktop". */
@media (min-width:768px){
    .nasc-mobile-only{ display:none !important; }
}
@media (max-width:767.98px){
    .nasc-desktop-only{ display:none !important; }
}

/* Break a block out of the boxed container to full screen width */
.nasc-full-bleed{
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
}


/* ---------- 2. SECTION BOX AND TITLES ---------- */
.nasc-section{
    background:var(--nasc-surface-grad);
    padding:30px;
    border-radius:var(--nasc-radius);
    border-top:5px solid var(--nasc-primary);
    margin:25px 0;
}
.nasc-section--flush{ padding:30px 0; overflow:hidden; }      /* scrolling rows */
.nasc-section--logos{ padding:25px 0; overflow:hidden; }
.nasc-section--tight{ margin:15px 0; }
.nasc-section--fill{                                           /* side box, same height */
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}

.nasc-section-title{
    text-align:center;
    margin-bottom:25px;
}
.nasc-section-title--sm{ margin-bottom:20px; }
.nasc-section-title h2{
    color:var(--nasc-primary);
    margin-bottom:5px;
    font-weight:700;
}
.nasc-section-title p{
    color:var(--nasc-text-muted);
    margin:0;
}


/* ---------- 3. BUTTONS AND PILLS ---------- */
.nasc-btn,
.nasc-btn:visited{
    display:inline-block;
    background:var(--nasc-primary);
    color:var(--nasc-white) !important;
    padding:10px 22px;
    border-radius:var(--nasc-radius-sm);
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}
.nasc-btn:hover{
    background:var(--nasc-accent);
    color:var(--nasc-primary) !important;
    text-decoration:none;
}
.nasc-btn--sm{ padding:10px 18px; }

.nasc-pill{
    display:inline-block;
    background:var(--nasc-teal);
    color:var(--nasc-white);
    padding:6px 14px;
    border-radius:20px;
    font-size:13px;
    font-weight:600;
}
/* exam badges: fixed width so all cards line up */
.nasc-pill--exam{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    width:200px;
    min-height:36px;
    padding:6px 12px;
    box-sizing:border-box;
    text-align:center;
}
.nasc-pill--net { background:var(--nasc-net); }
.nasc-pill--gate{ background:var(--nasc-gate); }
.nasc-pill--csir{ background:var(--nasc-csir); }
.nasc-pill--psc { background:var(--nasc-psc); }
.nasc-pill--cat { background:var(--nasc-cat); }
.nasc-pill--jam { background:var(--nasc-jam); }


/* ---------- 4. HERO VIDEO ---------- */
.nasc-hero-video{
    position:relative;
    width:100%;
    height:600px;
    overflow:hidden;
}
.nasc-hero-video video{
    width:100%;
    height:100%;
    object-fit:cover;
}
.nasc-hero-video__overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.15);
}
.nasc-hero-video__caption{
    position:absolute;
    bottom:50px;
    left:50px;
    background:rgba(35,53,89,.85);
    color:var(--nasc-white);
    padding:20px;
    border-left:5px solid var(--nasc-accent);
    max-width:500px;
    opacity:0;
    animation:nascCaptionFade 15s infinite;
}
.nasc-hero-video__caption h2{ margin:0 0 10px; color:var(--nasc-white); }
.nasc-hero-video__caption p { margin:0; color:var(--nasc-white); }
/* captions take turns: 1st, 2nd, 3rd caption start 0s, 5s, 10s */
.nasc-hero-video__caption:nth-child(3){ animation-delay:0s; }
.nasc-hero-video__caption:nth-child(4){ animation-delay:5s; }
.nasc-hero-video__caption:nth-child(5){ animation-delay:10s; }

@keyframes nascCaptionFade{
    0%{opacity:0;} 5%{opacity:1;} 28%{opacity:1;} 33%{opacity:0;} 100%{opacity:0;}
}
@media(max-width:768px){
    .nasc-hero-video__caption{
        left:20px; right:20px; bottom:20px;
        max-width:none;
        padding:15px;
    }
    .nasc-hero-video__caption h2{ font-size:22px; }
}


/* ---------- 5. NEWS TICKER ---------- */
.nasc-ticker{
    display:flex;
    align-items:center;
    background:var(--nasc-white);
    border:1px solid var(--nasc-border);
    border-radius:8px;
    overflow:hidden;
    box-shadow:0 2px 8px rgba(0,0,0,0.08);
}
.nasc-ticker__label{
    background:var(--nasc-accent);
    color:var(--nasc-primary);
    font-weight:700;
    font-size:14px;
    padding:12px 18px;
    white-space:nowrap;
    display:flex;
    align-items:center;
    gap:8px;
    z-index:2;
}
.nasc-ticker__label i{ animation:nascPulse 1.5s infinite; }
.nasc-ticker__scroll{
    overflow:hidden;
    flex:1;
    color:var(--nasc-white);
    background:var(--nasc-primary);
}
.nasc-ticker__track{
    display:inline-flex;
    width:max-content;
    animation:nascScrollX 30s linear infinite;
}
.nasc-ticker__scroll:hover .nasc-ticker__track{ animation-play-state:paused; }
.nasc-ticker__set{
    display:inline-flex;
    white-space:nowrap;
}
.nasc-ticker__set a{
    color:var(--nasc-white);
    text-decoration:none;
    font-weight:500;
    margin:0 20px;
    line-height:48px;
    transition:all 0.3s ease;
}
.nasc-ticker__set a:hover{
    color:var(--nasc-accent);
    text-decoration:underline;
}
.nasc-ticker__sep{
    color:rgba(255,255,255,0.5);
    line-height:48px;
}
@keyframes nascPulse{ 0%{opacity:1;} 50%{opacity:.5;} 100%{opacity:1;} }
@media(max-width:768px){
    .nasc-ticker__label{ font-size:12px; padding:10px 12px; }
    .nasc-ticker__set a{ font-size:13px; }
}


/* ---------- 6. LOGO GRID (Institutional Highlights) ---------- */
.nasc-logo-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:20px;
    align-items:center;
}
.nasc-logo-card{
    text-align:center;
    padding:10px;
    transition:all .3s ease;
}
.nasc-logo-card:hover{ transform:translateY(-4px); }
.nasc-logo-card img{
    display:block;
    margin:0 auto 15px auto;
    height:75px;
    width:auto;
    object-fit:contain;
}
.nasc-logo-card h4{
    color:var(--nasc-primary);
    font-size:15px;
    margin:0;
    line-height:1.5;
    font-weight:600;
}
@media(max-width:992px){
    .nasc-logo-grid{ grid-template-columns:repeat(3,1fr); }
}
@media(max-width:768px){
    .nasc-logo-grid{ grid-template-columns:repeat(2,1fr); gap:20px; }
    .nasc-logo-card img{ height:65px; }
}
@media(max-width:480px){
    .nasc-logo-grid{ grid-template-columns:1fr; }
}


/* ---------- 7. FEATURE BOX (NIRF 2026) ---------- */
.nasc-feature-box img{
    display:block;
    margin:0 auto 15px auto;
    height:100px;
    width:auto;
    max-width:100%;
    object-fit:contain;
}
.nasc-feature-box h3{
    color:var(--nasc-primary);
    margin-bottom:5px;
    font-weight:700;
    font-size:28px;
}
.nasc-feature-box p{
    color:var(--nasc-text-muted);
    margin-bottom:20px;
    font-size:15px;
}


/* ---------- 8. CTA BANNER (Admissions) ---------- */
.nasc-cta-banner{
    position:relative;
    border-radius:var(--nasc-radius-lg);
    overflow:hidden;
    margin:25px 0;
    min-height:240px;
    background-size:cover;
    background-position:center;
    background-image:linear-gradient(rgba(35,53,89,.78), rgba(10,96,125,.78));
}
/* one modifier per photo; path must start with / */
.nasc-cta-banner--admission{
    background-image:
        linear-gradient(rgba(35,53,89,.78), rgba(10,96,125,.78)),
        url('/images/2026/06/26/nascfront2026.webp');
}
.nasc-cta-banner__inner{
    position:relative;
    z-index:2;
    min-height:240px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:40px 50px;
}
.nasc-cta-banner__text{ max-width:700px; }
.nasc-cta-banner__badge{
    display:inline-block;
    background:var(--nasc-accent);
    color:var(--nasc-primary);
    font-size:13px;
    font-weight:700;
    padding:8px 16px;
    border-radius:30px;
    margin-bottom:15px;
}
.nasc-cta-banner__text h2{
    color:var(--nasc-white);
    margin:0;
    font-size:42px;
    font-weight:800;
}
.nasc-cta-banner__text p{
    color:#f2f2f2;
    margin-top:12px;
    font-size:18px;
    line-height:1.7;
}
.nasc-cta-banner__btn{
    display:inline-block;
    background:var(--nasc-white);
    color:var(--nasc-primary) !important;
    text-decoration:none;
    font-weight:700;
    padding:16px 32px;
    border-radius:8px;
    transition:.3s;
}
.nasc-cta-banner__btn:hover{
    background:var(--nasc-accent);
    color:var(--nasc-primary) !important;
    transform:translateY(-2px);
}
@media(max-width:768px){
    .nasc-cta-banner__inner{
        flex-direction:column;
        text-align:center;
        gap:20px;
        padding:30px 20px;
    }
    .nasc-cta-banner__text h2{ font-size:30px; }
    .nasc-cta-banner__text p { font-size:16px; }
}


/* ---------- 9. PANEL AND QUICK LINKS ---------- */
.nasc-panel{
    background:var(--nasc-panel-bg);
    padding:25px;
    border-radius:var(--nasc-radius);
    border-top:5px solid var(--nasc-primary);
    margin:20px 0;
}
.nasc-bar-title{
    display:flex;
    align-items:center;
    margin-bottom:20px;
    font-size:28px;
    font-weight:700;
    color:var(--nasc-primary);
    line-height:1.1;
}
.nasc-bar-title::before{
    content:"";
    width:6px;
    height:40px;
    background:var(--nasc-accent);
    border-radius:3px;
    margin-right:12px;
    flex-shrink:0;
}
.nasc-quick-links{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
    gap:15px;
    margin:20px 0;
}
.nasc-quick-link{
    background:linear-gradient(180deg,#ffffff,#f8f9fb);
    border-radius:8px;
    padding:18px;
    text-align:center;
    text-decoration:none;
    color:var(--nasc-primary);
    border:1px solid var(--nasc-border);
    transition:all .3s ease;
    box-shadow:0 2px 5px rgba(0,0,0,.05);
}
.nasc-quick-link:hover{
    background:linear-gradient(135deg,var(--nasc-primary),var(--nasc-primary-light));
    color:var(--nasc-white);
    transform:translateY(-3px);
}
.nasc-quick-link i{
    font-size:28px;
    margin-bottom:10px;
    display:block;
    color:var(--nasc-accent);
}
.nasc-quick-link:hover i{ color:var(--nasc-white); }


/* ---------- 10. MARQUEE (auto-scrolling row) ----------
   Markup: <div class="nasc-marquee"><div class="nasc-marquee__track nasc-speed-30"
   data-nasc-marquee> ...cards... </div></div>
   nasc.js copies the cards once so the loop is seamless. */
.nasc-marquee{
    overflow:hidden;
    position:relative;
}
.nasc-marquee__track{
    display:flex;
    width:max-content;
    animation:nascScrollX 30s linear infinite;
}
.nasc-marquee:hover .nasc-marquee__track{ animation-play-state:paused; }
.nasc-marquee__track--center{ align-items:center; }
.nasc-speed-25{ animation-duration:25s; }
.nasc-speed-30{ animation-duration:30s; }
.nasc-speed-35{ animation-duration:35s; }
.nasc-speed-40{ animation-duration:40s; }

@keyframes nascScrollX{
    from{ transform:translateX(0); }
    to  { transform:translateX(-50%); }
}


/* ---------- 11. PERSON CARD (toppers, exam achievers) ---------- */
.nasc-person-card{
    width:260px;
    background:var(--nasc-white);
    margin:0 15px;
    border-radius:var(--nasc-radius);
    padding:20px;
    text-align:center;
    box-shadow:var(--nasc-shadow);
    border-top:4px solid var(--nasc-accent);
    flex-shrink:0;
    display:flex;
    flex-direction:column;
    align-items:center;
}
.nasc-person-card:hover{
    transform:translateY(-5px);
    transition:.3s;
}
.nasc-person-card img{
    width:150px;
    height:190px;
    object-fit:cover;
    display:block;
    margin:0 auto 15px auto;
    border-radius:10px;
    border:3px solid var(--nasc-primary);
}
.nasc-person-card h4{
    color:var(--nasc-primary);
    margin:0 0 5px;
    font-size:18px;
    font-weight:700;
}
.nasc-person-card__meta{
    color:var(--nasc-text-muted);
    font-size:14px;
    line-height:1.4;
    margin-bottom:12px;
    min-height:40px;
}
@media(max-width:768px){
    .nasc-person-card{ width:220px; }
    .nasc-person-card img{ width:130px; height:170px; }
}


/* ---------- 12. PLACEMENT CARD ---------- */
.nasc-placement-card{
    width:300px;
    background:var(--nasc-white);
    margin:0 15px;
    border-radius:18px;
    overflow:hidden;
    flex-shrink:0;
    box-shadow:0 6px 18px rgba(0,0,0,.08);
    transition:.3s;
}
.nasc-placement-card:hover{
    transform:translateY(-6px);
    box-shadow:0 12px 28px rgba(0,0,0,.12);
}
.nasc-placement-card__header{
    height:70px;
    background:var(--nasc-primary);
}
.nasc-placement-card__body{
    padding:20px;
    text-align:center;
}
.nasc-placement-card__body img{
    width:150px;
    height:190px;
    object-fit:contain;
    background:var(--nasc-white);
    display:block;
    margin:-55px auto 15px auto;
    border-radius:var(--nasc-radius);
    box-shadow:0 4px 12px rgba(0,0,0,.12);
}
.nasc-placement-card__body h4{
    margin:0 0 8px;
    color:var(--nasc-primary);
    font-size:20px;
    font-weight:700;
}
.nasc-placement-card__programme{
    color:var(--nasc-text-muted);
    font-size:14px;
    line-height:1.5;
}
.nasc-placement-card__batch{
    margin-top:8px;
    color:var(--nasc-text-soft);
    font-size:13px;
    font-weight:600;
}
.nasc-placement-card__offer{
    background:linear-gradient(135deg,var(--nasc-primary),var(--nasc-primary-dark));
    color:var(--nasc-white);
    padding:16px;
    text-align:center;
}
.nasc-placement-card__role{
    font-size:16px;
    font-weight:700;
    margin-bottom:4px;
}
.nasc-placement-card__company{
    font-size:13px;
    opacity:.95;
    line-height:1.5;
}
@media(max-width:768px){
    .nasc-placement-card{ width:260px; }
    .nasc-placement-card__body img{ width:130px; height:170px; }
}


/* ---------- 13. SLIDER (Spotlights) ----------
   Markup: <div class="nasc-slider" data-nasc-slider> slides ... <div class="nasc-slider__dots"></div></div>
   nasc.js builds the dots and rotates every 5 s. */
.nasc-slider{
    position:relative;
    border-radius:var(--nasc-radius-lg);
    overflow:hidden;
    box-shadow:var(--nasc-shadow-lg);
}
.nasc-slider__slide{
    display:none;
    position:relative;
}
.nasc-slider__slide.is-active{ display:block; }
.nasc-slider__slide img{
    width:100%;
    height:280px;
    object-fit:cover;
    display:block;
}
.nasc-slider__caption{
    position:absolute;
    left:0; right:0; bottom:0;
    padding:15px 18px;
    background:linear-gradient(to top, rgba(0,0,0,.90), rgba(0,0,0,.55), transparent);
    color:var(--nasc-white);
}
.nasc-slider__caption h3{
    margin:0 0 6px;
    font-size:18px;
    font-weight:700;
    line-height:1.4;
}
.nasc-slider__caption p{
    margin:0;
    font-size:13px;
    line-height:1.5;
}
.nasc-slider__dots{
    position:absolute;
    bottom:15px;
    right:20px;
    display:flex;
    gap:8px;
}
.nasc-slider__dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:rgba(255,255,255,.5);
    cursor:pointer;
    border:0;
    padding:0;
}
.nasc-slider__dot.is-active{ background:var(--nasc-white); }
@media(max-width:768px){
    .nasc-slider__slide img{ height:300px; }
    .nasc-slider__caption{ padding:18px; }
}


/* ---------- 14. SUPPORT CARDS ---------- */
.nasc-support-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
    align-items:stretch;
}
.nasc-support-card{
    background:var(--nasc-white);
    border:1px solid var(--nasc-border);
    border-radius:var(--nasc-radius);
    padding:25px;
    text-align:center;
    box-shadow:var(--nasc-shadow-sm);
    transition:.3s;
    display:flex;
    flex-direction:column;
}
.nasc-support-card:hover{
    transform:translateY(-5px);
    box-shadow:0 8px 20px rgba(0,0,0,.10);
}
.nasc-support-card img{
    display:block;
    margin:0 auto 15px auto;
    height:90px;
    width:auto;
    max-width:100%;
    object-fit:contain;
}
.nasc-support-card h3{
    color:var(--nasc-primary);
    font-size:18px;
    margin-bottom:12px;
    font-weight:700;
}
.nasc-support-card p{
    color:var(--nasc-text-muted);
    font-size:14px;
    line-height:1.6;
    margin-bottom:15px;
}
.nasc-support-card .nasc-btn{ margin-top:auto; }
.nasc-helpline{
    display:block;
    margin-top:10px;
    font-weight:700;
    color:var(--nasc-teal);
}
@media(max-width:768px){
    .nasc-support-grid{ grid-template-columns:1fr; }
}


/* ---------- 15. IMAGE CARDS WITH CAPTION ---------- */
.nasc-image-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}
.nasc-image-card{
    position:relative;
    overflow:hidden;
    border-radius:var(--nasc-radius);
    box-shadow:0 3px 12px rgba(0,0,0,.10);
    transition:.3s;
}
.nasc-image-card:hover{
    transform:translateY(-5px);
    box-shadow:0 10px 25px rgba(0,0,0,.15);
}
.nasc-image-card img{
    width:100%;
    height:auto;
    display:block;
}
.nasc-image-card__overlay{
    position:absolute;
    left:0; right:0; bottom:0;
    background:linear-gradient(transparent, rgba(35,53,89,.92));
    color:var(--nasc-white);
    padding:25px 20px 18px;
}
.nasc-image-card__overlay h3{
    margin:0 0 6px;
    color:var(--nasc-white);
    font-size:18px;
    font-weight:700;
}
.nasc-image-card__overlay p{
    margin:0;
    font-size:14px;
    color:#f0f0f0;
}
@media(max-width:768px){
    .nasc-image-grid{ grid-template-columns:1fr; }
    .nasc-image-card img{ height:220px; }
}


/* ---------- 16. LOGO MARQUEE ITEMS (Government portals) ---------- */
.nasc-logo-item{
    flex-shrink:0;
    width:220px;
    margin:0 20px;
    text-align:center;
}
.nasc-logo-item a{ text-decoration:none; }
.nasc-logo-item img{
    max-height:60px;
    width:auto;
}
.nasc-logo-item:hover img{ transform:scale(1.08); }
@media(max-width:768px){
    .nasc-logo-item{ width:170px; }
    .nasc-logo-item img{ height:60px; max-width:140px; }
}


/* ---------- 17. NEWS LIST (core "Articles - Category" module) ----------
   Wrap the module in <div class="nasc-news-list">. Module settings:
   Date: Show, Date Format: "d M"; Introtext: Show, limit 100. */
.nasc-news-list ul{
    list-style:none;
    margin:0;
    padding:0;
}
.nasc-news-list li{
    display:grid;
    grid-template-columns:56px 1fr;
    column-gap:12px;
    align-items:start;
    background:#fff6f6;
    padding:10px;
    margin-bottom:1px;
    font-size:14px;
    color:#000000;
}
.nasc-news-list .mod-articles-category-date{
    grid-column:1;
    grid-row:1 / span 2;
    order:-1;
    width:56px;
    background:var(--nasc-news-date);
    color:var(--nasc-white);
    font-weight:700;
    text-align:center;
    line-height:1.2;
    padding:8px 4px;
    border-radius:4px;
    word-spacing:56px;           /* puts the month under the day */
}
.nasc-news-list .mod-articles-category-title{
    grid-column:2;
    font-weight:700;
    font-size:14px;
    color:#000000;
}
.nasc-news-list .mod-articles-category-introtext{
    grid-column:2;
    margin:2px 0 0;
}


/* ---------- 18. SMALL BLOCKS ---------- */
.nasc-mini-heading{
    font-size:14px;
    text-align:center;
}
.nasc-link-list{
    margin-left:10px;
    padding-left:10px;
}
.nasc-figure-link{
    text-align:center;
    margin-bottom:20px;
}
.nasc-figure-link img{
    max-width:100%;
    height:auto;
}
.nasc-figure-link h3{ margin-top:10px; }

/* JEM "eventcalendar" module, kept as it was in SP Page Builder */
.nasc-events-legacy img{ max-width:82px; }
.nasc-events-legacy a{ font-weight:bold; color:black; }


/* ---------- 19. NEWS & EVENTS ----------
   Cards, date badge, home slider, All-events grid, event page.
   Nothing is placed on top of photos (posters carry their own text).
   Photos are shown whole; a blurred copy fills any empty space. */

/* Date badge (calendar tile) */
.nasc-date-badge{
    width:58px;
    background:var(--nasc-white);
    border:1px solid #e3e7ee;
    border-radius:10px;
    box-shadow:0 3px 10px rgba(35,53,89,.10);
    text-align:center;
    overflow:hidden;
    line-height:1;
    flex-shrink:0;
}
.nasc-date-badge__month{
    display:block;
    background:var(--nasc-primary);
    color:var(--nasc-white);
    font-size:11px;
    font-weight:700;
    letter-spacing:.12em;
    padding:5px 0 4px;
    text-transform:uppercase;
}
.nasc-date-badge__day{
    display:block;
    color:var(--nasc-primary);
    font-size:24px;
    font-weight:800;
    padding:6px 0 2px;
}
.nasc-date-badge__year{
    display:block;
    color:var(--nasc-text-muted);
    font-size:10px;
    font-weight:600;
    padding-bottom:6px;
}
.nasc-date-badge--lg{ width:76px; }
.nasc-date-badge--lg .nasc-date-badge__month{ font-size:13px; padding:7px 0 6px; }
.nasc-date-badge--lg .nasc-date-badge__day{ font-size:32px; padding:8px 0 3px; }
.nasc-date-badge--lg .nasc-date-badge__year{ font-size:12px; padding-bottom:8px; }

/* Photo box: whole photo on a blurred fill of itself */
.nasc-photo{
    position:relative;
    overflow:hidden;
    background:linear-gradient(135deg,var(--nasc-primary),var(--nasc-teal));   /* shows when no photo */
}
.nasc-photo__fill{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    filter:blur(18px) brightness(.8) saturate(1.1);
    transform:scale(1.2);
}
.nasc-photo__img{
    position:relative;
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    transition:transform .5s;
}

/* Event card */
.nasc-event-card{
    position:relative;
    display:flex;
    flex-direction:column;
    background:var(--nasc-white);
    border-radius:var(--nasc-radius-lg);
    overflow:hidden;
    box-shadow:0 4px 14px rgba(0,0,0,.08);
    border:1px solid #eef0f4;
    transition:transform .3s, box-shadow .3s;
    height:100%;
}
.nasc-event-card:hover{
    transform:translateY(-5px);
    box-shadow:0 14px 30px rgba(35,53,89,.16);
}
.nasc-event-card__media{ aspect-ratio:16/9; }
.nasc-event-card:hover .nasc-photo__img{ transform:scale(1.03); }
.nasc-event-card__body{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:16px 18px 18px;
    flex:1;
}
.nasc-event-card__head{
    display:flex;
    gap:14px;
    align-items:flex-start;
}
.nasc-event-card__heading{
    display:flex;
    flex-direction:column;
    gap:6px;
    min-width:0;
}
.nasc-event-card__tags{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}
.nasc-event-card__type,
.nasc-event-card__when{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:11px;
    font-weight:700;
    letter-spacing:.02em;
    padding:3px 10px;
    border-radius:20px;
    line-height:1.5;
}
.nasc-event-card__type{
    background:rgba(253,167,28,.18);
    color:#9a5b00;
}
.nasc-event-card__when{
    background:rgba(25,135,84,.12);
    color:var(--nasc-gate);
}
.nasc-event-card__when::before{
    content:"";
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--nasc-gate);
    animation:nascPulse 1.5s infinite;
}
.nasc-event-card__title{
    margin:0;
    font-size:17px;
    line-height:1.35;
    font-weight:700;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.nasc-event-card__title a{
    color:var(--nasc-primary);
    text-decoration:none;
}
.nasc-event-card__title a::after{          /* whole card clickable */
    content:"";
    position:absolute;
    inset:0;
}
.nasc-event-card__title a:hover{ color:var(--nasc-teal); }
.nasc-event-card__summary{
    margin:0;
    color:var(--nasc-text-muted);
    font-size:14px;
    line-height:1.6;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.nasc-event-card__meta{
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-top:auto;
    padding-top:10px;
    border-top:1px solid #eef0f4;
    color:var(--nasc-text-soft);
    font-size:13px;
    font-weight:600;
}
.nasc-event-card__meta span{ display:flex; gap:7px; align-items:baseline; }
.nasc-event-card__meta i{ color:var(--nasc-accent); width:13px; text-align:center; flex-shrink:0; }

/* Home slider: 2 cards at a time (1 on phones) */
.nasc-events-module{
    display:flex;
    flex-direction:column;
}
.nasc-carousel{ position:relative; }
.nasc-carousel__track{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:calc((100% - 20px) / 2);
    gap:20px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    padding:6px 2px 14px;
    scrollbar-width:none;
}
.nasc-carousel__track::-webkit-scrollbar{ display:none; }
.nasc-carousel__track > *{ scroll-snap-align:start; }
.nasc-carousel__nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    margin-top:6px;
}
.nasc-carousel__btn{
    width:40px;
    height:40px;
    border-radius:50%;
    border:1px solid var(--nasc-border);
    background:var(--nasc-white);
    color:var(--nasc-primary);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:.3s;
}
.nasc-carousel__btn:hover{
    background:var(--nasc-primary);
    border-color:var(--nasc-primary);
    color:var(--nasc-white);
}
.nasc-carousel__dots{ display:flex; gap:8px; }
.nasc-carousel__dot{
    width:9px;
    height:9px;
    border-radius:5px;
    border:0;
    padding:0;
    background:#cfd5df;
    cursor:pointer;
    transition:width .3s, background .3s;
}
.nasc-carousel__dot.is-active{
    width:26px;
    background:var(--nasc-accent);
}
.nasc-events-footer{
    text-align:center;
    margin-top:18px;
}
.nasc-events-footer .nasc-btn i{ margin-left:8px; }
@media(max-width:767.98px){
    .nasc-carousel__track{ grid-auto-columns:88%; }
}

/* Home row: News & Events and Spotlights boxes the same height.
   The Spotlights photo grows to fill the extra space.
   Selector matches only the row whose column DIRECTLY holds the
   News & Events box - never Helix's page-level rows. */
@media(min-width:768px){
    .row:has(> [class*="col-"] > .nasc-section .nasc-events-module) > [class*="col-"]{
        display:flex;
        flex-direction:column;
    }
    .row:has(> [class*="col-"] > .nasc-section .nasc-events-module) > [class*="col-"] > .nasc-section{
        flex:1;
        display:flex;
        flex-direction:column;
    }
    .row:has(> [class*="col-"] > .nasc-section .nasc-events-module) .nasc-events-module{
        flex:1;
        justify-content:space-between;
    }
    .row:has(> [class*="col-"] > .nasc-section .nasc-events-module) .nasc-slider{
        flex:1;
        display:flex;
        min-height:280px;
    }
    .row:has(> [class*="col-"] > .nasc-section .nasc-events-module) .nasc-slider__slide.is-active{
        flex:1;
        display:flex;
    }
    .row:has(> [class*="col-"] > .nasc-section .nasc-events-module) .nasc-slider__slide img{
        height:auto;
        min-height:280px;
        flex:1;
    }
}

/* Shown when the category has no articles at all */
.nasc-events-empty{
    text-align:center;
    background:var(--nasc-white);
    border:2px dashed #d9dee7;
    border-radius:var(--nasc-radius-lg);
    padding:36px 28px;
    color:var(--nasc-text-muted);
}
.nasc-events-empty__icon{
    width:64px;
    height:64px;
    margin:0 auto 14px;
    border-radius:50%;
    background:rgba(253,167,28,.15);
    color:#c27806;
    font-size:26px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.nasc-events-empty h3{
    color:var(--nasc-primary);
    font-size:20px;
    font-weight:700;
    margin:0 0 8px;
}
.nasc-events-empty p{
    max-width:420px;
    margin:0 auto 18px;
    font-size:14px;
    line-height:1.6;
}

/* All events page: card grid */
.nasc-events-hero{
    background:linear-gradient(120deg, rgba(35,53,89,.95), rgba(10,96,125,.88));
    color:var(--nasc-white);
    border-radius:var(--nasc-radius-lg);
    padding:38px 40px;
    margin:25px 0 30px;
}
.nasc-events-hero h1{
    color:var(--nasc-white);
    margin:0 0 8px;
    font-size:34px;
    font-weight:800;
}
.nasc-events-hero p{ margin:0; color:#e6ecf5; font-size:16px; }
.nasc-event-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:26px;
}
.nasc-events-pagination{
    display:flex;
    justify-content:center;
    margin-top:30px;
}
@media(max-width:992px){ .nasc-event-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px){ .nasc-event-grid{ grid-template-columns:1fr; } }

/* Single event page: photo on top (nothing over it), then the heading */
.nasc-event{
    margin:25px 0 40px;
}
.nasc-event__hero{
    border-radius:var(--nasc-radius-lg);
    height:clamp(240px, 38vw, 480px);
    box-shadow:var(--nasc-shadow);
}
.nasc-event__header{
    display:flex;
    align-items:flex-start;
    gap:20px;
    margin-top:26px;
    padding-bottom:22px;
    border-bottom:1px solid #e9edf3;
}
.nasc-event__header .nasc-event-card__tags{ margin-bottom:8px; }
.nasc-event__header .nasc-event-card__type,
.nasc-event__header .nasc-event-card__when{ font-size:12px; padding:4px 12px; }
.nasc-event__header h1{
    margin:0;
    color:var(--nasc-primary);
    font-size:32px;
    line-height:1.25;
    font-weight:800;
}
.nasc-event__layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 320px;
    gap:30px;
    margin-top:26px;
    align-items:start;
}
.nasc-event__lead{
    font-size:18px;
    line-height:1.7;
    color:var(--nasc-primary);
    font-weight:500;
    border-left:4px solid var(--nasc-accent);
    padding-left:16px;
    margin:0 0 20px;
}
.nasc-event__content{ font-size:16px; line-height:1.8; color:#333; }
.nasc-event__content img{ max-width:100%; height:auto; border-radius:var(--nasc-radius); }
.nasc-event__aside{
    background:var(--nasc-surface-grad);
    border-top:5px solid var(--nasc-primary);
    border-radius:var(--nasc-radius);
    padding:24px;
    box-shadow:var(--nasc-shadow);
    position:sticky;
    top:100px;
}
.nasc-event__aside h3{
    margin:0 0 16px;
    color:var(--nasc-primary);
    font-size:18px;
    font-weight:700;
}
.nasc-event__facts{ list-style:none; margin:0 0 20px; padding:0; }
.nasc-event__facts li{
    display:flex;
    gap:12px;
    padding:10px 0;
    border-bottom:1px solid #e9edf3;
    font-size:14px;
    color:#333;
}
.nasc-event__facts li:last-child{ border-bottom:0; }
.nasc-event__facts i{
    width:34px;
    height:34px;
    border-radius:50%;
    background:rgba(253,167,28,.15);
    color:#c27806;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}
.nasc-event__facts strong{
    display:block;
    color:var(--nasc-text-soft);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.08em;
}
.nasc-btn--block{ display:block; text-align:center; }
.nasc-btn--block i{ margin-right:6px; }
.nasc-event__edit{ margin-top:12px; }
.nasc-btn--accent,
.nasc-btn--accent:visited{
    background:var(--nasc-accent);
    color:var(--nasc-primary) !important;
}
.nasc-btn--accent:hover{
    background:var(--nasc-primary);
    color:var(--nasc-white) !important;
}
.nasc-event__back{
    display:inline-block;
    margin-top:14px;
    font-weight:700;
    color:var(--nasc-teal);
}
.nasc-event__back i{ margin-right:6px; }
@media(max-width:900px){
    .nasc-event__layout{ grid-template-columns:1fr; }
    .nasc-event__aside{ position:static; }
    .nasc-event__header{ gap:14px; }
    .nasc-event__header h1{ font-size:24px; }
}