/*
 * lanobots-comic-archive.css
 *
 * Comic Archive page — /comics/archive/
 * Built on top of the design tokens (lanobots-tokens.css) and the archive
 * card system already defined in lanobots-comics.css (.lb-archive-card,
 * .lb-filter-pill, .lb-status--live/--coming, .lb-label--*). This file only
 * adds what the standalone archive page needs on top of that: the compact
 * header, the sort control, the FREE status color, and layout tweaks for a
 * full page (rather than a section) grid.
 */

body.lb-archive-page {
  background: var(--lb-black, #050505);
  margin: 0;
}

/* ================================================================
   HEADER
   ================================================================ */
.lb-arcpage-header {
  background: var(--lb-black, #050505);
  padding: 3rem 1.5rem 2rem;
  border-bottom: 1px solid var(--lb-border, rgba(255,255,255,0.08));
}

.lb-arcpage-header__inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.lb-arcpage-header__eyebrow {
  display: inline-block;
  font-family: var(--font-ui, 'Barlow Condensed', sans-serif);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lb-purple, #7b4fd4);
  margin-bottom: 0.6rem;
}

.lb-arcpage-header__title {
  font-family: var(--font-display, 'Bowlby One SC', sans-serif);
  font-size: clamp(1.9rem, 5vw, 3.2rem);
  line-height: 1.05;
  color: var(--lb-white, #f4f2ec);
  margin: 0 0 0.6rem;
  text-transform: uppercase;
}

.lb-arcpage-header__desc {
  font-family: var(--font-body, 'Barlow', sans-serif);
  font-size: 1rem;
  color: var(--lb-muted, rgba(244,242,236,0.66));
  max-width: 560px;
  margin: 0 auto 1.75rem;
}

/* Search + sort row */
.lb-arcpage-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

#lb-arcpage-filter.lb-archive-filter {
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
}

.lb-archive-sort {
  flex: 0 0 auto;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 6px;
  color: var(--lb-white, #f4f2ec);
  font-family: var(--font-ui, 'Barlow Condensed', sans-serif);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.55rem 2rem 0.55rem 0.85rem;
  cursor: pointer;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3e%3cpath d='M2 3.5l3 3 3-3' fill='none' stroke='%23f4f2ec' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
}
.lb-archive-sort:focus { border-color: var(--lb-yellow, #ffd400); }

/* The closed control is styled fine (a near-transparent white tint reads as
   dark against the page's black background), but a native <select>'s open
   dropdown list is rendered by the browser/OS, not by that translucent
   background — it falls back to the system default (white), while the
   `color: var(--lb-white)` above still gets inherited onto the <option>s.
   White text on the browser's default white popup is invisible. Give the
   options their own solid, opaque colors so the open list is legible
   regardless of what the browser does with the select's own background. */
.lb-archive-sort option {
  background: #0e0e1a;
  color: var(--lb-white, #f4f2ec);
}

.lb-arcpage-controls .lb-archive-filter__pills {
  justify-content: center;
}

.lb-arcpage-noissues {
  text-align: center;
  color: var(--lb-muted, rgba(244,242,236,0.6));
  font-family: var(--font-body, 'Barlow', sans-serif);
  padding: 4rem 1rem;
}

/* ================================================================
   GRID
   ================================================================ */
.lb-arcpage-archive {
  padding: 3rem 1.5rem 5rem;
}

/* The grid previously had no width cap at all — .lb-arcpage-header__inner
   stops at 1200px, but this section stretched edge-to-edge, so on any
   desktop screen wider than ~1200px the 4 (or even 3, at mid widths) columns
   just kept dividing up the full viewport and the cards ballooned along with
   it. Cap it the same way the header does, and size columns off a sane
   per-card minimum instead of a fixed count, so the grid degrades gracefully
   between the cap and mobile rather than jumping between a few hard-coded
   column counts. */
.lb-arcpage-grid.lb-archive__grid {
  max-width: 1200px;
  margin: 0 auto;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

@media (max-width: 1200px) and (min-width: 900px) {
  .lb-arcpage-grid.lb-archive__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 899px) and (min-width: 620px) {
  .lb-arcpage-grid.lb-archive__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 619px) {
  .lb-arcpage-grid.lb-archive__grid {
    grid-template-columns: repeat(1, 1fr);
  }
  .lb-arcpage-header { padding: 2.25rem 1.25rem 1.5rem; }
  .lb-arcpage-archive { padding: 2rem 1rem 3.5rem; }
  .lb-arcpage-controls .lb-archive-filter { flex-direction: column; align-items: stretch; }
}

/* Card additions specific to the standalone archive */
.lb-arcpage-card__part {
  font-family: var(--font-ui, 'Barlow Condensed', sans-serif);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: rgba(244,242,236,0.55);
  margin: -0.15rem 0 0;
  text-transform: uppercase;
}

.lb-arcpage-card__link--disabled {
  color: rgba(244,242,236,0.35) !important;
  cursor: default;
  pointer-events: none;
}

/* FREE status — green, per LanoBots status convention.
   This badge (unlike the yellow "Issue N" label) sits directly on top of the
   cover photo, not a flat card background, so the translucent 15%-opacity
   fill the other status pills use reads as a near-invisible dark smudge over
   busy art. Solid fill + dark text + a drop shadow keeps it legible over any
   cover. */
.lb-status--free {
  background: #00e676;
  color: #04140b;
  border: 1px solid rgba(0,0,0,0.25);
  box-shadow: 0 1px 4px rgba(0,0,0,0.55);
  font-weight: 800;
}

/* WooCommerce ownership states — same solid-fill treatment as FREE so they
   stay legible over any cover art. */
.lb-status--owned {
  background: #ffd400;
  color: #1a1400;
  border: 1px solid rgba(0,0,0,0.25);
  box-shadow: 0 1px 4px rgba(0,0,0,0.55);
  font-weight: 800;
}
.lb-status--paid {
  background: rgba(10,10,14,0.9);
  color: #f4f2ec;
  border: 1px solid rgba(123,79,212,0.6);
  box-shadow: 0 1px 4px rgba(0,0,0,0.55);
  font-weight: 700;
}

.lb-arcpage-card__price {
  font-family: var(--font-ui, 'Barlow Condensed', sans-serif);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--lb-yellow, #ffd400);
  margin: 0.3rem 0 0.6rem;
}
.lb-arcpage-card__price .amount { color: inherit; }

.lb-arcpage-card__progress-label {
  font-family: var(--font-ui, 'Barlow Condensed', sans-serif);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: rgba(244,242,236,0.65);
  margin: -0.2rem 0 0.6rem;
}

.lb-arcpage-card__link--unlock {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--lb-yellow, #ffd400) !important;
  font-weight: 800;
}
.lb-arcpage-card__link--unlock:hover { color: #ffe040 !important; }

/* Reused badge styles (in case lanobots-comics.css markup changes shape) */
.lb-archive-card__status {
  font-family: var(--font-ui, 'Barlow Condensed', sans-serif);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.28rem 0.6rem;
  border-radius: 3px;
}

/* ================================================================
   ISSUE GROUPS — one per issue, parts laid out beneath it
   ================================================================ */
.lb-arcpage-groups {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
}
.lb-arcpage-issue[hidden] { display: none; }

.lb-arcpage-issue__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--lb-border, rgba(255,255,255,0.08));
}
.lb-arcpage-issue__info { display: flex; flex-direction: column; align-items: flex-start; gap: 0.45rem; }
.lb-arcpage-issue__title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(1.6rem, 3.5vw, 2.3rem);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  line-height: 1;
  color: var(--lb-white, #f4f2ec);
  margin: 0;
}
.lb-arcpage-issue__meta {
  font-family: var(--font-ui, 'Barlow Condensed', sans-serif);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(244,242,236,0.55);
  margin: 0;
}
.lb-arcpage-issue__meta a { color: var(--lb-purple, #7b4fd4); text-decoration: none; }
.lb-arcpage-issue__meta a:hover { text-decoration: underline; }

/* Complete Edition offer */
.lb-arcpage-edition {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.9rem 1.1rem;
  padding: 0.8rem 1rem;
  background: rgba(255,212,0,0.06);
  border: 1px solid rgba(255,212,0,0.35);
  border-radius: 6px;
}
.lb-arcpage-edition__text { display: flex; flex-direction: column; gap: 0.15rem; }
.lb-arcpage-edition__label {
  font-family: var(--font-ui, 'Barlow Condensed', sans-serif);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lb-yellow, #ffd400);
}
.lb-arcpage-edition__desc {
  font-family: var(--font-body, 'Barlow', sans-serif);
  font-size: 0.82rem;
  color: rgba(244,242,236,0.65);
}
.lb-arcpage-edition__price {
  font-family: var(--font-ui, 'Barlow Condensed', sans-serif);
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--lb-white, #f4f2ec);
}
.lb-arcpage-edition__price .amount { color: inherit; }
.lb-arcpage-edition--owned { flex-direction: column; align-items: flex-start; gap: 0.15rem; }

/* Cover is a link for readable / purchasable parts */
a.lb-archive-card__img { display: block; }

/* Purchase CTA — a solid button so "buy" reads differently from "read" */
.lb-arcpage-card__buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 0.5rem;
  padding: 0.6rem 0.9rem;
  background: var(--lb-yellow, #ffd400);
  color: #1a1400;
  border-radius: 4px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}
.lb-arcpage-card__buy:hover { background: #ffe040; transform: translateY(-1px); }
.lb-arcpage-card__buy .amount { color: inherit; }
.lb-arcpage-card__buy:focus-visible,
.lb-arc-read-link:focus-visible { outline: 2px solid var(--lb-yellow, #ffd400); outline-offset: 3px; }

.lb-arcpage-adminnote {
  max-width: 1200px;
  margin: 0 auto 2rem;
  padding: 0.7rem 1rem;
  border: 1px dashed rgba(123,79,212,0.55);
  border-radius: 6px;
  font-family: var(--font-body, 'Barlow', sans-serif);
  font-size: 0.85rem;
  color: rgba(244,242,236,0.7);
}

@media (max-width: 619px) {
  .lb-arcpage-groups { gap: 2.5rem; }
  .lb-arcpage-edition { width: 100%; }
  .lb-arcpage-edition__btn { width: 100%; justify-content: center; }
}