/* Limited-run campaign hero for shop.html.
 *
 * Lagoon ground, flat: brand rule is bright-per-section (brand:DESIGN.md § Color).
 * Ink type on Lagoon, Crayola leads the CTA. The funding bar inside it is the one
 * documented gradient in the system, and comes from /shared/campaign-progress.css.
 *
 * The section ships hidden and js/limited-hero.js reveals it only once a live
 * campaign has actually been fetched. Shop.html is the money page, so a dead API
 * must cost nothing: no skeleton, no empty frame, no layout shift.
 */
.limited-hero-section {
  display: none;
  width: 100%;
  margin: 0;
  padding: var(--spacing-16) 0;
  background: var(--color-lagoon);
}
.limited-hero-section.is-live {
  display: flex;
  justify-content: center;
}
@media (max-width: 992px) {
  .limited-hero-section {
    padding: var(--spacing-10) 0;
  }
}

.limited-hero-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-12);
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--section-padding-x);
}
@media (max-width: 768px) {
  .limited-hero-container {
    flex-direction: column;
    gap: var(--spacing-8);
    text-align: center;
  }
}

.limited-hero-media {
  display: flex;
  justify-content: center;
  flex: 0 0 38%;
}
.limited-hero-image {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-xl);
}

.limited-hero-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
}
@media (max-width: 768px) {
  .limited-hero-body {
    align-items: center;
  }
}

.limited-hero-eyebrow {
  font: var(--font-weight-semibold) var(--font-size-sm) / var(--line-height-normal)
    var(--font-family-outfit);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-dark);
  margin: 0 0 var(--spacing-3);
}
.limited-hero-title {
  font: var(--font-headline2);
  color: var(--color-dark);
  margin: 0 0 var(--spacing-2);
}
.limited-hero-creator {
  font: var(--font-bold);
  color: var(--color-dark);
  opacity: 0.75;
  margin: 0 0 var(--spacing-4);
}
.limited-hero-desc {
  font: var(--font-lead);
  color: var(--color-dark);
  margin: 0 0 var(--spacing-6);
}
.limited-hero-price {
  font: var(--font-weight-bold) var(--font-size-5xl) / var(--line-height-tight)
    var(--font-family-outfit);
  color: var(--color-dark);
  margin: 0 0 var(--spacing-4);
}
/* "from" rides on the amount span, so an absent price hides both. */
#limited-hero-price::before {
  content: "from ";
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  opacity: 0.7;
}

/* Wrapper only. The bar itself is /shared/campaign-progress.css. */
.limited-hero-progress {
  width: 100%;
  max-width: 420px;
  margin: 0 0 var(--spacing-3);
}
/* The bar itself is /shared/campaign-progress.css, the same component
   limited.playtil.es renders, including the overfunded escalation. The markup uses
   .progress-bar / .progress-fill / .progress-cursor directly, so there is nothing to
   restyle here. Only the wrapper spacing is ours. */
.limited-hero-meta {
  font: var(--font-weight-semibold) var(--font-size-sm) / var(--line-height-normal)
    var(--font-family-outfit);
  color: var(--color-dark);
  margin: 0 0 var(--spacing-6);
}

.limited-hero-cta {
  display: inline-block;
  padding: 16px 32px;
  border-radius: var(--radius-full);
  background: var(--color-crayola);
  color: var(--color-light);
  font: var(--font-weight-bold) var(--font-size-lg) / var(--line-height-normal)
    var(--font-family-outfit);
  text-decoration: none;
  transition: transform 200ms ease-out, background-color 200ms ease-out;
}
.limited-hero-cta:hover {
  transform: scale(1.05);
  background: var(--color-dark);
}
.limited-hero-cta:active {
  transform: scale(0.98);
}
@media (prefers-reduced-motion: reduce) {
  .limited-hero-cta {
    transition: none;
  }
  .limited-hero-cta:hover,
  .limited-hero-cta:active {
    transform: none;
  }
}
.limited-hero-link {
  display: inline-block;
  margin-top: var(--spacing-3);
  font: var(--font-base);
  color: var(--color-dark);
  text-decoration: underline;
}