/**
 * iPin Modern — Grid
 * Grid views (home, archives, search): the masonry grid and its
 * CSS-columns fallback, pin cards, sort bar, homepage hero and
 * featured-pin panel, empty state. Loaded with lightbox.css from
 * inc/enqueue.php; markup in template-parts/ and index.php.
 *
 * WCAG notes:
 *   - .masonry-actionbar is aria-hidden="true" (decorative overlay)
 *     and shown on hover + :focus-within so sighted keyboard users
 *     see it when the card title link is focused
 *   - The sole keyboard-accessible link per card is .thumbtitle a;
 *     the image link (.thumb-img-wrap) is aria-hidden, tabindex="-1"
 */

/* ── Grid wrapper ── */
#masonry-wrap {
  max-width: var(--max-grid);
  margin: 28px auto 0;
  padding: 0 24px;
  position: relative;
}

/* ── Masonry container ──
   Before grid.js runs (and without JS at all) the grid renders
   as CSS multi-columns; the engine then switches it to absolutely
   positioned masonry by adding .masonry-js. Never hidden. */
#masonry { margin: 0 auto; }
#masonry:not(.masonry-js) {
  columns: var(--card-width);
  column-gap: var(--card-gap);
}
#masonry:not(.masonry-js) .thumb {
  float: none;
  width: 100%;
  break-inside: avoid;
  margin: 0 0 var(--card-gap);
}
#masonry.masonry-js {
  position: relative;
}
#masonry.masonry-js .thumb {
  position: absolute;
  float: none;
  margin: 0;
}

/* ── Infinite-scroll status + sentinel ── */
.grid-status {
  width: fit-content;
  margin: 18px auto 0;
  padding: 7px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill, 999px);
  background: var(--bg-card);
  color: var(--txt-secondary);
  font-family: var(--font-accent);
  font-size: .74rem;
}
.grid-sentinel { height: 1px; }

/* ── Individual card ── */
#masonry .thumb {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  width: var(--card-width);
  float: left;
  margin-left:  calc(var(--card-gap) / 2);
  margin-right: calc(var(--card-gap) / 2);
  margin-bottom: var(--card-gap);
  box-shadow: var(--card-shadow, var(--shadow-sm));   /* Settings → Appearance → Card shadow */
  transition: transform var(--dur) var(--ease), box-shadow var(--dur), border-color var(--dur);
  will-change: transform;
}

#masonry .thumb:hover,
#masonry .thumb:focus-within {
  transform: translateY(-5px) scale(1.015);
  box-shadow: var(--shadow-lg);
  border-color: var(--clr-accent-1);
}

/* Sticky */
#masonry .sticky {
  border-color: var(--clr-accent-4);
  box-shadow: 0 0 0 2px var(--clr-accent-4), var(--shadow-md);
}

/* ── Thumbnail image link (aria-hidden, out of the tab order) ── */
.thumb-img-wrap {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--bg-input);
}
.thumb-img-wrap img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform var(--dur-slow) var(--ease);
  object-fit: cover;
  pointer-events: none; /* image itself not interactive */
}
#masonry .thumb:hover .thumb-img-wrap img,
#masonry .thumb:focus-within .thumb-img-wrap img { transform: scale(1.05); }

/* ── Hover action bar (decorative — aria-hidden="true" in HTML)
      Shown on hover AND focus-within so sighted keyboard users
      can see it. AT users navigate via the title link.
   ── */
.masonry-actionbar {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(10,6,20,.52);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  opacity: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  transition: opacity var(--dur);
  pointer-events: none; /* decorative — not interactive */
}

#masonry .thumb:hover .masonry-actionbar,
#masonry .thumb:focus-within .masonry-actionbar { opacity: 1; }

.masonry-actionbar .btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 15px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 700;
  border: none;
  pointer-events: none; /* visual only */
}
.btn-view { background: var(--clr-fill-1); color: var(--clr-on-fill); }

/* ── Card body ── */
.thumb-body { padding: 12px 13px 9px; }

.thumbtitle {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .88rem;
  line-height: 1.35;
  color: var(--txt-primary);
  text-align: center;
  margin-bottom: 8px;
}
.thumbtitle a { color: inherit; }
.thumbtitle a:hover { color: var(--clr-accent-1); }
/* Focus ring on card title link is provided by global :focus-visible */

/* ── Meta row ── */
.masonry-meta {
  border-top: 1px solid var(--border);
  padding: 7px 0 4px;
  color: var(--txt-secondary);
  font-size: .78rem;
  line-height: 1.45;
  display: flex;
  align-items: flex-start;
  gap: 7px;
}
.masonry-meta.text-center { justify-content: center; }
.masonry-meta-avatar { flex-shrink: 0; width: 24px; height: 24px; }
.masonry-meta-avatar img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.masonry-meta-author { font-weight: 700; color: var(--txt-primary); }
.masonry-meta a { color: var(--txt-muted); font-style: italic; }
.masonry-meta a:hover { color: var(--clr-accent-1); }

/* ── AJAX / masonry loader ── */
#ajax-loader-masonry { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }

.ajax-loader {
  width: 36px; height: 36px;
  border: 3px solid var(--border);
  border-top-color: var(--clr-accent-1);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  margin: 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Infinite scroll bar ── */
#infscr-loading {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  box-shadow: var(--shadow-md);
  padding: 10px 28px;
  font-size: .85rem; font-weight: 600;
  color: var(--txt-secondary);
  z-index: 500;
  display: flex; align-items: center; gap: 10px;
}

/* ── Pagination ── */
.pager {
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 0;
  margin: 24px 0 0;
}
.pager li a, .pager li span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 20px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: .85rem;
  border: 1.5px solid var(--border);
  color: var(--txt-secondary);
  background: var(--bg-card);
  transition: background var(--dur), color var(--dur), border-color var(--dur), transform var(--dur) var(--ease);
}
.pager li a:hover {
  background: var(--grad-brand-btn);
  color: #fff;
  border-color: transparent;
  transform: scale(1.03);
}

/* ── Empty state ── */
.empty-state { text-align: center; padding: 64px 24px; }
.empty-state .empty-icon { font-size: 4rem; margin-bottom: 18px; display: block; line-height: 1; }
.empty-state h1 {
  font-size: 1.6rem;
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 12px;
}
.empty-state p { color: var(--txt-secondary); margin-bottom: 24px; }

/* ── No-image placeholder ────────────────────────────────────
   Shown when a post has no featured image or attached image.
   Uses the brand gradient so it matches the active scheme and
   integrates with the hover action bar exactly like a real image.
   ──────────────────────────────────────────────────────────── */
.thumb-no-image {
  position: relative;
  width: 100%;
  /* 4:3-ish ratio — gives cards a readable height without being too tall */
  padding-bottom: 75%;
  background: var(--grad-brand);
  overflow: hidden;
}

/* Subtle noise texture using a radial gradient pattern */
.thumb-no-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.12) 0%, transparent 55%),
    radial-gradient(circle at 80% 75%, rgba(0,0,0,.18) 0%, transparent 55%);
}

/* Large monogram letter — first character of the post title */
.thumb-no-image__initial {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 20cqw, 5.5rem);
  font-weight: 800;
  color: rgba(255, 255, 255, .22);
  line-height: 1;
  letter-spacing: -.02em;
  user-select: none;
  /* Subtle text shadow gives depth */
  text-shadow: 0 4px 24px rgba(0,0,0,.18);
}

/* Small pin icon — bottom-right corner accent */
.thumb-no-image__icon {
  position: absolute;
  bottom: 10px;
  right: 12px;
  font-size: 1.1rem;
  opacity: .55;
  line-height: 1;
  user-select: none;
}

/* The action bar (Comment / View) overlays normally on hover */
#masonry .thumb:hover .thumb-no-image .masonry-actionbar,
#masonry .thumb:focus-within .thumb-no-image .masonry-actionbar {
  opacity: 1;
}

/* ── Responsive ── */
@media (max-width: 600px) { :root { --card-width: 155px; --card-gap: 10px; } }
@media (max-width: 420px) {
  #masonry .thumb { width: calc(100vw - 48px) !important; float: none; margin-left: 0; margin-right: 0; }
}


/* ── Popular posts sort bar ──────────────────────────── */
.sort-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 14px var(--card-gap) 10px;
  position: sticky;
  top: var(--nav-height, 60px);
  z-index: 10;
  background: var(--bg-body);
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}

.sort-bar__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  font-family: var(--font-accent);
  font-size: .78rem;
  font-weight: 400;
  color: var(--txt-secondary);
  text-decoration: none;
  background: var(--bg-card);
  border: 1px solid var(--border);
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}

.sort-bar__btn:hover {
  color: var(--clr-accent-1);
  border-color: var(--clr-accent-1);
}

.sort-bar__btn.active,
.sort-bar__btn[aria-current="page"] {
  background: var(--clr-fill-1);
  color: var(--clr-on-fill);
  border-color: transparent;
}

.sort-bar__btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* =========================================================
   HOMEPAGE HERO
   Statement heading + lede above the grid; content set in
   Theme Options → Layout, falling back to site title/tagline.
   ========================================================= */
.home-hero {
  padding: clamp(30px, 5.5vw, 64px) 0 6px;
}
.home-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 6.2vw, 4.75rem);
  line-height: 1.04;
  letter-spacing: -.015em;
  color: var(--txt-primary);
  margin: 0;
  text-wrap: balance;
  max-width: 20ch;
}
.home-hero__accent {
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: var(--clr-accent-1); /* fallback when clip-text unsupported */
}
.home-hero__lede {
  font-size: clamp(1.02rem, 1.5vw, 1.28rem);
  line-height: 1.62;
  color: var(--txt-secondary);
  max-width: 54ch;
  margin: 16px 0 0;
}
.home-hero__lede a { color: var(--clr-accent-1); }

/* ── Bento panel: featured pin + board tiles ── */
.home-hero--bento {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
}
.home-hero__bento {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--card-gap);
}
.bento-feature {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 4.4;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}
.bento-feature__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur) var(--ease);
}
.bento-feature:hover .bento-feature__img,
.bento-feature:focus-visible .bento-feature__img { transform: scale(1.04); }
.bento-feature:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.bento-feature__meta {
  position: absolute;
  inset: auto 10px 10px;
  padding: 10px 14px;
  border-radius: var(--radius-md, 12px);
  background: rgba(16, 12, 28, .55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
}
.bento-feature__meta strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.25;
}
.bento-feature__meta span { font-size: .76rem; opacity: .88; }
.bento-side {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--card-gap);
}
.bento-tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  padding: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.bento-tile__label {
  font-family: var(--font-accent);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--txt-muted);
}
.bento-tile__stat {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 2.2vw, 2.1rem);
  line-height: 1;
  color: var(--txt-primary);
  font-variant-numeric: tabular-nums;
}
.bento-tile__stat small {
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 400;
  color: var(--txt-muted);
}
.bento-tile__note { margin: 0; font-size: .8rem; color: var(--txt-secondary); }
.bento-tile__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bento-chip {
  padding: 4px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill, 999px);
  font-size: .76rem;
  color: var(--txt-secondary);
  text-decoration: none;
}
.bento-chip:hover {
  border-color: var(--clr-accent-1);
  color: var(--clr-accent-1);
}
@media (max-width: 980px) {
  .home-hero--bento { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 560px) {
  .home-hero__bento { grid-template-columns: 1fr; }
  .bento-feature { aspect-ratio: 4 / 3; }
  .bento-side { grid-template-rows: none; grid-template-columns: 1fr; }
}

/* ── Video pin badge ── */
.thumb-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(16, 12, 28, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  pointer-events: none;
  z-index: 1;
  transition: transform var(--dur) var(--ease), background var(--dur);
}
.thumb-play svg { width: 20px; height: 20px; fill: currentColor; margin-left: 3px; }
#masonry .thumb:hover .thumb-play,
#masonry .thumb:focus-within .thumb-play {
  transform: scale(1.08);
  background: var(--clr-fill-1);
}
/* On video pins the play badge is the affordance: drop the hover chips
   so they never sit underneath it; the tinted overlay stays. */
#masonry .thumb--video .masonry-actionbar .btn { display: none; }

/* =========================================================
   CARD CONTAINER QUERIES
   Cards size to Theme Options → Card width (140–400px), so their
   type responds to the card itself, not the viewport.
   ========================================================= */
#masonry .thumb {
  container: pin / inline-size;
}
@container pin (max-width: 180px) {
  .thumb-body     { padding: 10px 10px 8px; }
  .thumbtitle     { font-size: .82rem; margin-bottom: 6px; }
  .masonry-meta   { font-size: .72rem; }
  .masonry-actionbar .btn { padding: 6px 10px; font-size: .72rem; }
}
@container pin (min-width: 300px) {
  .thumb-body     { padding: 14px 16px 12px; }
  .thumbtitle     { font-size: 1.02rem; }
  .masonry-meta   { font-size: .82rem; }
}

/* =========================================================
   SCROLL-DRIVEN CARD ENTRANCE
   Pure CSS on the view() timeline: each card eases up as it
   enters the viewport. Animates translate/opacity, not transform,
   so the hover lift (transform) is never overridden. Cards already
   in view at load are past the range and render at rest; browsers
   without scroll timelines and reduced-motion visitors get none.
   ========================================================= */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    #masonry .thumb {
      animation: ipin-pin-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
    @keyframes ipin-pin-in {
      from { opacity: .4; translate: 0 22px; }
      to   { opacity: 1;  translate: 0 0; }
    }
  }
}