/* ================================================================================
   Category page - "How it works" + hero decor + trust band.   (Task-2192)

   The CRO refresh described in "Improving the How It Works section": three illustrated
   steps, a faded brand-colour trust band directly beneath them, and a tinted disc plus
   dot field behind the hero product shot. Loaded as its own <link> after the generated
   category bundle so it can be iterated on (and pulled) without touching the shared
   min.css files.

   Every portal resolves --bgcolor-theme to the same EA mint (#83FFC1), so the
   tints below are hard-coded rather than colour-mixed; --bgcolor-theme is still
   used for the accents a future per-portal recolour would want to follow.
   ================================================================================ */

.hiw2 {
  --hiw2-mint: var(--bgcolor-theme, #83ffc1);
  --hiw2-ink: #434343;   /* the page ink, same as .cro-logos__text and legacy copy */
  --hiw2-muted: #66736d;
  --hiw2-line: #e4ece8;
}

/* ---------------------------------------------------------------- hero depth */

/* Tinted disc + dot field behind the product shot. The band itself goes white (see the
   scoped <style> in CategoryView) so the disc reads as brand colour instead of a patch on
   grey. Clipping happens on this decor layer rather than on the band, because the band
   also contains the location dropdown, which is meant to overflow it. */
.rfq-white-container.new-wash { position: relative; }
.rfq-white-container.new-wash > .rfq-white-container__inner { z-index: 1; }

.hero-decor {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* Extends BELOW the band. The band's height varies a lot between portals — HH's is about
     half EA's — so clipping at its base cut the glow off mid-strength on the short ones.
     The overhang gives the falloff room to finish; the top still clips at the band, which
     is the edge that matters (it stops the glow painting over the header). */
  bottom: -200px;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* A soft glow behind the product — no shape, no edges.

   Every bounded version of this fought the same problem: a shape has a boundary, and in a
   two-column hero that boundary has to be either inside the copy or inside the image. A
   circle cropped the image's corners; a panel fixed that but is still a hard edge that has
   to be placed exactly. A radial falloff has no boundary to place — it simply fades out, so
   it cannot crop the product or collide with the headline at any width or any image size.

   Centred on the product: x on the image column's centre (two terms, because
   rfq-white-container__inner stops being width-capped below 1360px), y on the frame's
   centre (col2's top 25 + half of the 350px frame).

   Solid to 30% of the radius, then a long fade to nothing by 70% — the long tail is what
   keeps it reading as light rather than as a circle with soft edges. .hero-decor still
   clips it to the band so it can never bleed up over the header. */
/* The decor layer clips the glow so it can never spill up over the header — but a hard clip
   at the BOTTOM cut the glow off as a straight line where the band ends. This fades the last
   quarter of the layer out, so the glow's lower falloff ends softly instead. */
.hero-decor {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 88%, transparent 100%);
}

.hero-decor__wash {
  position: absolute;
  top: 200px;
  left: min(calc(50vw + 331px), calc(79vw - 63px));
  right: auto;
  bottom: auto;
  /* Sized from the product column, not the band: 1.32x its width. Off the band it
     was a fixed 1100px, which is 0.85x EA's band but 1.75x HH's — hence a glow that
     swamped HH, reached into its copy, and had nowhere to fade. This tracks the
     image's own column at every width and portal. */
  width: calc(min(calc(42vw - 34px), 538px) * 1.7);
  height: auto;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 0;
  /* A ramp, not a plateau. The old stops held full colour out to 28% and only then faded,
     which is a disc with soft edges — it read as a circle however light the tint. Falling
     off from the centre is what makes it read as light. */
  background: radial-gradient(circle closest-side,
    rgba(220, 244, 231, 1) 0%,
    rgba(220, 244, 231, 0.72) 26%,
    rgba(220, 244, 231, 0.38) 45%,
    rgba(220, 244, 231, 0.14) 62%,
    rgba(220, 244, 231, 0) 80%);
}

/* col2 is absolutely positioned on desktop and static on mobile, so the dots hang off
   their own relatively-positioned stage rather than off col2 itself. */

.gq-hero-stage { position: relative; }

/* Only the white fill is dropped — without this the frame paints a white box over the
   disc. The frame keeps its legacy fixed height and overflow:hidden, which is what stops
   oversized hero shots spilling into the copy column. The disc and dots are siblings or
   sit behind, so they are not clipped by it. */
.gq-hero-stage > .gq-avatar-frame {
  position: relative;
  z-index: 2;
  background: transparent;
}


@media screen and (max-width: 991px) {
  /* The columns stack and col2 takes order:1, so the product moves to the TOP of the band
     and spans the full width. A bounded shape had to be hidden here — it had nothing to sit
     behind once the layout changed — but a glow has no edges to misplace, so it works.

     Re-anchored rather than reused: horizontally on the band's centre (the image is centred
     now, not in a right-hand column), vertically on the image itself, and sized off the
     viewport since the 42vw column term no longer describes anything. */
  .hero-decor__wash {
    /* col2 takes order:1, which puts the product AFTER the copy — it is the LAST thing in
       the band, not the first. So the glow is anchored from the bottom, not the top: the
       copy's height varies per category, but the image's distance from the band's base does
       not (32px of inner padding + half the image).

       The 200px is this layer's own overhang below the band, which `bottom` is measured
       from; translateY(50%) then puts the glow's CENTRE on that point rather than its edge. */
    top: auto;
    bottom: calc(200px + 162px);
    left: 50%;
    width: min(130vw, 620px);
    transform: translate(-50%, 50%);
  }
}

@media screen and (max-width: 576px) {
  /* the image drops to 234px tall here, so its centre sits lower */
  .hero-decor__wash { bottom: calc(200px + 149px); }
}

/* --------------------------------------------------------------- how it works */

/* Plain white — the only brand colour below the fold is the trust band, which is what
   the brief asks to stand out. */
.hiw2 {
  position: relative;
  /* Top and bottom are one value on purpose — the section's breathing room is symmetric,
     so they must not drift apart when either is retuned. 26px is the halved bottom; the top
     came down to match it. */
  padding: 26px 28px;
  /* the site's own theme wash — the same token painting the "Looking to buy…" block below,
     so the page carries one tint per brand rather than a new one invented per section */
  background: var(--bg-color, #e3fdee);
  /* Doubles the whitespace after the section. .category-container below carries margin-top:30px
     and adjacent margins collapse to the LARGER value, not the sum — so 60px here yields a 60px
     gap, where 30px would have yielded 30px and looked like nothing had changed. */
  /* Whitespace ABOVE the section. It has to be margin, not padding — padding would extend the
     tint upward instead of separating the band from the supplier logos. The logos block sits
     flush (its own 24px padding-bottom was the only gap), and its margin-bottom is 0, so this
     applies in full rather than collapsing away. */
  margin-top: 24px;
  margin-bottom: 60px;
}

.hiw2__inner {
  max-width: 1120px;
  margin: 0 auto;
}

/* Heading flanked by brand rules (the mock's ruled "How EasyAsset works"). */
.hiw2__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 0 0 34px;
}


/* Matched to .cro-logos__text ("Get quotes from top Australian suppliers") in
   category-rfq-cro.min.css — the section heading directly above this one. Measured on the
   rendered page rather than read off the source, because that file sets it twice at
   different breakpoints: 18.2px / 840 / #434343 / .01em / 1.4. Keep the two in step. */
/* Brand rules flanking the heading. flex-basis rather than a fixed width so a
   long brand name shortens them instead of pushing them off the container. */
.hiw2__rule {
  flex: 0 1 190px;
  height: 0;
  /* Contrast-matched to the section wash, not picked by eye: the old mint sat at 1.34
     against white and all but vanished once the section took a tint of its own. 1.85 reads
     as a hairline without becoming a divider, and the portals' rules are set to the same
     ratio so the four brands separate their headings by equal strength. */
  border-top: 1.5px solid #a3beb6;
}

.hiw2__title {
  margin: 0;
  font-size: 18.2px;
  font-weight: 840;
  letter-spacing: 0.01em;
  line-height: 1.4;
  color: var(--hiw2-ink);
  white-space: nowrap;
}

.hiw2__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 14px;
}

/* No card chrome — the illustration and copy sit straight on the section. */
.hiw2__step {
  position: relative;
  display: flex;
  gap: 16px;
  padding: 22px 20px;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.hiw2__art {
  position: relative;
  flex: 0 0 auto;
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* No container behind the mark. It was a disc when the section was white and the art
     needed a ground to sit on; on the tint that ground is already there, and a second
     shape just boxed each illustration in. The box keeps its size so the row's alignment
     and the numeral's anchor are unchanged — only the fill is gone. */
}

/* Sized to fill the circle rather than sit in the middle of it. The line sets were 52px
   in a 78px disc, which left a ring of dead space and was half of why they read as small
   icons — the reference mock's illustrations are far larger relative to their container. */
.hiw2__art svg {
  width: 72px;
  height: 72px;
  display: block;
}

.hiw2__num {
  position: absolute;
  top: -4px;
  left: -6px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--hiw2-mint);
  color: #14523f;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1;
}

.hiw2__body { min-width: 0; padding-top: 2px; }

.hiw2__step-title {
  margin: 0 0 6px;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--hiw2-ink);
}

.hiw2__step-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--hiw2-muted);
}

/* --------------------------------------------------------------- trust strip */

/* Replaces the legacy .benefit row (Save time / Compare quotes / Buy with
   confidence), which the CRO bundle already hides on desktop and renders as a
   single run-on line on mobile. */
.benefit { display: none !important; }

/* ------------------------------------------------------------------ tablet */

@media screen and (max-width: 991px) {
  .hiw2 { padding: 22px 20px; }
  .hiw2__rule { flex-basis: 90px; }

  .hiw2__steps { grid-template-columns: 1fr; gap: 30px; max-width: 470px; margin: 0 auto; }

}

/* ------------------------------------------------------------------ mobile */

@media screen and (max-width: 576px) {
  .hiw2 { padding: 20px 16px; }
  .hiw2__title { white-space: normal; }
  .hiw2__head { gap: 12px; margin-bottom: 28px; }
  .hiw2__rule { flex-basis: 42px; }
  .hiw2__step { padding: 18px 16px; gap: 14px; }
  .hiw2__art { width: 68px; height: 68px; }
  .hiw2__art svg { width: 45px; height: 45px; }
}

/* ------------------------------------------------- separator under the SEO blurb */

/* Same line as the header/page divide, so the page uses one rule colour throughout rather
   than #ddd here and #dcdcdc up top. The !important matches the bundle's own — hr.line-cro
   declares border-bottom with !important, which a plain declaration cannot outrank however
   late it loads.

   margin-top equalises the whitespace around the "Looking to buy..." block. Above it is 60px
   (the How It Works section's margin-bottom, which wins the collapse against this container's
   30px); below it was ~30px. Adjacent margins collapse to the LARGER value, so 60px here
   yields 60px rather than adding to the blurb's own 30px. */
hr.line-cro {
  border-bottom: solid 1px #dcdcdc !important;
  margin-top: 60px;
}