/* ==========================================================================
   Raiganj University - 13-cms-additions.css
   File: Content/css/rgu/13-cms-additions.css

   The designer's mockup has fixed, always-populated content. A CMS does not:
   sections can be empty, notices can be flagged "New", an admin can be signed
   in. These are the few rules the mockup never needed.

   LOAD LAST. Add it to _WebsiteLayout.cshtml immediately after 12-responsive.css:

       <link rel="stylesheet" href="@CssV("13-cms-additions.css")">

   Keep this file small. Anything that belongs to a section's normal appearance
   goes in that section's own stylesheet, not here.
   ======================================================================= */


/* --------------------------------------------------------------------------
   Ticker empty states
   .flash-track and .schemes-track scroll forever via a CSS marquee that
   assumes 04-tickers.js has duplicated their contents. When there is nothing
   to show we render a single message and no duplication happens, so the
   animation would slide that message off-screen and leave a blank bar.
   -------------------------------------------------------------------------- */
.flash-track.flash-track-empty,
.schemes-track.schemes-track-empty {
  animation: none;
  transform: none;
  opacity: 0.75;
}

.flash-track.flash-track-empty .item,
.schemes-track.schemes-track-empty .item {
  font-style: italic;
}

.flash-track.flash-track-empty i,
.schemes-track.schemes-track-empty i {
  color: var(--gold);
}


/* --------------------------------------------------------------------------
   "New" badge on recent notices (Notice.IsNew)
   -------------------------------------------------------------------------- */
.badge-new {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 2px;
  background: var(--maroon);
  color: #fff;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.6;
  vertical-align: middle;
}


/* --------------------------------------------------------------------------
   Generic empty state, for any section that can render with no rows
   -------------------------------------------------------------------------- */
.cms-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 28px 24px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--ink-soft);
  font-size: 14px;
}

.cms-empty-state i {
  color: var(--gold);
}

.cms-empty-state a {
  color: var(--maroon-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* --------------------------------------------------------------------------
   Utility bar separator
   The designer hardcoded a <span class="sep">|</span> after every link,
   including the last one. Ours are generated from ViewBag.TopMenus, so the
   trailing separator is omitted; this just keeps the spacing even.
   -------------------------------------------------------------------------- */
.utility-bar .track .sep {
  margin: 0 2px;
  opacity: 0.45;
}


/* --------------------------------------------------------------------------
   Footer visitor counter
   The design shows a fixed six-digit odometer. Ours is however many digits
   VisitorStatsActionFilter returns, plus a today figure the mockup omits.
   -------------------------------------------------------------------------- */
.footer-visitors .footer-visitors-today {
  display: block;
  margin-top: 8px;
  font-size: 11.5px;
  opacity: 0.8;
}

.footer-visitors .footer-visitors-today strong {
  color: var(--gold-soft);
  font-weight: 600;
}


/* ==========================================================================
   Additions for batch 3
   APPEND to Content/css/rgu/13-cms-additions.css
   ==========================================================================

   The designer drew both link bands with hand-placed inline SVGs. Ours are
   generated: Font Awesome icons chosen by menu name, and logo images pulled
   from the CMS. Neither of those is styled in his stylesheets, so these are
   the rules that make them sit correctly in his layouts.
   ======================================================================= */


/* --------------------------------------------------------------------------
   Quick Access tiles (.sq-item) - Font Awesome instead of inline SVG

   04-quick-links.css sizes .sq-icon svg at 22x22. An <i> is a font glyph,
   not an SVG, so it needs its own sizing or it inherits the 13px body size
   and looks lost inside the 48px circle.
   -------------------------------------------------------------------------- */
.sq-icon i {
    font-size: 21px;
    line-height: 1;
}


/* --------------------------------------------------------------------------
   Important Links cards (.important-link-card) - CMS logo images

   10-important-links.css styles the <i> only. When a record has a logo the
   card shows an <img> in that slot instead, so it needs to match the icon's
   footprint: same 40px-ish visual weight, same 15px gap above the label.

   object-fit:contain matters - the logos in the designer's folder are a mix
   of shapes (ugc_logo.png is square, shodh-ganga.gif is wide) and without it
   the wide ones stretch.
   -------------------------------------------------------------------------- */
.important-link-logo {
    max-width: 100%;
    max-height: 56px;
    width: auto;
    height: auto;
    object-fit: contain;
    margin-bottom: 15px;
    transition: 0.3s;
}

/* The card turns maroon on hover. Most of these logos are dark-on-transparent
   and vanish against it, so lift them rather than recolour. */
.important-link-card:hover .important-link-logo {
    transform: scale(1.06);
    filter: brightness(0) invert(1);
}

/* Fallback icon revealed by the img onerror handler. It sits in the DOM from
   the start with display:none so there is no second request and no flash. */
.important-link-fallback-icon {
    display: none;
}


/* --------------------------------------------------------------------------
   Both bands: keep long labels readable

   CMS menu names are longer than the designer's mock labels - "Govt. Order /
   Notification / Employment etc." rather than "RTI". Without a clamp, one
   long name stretches its row and the grid goes ragged.
   -------------------------------------------------------------------------- */
.sq-label {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    hyphens: auto;
}

.important-link-card span {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    hyphens: auto;
}


/* --------------------------------------------------------------------------
   Quick Access heading

   .section-head is used by several of the designer's sections but has no
   base rule of its own in 04-quick-links.css.
   -------------------------------------------------------------------------- */
.quick-links-section .section-head {
    text-align: center;
    margin-bottom: 6px;
}

    .quick-links-section .section-head h2 {
        font-size: clamp(24px, 3vw, 34px);
        color: var(--maroon-dark);
        margin: 0;
    }


/* --------------------------------------------------------------------------
   Notice board and events panel height

   05-notices-events.css caps both scroll areas at 260px, which suits the
   mockup's short placeholder titles. Real CMS notices carry reference numbers
   and dates and wrap to two lines, so four rows need about 400px.

   Raising the cap rather than removing it keeps the two columns predictable:
   the grid is align-items:stretch, so whichever side is taller sets the height
   for both.
   -------------------------------------------------------------------------- */
.notice-panels {
    max-height: 400px;
}

.event-mini-list {
    max-height: 400px;
}

/* Stop one very long title from dominating the panel. Three lines is the most
   any single notice gets; the full text is still in the title attribute and on
   the notice page itself. */
.notice-list a {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Subcategory tags come from the CMS, so they are longer than the mockup's
   "UG" and "Circular". Cap the width instead of letting the pill push the
   title into a narrow column. */
.notice-list .tag {
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* An events panel with one event looked broken next to a full notice board.
   Pushing "View All Events" to the bottom makes the empty space read as
   deliberate spacing rather than a rendering fault. */
.events-panel .view-all-btn {
    margin-top: auto;
}