/* Only the profile row (name/description/link) goes Inter rather than the sitewide Gill Sans MT/
   Cabin -- the "Newsfeed" title itself stays the sitewide Gill Sans regular/uppercase look, same
   as every other page's h1. Scoped to this file rather than added to css/tokens.css's shared font
   stack, since nothing else on the site uses Inter. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

/* The nav has no background of its own and the sitewide h1 rule goes grey (base.css) -- neither
   works against this page's own moving iridescent background. */
body[data-page="news"] .site-nav {
  background: var(--color-bg);
  color: var(--color-text);
}

body[data-page="news"] h1 {
  color: var(--color-text);
}

.socialfeed-header {
  margin-bottom: var(--space-3);
}

.socialfeed-title__cursor {
  display: inline-block;
  margin-left: 0.25rem;
  animation: socialfeed-title-cursor-blink 1s ease-in-out infinite;
}

/* A smooth fade rather than a hard on/off blink -- closer to the eased GSAP tween this was
   ported from (reactbits.dev's TextType) than a stepped blink would be. */
@keyframes socialfeed-title-cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.socialfeed-header__profile {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-3) 0;
}

/* The "ring" is a frosted-glass border (same translucent-blur language as the post cards below)
   painted in the padding between the photo and the element's own edge, via box-sizing:border-box
   -- 110px total including that ring, per the exact diameter asked for. */
.socialfeed-header__avatar {
  width: 110px;
  height: 110px;
  padding: 6px;
  box-sizing: border-box;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.socialfeed-header__info {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  /* Without this, a flex item's default min-width:auto lets its content (the unbroken link URL
     below) force it wider than the space actually available next to the avatar, pushing the
     whole page into horizontal overflow on narrow viewports instead of wrapping. */
  min-width: 0;
}

.socialfeed-header__name {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-family: 'Inter', var(--font-heading);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--color-text);
}

/* currentColor on the badge svg (Lucide's badge-check) picks this up directly -- Instagram's own
   verified-badge blue, not this site's --color-accent. */
.socialfeed-header__badge {
  display: inline-flex;
  color: #0095F6;
}

.socialfeed-header__badge svg {
  width: 22px;
  height: 22px;
  display: block;
}

.socialfeed-header__description {
  margin: 0;
  font-family: 'Inter', var(--font-body);
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--color-text);
  overflow-wrap: break-word;
}

.socialfeed-header__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: 'Inter', var(--font-body);
  font-weight: 400;
  font-size: 0.9rem;
  color: #0095F6;
  transition: color 0.2s ease;
  /* The URL itself is one long unbroken string with no spaces for the browser's normal wrapping
     to use -- without this it's exactly what forces .socialfeed-header__info wider than its
     available space (see the min-width:0 comment there). */
  overflow-wrap: break-word;
  min-width: 0;
}

.socialfeed-header__link svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* The actual text-bearing element -- min-width:0 lets it shrink below the URL's own unbroken
   width inside the inline-flex row above instead of forcing that row (and everything above it)
   wider than the available space. */
.socialfeed-header__link span {
  min-width: 0;
  overflow-wrap: break-word;
}

.socialfeed-header__link:hover,
.socialfeed-header__link:focus-visible {
  color: var(--color-accent);
}

.socialfeed-page__socials {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-4);
  list-style: none;
  max-width: var(--max-width);
  margin: 0 auto var(--space-4);
  padding: 0 var(--space-4);
}

.socialfeed-page__socials a {
  display: inline-flex;
  width: 28px;
  height: 28px;
  color: var(--color-text);
  transition: color 0.4s ease 0.1s;
}

@media (max-width: 560px) {
  /* A single truncated line instead of the URL wrapping to two -- the row already stretches to
     the info column's full width (align-items:stretch, unchanged here), so this has a real width
     to ellipsize against. */
  .socialfeed-header__link span {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* At 28px + var(--space-4) gaps, all 7 icons plus the row's own side padding don't fit a phone
     width -- right-aligning that overflow (desktop's own justify-content: flex-end) pushed the
     overflow off the left edge instead, clipping the first icon. Smaller icons and a tighter gap
     fit comfortably with room to spare, and centering (rather than just shrinking) is what was
     actually asked for at this width. */
  .socialfeed-page__socials {
    justify-content: center;
    gap: var(--space-2);
  }

  .socialfeed-page__socials a {
    width: 22px;
    height: 22px;
  }
}

.socialfeed-page__socials a:hover,
.socialfeed-page__socials a:focus-visible {
  color: var(--color-accent);
  transition-duration: 0.2s;
  transition-delay: 0s;
}

.socialfeed-page__socials svg {
  width: 100%;
  height: 100%;
  display: block;
}

.socialfeed-empty {
  text-align: center;
  color: var(--color-text-muted);
  padding: var(--space-6) 0;
}

/* A plain wrapping flex row, deliberately not the same columns masonry as the grid below — see
   the comment on this element in socialfeed/index.html for why pinned cards need to avoid that
   layout's column-balancing. Each card gets a fixed-ish width via flex-basis so the row reads as
   evenly spaced regardless of how tall any individual pinned screenshot happens to be. */
.socialfeed-pinned {
  display: flex;
  flex-wrap: wrap;
  /* Default flex behaviour stretches every item to match the tallest one in the row — exactly
     what padded the shorter screenshots out with empty white space below them. Each card now
     sizes to its own content's height instead, same varying-height look as the masonry grid,
     just guaranteed to sit together in one row rather than column-balanced. */
  align-items: flex-start;
  gap: var(--space-4);
  max-width: var(--max-width);
  margin: 0 auto var(--space-4);
  padding: 0 var(--space-4);
}

.socialfeed-pinned .socialfeed-card {
  flex: 1 1 280px;
  /* Caps how wide a single pinned card can stretch when it has a spacious row mostly to itself
     — without this, one lone pinned post on a wide desktop would blow up to the full row width.
     Lifted below at the same breakpoint the main grid collapses to one column at, so pinned
     cards match the grid's own full-width single-column look there instead of staying stuck at
     this cap once there's only ever one per row anyway. */
  max-width: 350px;
  /* The masonry grid below uses margin-bottom for row spacing (columns has no cross-row gap of
     its own); this row already gets that from the flex container's own gap, so keeping both
     would double up the vertical spacing wherever a pinned row wraps to a second line. */
  margin-bottom: 0;
}

/* Below this, the pinned row is hidden entirely (js/socialfeed.js) and those posts join the end
   of the main grid instead, as plain regular-size cards — after going through a compact-
   thumbnail treatment here that kept rendering inconsistently on real devices, simplest is to
   just reuse the grid card style that already works everywhere rather than chase another
   cross-engine fix for a decorative highlights-strip. */
@media (max-width: 560px) {
  .socialfeed-pinned {
    display: none;
  }
}

/* Shown (js/socialfeed.js) only alongside that hidden pinned row -- a shortcut past the unpinned
   posts straight to wherever the pinned ones actually ended up at the end of the grid. */
.socialfeed-highlights-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: fit-content;
  margin: 0 auto var(--space-4);
  padding: 0.5rem 1.2rem;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  font-family: 'Inter', var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-text);
  cursor: pointer;
}

/* Same author-display-beats-UA-hidden issue already hit elsewhere on this page (the lightbox,
   the pinned row) -- this element's own display:flex above would otherwise always win. */
.socialfeed-highlights-btn[hidden] {
  display: none;
}

.socialfeed-highlights-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* CSS columns rather than CSS grid — cards vary a lot in height (a short tweet screenshot next
   to a tall Instagram grab), and columns' own reflow is exactly the masonry behaviour that needs,
   with none of a JS layout library's overhead. */
.socialfeed-grid {
  columns: 3 280px;
  column-gap: var(--space-4);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-4) var(--space-6);
}

@media (max-width: 900px) {
  .socialfeed-grid { columns: 2 220px; }
}

@media (max-width: 560px) {
  .socialfeed-grid { columns: 1; }
}

/* A white frame around the screenshot (Polaroid-style) rather than dark badges floating on top
   of it — the pin and platform/date now sit in that frame instead of overlapping the actual
   post, so neither needs its own background chip for contrast against unpredictable screenshot
   content anymore. Mostly-opaque rather than as translucent as the first pass: this needs to
   read clearly as a white frame, not a colour-tinted wash from the background showing through.
   break-inside: avoid is what stops a column-layout card from being sliced across two columns. */
.socialfeed-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  break-inside: avoid;
  margin-bottom: var(--space-4);
  padding: var(--space-2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.socialfeed-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.2);
}

/* Gated to real hover-capable pointers, same reasoning as the touch checks already used
   elsewhere on the site (js/accordion-gallery.js, js/lyrics-grid.js, etc.) — a :hover style on a
   link is exactly what makes iOS Safari treat a tap as "simulate the hover" instead of following
   the link, needing a second tap to actually navigate. Ungating this for touch was why tapping a
   post lifted the card instead of opening it. */
@media (hover: hover) {
  .socialfeed-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.2);
  }
}

.socialfeed-card img,
.socialfeed-card video {
  display: block;
  width: 100%;
  height: auto;
  /* Slightly smaller than the card's own 12px so the two radii read as concentric rather than
     the image's corners fighting the frame's. */
  border-radius: 8px;
}

.socialfeed-card__pin,
.socialfeed-card__meta {
  display: flex;
  align-items: center;
}

.socialfeed-card__pin {
  justify-content: flex-start;
  color: var(--color-text);
}

.socialfeed-card__pin svg {
  width: 14px;
  height: 14px;
  display: block;
}

.socialfeed-card__meta {
  justify-content: flex-end;
  gap: 0.35rem;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 0.75rem;
  white-space: nowrap;
}

.socialfeed-card__meta svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  display: block;
  color: var(--color-text);
}

.socialfeed-lightbox {
  position: fixed;
  inset: 0;
  /* Above the sticky nav's own z-index: 30 (base.css) — otherwise the nav bar renders on top of
     the lightbox and covers its close button, which sits near the top of the panel. */
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

/* Without this, the lightbox would never actually close: an author stylesheet's display:flex
   above always wins over the browser's own built-in [hidden]{display:none} rule regardless of
   selector specificity, since origin (author beats user-agent) is checked before specificity is
   — learned the hard way building this the first time. */
.socialfeed-lightbox[hidden] {
  display: none;
}

.socialfeed-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
}

.socialfeed-lightbox__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: min(600px, 100%);
  max-height: 100%;
  padding: var(--space-3);
  border-radius: 12px;
  background: var(--color-bg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.socialfeed-lightbox__close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  display: inline-flex;
  padding: 0.35rem;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
}

.socialfeed-lightbox__close svg {
  width: 18px;
  height: 18px;
  display: block;
}

.socialfeed-lightbox__img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 160px);
  width: auto;
  margin: 0 auto;
  border-radius: 8px;
  object-fit: contain;
}

.socialfeed-lightbox__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: 0.85rem;
}

.socialfeed-lightbox__meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-text-muted);
}

.socialfeed-lightbox__meta svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--color-text);
}

.socialfeed-lightbox__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--color-accent);
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.socialfeed-lightbox__link svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.socialfeed-lightbox__link:hover,
.socialfeed-lightbox__link:focus-visible {
  opacity: 0.7;
}