/* Home page: "Find Your Next Gig" (search + a row of 4 live listing cards)
   and "Find a Service Pro" (a row of 4 video cards). Loaded only by index.html. */

/* ---------- Find Your Next Gig ---------- */
.home-find{
  background:radial-gradient(760px 420px at 8% 0%, rgba(0,166,61,0.11), rgba(0,166,61,0) 65%), radial-gradient(680px 440px at 96% 100%, rgba(0,166,61,0.12), rgba(0,166,61,0) 65%), #f3f5f2;
  padding:clamp(28px,4.5vh,44px) 16px;
}
.hf-inner{ max-width:1200px; margin:0 auto; }
.hf-head{ text-align:center; margin-bottom:18px; }
.hf-eyebrow{ font-size:13px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:#00a63d; }
.hf-title{
  margin:8px 0 8px; font-weight:900; letter-spacing:-.02em; line-height:1.02;
  font-size:clamp(2.1rem,5.4vw,3.3rem); color:#000; text-wrap:balance;
}
.hf-title span{ color:#00a63d; }
.hf-sub{ margin:0; font-size:17px; font-weight:500; line-height:1.5; color:#1e1f24; }
.hf-truths{
  list-style:none; margin:14px 0 0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px;
}
.hf-truths li{ display:flex; align-items:center; gap:7px; font-size:14.5px; font-weight:600; color:#3a3c44; }
.hf-truths svg{ width:16px; height:16px; flex-shrink:0; stroke:#00a63d; }

.hf-panel{
  background:var(--lg-card, #fff);
  -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,0.8);
  border-radius:24px;
  box-shadow:var(--lg-card-shadow, 0 20px 40px -24px rgba(0,0,0,.3));
}
.hf-search{ max-width:860px; margin:0 auto; padding:16px; box-sizing:border-box; }
.hf-bar{ display:flex; gap:10px; }
.hf-q{
  flex:1 1 auto; min-width:0; height:54px; box-sizing:border-box;
  display:flex; align-items:center; gap:10px; padding:0 16px;
  background:#fff; border:1px solid rgba(20,21,26,0.14); border-radius:16px;
  box-shadow:inset 0 1px 2px rgba(20,21,26,0.06);
}
.hf-q:focus-within{ border-color:#00a63d; box-shadow:0 0 0 4px rgba(0,166,61,0.14); }
.hf-q svg{ width:20px; height:20px; flex-shrink:0; stroke:#5a5d66; }
.hf-q input{
  flex:1 1 auto; min-width:0; border:0; outline:0; background:transparent;
  font:500 16px 'DM Sans',Arial,sans-serif; color:#0b0b0d;
}
.hf-q input::placeholder{ color:#6b6e76; }
.hf-go{
  height:54px; padding:0 28px; border-radius:16px; cursor:pointer;
  font:800 16px 'DM Sans',Arial,sans-serif; color:#fff;
  background:radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0) 100%), var(--lg-green, #00a63d);
  border:1.5px solid rgba(255,255,255,0.55);
  box-shadow:var(--lg-green-shadow, none);
  transition:transform .18s cubic-bezier(.34,1.45,.64,1);
}
.hf-go:hover{ transform:translateY(-2px); }
.hf-go:focus-visible{ outline:2px solid #000; outline-offset:3px; }

.hf-filters{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; margin-top:10px; }
.hf-f{
  position:relative; height:46px; box-sizing:border-box;
  display:flex; align-items:center; gap:8px; padding:0 14px;
  background:var(--lg-clear, #fff); border:1px solid rgba(20,21,26,0.12); border-radius:14px;
  box-shadow:var(--lg-clear-shadow, none);
  font:700 15px 'DM Sans',Arial,sans-serif; color:#14151a; text-decoration:none;
}
.hf-f:focus-within{ border-color:#00a63d; }
.hf-f svg{ width:16px; height:16px; flex-shrink:0; stroke:#5a5d66; }
.hf-f input, .hf-f select{
  flex:1 1 auto; min-width:0; height:100%; border:0; outline:0; background:transparent;
  font:700 15px 'DM Sans',Arial,sans-serif; color:#14151a; cursor:pointer;
  -webkit-appearance:none; appearance:none;
}
.hf-f input{ cursor:text; }
.hf-f input::placeholder{ color:#14151a; opacity:1; }
.hf-f .chev{ position:absolute; right:12px; pointer-events:none; width:14px; height:14px; stroke:#5a5d66; }
.hf-f select{ padding-right:18px; }
a.hf-f{ justify-content:space-between; }
a.hf-f:hover{ background:#fff; }

/* Row of 4 listing cards */
.hf-count{
  margin:20px 0 10px; font-size:13px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#3a3c44;
}
.hf-grid, .hp-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:20px; }
/* Clear liquid glass (like the lens in the tab-navigation reference):
   see-through frosted body, bright white rim, top shine, soft inner depth. */
.hf-card, .hp-card{
  background:radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.62) 45%, rgba(255,255,255,0.42) 100%);
  -webkit-backdrop-filter:blur(16px) saturate(180%); backdrop-filter:blur(16px) saturate(180%);
  border:1.5px solid rgba(255,255,255,0.95);
  box-shadow:
    inset 0 2px 1px #fff,
    inset 0 -10px 20px rgba(20,21,26,0.05),
    inset 0 0 0 1px rgba(20,21,26,0.06),
    0 18px 34px -18px rgba(20,21,26,0.42),
    0 2px 6px rgba(20,21,26,0.06);
}
.hf-card{
  display:flex; flex-direction:column; gap:8px; box-sizing:border-box;
  padding:20px; border-radius:20px; color:inherit; text-decoration:none;
  transition:transform .25s cubic-bezier(.34,1.45,.64,1), box-shadow .2s ease;
}
.hf-card:hover, .hp-card:hover{
  transform:translateY(-3px);
  box-shadow:inset 0 2px 1px #fff, inset 0 -10px 20px rgba(20,21,26,0.05), inset 0 0 0 1px rgba(20,21,26,0.07), 0 26px 44px -20px rgba(20,21,26,0.5), 0 2px 6px rgba(20,21,26,0.06);
}
.hf-card:focus-visible{ outline:2px solid #00a63d; outline-offset:3px; }
.hf-tag{
  align-self:flex-start; padding:4px 10px; border-radius:999px;
  font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:#00a63d; background:rgba(0,166,61,0.1);
}
.hf-card-title{
  font-size:18px; font-weight:700; line-height:1.3; color:#000;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.hf-card:hover .hf-card-title{ color:#00a63d; }
.hf-org{ font-size:14px; color:#3a3c44; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.hf-line{ display:flex; align-items:center; gap:7px; font-size:14px; color:#3a3c44; }
.hf-line svg{ width:16px; height:16px; flex-shrink:0; stroke:#5a5d66; }
.hf-pay{ font-size:15px; font-weight:700; color:#0b0b0d; }
.hf-empty{ grid-column:1/-1; padding:36px 22px; text-align:center; font-size:15px; color:#3a3c44; }
.hf-skel{ height:12px; border-radius:6px; background:linear-gradient(90deg, #eceee9, #f6f7f4, #eceee9); background-size:200% 100%; animation:hfShimmer 1.2s linear infinite; }
@keyframes hfShimmer{ to{ background-position:-200% 0; } }
.hf-foot{ display:flex; justify-content:center; margin-top:20px; }
.hf-all{
  display:inline-flex; align-items:center; gap:8px; padding:13px 24px; border-radius:16px;
  font:800 15px 'DM Sans',Arial,sans-serif; color:#0b0b0d; text-decoration:none;
  background:radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.55) 45%, rgba(255,255,255,0.35) 100%);
  border:1.5px solid rgba(255,255,255,0.95);
  box-shadow:inset 0 2px 1px #fff, inset 0 -8px 16px rgba(20,21,26,0.07), inset 0 0 0 1px rgba(20,21,26,0.09), 0 16px 30px -14px rgba(20,21,26,0.45);
  transition:transform .18s cubic-bezier(.34,1.45,.64,1);
}
.hf-all:hover{ transform:translateY(-2px); color:#0b0b0d; }
.hf-all svg{ width:16px; height:16px; stroke:currentColor; }
/* Browse + post, side by side: clear glass to look, black glass to post */
.hf-pair{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.hf-all.hf-dark{
  color:#fff;
  background:radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.04) 50%, rgba(255,255,255,0) 100%), var(--lg-black, #000);
  border:1.5px solid rgba(255,255,255,0.4);
  box-shadow:inset 0 2px 1px rgba(255,255,255,0.45), 0 16px 30px -14px rgba(0,0,0,0.6);
}
.hf-all.hf-dark:hover{ color:#fff; }

@media (max-width:640px){
  .hf-search{ padding:12px; }
  .hf-go{ padding:0 18px; }
  .hf-filters{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .hf-truths{ gap:8px 16px; }
  .hf-truths li{ font-size:14px; }
}

/* ---------- Find a Service Pro (row of 4 videos) ---------- */
.home-pros{ background:radial-gradient(700px 400px at 92% 0%, rgba(0,166,61,0.08), rgba(0,166,61,0) 65%), radial-gradient(640px 420px at 4% 100%, rgba(0,166,61,0.09), rgba(0,166,61,0) 65%), #fbfcfa; padding:clamp(28px,4.5vh,44px) 16px; }
.hp-inner{ max-width:1200px; margin:0 auto; }
.hp-head{ text-align:center; margin-bottom:18px; }
.hp-eyebrow{ font-size:13px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:#00a63d; }
.hp-title{ margin:8px 0 6px; font-weight:900; letter-spacing:-.02em; line-height:1.02; font-size:clamp(2.1rem,5.4vw,3.3rem); color:#000; }
.hp-title span{ color:#00a63d; }
.hp-sub{ margin:0; font-size:17px; font-weight:500; line-height:1.5; color:#1e1f24; }
/* Same size and glass as the job cards; the whole video shows (nothing cropped),
   with a soft blurred copy of its picture filling the space around it. */
.hp-card{
  /* Height follows the job cards above (set by js/home-find.js) */
  position:relative; display:block; height:var(--row-card-h, 236px); box-sizing:border-box; padding:0; overflow:hidden;
  border-radius:20px; color:inherit; text-decoration:none;
  transition:transform .25s cubic-bezier(.34,1.45,.64,1), box-shadow .2s ease;
}
.hp-card:focus-visible{ outline:2px solid #00a63d; outline-offset:3px; }
.hp-thumb{ position:absolute; inset:0; border-radius:inherit; overflow:hidden; background:#000; }
.hp-thumb img, .hp-thumb video{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; }
.hp-thumb img.hp-bg{ object-fit:cover; filter:blur(18px) brightness(0.75); transform:scale(1.2); }
.hp-thumb video{ opacity:0; transition:opacity .25s ease; }
.hp-card.playing .hp-thumb video{ opacity:1; }
.hp-dur{
  position:absolute; right:10px; top:10px; z-index:3; padding:3px 7px; border-radius:6px;
  background:rgba(0,0,0,0.8); color:#fff; font-size:12px; font-weight:700; letter-spacing:.02em;
}
.hp-play{
  position:absolute; left:50%; top:42%; z-index:2; width:54px; height:54px; margin:-27px 0 0 -27px;
  border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff;
  background:radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 100%), rgba(0,0,0,0.25);
  border:1.5px solid rgba(255,255,255,0.8);
  box-shadow:inset 0 2px 1px rgba(255,255,255,0.9), 0 10px 24px -8px rgba(0,0,0,0.7);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  transition:opacity .25s ease, transform .25s ease;
}
.hp-play svg{ width:22px; height:22px; margin-left:3px; fill:#fff; }
.hp-card:hover .hp-play{ transform:scale(1.08); }
.hp-card.playing .hp-play{ opacity:0; }
.hp-info{ position:absolute; left:0; right:0; bottom:0; z-index:3; display:flex; align-items:center; gap:10px; padding:28px 14px 12px; background:linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.5) 55%, rgba(0,0,0,0) 100%); }
.hp-info > div{ min-width:0; }
.hp-avatar{
  width:38px; height:38px; flex-shrink:0; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:800; color:#fff;
  background:radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 60%), var(--lg-black, #000);
  border:1px solid rgba(255,255,255,0.45);
}
.hp-name{ font-size:16px; font-weight:700; line-height:1.3; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hp-card:hover .hp-name{ color:#6ee79a; }
.hp-meta{ font-size:13.5px; color:rgba(255,255,255,0.82); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hp-foot{ display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:20px; }
.hp-request{ font-size:15px; font-weight:700; color:#00a63d; text-decoration:none; }
.hp-request:hover{ text-decoration:underline; text-underline-offset:3px; }
.hp-skel{ height:268px; border-radius:20px; background:linear-gradient(90deg, #eceee9, #f6f7f4, #eceee9); background-size:200% 100%; animation:hfShimmer 1.2s linear infinite; }

/* ---------- Post an Opportunity (choice track + 4 steps) ---------- */
.home-post{ background:radial-gradient(760px 420px at 90% 0%, rgba(0,166,61,0.11), rgba(0,166,61,0) 65%), radial-gradient(680px 440px at 6% 100%, rgba(0,166,61,0.12), rgba(0,166,61,0) 65%), #f3f5f2; padding:clamp(28px,4.5vh,44px) 16px; }
.hf-ever{ color:#00a63d; }
/* Same black glass track + clear glass lens as Sign In / Create Account (js/header-seg.js) */
.hpost-types-wrap{ text-align:center; margin:0 0 22px; }
.hpost-types{
  position:relative; display:inline-flex; gap:4px; padding:6px; box-sizing:border-box;
  border-radius:999px; background:var(--lg-black, #000);
  border:1px solid rgba(255,255,255,0.16);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,0.18), 0 18px 36px -16px rgba(0,0,0,0.55);
}
.hpost-types .hdr-lens{ bottom:auto !important; z-index:0 !important; }
.hpost-types > a{
  position:relative; z-index:1; padding:13px 26px; border-radius:999px;
  font-size:15.5px; font-weight:700; white-space:nowrap; text-decoration:none;
  color:rgba(255,255,255,0.72); transition:color .25s ease;
}
.hpost-types > a:hover, .hpost-types > a.hdr-on{ color:#fff; text-shadow:0 1px 6px rgba(0,0,0,0.5); }
.hpost-types > a:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.hpost-steps{ list-style:none; margin:0; padding:0; }
.hpost-steps .hf-card{ height:auto; min-height:0; overflow:visible; }
.hpost-steps .hf-card:hover{ transform:none; box-shadow:inset 0 2px 1px #fff, inset 0 -10px 20px rgba(20,21,26,0.05), inset 0 0 0 1px rgba(20,21,26,0.06), 0 18px 34px -18px rgba(20,21,26,0.42), 0 2px 6px rgba(20,21,26,0.06); }
.hpost-desc{ font-size:15px; line-height:1.5; color:#3a3c44; }
/* Step 3 (paying) is the black glass card with the gold 99¢ */
.hpost-steps .hpost-price{
  background:radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.03) 50%, rgba(255,255,255,0) 100%), var(--lg-black, #000);
  border:1.5px solid rgba(0,166,61,0.55);
  box-shadow:inset 0 2px 1px rgba(255,255,255,0.35), 0 22px 40px -22px rgba(0,0,0,0.7);
}
.hpost-steps .hpost-price:hover{ box-shadow:inset 0 2px 1px rgba(255,255,255,0.35), 0 22px 40px -22px rgba(0,0,0,0.7); }
.hpost-price .hf-tag{ color:#19c25a; background:rgba(0,166,61,0.16); }
.hpost-price .hf-card-title{ color:#fff; }
.hpost-price .hpost-desc{ color:rgba(255,255,255,0.82); }
.hpost-gold{
  background:linear-gradient(180deg, #19c25a 0%, );
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hpost-foot{ flex-direction:column; align-items:center; gap:12px; }
.hpost-start{ display:inline-flex; align-items:center; text-decoration:none; }
.hpost-start:hover{ color:#fff; }
.hpost-secure{ margin:0; display:flex; align-items:center; justify-content:center; gap:7px; font-size:14px; font-weight:500; color:#3a3c44; text-align:center; }
.hpost-secure svg{ width:15px; height:15px; flex-shrink:0; stroke:#3a3c44; }
/* Steps are never hidden off to the side: 4 across, 2 x 2, then stacked */
@media (max-width:1000px){
  .hf-grid.hpost-steps{
    grid-template-columns:repeat(2, minmax(0,1fr)); grid-auto-flow:row; grid-auto-columns:auto;
    overflow:visible; margin:0; padding:0; scroll-snap-type:none;
  }
}
@media (max-width:560px){
  .hf-grid.hpost-steps{ grid-template-columns:1fr; gap:12px; }
  .hpost-types{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); width:100%; max-width:360px; border-radius:30px; }
  .hpost-types > a{ padding:12px 10px; text-align:center; }
}
/* Tablets and phones: each row stays one row of 4 and swipes sideways */
@media (max-width:1000px){
  .hf-grid, .hp-grid{
    grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(250px, 42%);
    overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
    margin:0 -16px; padding:4px 16px 14px; scroll-padding:0 16px; scrollbar-width:none;
  }
  .hf-grid::-webkit-scrollbar, .hp-grid::-webkit-scrollbar{ display:none; }
  .hf-grid > *, .hp-grid > *{ scroll-snap-align:start; }
}
@media (max-width:640px){
  .hf-grid, .hp-grid{ grid-auto-columns:80%; gap:14px; }
}
@media (prefers-reduced-motion: reduce){
  .hf-go, .hf-all, .hp-play, .hf-card, .hp-card{ transition:none; }
  .hf-card:hover, .hp-card:hover{ transform:none; }
  .hf-skel, .hp-skel{ animation:none; }
}