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

   Port of the EasyAsset (apps/web) treatment onto the legacy portals: three
   illustrated steps, a faded brand-colour trust band beneath them, and a tinted
   disc behind the hero product shot.

   THEMING. EA is a single mint brand, so its version hard-codes the greens. Here
   every colour comes from the --hiw-* variables below, set once per portal from
   that portal's --bgcolor-theme:

       IS  #fbc509  amber      MS  #01b4c8  cyan      HH  #e22d26  red

   The tints are pre-mixed rather than colour-mixed at runtime, because these
   portals still get IE-era traffic and colour-mix() would fall back to nothing.
   Keep the ramp shape consistent if a portal is ever recoloured:
       deep   ~30% lightness   the structural ink inside the illustrations
       mid    the brand hue itself
       soft   ~88% lightness   illustration fills, icon tiles
       panel  ~94% lightness   offset panels, the disc
       band   ~96% lightness   the trust band ground
   ================================================================================ */

.body-is .hiw2, .body-is .hero-decor {
  --hiw-glow-rgb: 254, 238, 184;
  --hiw-glow: #feeeb8;
  --hiw-disc: #fbf6e0;
  --hiw-deep: #6b5000;
  --hiw-mid: #fbc509;
  --hiw-grad-a: #ffe08a;
  --hiw-grad-b: #f5bb00;
  --hiw-soft: #fdf0c4;
  --hiw-panel: #fdf6e0;
  --hiw-row: #e6dcb8;
  --hiw-rule: #beb390;
  --hiw-line: #eee3c4;
  --hiw-band: #fdf8ea;
  --hiw-band-line: #f2e6c2;
  --hiw-icon: #a37d05;
  --hiw-title: #434343;
  --hiw-text: #434343;
}

.body-ms .hiw2, .body-ms .hero-decor {
  --hiw-glow-rgb: 217, 244, 247;
  --hiw-glow: #d9f4f7;
  --hiw-disc: #e9f8fa;
  --hiw-deep: #005a66;
  --hiw-mid: #01b4c8;
  --hiw-grad-a: #86e4ef;
  --hiw-grad-b: #12a8ba;
  --hiw-soft: #cdeff4;
  --hiw-panel: #e4f7fa;
  --hiw-row: #b8dde3;
  --hiw-rule: #8cb4ba;
  --hiw-line: #d3edf1;
  --hiw-band: #eefafc;
  --hiw-band-line: #cfeaef;
  --hiw-icon: #0a8496;
  --hiw-title: #434343;
  --hiw-text: #434343;
}

.body-hh .hiw2, .body-hh .hero-decor {
  --hiw-glow-rgb: 252, 234, 233;
  --hiw-glow: #fceae9;
  --hiw-disc: #fdf3f2;
  --hiw-deep: #7a1512;
  --hiw-mid: #e22d26;
  --hiw-grad-a: #f8a9a4;
  --hiw-grad-b: #d8352d;
  --hiw-soft: #fbd8d6;
  --hiw-panel: #fdeceb;
  --hiw-row: #ecc6c3;
  --hiw-rule: #cea8a7;
  --hiw-line: #f6dedc;
  --hiw-band: #fdf2f1;
  --hiw-band-line: #f5d8d6;
  --hiw-icon: #b8241e;
  --hiw-title: #434343;
  --hiw-text: #434343;
}

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

/* The band drops its full-width wash and the DISC picks that colour up instead —
   otherwise you see both: a tinted band with a slightly different tinted circle
   sitting on it. category-rfq-cro sets the wash as
   `background-color: var(--bg-color) !important`, hence the !important here; this
   file is linked after it in the CRO layout, so it wins.

   The disc does NOT reuse --bg-color, though. That is the colour the band was, and
   at band-wash scale it is far heavier than EA's: measured against white, MS reads
   1.21 and HH 1.16 where EA's disc is 1.088. Spread over a circle this size that
   stops being a tint and becomes a big block of colour.

   --hiw-disc is each portal's own hue mixed toward white until its luminance matches
   EA's disc exactly (IS 1.085, MS 1.090, HH 1.089) — so all four brands carry the
   same visual weight rather than the same nominal colour. */
.rfq-white-container.new-wash { background-color: #fff !important; }

/* The clip lives on the decor layer and not 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(var(--hiw-glow-rgb), 1) 0%,
    rgba(var(--hiw-glow-rgb), 0.72) 26%,
    rgba(var(--hiw-glow-rgb), 0.38) 45%,
    rgba(var(--hiw-glow-rgb), 0.14) 62%,
    rgba(var(--hiw-glow-rgb), 0) 80%);
}


.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. */
.gq-hero-stage > .gq-avatar-frame,
.gq-hero-stage > [class^="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 */

.hiw2 {
  position: relative;
  padding: 56px 28px 52px;
  /* 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);
}

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

.hiw2__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 0 0 34px;
}


/* Matched to .cro-logos__text ("Compare quotes from expert ... suppliers like:"),
   the section heading directly above this one. 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;
  /* --hiw-rule, not --hiw-row: each portal's is set to the same 1.85 contrast against its
     own wash, so the heading separates by equal strength on amber, cyan and red — nominal
     lightness would not, since those three hues are not equally light. */
  border-top: 1.5px solid var(--hiw-rule);
}

/* Specificity, not preference: the CRO bundle carries
   `.rfq-cro-page h2:not(.seo-html-container *) { font-size: 14px }` at (0,2,1), which
   outranks a lone .hiw2__title at (0,1,0) and was silently shrinking this heading on all
   three portals — the same markup renders correctly on EasyAsset, which has no such rule.
   .hiw2 .hiw2__head h2.hiw2__title is (0,3,1), so it wins on merit rather than on link
   order or !important. Keep the h2 in the selector if this is ever restructured. */
.hiw2 .hiw2__head h2.hiw2__title {
  margin: 0;
  font-size: 18.2px;
  font-weight: 840;
  letter-spacing: 0.01em;
  line-height: 1.4;
  color: #434343;
  white-space: nowrap;
}

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

/* No card chrome — 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 — see the EA sheet. 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 — a small mark in a
   large disc is what makes spot art read as a stock icon. */
.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(--bgcolor-theme);
  color: var(--textcolorcontrast-theme);
  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: #434343;
}

.hiw2__step-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: #66736d;
}

/* illustration parts, themed from the ramp above */
.hiw2-deep { fill: var(--hiw-deep); }
.hiw2-panel { fill: var(--hiw-panel); }
.hiw2-row { fill: var(--hiw-row); }
.hiw2-soft { fill: var(--hiw-soft); }
.hiw2-outline { fill: #fff; stroke: var(--hiw-line); }
.hiw2-tick { stroke: #fff; }
.hiw2-hanger { stroke: var(--hiw-deep); }
.hiw2-grad-a { stop-color: var(--hiw-grad-a); }
.hiw2-grad-b { stop-color: var(--hiw-grad-b); }

/* --------------------------------------------------------------- trust band */

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

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

@media screen and (max-width: 991px) {
  .hiw2 { padding: 44px 20px 44px; }
  .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: 36px 16px 40px; }
  .hiw2__head { gap: 12px; margin-bottom: 28px; }
  .hiw2__rule { flex-basis: 42px; }
  .hiw2 .hiw2__head h2.hiw2__title { white-space: normal; }
  .hiw2__step { padding: 18px 16px; gap: 14px; }
  .hiw2__art { width: 68px; height: 68px; }
  .hiw2__art svg { width: 45px; height: 45px; }
}