/* =====================================================
   BAGPIPE UNDERGROUND -- "From the Underground" stream styles
   =====================================================
   Shared by index.html (newest 10) and underground.html (the full
   archive). Externalized the same way Assets/css/data-viz.css was, so
   both pages stay in sync from one file instead of two inline copies.

   Design intent, so a future edit does not accidentally undo it:
   the stream must NOT read as a rigid grid of identical article cards.
   Items come in three sizes (large / standard / compact) and the grid
   uses `grid-auto-flow: dense` so the small ones backfill the holes the
   big ones leave. That produces visual variety without chaos, because
   every item still shares the same border, radius, type scale, and the
   same thin accent rule along its top edge.

   Depends on the CSS custom properties defined in each page's inline
   <style> :root block (--navy, --gold, --cream, --border, etc.). This
   file deliberately does NOT redefine them.
===================================================== */


/* =====================================================
   THE GRID
   auto-fill + minmax gives us 3 columns on a 1160px container,
   2 on a tablet, 1 on a phone, with no media queries needed for
   the column count itself. `dense` lets a later small item slide
   up into an earlier gap.
===================================================== */
.ug-stream {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-auto-flow: dense;
  gap: 24px;
  align-items: start;
}


/* =====================================================
   THE CARD (shared base for all three sizes)
===================================================== */
.ug-item {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-top: 3px solid var(--ug-accent, var(--gold));
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.25s, box-shadow 0.25s;
}

.ug-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.10);
}

/* The browser's own stylesheet hides [hidden] elements with
   `display: none`, but our `display: flex` above is more specific and
   silently wins, so a filtered-out card would stay on screen. This one
   line is what makes the archive filter chips actually work. */
.ug-item[hidden] {
  display: none;
}

.ug-body {
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}


/* =====================================================
   THE TYPE LABEL
   Deliberately understated: no pill, no background, no emoji.
   Just small letterspaced Open Sans in the type's accent color,
   with the date sitting quietly beside it in muted text. It tells
   you what kind of thing you are looking at without announcing a
   taxonomy.
===================================================== */
.ug-meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
  font-family: 'Open Sans', sans-serif;
  font-size: 10.5px;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.ug-type {
  font-weight: 700;
  color: var(--ug-accent, var(--gold));
}

.ug-date {
  color: var(--text-muted);
  opacity: 0.75;
  letter-spacing: 0.08em;
}

/* Thin vertical divider between label and date, drawn with a
   pseudo-element so the markup stays clean. */
.ug-date::before {
  content: '';
  display: inline-block;
  width: 1px;
  height: 9px;
  margin-right: 10px;
  background: var(--border);
  vertical-align: baseline;
}


/* =====================================================
   HEADLINE + BODY COPY
===================================================== */
.ug-item h3 {
  font-family: 'Cinzel', serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--navy);
  margin-bottom: 10px;
}

.ug-item h3 a {
  color: inherit;
  text-decoration: none;
}

.ug-item h3 a:hover {
  color: var(--green-mid);
}

.ug-text {
  font-size: 14.5px;
  line-height: 1.68;
  color: var(--text-muted);
}

.ug-text p {
  margin-bottom: 12px;
}

.ug-text p:last-child {
  margin-bottom: 0;
}

.ug-text a {
  color: var(--green-mid);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ug-text a:hover {
  color: var(--gold);
}

.ug-text em {
  font-style: italic;
}


/* =====================================================
   IMAGE / MEDIA BLOCK
===================================================== */
.ug-media {
  width: 100%;
  height: 190px;
  overflow: hidden;
  background: var(--cream-dark);
}

.ug-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.4s ease;
}

.ug-item:hover .ug-media img {
  transform: scale(1.03);
}


/* =====================================================
   MEDIA VARIANT: LOGO  (image_style: logo)
   For a logo or flat mark rather than a photograph. Blowing a small
   logo up to fill a 300px band with object-fit: cover would upscale it
   into mush and crop it besides. Instead it sits at its own size,
   centered on a cream band, the same way .assoc-logo-wrap handles the
   association logos on pipe-bands.html. The hover zoom is switched off
   too: a photo can take a 3% scale, a crisp logo cannot.
===================================================== */
.ug-media.is-logo {
  height: 150px;
  /* White, not cream. A logo saved off someone's website is almost always
     a JPEG with a baked-in white background, and a white mark sitting in a
     white band is invisible while a white mark sitting in a cream band is
     an obvious rectangle. The bottom rule is what separates the band from
     the card body. If you ever use a transparent PNG here, cream would
     look better and this is the line to change. */
  background: #fff;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.ug-media.is-logo a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.ug-media.is-logo img {
  width: auto;
  height: auto;
  max-width: 240px;
  max-height: 100%;
  object-fit: contain;
}

.ug-item:hover .ug-media.is-logo img {
  transform: none;
}

.ug-item.is-large .ug-media.is-logo,
.ug-item.ug-type-photo .ug-media.is-logo {
  height: 170px;
}


/* =====================================================
   FOOTER ROW: the outbound link, source credit, read-more
   Pushed to the bottom of the card with margin-top:auto so
   cards of different text lengths still line their links up.
===================================================== */
.ug-foot {
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.ug-link {
  font-family: 'Open Sans', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--gold);
  text-decoration: none;
}

.ug-link:hover {
  color: var(--green-mid);
}

.ug-source {
  font-family: 'Open Sans', sans-serif;
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0.8;
  font-style: italic;
  letter-spacing: 0.02em;
}


/* =====================================================
   SIZE VARIANT: LARGE
   Spans two grid columns. For a substantial original piece, a
   photograph worth looking at, or anything that should stop the
   scroll. The image gets more height and the headline steps up.
===================================================== */
.ug-item.is-large {
  grid-column: span 2;
}

/* A large card with a lot of copy in it is much taller than the single
   narrow card sitting beside it, and CSS Grid lays items out in rows, so
   the rest of that row is unfillable white space. `is-tall` is added by
   dev/build_underground.py when a large post runs past TALL_PARAGRAPHS
   paragraphs: it claims two grid rows, which lets two normal cards stack
   alongside instead of one. Deliberately NOT applied to every large card,
   because a short one would then leave a hole of its own underneath. */
.ug-item.is-large.is-tall {
  grid-row: span 2;
}

.ug-item.is-large .ug-media {
  height: 300px;
}

.ug-item.is-large h3 {
  font-size: 23px;
  line-height: 1.28;
}

.ug-item.is-large .ug-text {
  font-size: 15.5px;
  max-width: 62ch;
}

.ug-item.is-large .ug-body {
  padding: 26px 30px 28px;
}


/* =====================================================
   SIZE VARIANT: COMPACT
   No image, tighter padding, cream background. This is the
   texture that makes a quick note or a small find feel like a
   natural thing to publish rather than a stub of a real article.
===================================================== */
.ug-item.is-compact {
  background: var(--cream);
}

.ug-item.is-compact .ug-body {
  padding: 20px 22px 22px;
}

.ug-item.is-compact h3 {
  font-size: 15.5px;
}

.ug-item.is-compact .ug-text {
  font-size: 14px;
}


/* =====================================================
   TYPE VARIANT: PHOTO
   When the photograph IS the post, give it more room and let
   the caption sit underneath it rather than competing with it.
===================================================== */
.ug-item.ug-type-photo .ug-media {
  height: 260px;
}

.ug-item.ug-type-photo.is-large .ug-media {
  height: 400px;
}


/* =====================================================
   TYPE VARIANT: WORTH WATCHING
   A small play triangle sits over the thumbnail so a video item
   reads as a video before you get to the label. Drawn in CSS,
   no image asset, no third-party embed. See the privacy note in
   dev/underground-guide.md: we link out rather than iframe, so
   the page makes no request to YouTube on load.
===================================================== */
.ug-media.has-play {
  position: relative;
}

.ug-media.has-play::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 0 15px 26px;
  border-color: transparent transparent transparent rgba(245,240,232,0.92);
  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.55));
  pointer-events: none;
}

.ug-media.has-play::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: rgba(13,27,42,0.55);
  border: 2px solid rgba(245,240,232,0.75);
  pointer-events: none;
}


/* =====================================================
   "SEE EVERYTHING" ROW under the homepage stream
===================================================== */
.ug-more {
  margin-top: 40px;
  text-align: center;
}

.ug-more .ug-more-note {
  display: block;
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--text-muted);
  font-style: italic;
}


/* =====================================================
   ARCHIVE PAGE: filter chips
   Progressive enhancement. Every post is in the HTML whether or
   not JavaScript runs, which matters both for accessibility and
   because search crawlers need to see the content. The chips only
   add or remove a hidden attribute on items already present.
===================================================== */
.ug-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 36px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border);
}

.ug-filter {
  font-family: 'Open Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
}

.ug-filter:hover {
  border-color: var(--gold);
  color: var(--navy);
}

.ug-filter[aria-pressed="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--cream);
}

.ug-empty {
  padding: 40px 0;
  font-style: italic;
  color: var(--text-muted);
}


/* =====================================================
   RESPONSIVE
   Below 720px there is only one column, so a two-column span
   would overflow. Drop large items back to a single column and
   shorten the tall media blocks for phone screens.
===================================================== */
@media (max-width: 719px) {
  .ug-item.is-large {
    grid-column: span 1;
  }
  /* One column means no card sits beside anything, so the two-row span
     from `is-tall` has nothing to solve and would only create a gap. */
  .ug-item.is-large.is-tall {
    grid-row: span 1;
  }
  .ug-item.is-large .ug-media {
    height: 210px;
  }
  .ug-item.is-large h3 {
    font-size: 19px;
  }
  .ug-item.ug-type-photo.is-large .ug-media {
    height: 240px;
  }
}