/* css/home-hero-gigs.css
   ─────────────────────────────────────────────────────────────────────────
   Home-page hero actions + the "Recent gigs sold by creators" carousel.

   Ported from the design prototype. Three deliberate deviations from the
   prototype's own stylesheet, all required by the repo's visual theme
   (see CLAUDE.md → "Visual theme"):

     prototype            here                  why
     ───────────────────  ────────────────────  ─────────────────────────────
     --pink #EA356C       var(--accent,#E8366D) #EA356C is the mobile app's
                                                pink and is whitelisted only
                                                inside css/v108.css. Site
                                                pages use the site pink.
     --pink-ink #C4234F   filter:brightness()   avoids inventing a second
                                                brand hex the guard would
                                                flag; hover darkens the token
                                                itself so it tracks --accent.
     Outfit / JetBrains   Poppins / system mono the site ships Inter +
                                                Poppins and nothing else, and
                                                a third webfont is a render-
                                                blocking request for six
                                                price labels.

   Everything else — the 178px card, the 106px thumb, the scroll-snap track,
   the two credit placements — is the prototype's geometry unchanged.

   Loaded by / (index.html) only. .master-content-column supplies the column
   this sits in; app-index.css owns the hero title/subtitle above it. */

/* ── let the column shrink ──────────────────────────────────────────────────
   A grid item and a column-flex child both default to min-width:auto, i.e.
   "never narrower than my content". The track's six 178px cards are content,
   so without these the right-hand column sizes itself to ~1128px, the grid
   computes `250px 1128px`, and the whole page picks up a horizontal scrollbar
   with the carousel arrows pushed off-screen. min-width:0 hands the width back
   to the grid and lets the track scroll inside it, which is the point of a
   carousel. Scoped here rather than in app-index.css so the rule sits next to
   the thing that needs it. */
.master-content-column,
.hero-content-block,
.gigs,
.gigs-head,
.gigs-track { min-width: 0; }

/* ── hero actions ───────────────────────────────────────────────────────── */

.home-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.home-cta {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 8px;
  padding: 16px 32px;
  cursor: pointer;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  transition: background-color .2s, border-color .2s, filter .2s;
}

.home-cta-pink {
  background: var(--accent, #E8366D);
  color: #fff;
}

.home-cta-pink:hover { filter: brightness(.92); }

.home-cta-ghost {
  background: var(--bg-primary, #fff);
  color: var(--text-primary, #0A0A0A);
  border-color: var(--border-light, #E5E5EA);
}

.home-cta-ghost:hover { border-color: var(--text-primary, #0A0A0A); }

/* The store links used to sit here, under the CTAs. They now live in the
   shared header as a "Get the app" dropdown (js/site-header.js), which also
   satisfies the js/v108-shared.js `appUrl()` contract — every /t/ and /c/
   visitor on an unidentified device is routed to this page expecting to find
   both stores, and the header is on every page. */

/* ── gigs carousel ──────────────────────────────────────────────────────── */

.gigs { margin-top: 34px; }

.gigs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.gigs-label {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary, #0A0A0A);
  letter-spacing: -.015em;
}

.gigs-nav { display: flex; gap: 6px; }

.gigs-arrow {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--border-light, #E5E5EA);
  background: var(--bg-primary, #fff);
  color: #3D3D3D;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: border-color .2s, color .2s;
}

.gigs-arrow:hover {
  border-color: var(--text-primary, #0A0A0A);
  color: var(--text-primary, #0A0A0A);
}

.gigs-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding-bottom: 6px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.gigs-track::-webkit-scrollbar { display: none; }

/* The prototype reserved two lines on the title and one on the buyer line
   (min-height: 36px / 16px) so the prices would line up across cards. That
   aligns the prices but leaves a visible half-line hole under every one-line
   title — "Drone footage editing" gets a gap, "Photo set — fleet and location"
   does not, and the row reads ragged.

   Same alignment, no hole: the card is a flex column, the body grows to fill
   it, and the price takes margin-top:auto. Text hugs whatever it needs and the
   prices still sit on one line because the track already stretches every card
   to the tallest one. */
.gig {
  flex: 0 0 178px;
  scroll-snap-align: start;
  background: var(--bg-primary, #fff);
  border: 1px solid var(--border-light, #E5E5EA);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.gig-img {
  position: relative;
  height: 106px;
  background: #242A30;
  overflow: hidden;
}

.gig-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gig-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.gig-play span {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(10, 10, 10, .55);
  border: 1px solid rgba(255, 255, 255, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.gig-dur {
  position: absolute;
  right: 7px;
  top: 7px;
  background: rgba(10, 10, 10, .72);
  color: #fff;
  font-size: 10.5px;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: -.01em;
}

/* Creator credit has two placements. The prototype shipped a toggle so the
   two could be compared side by side; here the choice is a single class on
   <body> (see index.html), so switching is one word rather than a rebuild. */
.gig-credit-img {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px 9px 7px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(to top, rgba(0, 0, 0, .62), rgba(0, 0, 0, 0));
}

.gig-credit-img img {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}

.gig-credit-img span {
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -.01em;
}

.gig-credit-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 9px;
}

.gig-credit-row img {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}

.gig-credit-row span {
  font-size: 12px;
  font-weight: 600;
  color: #3D3D3D;
  letter-spacing: -.01em;
}

body:not(.credit-on-image) .gig-credit-img { display: none; }
body:not(.credit-in-card) .gig-credit-row { display: none; }

.gig-body {
  padding: 12px 13px 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.gig-what {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.32;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gig-who {
  font-size: 11.5px;
  color: var(--text-secondary, #6B6B70);
  margin-top: 3px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Pinned to the bottom of the card — this is what keeps the price row level
   now that the title no longer reserves a fixed height. */
.gig-amt {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin-top: auto;
  padding-top: 9px;
}

/* Tabular figures so the prices form a column rather than jittering. The
   prototype used JetBrains Mono; the system stack gets the same alignment
   without a third webfont. */
.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

/* ── fallback state ─────────────────────────────────────────────────────── */

.gigs-empty {
  background: var(--bg-primary, #fff);
  border: 1px solid var(--border-light, #E5E5EA);
  border-radius: 10px;
  padding: 24px 24px 26px;
  max-width: 520px;
}

.gigs-empty h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 9px;
  letter-spacing: -.02em;
}

.gigs-empty p {
  font-size: 14px;
  color: #3D3D3D;
  margin: 0;
  line-height: 1.6;
}

.is-hidden { display: none !important; }

/* ── narrow ─────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .home-cta {
    padding: 14px 24px;
    font-size: .95rem;
  }
  .gigs { margin-top: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .gigs-track { scroll-behavior: auto; }
}