/* ==========================================================================
   Student Life  —  /page/sports-facilities/ and /page/nss/
   --------------------------------------------------------------------------
   TWO PAGES, ONE STYLESHEET. They are siblings - the two rows of the Student
   Life block of the Public Self Disclosure that had nothing behind them - and
   they share everything but the middle: a narrow measure, prose and a
   pull-out note. Sports adds the pills of what is played, NSS a photograph
   grid.

   A facilities table lived here too and has gone with the one on the page;
   see the note at the top of the Sports block in data.py.
   ========================================================================== */

/* .sl used to cap the shell at 880px, which left both pages as a narrow
   strip of text down the middle of a wide screen while every other page ran
   the full 1240. The cap is on the reading line instead now - see .sl-prose -
   so tables and card grids get the width they need and the prose does not.
   The class is kept because the markup and the rules below still key off it. */
.sl-prose {
  /* About 72 characters. Longer than this and the eye loses the line coming
     back to the left margin; the cards and tables below are not text and are
     not capped. */
  max-width: 72ch;
  margin: 0 0 16px;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.75;
}

/* A second heading partway down the page, under the content above it. */
.sl-second-head { margin-top: 38px; }

/* ---- the pull-out note --------------------------------------------------
   Capped with the prose it belongs to: full-width it would be a 1240px band
   of small text. */
.sl-note {
  max-width: 72ch;
  display: flex;
  gap: 10px;
  margin: 22px 0 0;
  padding: 14px 18px;
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: rgb(var(--accent-rgb) / 7%);
  color: var(--ink);
  font-size: .92rem;
  line-height: 1.65;
}
.sl-note__label {
  flex: 0 0 auto;
  color: var(--accent-deep);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
/* ---- the committee table -------------------------------------------------
   Six columns, the document's own: Sr. No., name, designation, email,
   contact number and position on the committee. Below 700px each row becomes
   a card - a designation runs to a full line on its own, and six columns of
   that at phone width is a horizontal scroll nobody finds.
   ========================================================================== */
.sl-table-wrap {
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  overflow-x: auto;              /* a narrow laptop scrolls rather than clips */
}
.sl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}
.sl-table th,
.sl-table td {
  padding: 11px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
  line-height: 1.5;
}
.sl-table tbody tr:last-child th,
.sl-table tbody tr:last-child td { border-bottom: 0; }
.sl-table tbody tr:hover { background: rgb(var(--accent-rgb) / 4%); }

.sl-table thead th {
  /* 8%, the tint the fee and telephone tables use: --accent-deep on 10%
     falls under the 4.5:1 a heading this size needs. */
  background: rgb(var(--accent-rgb) / 8%);
  color: var(--accent-deep);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: middle;
}
.sl-table tbody th { color: var(--ink); font-weight: 700; }

/* Sr. No. and position are as narrow as their content; the three that carry
   real text share what is left. Widths rather than letting the browser
   decide, because an unconstrained table gives the longest email address a
   third of the page and squeezes the names into two lines each. */
.sl-ref { color: var(--muted); white-space: nowrap; }
.sl-pos { color: var(--muted); }

/* The widths belong to the table and only to the table. Below 700px every
   row becomes a card and the cells are stacked blocks, where a percentage
   leaves a name as one word per line - and these selectors are specific
   enough to beat the width: auto the card layout sets. */
@media (min-width: 700px) {
  .sl-ref { width: 1%; }
  .sl-pos { width: 11%; }
  .sl-table--committee tbody th { width: 17%; }
  .sl-table--committee td:nth-child(3) { width: 28%; }
  .sl-mail { width: 20%; }
  .sl-tel  { width: 1%; white-space: nowrap; }
}

/* An address is one long unbreakable word to a browser, and
   registrar@swamivivekanandauniversity.ac.in is 42 characters of it. This
   lets it wrap rather than push the column wide enough to hold it whole. */
.sl-mail a { overflow-wrap: anywhere; }

.sl-table a {
  color: var(--accent-deep);
  text-decoration: none;
  font-weight: 600;
}
.sl-table a:hover { text-decoration: underline; }
.sl-table a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* An em dash where the document gives nothing, so the cell reads as empty on
   purpose rather than looking like something failed to load. */
.sl-blank { color: var(--muted); }

/* ==========================================================================
   About  —  the text beside the photographs
   --------------------------------------------------------------------------
   Two columns from 900px up: the prose on the left, the Gallery's own
   photographs riding past on the right. The right half of this tab was empty
   at any width worth having, and the pictures were three tabs away.
   ========================================================================== */
.sl-about { display: grid; gap: 30px; align-items: start; }

@media (min-width: 900px) {
  /* minmax(0, ...) on both, or a slide wider than its column pushes the grid
     out instead of being clipped by it. */
  .sl-about { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 38px; }

  /* Capped, and pushed to the right of its column. An even split put a 4:3
     photograph 450px tall beside 290px of text, which towered over the
     paragraph it was meant to sit beside. At 420 it is about the height of
     the text, and the cap stops a wide window making it grow again. */
  .sl-about__media { max-width: 420px; margin-left: auto; }
  /* The measure is the column here, and the column is already narrower than
     72ch - the cap would only make it narrower still. */
  .sl-about .sl-prose,
  .sl-about .sl-note { max-width: none; }
}

.sl-slider { border-radius: var(--radius); background: var(--page-alt); }

/* One photograph at a time. main.css puts three carousel items across from
   1024px up, which is right for a row of course cards and wrong for this. */
.sl-slider .carousel__item { flex: 0 0 100%; }

/* The arrows sit inside this one. The shared rules put them outside the box,
   which works for a slider the width of the shell and hangs them over the
   text in a half-width column. */
.sl-slider .carousel__nav--prev { left: 10px; }
.sl-slider .carousel__nav--next { right: 10px; }
.sl-slider .carousel__track { padding-bottom: 0; }
.sl-slider .carousel__dots { margin-top: 14px; }

.sl-slide {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
}
.sl-slide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
/* On the photograph rather than under it: a caption below would change the
   slide's height with the length of an album name, and the track would jump
   as it advanced. */
.sl-slide__cap {
  position: absolute;
  right: 0; bottom: 0; left: 0;
  padding: 26px 14px 11px;
  background: linear-gradient(0deg, rgba(10, 10, 10, .78), rgba(10, 10, 10, 0));
  color: #fff;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.4;
}
.sl-slide__cap i { margin: 0 5px; font-style: normal; opacity: .75; }

/* ---- a document off the page -------------------------------------------- */
.sl-source { margin: 22px 0 0; }
/* Above the table rather than below it, so it needs the space underneath. */
.sl-source--top { margin: 0 0 20px; }
.sl-source__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border-radius: var(--radius-pill);
  background: var(--accent-deep);
  color: #fff;
  font-size: .86rem;
  font-weight: 700;
  text-decoration: none;
}
.sl-source__link:hover { background: var(--brand); color: #fff; }
.sl-source__link:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---- what is played ----------------------------------------------------- */
.sl-play {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.sl-play__group {
  padding: 18px 20px;
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-xs);
}
.sl-play__kind {
  margin: 0 0 10px;
  color: var(--accent-deep);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.sl-play__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sl-play__list li {
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: rgb(var(--accent-rgb) / 12%);
  color: var(--ink);
  font-size: .86rem;
  font-weight: 600;
}

@media (max-width: 639.98px) {
  .sl-note { flex-direction: column; gap: 4px; }
}

/* ==========================================================================
   The NSS tabs' own pieces
   --------------------------------------------------------------------------
   A tab whose documents have not arrived, and the list for when they do.
   ========================================================================== */
.sl-pending {
  margin: 0;
  padding: 18px 20px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--page-alt);
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.6;
}

/* The first thing in a panel should not carry the space that separates it
   from something above, because there is nothing above it. */
.tab-pane > .sl-prose:first-child,
.tab-pane > .sl-pending:first-child { margin-top: 0; }

@media (max-width: 699.98px) {
  .sl-table-wrap {
    background: none;
    box-shadow: none;
    overflow-x: visible;
  }
  .sl-table thead {
    /* Not display: none - that takes the header out of the accessibility tree
       as well, and a screen reader still uses it to announce cells. */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .sl-table,
  .sl-table tbody,
  .sl-table tr,
  .sl-table th,
  .sl-table td { display: block; }

  .sl-table tr {
    position: relative;
    margin-bottom: 12px;
    padding: 14px 16px;
    border-radius: var(--radius);
    background: var(--paper);
    box-shadow: var(--shadow-xs);
  }
  .sl-table tr:last-child { margin-bottom: 0; }
  .sl-table tr:hover { background: var(--paper); }

  .sl-table th,
  .sl-table td {
    width: auto;
    padding: 0;
    border-bottom: 0;
    white-space: normal;
  }
  .sl-table td { margin-top: 9px; }

  .sl-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    color: var(--muted);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  /* The item letter goes in the corner of its card rather than taking a
     labelled row - it is a position in the document, not a fact about the
     seat. */
  .sl-ref {
    position: absolute;
    top: 14px;
    right: 16px;
    margin: 0;
    font-size: .75rem;
  }
  .sl-ref::before { content: none; }
  .sl-table tbody th { font-size: 1rem; padding-right: 34px; }
}

/* ==========================================================================
   The folder cards moved out
   --------------------------------------------------------------------------
   .sl-folders and .sl-folder now live in folder-card.css, because Alumni
   needed them too and a file named for the Student Life pages is the wrong
   home for a component four pages share. Every template that used them loads
   that file as well as this one.
   ========================================================================== */

/* ==========================================================================
   One album, opened
   ========================================================================== */
.sl-album:focus { outline: none; }   /* focused by script, not by the reader */

.sl-album__back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 14px;
  padding: 7px 15px 7px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--paper);
  color: var(--accent-deep);
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
}
.sl-album__back svg { fill: currentColor; }
.sl-album__back:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
.sl-album__back:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.sl-album__title {
  margin: 0;
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 800;
}
.sl-album__meta {
  margin: 4px 0 18px;
  color: var(--muted);
  font-size: .86rem;
}
.sl-album__meta i { margin: 0 6px; font-style: normal; opacity: .6; }

.sl-shots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}
.sl-shot {
  display: block;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius);
  background: var(--page-alt);
  box-shadow: var(--shadow-xs);
  cursor: zoom-in;
  transition: transform .18s ease, box-shadow .18s ease;
}
.sl-shot:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.sl-shot:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sl-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  .sl-shot { transition: none; }
  .sl-shot:hover { transform: none; }
}

@media (max-width: 575.98px) {
  .sl-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}