/* Facts sit on the page in both responsive placements. Banner links keep
   their separate series-hub-link on-image treatment. */
.publisher-hub-fact-link,
.publisher-hub-fact-link:visited {
  color: var(--brand);
  font-weight: 700;
  text-decoration-color: currentColor;
}
.publisher-hub-fact-link:hover,
.publisher-hub-fact-link:focus-visible {
  color: var(--text);
}
.publisher-hub-fact-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.pub-discovery { margin: 1.25rem 0; }
.pub-section-title { font-size: 1.05rem; font-weight: 700; margin: 1.4rem 0 .6rem; }
.pub-count { font-size: .8rem; opacity: .6; font-weight: 600; }
.pub-eyebrow { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--brand, #6c8cff); font-weight: 700; }
.pub-feature { display: flex; gap: 1rem; padding: 1rem; border: 1px solid var(--border, #d9deec);
  border-radius: 12px; background: hsl(var(--pub-h, 230) 70% 60% / .10); text-decoration: none; color: inherit; }
.pub-feature__cover { width: 84px; height: 124px; object-fit: cover; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.pub-feature__meta { display: flex; flex-direction: column; justify-content: center; gap: .25rem; }
.pub-feature__title { font-size: 1.1rem; font-weight: 700; }
.pub-feature__when { font-size: .85rem; opacity: .8; }
.pub-countdown { width: max-content; margin-top: .35rem; background: var(--brand, #6c8cff); color: #fff;
  font-weight: 700; font-size: .8rem; padding: .15rem .6rem; border-radius: 20px; }
.pub-month-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; opacity: .65;
  font-weight: 700; margin: 1rem 0 .45rem; }
.pub-rail { display: flex; gap: .6rem; overflow-x: auto; padding-bottom: .4rem; scroll-snap-type: x proximity; }
.pub-mini { width: 92px; flex: 0 0 auto; text-decoration: none; color: inherit; scroll-snap-align: start; }
.pub-mini__cover { position: relative; display: block; aspect-ratio: 2/3; border-radius: 5px; overflow: hidden; background: var(--surface-2, #e7eaf3); }
.pub-mini__cover img { width: 100%; height: 100%; object-fit: cover; }
.pub-mini__tag { position: absolute; left: 4px; right: 4px; bottom: 4px; background: rgba(18,22,40,.82); color: #fff;
  font-size: .62rem; text-align: center; border-radius: 3px; padding: 1px 0; }
.pub-mini__title { display: block; font-size: .72rem; margin-top: .3rem; line-height: 1.2; }
.pub-chiprail { display: flex; flex-wrap: wrap; gap: .4rem; }
.pub-serieschip { font-size: .8rem; padding: .2rem .65rem; border-radius: 20px; border: 1px solid var(--border, #d9deec); }
a.pub-serieschip { color: inherit; text-decoration: none; transition: border-color .15s ease, color .15s ease; }
a.pub-serieschip:hover { border-color: var(--brand, #6b7cff); color: var(--brand, #6b7cff); }

/* Series fan-tile grid (Task 8) */
.pub-series-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; margin-top: .6rem; }
.pub-tile { border: 1px solid var(--border, #d9deec); border-radius: 12px; padding: 1rem .7rem .7rem; text-align: center;
  text-decoration: none; color: inherit; background: hsl(var(--pub-h, 230) 70% 60% / .04);
  transition: border-color .22s, box-shadow .22s; }
.pub-tile:hover { border-color: hsl(var(--pub-h, 230) 65% 55%); box-shadow: 0 6px 18px rgba(0,0,0,.10); }
.pub-fan { display: block; position: relative; height: 104px; width: 130px; margin: 0 auto .65rem; }
.pub-fan img { position: absolute; bottom: 0; left: 50%; width: 58px; height: 86px; object-fit: cover; border-radius: 4px;
  transform-origin: bottom center; box-shadow: 0 3px 8px rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.35);
  transition: transform .26s cubic-bezier(.2,.8,.2,1); }
/* resting: covers gently stacked */
.pub-fan img:nth-child(1) { transform: translateX(-50%) rotate(-6deg); }
.pub-fan img:nth-child(2) { transform: translateX(-50%) rotate(-2deg); }
.pub-fan img:nth-child(3) { transform: translateX(-50%) rotate(2deg); }
.pub-fan img:nth-child(4) { transform: translateX(-50%) rotate(6deg); }
/* hover: fan open */
.pub-tile:hover .pub-fan img:nth-child(1) { transform: translateX(calc(-50% - 30px)) rotate(-16deg); }
.pub-tile:hover .pub-fan img:nth-child(2) { transform: translateX(calc(-50% - 10px)) rotate(-5deg); }
.pub-tile:hover .pub-fan img:nth-child(3) { transform: translateX(calc(-50% + 10px)) rotate(6deg); }
.pub-tile:hover .pub-fan img:nth-child(4) { transform: translateX(calc(-50% + 30px)) rotate(17deg); }
.pub-tile__name { display: block; font-weight: 600; font-size: .85rem; line-height: 1.25; }
.pub-tile__count { display: block; font-size: .7rem; opacity: .6; text-transform: uppercase; letter-spacing: .04em; margin-top: .2rem; }
.pub-series-toolbar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 1.4rem 0 .2rem; }
.pub-series-search { display: flex; flex: 1 1 240px; min-width: 0; gap: .6rem; }
.pub-series-search .pub-series-filter { max-width: none; background: var(--surface); color: var(--text); }
.pub-series-search button { flex: 0 0 auto; min-height: 44px; }
.pub-series-summary { margin-top: .6rem; overflow-wrap: anywhere; }
.pub-series-filter { flex: 1; min-width: 0; max-width: 320px; box-sizing: border-box; padding: .35rem .6rem; border: 1px solid var(--border, #d9deec); border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { .pub-tile, .pub-fan img { transition: none; } }

/* GH-123. The publisher banner on a phone. series.css floats the cover so
   the text wraps beside it (GH-113), but .series-hub-pills is a flex
   container -- a block formatting context that sits BESIDE the float for
   its whole height rather than flowing under it -- so Marvel's seven format
   pills wrapped into six 44px rows in a ~190px column and the banner
   measured 429px at 375x667, with the first release month at 1.12 screens.
   Clear the float and refuse to wrap: each group becomes one full-width
   scrolling rail. The 10px block padding + negative margin keeps GH-115's
   44px tap-target ::after inside the rail's scrollport (overflow-x: auto
   forces overflow-y to auto, which would otherwise clip it and add a
   vertical scrollbar); 9px + the second rail's 10px padding is the 19px
   visual gap that keeps the 44px pitch between the groups. */
@media (max-width: 640px) {
  .pub-series-toolbar { flex-direction: column; align-items: flex-start; }
  .pub-series-search { flex: none; width: 100%; }
  .pub-series-filter { max-width: none; min-height: 44px; }
  .pub-series-toolbar > a, .pub-ed-pagination > a { min-height: 44px; display: inline-flex; align-items: center; }
  .publisher-hub-banner .series-hub-pills {
    clear: both;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 10px 0;
    margin: 4px 0 -10px;
  }
  .publisher-hub-banner .series-hub-pills::-webkit-scrollbar { display: none; }
  .publisher-hub-banner .series-hub-pills + .series-hub-pills { margin-top: 9px; }
  .publisher-hub-banner .series-hub-pill { flex: 0 0 auto; white-space: nowrap; }
}

/* All-editions browser (/publisher/<slug>/editions) */
.pub-ed-controls { display: flex; flex-direction: column; gap: .5rem; margin: 1.1rem 0 .9rem; }
.pub-ed-controls__row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.pub-ed-title-filter { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; flex: 1 1 20rem; min-width: 0; }
.pub-ed-title-filter .pub-series-filter { flex: 1 1 10rem; min-height: 44px; background: var(--surface); color: var(--text); }
.pub-ed-title-filter .cc-chip { min-height: 44px; display: inline-flex; align-items: center; }
.pub-ed-sorts { display: flex; gap: .25rem; margin-left: auto; }
.pub-ed-sort { font-size: .82rem; padding: .25rem .7rem; border-radius: 20px; border: 1px solid var(--border);
  text-decoration: none; color: inherit; }
.pub-ed-sort.is-active { background: color-mix(in srgb, var(--pub-glow) 15%, transparent); border-color: var(--pub-glow); font-weight: 700; }
.cc-chip-active { background: color-mix(in srgb, var(--pub-glow) 15%, transparent); border-color: var(--pub-glow); font-weight: 700; }
.pub-ed-price-filter { display: inline-flex; align-items: center; gap: .3rem; margin-left: auto; font-size: .82rem; }
.pub-ed-price-filter label { white-space: nowrap; }
.pub-ed-price-filter input[type="number"] { width: 5.5rem; min-height: 2rem; padding: .2rem .4rem; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text); }
.pub-ed-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: 1.2rem 0; }
.pub-ed-pagination__gap { opacity: .5; padding: 0 .2rem; }
.pub-ed-noscript { list-style: none; padding: 0; display: grid; gap: .35rem; }

@media (max-width: 640px) {
  .pub-ed-price-filter { width: 100%; margin-left: 0; }
}

.pub-series-count-scope { max-width: 75ch; margin: .5rem 0 .8rem; font-size: .85rem; line-height: 1.5; color: var(--text-muted); }