/* ============================================================================
   sections.css — homepage sections restored from nusrlranchi.ac.in, plus the
   full site footer. Loaded last, after responsive.css.

   ELEMENTOR PARITY — the rule this file is built to
   ---------------------------------------------------------------------------
   Everything here is authored so a page builder can reproduce it without
   custom CSS. That constrains the markup in five specific ways:

     1. One <section> == one Elementor Section. One .shell == its boxed content
        container (1180px). Nothing escapes .shell except deliberate full-bleed
        bands, which are their own Section set to "Full Width".
     2. Repeated children are STRUCTURALLY IDENTICAL — same tags, same classes,
        same order. In the builder each one is a single widget, duplicated.
        Nothing keys off :nth-child for anything a human would need to re-set.
     3. Grids are plain `repeat(N, 1fr)` or `repeat(auto-fit, minmax(X, 1fr))`.
        Both map onto Elementor's column counts. No grid-template-areas, no
        CSS multi-column, no negative margins, no :has() — a builder cannot
        reproduce those from its UI.
     4. Breakpoints are Elementor's own defaults — 1024px (tablet) and 767px
        (mobile) — so column counts set in the builder's device tabs land on
        exactly these widths. This is why the numbers here differ from
        responsive.css's 1023px: that file governs the nav, which breaks where
        the nav stops fitting; these govern content, which breaks where the
        builder says it does.
     5. Each block below names its Elementor equivalent, so whoever rebuilds
        this in WordPress knows which widget to reach for.
   ========================================================================= */


/* ── Shared section furniture ───────────────────────────────────────────────
   .section-head already exists in style.css (title left, link right). These
   only add what the new sections need.
   Elementor: Heading widget + Button widget in a 2-column inner Section.     */
.sec-band{padding:clamp(64px,7vw,104px) 0}
.sec-band-cream{background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-band-navy{background:var(--navy);color:#d6dfdb}
.sec-band-navy h2{color:#fff}
.sec-band-navy .eyebrow{color:var(--gold)}
.sec-band-navy .section-note{color:#a7b8b4}

/* Card primitive shared by Events, Follow and Know-more.
   Elementor: any of these is an Image Box / Icon Box widget inside a column. */
.card{
  display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--line);
  transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease;
}
.card:hover{border-color:var(--gold);box-shadow:0 16px 32px rgba(5,30,38,.11);transform:translateY(-3px)}
.card-body{flex:1;display:flex;flex-direction:column;padding:24px 26px 26px}
.card h3{margin:0 0 10px;color:var(--teal);font:700 19px/1.3 var(--serif);letter-spacing:-.02em}
.card p{margin:0;color:var(--muted);font-size:14px;line-height:1.7}
.card-meta{
  margin:0 0 12px;color:#b18a38;
  font:700 11px var(--sans);letter-spacing:.12em;text-transform:uppercase;
}
.card-link{
  margin-top:auto;padding-top:18px;color:var(--teal);
  font:700 11px var(--sans);letter-spacing:.1em;text-transform:uppercase;
}
.card-link span{font-size:15px;margin-left:7px}


/* ==========================================================================
   1. VISIT NUSRL  —  the strip directly under the hero
   Two promo cards and a live notices list.
   Elementor: Section, 3 columns (1fr 1fr 1.15fr). Columns 1-2 are Image Box
   widgets; column 3 is a Posts widget (or an Icon List) on a tinted column.
   ======================================================================== */
/* Bottom padding is 0 on purpose: the section that follows carries its own
   116px top padding, and stacking both left a ~150px hole under the strip. */
.visit{padding:clamp(44px,5vw,64px) 0 0}
.visit-grid{display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:26px;align-items:stretch}

.visit-promo{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:236px;padding:26px;overflow:hidden;
  background:var(--teal);color:#fff;isolation:isolate;
}
/* The photo is a background layer so the card keeps a fixed aspect and the
   text never reflows around an image of unknown height.
   Elementor: column background image + overlay, or Image Box with an overlay. */
.visit-promo:before{
  content:'';position:absolute;inset:0;z-index:-2;
  background:center/cover no-repeat;transform:scale(1);transition:transform .5s ease;
}
.visit-promo:after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(4,29,37,.15),rgba(4,29,37,.86));
}
.visit-promo:hover:before{transform:scale(1.05)}
.visit-campus:before{background-image:url('../images/about-1.webp')}
.visit-life:before{background-image:url('../images/gallery-4.webp')}
.visit-promo h3{margin:0 0 6px;font:700 22px/1.2 var(--serif);letter-spacing:-.025em;color:#fff}
.visit-promo p{margin:0 0 16px;color:#dbe5e1;font-size:13px;line-height:1.6}
.visit-promo .text-link{color:#fff;border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:4px;align-self:flex-start}

.visit-news{display:flex;flex-direction:column;padding:26px 28px;background:var(--cream);border:1px solid var(--line)}
.visit-news-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:6px}
.visit-news-head h3{margin:0;color:var(--teal);font:700 17px var(--serif);letter-spacing:-.02em}
.visit-news-head .badge{
  color:#b3402c;font:700 10px var(--sans);letter-spacing:.12em;text-transform:uppercase;
}
/* Capped list with its own scroll: the source list is long and unbounded, and
   an unbounded list here would push the whole page down.
   Elementor: Posts widget with "Max height" + overflow on the column.        */
.visit-news-list{
  flex:1;max-height:238px;overflow-y:auto;overscroll-behavior:contain;
  margin:0;padding:0;list-style:none;
}
.visit-news-list li{border-top:1px solid var(--line)}
.visit-news-list li:first-child{border-top:0}
.visit-news-list a{
  display:flex;align-items:flex-start;gap:10px;min-height:44px;padding:11px 0;
  color:var(--ink);font-size:13px;line-height:1.55;
}
.visit-news-list a:hover{color:var(--teal)}
.visit-news-list b{flex:0 0 auto;color:var(--gold);font-size:15px;line-height:1.4}


/* ==========================================================================
   2. EXPLORE THE NUSRL  —  full-bleed navy band, six destination tiles
   Elementor: Full-width Section (navy bg), Heading + Text, then an inner
   Section of 6 columns, each an Icon Box widget.
   ======================================================================== */
.explore-intro{max-width:64ch;margin:0 0 42px;color:#b9cac6;font-size:15px;line-height:1.75}
.explore-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14)}
.explore-tile{
  display:flex;flex-direction:column;gap:12px;
  min-height:168px;padding:26px 24px;
  background:var(--navy);color:#d6dfdb;
  transition:background .25s ease;
}
.explore-tile:hover{background:#0f3242}
.explore-tile .lucide{width:26px;height:26px;color:var(--gold);stroke-width:1.5}
.explore-tile h3{margin:0;color:#fff;font:700 17px/1.25 var(--serif);letter-spacing:-.02em}
.explore-tile p{margin:0;color:#9fb5b1;font-size:13px;line-height:1.6}
.explore-tile .go{margin-top:auto;color:var(--gold);font:700 11px var(--sans);letter-spacing:.1em;text-transform:uppercase}


/* ==========================================================================
   3. LATEST EVENTS
   Elementor: Section, 3 columns, each an Image Box widget (or one Posts
   widget set to 3 columns, which is the closer match).
   ======================================================================== */
.events-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.event-date{
  display:flex;align-items:baseline;gap:8px;margin:0 0 12px;
  color:#b18a38;font:700 11px var(--sans);letter-spacing:.12em;text-transform:uppercase;
}
.event-photo{height:180px;width:100%;object-fit:cover;background:var(--cream)}


/* ==========================================================================
   4. MOU's  —  partner logo carousel
   A CSS scroll-snap rail rather than a carousel library: it is keyboard and
   touch native, needs no JavaScript to be usable, and degrades to a plain
   swipe row if the arrow script never runs.
   Elementor: Image Carousel widget (slides-to-show 5 / 3 / 2).
   ======================================================================== */
.mou-rail-wrap{position:relative}
.mou-rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 4*18px)/5);
  gap:18px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  overscroll-behavior-x:contain;
  padding:4px;margin:0 -4px;
  scrollbar-width:none;
}
.mou-rail::-webkit-scrollbar{display:none}
.mou-item{
  scroll-snap-align:start;
  display:flex;align-items:center;justify-content:center;
  height:132px;padding:8px;
  background:var(--paper);border:1px solid var(--line);
  transition:border-color .25s ease,box-shadow .25s ease;
}
.mou-item:hover{border-color:var(--gold);box-shadow:0 12px 26px rgba(5,30,38,.10)}
/* Logos arrive at wildly different aspect ratios; a fixed box with `contain`
   is what makes twenty unrelated marks sit in one row without any of them
   dominating. The padding is deliberately small — every source file is a
   300x154 plate with generous white space already baked in, so box padding on
   top of that shrinks the actual mark to about a third of the tile. */
.mou-item img{width:100%;height:100%;object-fit:contain}

.mou-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--line);background:var(--paper);color:var(--teal);cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease}
.mou-nav:hover{background:var(--teal);border-color:var(--teal);color:#fff}
.mou-nav[disabled]{opacity:.35;cursor:default}
.mou-nav[disabled]:hover{background:var(--paper);color:var(--teal);border-color:var(--line)}
.mou-prev{left:-20px}
.mou-next{right:-20px}
.mou-nav svg{width:18px;height:18px}


/* ==========================================================================
   5. FOLLOW NUSRL  —  replaces the live social embeds
   The source page embeds Facebook, Instagram and LinkedIn widgets. Those need
   third-party scripts, do not render without a network, cannot be made
   responsive (fixed-width iframes) and carry a consent obligation. Three
   static cards carry the same information and load instantly.
   Elementor: Section, 3 columns, each an Icon Box + Button.
   ======================================================================== */
.follow-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.follow-card{align-items:flex-start;padding:28px 26px 26px}
.follow-card img{width:44px;height:44px;margin-bottom:18px;object-fit:contain}
.follow-card h3{margin:0 0 4px;font-size:18px}
.follow-handle{margin:0 0 16px;color:var(--muted);font:600 13px var(--sans);letter-spacing:.01em}
.follow-stats{display:flex;flex-wrap:wrap;gap:6px 20px;margin:0 0 20px;padding:0;list-style:none}
.follow-stats div{display:flex;flex-direction:column}
.follow-stats strong{color:var(--teal);font:700 20px/1.1 var(--serif);letter-spacing:-.02em}
.follow-stats span{color:var(--muted);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.follow-card .button{align-self:flex-start;margin-top:auto}


/* ==========================================================================
   6. WANT TO KNOW MORE  —  two resource cards
   Mirrors the block already present on the inner pages.
   Elementor: Section, 2 columns, each an Icon Box + Button.
   ======================================================================== */
.knowmore-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.knowmore-card{flex-direction:row;align-items:center;justify-content:space-between;gap:24px;padding:28px 30px}
.knowmore-card .kb{display:flex;align-items:flex-start;gap:18px;min-width:0}
.knowmore-card .lucide{width:34px;height:34px;flex:0 0 auto;color:var(--gold);stroke-width:1.4}
.knowmore-card h3{margin:0 0 4px;font-size:19px}
.knowmore-card p{margin:0;font-size:13px}
.knowmore-card .button{flex:0 0 auto}


/* ==========================================================================
   7. SITE FOOTER  —  rebuilt
   Four stacked bands, each its own Elementor Section inside a Footer template:
     a) identity   — crest, wordmark, postal address, registrar email, socials
     b) columns    — About / Useful Links / Government
     c) meta       — the flat run of policy links
     d) partners   — statutory body logos
     e) bottom     — copyright
   ======================================================================== */
.site-footer{background:#0a1f29;color:#c3d3ce}

/* a) Identity — centred, because it is the university's formal address block
      and centring is how an institution presents its own name. */
.footer-identity{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:clamp(48px,6vw,72px) 0 clamp(30px,4vw,42px);
}
.footer-identity img.crest{width:66px;margin-bottom:18px;height:auto}
.footer-identity .fname{margin:0;color:#fff;font:700 26px/1.2 var(--serif);letter-spacing:.01em}
.footer-identity .flong{margin:6px 0 0;color:var(--gold);font:600 13px/1.5 var(--sans);letter-spacing:.02em}
.footer-address{margin:22px 0 0;max-width:56ch;color:#a7b8b4;font-size:13px;line-height:1.75}
.footer-mail{
  display:inline-flex;align-items:center;gap:9px;min-height:44px;margin-top:2px;
  color:#dbe5e1;font-size:13px;
}
.footer-mail:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.footer-mail svg{width:16px;height:16px;flex:0 0 auto;color:var(--gold)}

.footer-social{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px;margin-top:26px}
.footer-social .label{color:var(--gold);font:700 11px var(--sans);letter-spacing:.12em;text-transform:uppercase}
/* The brand marks stay in full colour — they are third-party identities and
   are recognised by their colour. 44px keeps them thumb-sized. */
.footer-social a{display:flex;align-items:center;justify-content:center;width:44px;height:44px;transition:transform .2s ease}
.footer-social a:hover{transform:translateY(-3px)}
.footer-social img{width:30px;height:30px;object-fit:contain}

/* b) Link columns */
.footer-cols{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 40px;
  padding:clamp(34px,4vw,48px) 0;border-top:1px solid rgba(255,255,255,.13);
}
.footer-cols h4{margin:0 0 14px;color:var(--gold);font:700 12px var(--sans);letter-spacing:.13em;text-transform:uppercase}
.footer-cols ul{margin:0;padding:0;list-style:none}
.footer-cols a{display:flex;align-items:center;min-height:34px;color:#c3d3ce;font-size:13px;line-height:1.5;overflow-wrap:anywhere}
.footer-cols a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}

/* c) Policy / meta links — a flat run, deliberately lower contrast than the
      columns above so it reads as fine print rather than as navigation. */
.footer-meta{
  display:flex;flex-wrap:wrap;gap:2px 26px;
  padding:22px 0;border-top:1px solid rgba(255,255,255,.13);
}
.footer-meta a{display:flex;align-items:center;min-height:34px;color:#9fb5b1;font-size:12px}
.footer-meta a:hover{color:#fff}

/* d) Statutory bodies. White plates because every one of these marks is drawn
      for light backgrounds and several are unreadable on navy. */
.footer-partners{padding:26px 0 30px;border-top:1px solid rgba(255,255,255,.13)}
.footer-partners p{margin:0 0 16px;color:#7f9490;font:700 10px var(--sans);letter-spacing:.14em;text-transform:uppercase}
.footer-partners-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.footer-partners-row span{display:flex;align-items:center;justify-content:center;height:74px;padding:12px;background:#fff}
.footer-partners-row img{max-width:100%;max-height:48px;width:auto;object-fit:contain}

.footer-bottom{min-height:66px;border-top:1px solid rgba(255,255,255,.13);color:#8fa29e;font-size:11px;letter-spacing:.04em}


/* ==========================================================================
   8. RESPONSIVE — on Elementor's own breakpoints
   ======================================================================== */

/* Tablet — Elementor's 1024 device tab */
@media (max-width:1024px){
  .visit-grid{grid-template-columns:repeat(2,1fr)}
  /* The notices list is the reason people come to a university homepage, so it
     spans the full row here rather than being squeezed into a third column. */
  .visit-news{grid-column:1 / -1}
  .visit-news-list{max-height:none}

  .explore-grid{grid-template-columns:repeat(2,1fr)}
  .events-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .follow-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mou-rail{grid-auto-columns:calc((100% - 2*18px)/3)}
  /* The arrows are a mouse affordance. At and below the touch tier they sat
     on top of the first and last logo, and the rail is a native swipe here
     anyway, so they go rather than overlap the content they point at. */
  .mou-nav{display:none}

  .footer-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-partners-row{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Mobile — Elementor's 767 device tab */
@media (max-width:767px){
  .sec-band{padding:56px 0}
  .visit{padding:36px 0 0}
  .visit-grid{grid-template-columns:1fr;gap:18px}
  .visit-promo{min-height:200px;padding:22px}

  .explore-grid{grid-template-columns:1fr}
  .explore-tile{min-height:0;padding:22px}

  .events-grid,.follow-grid,.knowmore-grid{grid-template-columns:1fr;gap:18px}
  .event-photo{height:200px}

  /* Two-up on a phone keeps each logo legible; one-up would blow a 20-item
     rail out to twenty full-width swipes. The arrows are dropped because the
     rail is a native swipe here and floating arrows would cover the logos. */
  .mou-rail{grid-auto-columns:calc((100% - 14px)/2);gap:14px}
  .mou-item{height:104px;padding:6px}

  .knowmore-card{flex-direction:column;align-items:flex-start;gap:18px}
  .knowmore-card .button{align-self:stretch;justify-content:space-between}

  .footer-identity{padding:44px 0 28px}
  .footer-identity img.crest{width:58px}
  .footer-identity .fname{font-size:22px}
  .footer-social{gap:10px;margin-top:20px}
  .footer-social .label{flex:1 0 100%;text-align:center;margin-bottom:2px}

  .footer-cols{grid-template-columns:1fr;gap:26px}
  .footer-cols a{min-height:40px;border-bottom:1px solid rgba(255,255,255,.07)}
  .footer-cols li:last-child a{border-bottom:0}

  .footer-meta{gap:0 22px}
  .footer-partners-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Very narrow phones */
@media (max-width:339px){
  .mou-rail{grid-auto-columns:100%}
  .footer-partners-row{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  .mou-rail{scroll-behavior:auto}
  .card:hover,.footer-social a:hover,.visit-promo:hover:before{transform:none}
}