/* =====================================================================================================================
   pages-wholesale-network.css: /partners/wholesale-network/ only (Plan 4 design run, 2026-10-06). Linked after
   pages-g2.css and pages-g2-itad.css, which /itad/ and /buyback/ also load and family A/D own; nothing in those two
   files is edited for this page. Every rule here is scoped by a wn- class that exists on this page alone. Tokens only
   (DESIGN.md: lime / ink / paper / tint, the 8px scale, --section-y for every band).
   ===================================================================================================================== */

/* ---------- hero: portrait dock photo framed on the ink (photo plan #16, 768 wide: never drawn wider than its source)
   Below 64rem the shared stacked layout applies (4/3 crop at phone width, well under 768px). ---------- */
@media (min-width: 64rem) {
  /* Tom 10-09 (file_662): the portrait card is gone; the shared g2-hero standard format (photo right, fade) applies. */
  /* one filled lime button per view (DESIGN.md): the hero's "Join the network" is the filled one, so the header's
     pickup button takes the outline style here, as the pv-/np- pages already do */
}
/* the second hero line ("Buy, sell or both.") reads as the hook under the actions, not a second lead */
.wn-hero .hero__actions + .hero__sub { margin-top: var(--s5); font-size: var(--fs-lead); }

/* ---------- band rhythm: one --section-y between bands. The ITAD template's .iv-intro keeps an s16 tail that stacked
   on the next band's --section-y head (64 + 112 = 176px of white); here each intro band carries its head only and the
   band after it brings the gap. ---------- */
.wn-intro { padding-top: var(--section-y); padding-bottom: 0; }
.wn-ways { padding-top: var(--section-y); padding-bottom: 0; }
.wn-ways .iv-steps__h2 { margin-bottom: var(--s10); }
.wn-first { background: transparent; }
.wn-ask .answer { margin-top: var(--s4); }
.wn-cta { margin-top: var(--section-y); }

/* ---------- photo band (Move 2): the lot photo beside "What members get first call on", the bb-why__grid--photo
   recipe from the ITAD template. Square crop so the frame matches the three ticks beside it; drawn at 480px in a
   900px source. ---------- */
.wn-first__fig img { aspect-ratio: 1 / 1; object-position: 50% 62%; }
@media (min-width: 64rem) { .wn-first .bb-why__grid--photo { column-gap: var(--s16); } }

/* ---------- Quick answers (finish review C, 10-07): the shared .iv-faq 2x2 grid is drawn for ITAD's four Q&As; this
   page has three, which left the bottom-right cell blank. Three columns from 64rem; the ITAD subgrid keeps the
   answers level under questions of different lengths. ---------- */
@media (min-width: 64rem) {
  body:has(.wn-hero) .iv-faq .faq__list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s10); }
}

/* ---------- arrows and separators as layout, never typed glyphs (DESIGN.md) ---------- */
.btn__arrow { display: inline-block; width: 1em; height: 1em; vertical-align: -0.12em; flex: none; }
.textlink__arrow { display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; }
.wn-cta__contact a + a { margin-left: var(--s4); }

/* Tom 10-09 "Finish all the HERO images" (wn-hero-bg): CinematicWarehouseAislewithGradientSpace.png, left fade baked in (neutralised to ink, experiments/heroes_batch_1009.py).
   Full-bleed at 64rem+ like /buyback/ .bb-hero2, right-anchored, never scaled past its native 1672px; the ink keeps the text side
   readable; past 1672px the image's left edge is feathered into the ink. Phones get the 4:3 photo-side crop. */
@media (min-width: 64rem) {
  .hero.wn-hero .hero__photo { left: 0; right: 0; top: 0; bottom: 0; width: auto; height: 100%; min-width: 0; aspect-ratio: auto; transform: none; }
  .hero.wn-hero .hero__photo picture { display: flex; justify-content: flex-end; height: 100%; border-radius: 0; }
  .hero.wn-hero .hero__photo img { width: min(100%, 1672px); height: 100%; object-fit: cover; object-position: 100% 50%; transform: none; }
  .hero.wn-hero .hero__photo::after { border-radius: 0; background:
    linear-gradient(90deg, var(--ink) 0%, var(--ink) 38%, rgb(18 19 17 / 0.7) 50%, rgb(18 19 17 / 0.25) 60%, rgb(18 19 17 / 0) 70%),
    linear-gradient(0deg, rgb(18 19 17 / 0.3) 0%, rgb(18 19 17 / 0) 34%); }
}
@media (min-width: 104.50rem) {
  .hero.wn-hero .hero__photo img { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%); mask-image: linear-gradient(90deg, transparent 0, #000 8%); }
}