/* ============================================================================
   Worklane — Home page sections (custom blocks: freelance/hero, stats-bar,
   how-it-works, category-grid, expertise-tags, showcase-*, trust-benefits,
   cta-band). Consumes tokens.css + components.css. No hardcoded hex.
   ========================================================================== */

.home-wrap { width: min(100% - 2.5rem, var(--container-max)); margin-inline: auto; }
.home-section { padding-block: var(--spacing-80); }
.home-section--alt { background: var(--color-neutral-bg); border-block: 1px solid var(--color-neutral); }

.home-head { max-width: 42rem; margin-bottom: var(--spacing-60); }
.home-head--center { margin-inline: auto; text-align: center; }
.home-eyebrow { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-accent-1); margin: 0 0 var(--spacing-30); }
.home-title { font-size: var(--font-size-lg); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); margin: 0 0 var(--spacing-30); text-wrap: balance; }
.home-sub { font-size: var(--font-size-md); color: var(--color-contrast-muted); line-height: var(--lh-relaxed); margin: 0; }

/* ---------------- HERO (freelance/hero) ---------------- */
.home-hero { position: relative; overflow: hidden; background: var(--color-base); }

/*
 * Decorative SVG shapes: motion.css provides position:absolute + opacity handling.
 * display is set to block here so the container exists in layout; shapes start
 * with opacity:0 (motion.css base rule) and become visible only when
 * [data-motion="lively"] or [data-motion="subtle"] is active.
 */
/* .home-hero__deco { display: none; } — removed: motion layer now active */
.home-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(110% 75% at 82% -15%, color-mix(in srgb, var(--color-accent-1) 16%, transparent), transparent 58%),
    radial-gradient(80% 60% at 0% 110%, color-mix(in srgb, var(--color-accent-1) 7%, transparent), transparent 55%);
}
.home-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--color-contrast) 8%, transparent) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(120% 90% at 75% 0%, #000, transparent 60%);
          mask-image: radial-gradient(120% 90% at 75% 0%, #000, transparent 60%);
}
.home-hero__in { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--spacing-80); align-items: center; padding-block: clamp(3rem, 7vw, 6rem); }
.home-hero__kicker { display: inline-flex; align-items: center; gap: var(--spacing-30); height: 2rem; padding: 0 var(--spacing-30) 0 var(--spacing-20); border: 1px solid var(--color-accent-border); background: var(--color-accent-weak); border-radius: var(--radius-full); color: var(--color-accent-1); font-size: var(--font-size-sm); font-weight: var(--fw-medium); margin-bottom: var(--spacing-50); }
.home-hero__kicker .pill { display: inline-grid; place-content: center; height: 1.4rem; padding: 0 var(--spacing-20); background: var(--color-accent-1); color: var(--color-accent-on); border-radius: var(--radius-full); font-size: 0.66rem; font-weight: var(--fw-bold); letter-spacing: var(--tracking-wide); }
.home-hero__title { font-size: var(--font-size-display); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); line-height: 1.03; margin: 0 0 var(--spacing-50); text-wrap: balance; }
.home-hero__title em { font-style: normal; color: var(--color-accent-1); }
.home-hero__lede { font-size: var(--font-size-md); color: var(--color-contrast-muted); line-height: var(--lh-relaxed); margin: 0 0 var(--spacing-60); max-width: 38ch; }

/* search bar */
.home-search { display: flex; gap: var(--spacing-20); padding: var(--spacing-20); background: var(--color-base-elevated); border: 1px solid var(--color-neutral-strong); border-radius: calc(var(--radius-md) * var(--radius-scale)); box-shadow: var(--shadow-md); max-width: 38rem; }
.home-search__field { position: relative; flex: 1 1 auto; display: flex; align-items: center; }
.home-search__field svg { position: absolute; left: var(--spacing-40); top: 50%; transform: translateY(-50%); color: var(--color-contrast-subtle); }
.home-search .wl-input { border: 0; background: transparent; padding-left: 2.85rem; box-shadow: none; }
.home-search .wl-input:focus-visible { box-shadow: none; }
.home-search__cat { flex: 0 0 auto; }
.home-search .wl-select { border: 0; background-color: transparent; min-width: 11rem; border-left: 1px solid var(--color-neutral); border-radius: 0; }
.home-search .wl-btn { flex: 0 0 auto; }
.home-hero__trust { display: flex; align-items: center; gap: var(--spacing-40); margin-top: var(--spacing-50); color: var(--color-contrast-subtle); font-size: var(--font-size-sm); flex-wrap: wrap; }
.home-hero__trust span { display: inline-flex; align-items: center; gap: var(--spacing-20); }

@media (max-width: 980px) {
  .home-search { flex-wrap: wrap; }
  .home-search__field { flex-basis: 100%; }
  .home-search .wl-select { border-left: 0; border-top: 1px solid var(--color-neutral); }
}

/* escrow-flow visual (right column) */
.escrow-flow { position: relative; display: flex; flex-direction: column; gap: var(--spacing-40); padding: var(--spacing-50); }
.escrow-flow__card { background: var(--color-base-elevated); border: 1px solid var(--color-neutral); border-radius: calc(var(--radius-md) * var(--radius-scale)); box-shadow: var(--shadow-md); padding: var(--spacing-50); }
.escrow-flow__card--mid { display: flex; align-items: center; gap: var(--spacing-40); border-color: var(--color-accent-border); background: linear-gradient(180deg, var(--color-accent-weak), var(--color-base-elevated)); }
.escrow-flow__lock { width: 2.75rem; height: 2.75rem; flex: none; display: grid; place-content: center; background: var(--color-accent-1); color: var(--color-accent-on); border-radius: var(--radius-full); }
.escrow-flow__row { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-30); }
.escrow-flow__label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-contrast-subtle); }
.escrow-flow__title { font-size: var(--font-size-base); font-weight: var(--fw-semibold); color: var(--color-contrast); margin: var(--spacing-20) 0 0; }
.escrow-flow__connector { width: 2px; height: var(--spacing-30); background: var(--color-neutral-strong); margin-inline: auto; }
.escrow-flow__check { color: var(--color-success-fg); }

/* centered hero variant */
.home-hero[data-hero="centered"] .home-hero__in { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: var(--spacing-60); }
.home-hero[data-hero="centered"] .home-hero__lede { max-width: 54ch; }
.home-hero[data-hero="centered"] .home-search { margin-inline: auto; }
.home-hero[data-hero="centered"] .home-hero__trust { justify-content: center; }
.home-hero[data-hero="centered"] .escrow-flow { display: none; }

@media (max-width: 900px) {
  .home-hero__in { grid-template-columns: 1fr; gap: var(--spacing-60); }
  .escrow-flow { display: none; }
}

/* ---------------- STATS (freelance/stats-bar) ---------------- */
.home-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-50); padding-block: var(--spacing-60); border-block: 1px solid var(--color-neutral); }
.home-stat__num { font-size: var(--font-size-xl); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); color: var(--color-contrast); line-height: 1; }
.home-stat__num em { font-style: normal; color: var(--color-accent-1); }
.home-stat__label { margin-top: var(--spacing-20); font-size: var(--font-size-sm); color: var(--color-contrast-muted); }
@media (max-width: 720px) { .home-stats { grid-template-columns: 1fr 1fr; gap: var(--spacing-50) var(--spacing-40); } }

/* ---------------- HOW IT WORKS (freelance/how-it-works) ---------------- */
.home-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-50); counter-reset: step; }
.home-step { position: relative; padding: var(--spacing-60); background: var(--color-base-elevated); border: 1px solid var(--color-neutral); border-radius: calc(var(--radius-md) * var(--radius-scale)); }
.home-step__icon { width: 3rem; height: 3rem; display: grid; place-content: center; border-radius: calc(var(--radius-sm) * var(--radius-scale)); background: var(--color-accent-weak); color: var(--color-accent-1); border: 1px solid var(--color-accent-border); margin-bottom: var(--spacing-40); }
.home-step__n { counter-increment: step; font-family: var(--font-mono); font-size: 0.72rem; color: var(--color-contrast-subtle); }
.home-step__n::before { content: "0" counter(step) " — "; }
.home-step h3 { font-size: var(--font-size-md); font-weight: var(--fw-semibold); margin: var(--spacing-20) 0; }
.home-step p { font-size: var(--font-size-base); color: var(--color-contrast-muted); line-height: var(--lh-relaxed); margin: 0; }
@media (max-width: 820px) { .home-steps { grid-template-columns: 1fr; } }

/* ---------------- CATEGORIES (freelance/category-grid) ---------------- */
.home-cats { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--spacing-30); }
.home-cat { display: flex; flex-direction: column; gap: var(--spacing-30); padding: var(--spacing-50); background: var(--color-base-elevated); border: 1px solid var(--color-neutral); border-radius: calc(var(--radius-md) * var(--radius-scale)); text-decoration: none; transition: transform var(--transition), border-color var(--transition), background var(--transition); }
.home-cat:hover { transform: translateY(-3px); border-color: var(--color-accent-border); background: var(--color-surface-2); }
.home-cat__icon { width: 2.5rem; height: 2.5rem; display: grid; place-content: center; border-radius: calc(var(--radius-sm) * var(--radius-scale)); background: var(--color-surface-2); color: var(--color-accent-1); border: 1px solid var(--color-neutral); }
.home-cat:hover .home-cat__icon { background: var(--color-accent-weak); }
.home-cat__name { font-size: var(--font-size-base); font-weight: var(--fw-semibold); color: var(--color-contrast); }
.home-cat__count { font-size: var(--font-size-sm); color: var(--color-contrast-subtle); }
@media (max-width: 1080px) { .home-cats { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 760px)  { .home-cats { grid-template-columns: repeat(2, 1fr); } }

/* ---------------- EXPERTISE (freelance/expertise-tags) ---------------- */
.home-expertise { display: flex; flex-wrap: wrap; gap: var(--spacing-30); }
.home-chip { display: inline-flex; align-items: center; gap: var(--spacing-30); min-height: 2.75rem; padding: 0 var(--spacing-50); border-radius: var(--radius-full); background: transparent; border: 1px solid var(--color-neutral-strong); color: var(--color-contrast); font-size: var(--font-size-base); font-weight: var(--fw-medium); text-decoration: none; transition: all var(--transition); }
.home-chip:hover { border-color: var(--color-accent-border); background: var(--color-accent-weak); color: var(--color-accent-1); }
.home-chip__dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--color-contrast-subtle); }
.home-chip:hover .home-chip__dot { background: var(--color-accent-1); }

/* ---------------- SHOWCASE GRIDS ---------------- */
.home-grid-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--spacing-40); margin-bottom: var(--spacing-60); }
.home-grid-head .home-head { margin-bottom: 0; }
.home-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-50); }
@media (max-width: 1000px) { .home-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px)  { .home-grid { grid-template-columns: 1fr; } }

/* FIX-3 (2026-06-02): vendor card overflow on mobile.
 * .wl-card already gets box-sizing:border-box + max-width:100% (global.css).
 * Additional guards: card itself + all direct children get min-width:0 so
 * grid-item shrinking works correctly (flex/grid children ignore min-width by
 * default which causes the card to escape its grid column at 768/375).
 * Also constrains .wl-stars, .wl-btn, .wl-project__divider within the card.
 */
.home-grid .wl-vendor {
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-30);
  padding: var(--spacing-50);
}
.home-grid .wl-vendor > * {
  min-width: 0;
}
.home-grid .wl-vendor .wl-vendor__head {
  display: flex;
  align-items: center;
  gap: var(--spacing-30);
  min-width: 0;
}
.home-grid .wl-vendor .wl-vendor__head > * {
  min-width: 0;
}
.home-grid .wl-vendor .wl-vendor__id {
  min-width: 0;
  overflow: hidden;
}
.home-grid .wl-vendor .wl-vendor__name,
.home-grid .wl-vendor .wl-vendor__role {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-grid .wl-vendor .wl-vendor__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-30);
  flex-wrap: wrap;
  min-width: 0;
}
.home-grid .wl-vendor .wl-btn {
  flex-shrink: 0;
}
.home-grid .wl-vendor .wl-project__divider {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--color-neutral);
}
.home-grid .wl-vendor .wl-stars {
  min-width: 0;
  flex-wrap: wrap;
}

/* FIX HOM-04 (2026-06-02): home showcase vendor cards — skill tags row.
 * .wl-vendor__skills is rendered by home-showcase-freelancers.php between the
 * star rating and the divider. Matches design: single row of compact chips.
 * Inherits .wl-tag chip styles from global.css; the skills wrapper is single-row.
 */
.wl-vendor__skills {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--spacing-20);
  overflow: hidden;
  max-height: 1.75rem;
}
/* Tag chip max-width on home vendor cards — keeps chips compact in single row. */
.wl-vendor__skills .wl-tag {
  max-width: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

/* ---------------- TRUST / VALUE (freelance/trust-benefits) ---------------- */
.home-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-40); }
.home-benefit { padding: var(--spacing-60); background: var(--color-base-elevated); border: 1px solid var(--color-neutral); border-radius: calc(var(--radius-md) * var(--radius-scale)); }
.home-benefit__icon { width: 3rem; height: 3rem; display: grid; place-content: center; border-radius: var(--radius-full); background: var(--color-accent-weak); color: var(--color-accent-1); border: 1px solid var(--color-accent-border); margin-bottom: var(--spacing-40); }
.home-benefit h3 { font-size: var(--font-size-md); font-weight: var(--fw-semibold); margin: 0 0 var(--spacing-20); }
.home-benefit p { font-size: var(--font-size-base); color: var(--color-contrast-muted); line-height: var(--lh-relaxed); margin: 0; }
@media (max-width: 980px) { .home-trust { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .home-trust { grid-template-columns: 1fr; } }

/* ---------------- CTA BAND (freelance/cta-band) ---------------- */
.home-ctaband { position: relative; overflow: hidden; text-align: center; padding: clamp(3rem, 6vw, 5rem) var(--spacing-50); background: var(--color-base-elevated); border: 1px solid var(--color-accent-border); border-radius: calc(var(--radius-lg) * var(--radius-scale)); }
.home-ctaband::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(80% 120% at 50% -20%, color-mix(in srgb, var(--color-accent-1) 16%, transparent), transparent 60%); }
.home-ctaband > * { position: relative; }
.home-ctaband h2 { font-size: var(--font-size-xl); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); margin: 0 0 var(--spacing-30); }
.home-ctaband p { font-size: var(--font-size-md); color: var(--color-contrast-muted); margin: 0 auto var(--spacing-60); max-width: 46ch; }
.home-ctaband__actions { display: flex; gap: var(--spacing-30); justify-content: center; flex-wrap: wrap; }
@media (max-width: 420px) { .home-ctaband__actions { flex-direction: column; align-items: stretch; } .home-ctaband__actions .wl-btn { width: 100%; } }

@media (prefers-reduced-motion: reduce) {
  .home-cat:hover { transform: none; }
}