/**
 * Visual hero + emergency storytelling helpers — BuyAGenerator.com
 * Composes WITH Clear Grid (clear-grid-tokens.css). Does not redefine :root tokens.
 * Link AFTER clear-grid-tokens.css (which loads after brand.css).
 * Spec: /workspace/buyagenerator/visual-hero-emergency-pass.md
 * Do not deploy from the visual-pass task alone.
 * Partner slots are CSS-ready empty regions — no affiliate HTML in this sheet.
 */

/* -------------------------------------------------------------------------- */
/* Shared media frame — CLS: aspect-ratio + object-fit                         */
/* -------------------------------------------------------------------------- */

.hero-visual__media,
.use-case-card__media,
.category-card__media,
.hub-hero-band__media {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--cg-border);
  border-radius: var(--cg-radius-lg);
}

.hero-visual__media img,
.use-case-card__media img,
.category-card__media img,
.hub-hero-band__media img,
.hero-visual__img,
.card-media-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
  vertical-align: middle;
}

/* Hero frame — 1600×900 */
.hero-visual__media,
.media-frame--hero {
  aspect-ratio: 16 / 9;
  width: 100%;
}

/* Card / use-case / category frame — 800×600 */
.use-case-card__media,
.category-card__media,
.media-frame--card {
  aspect-ratio: 4 / 3;
  width: 100%;
}

/* Optional hub header band — wide crop */
.hub-hero-band__media,
.media-frame--hub-band {
  aspect-ratio: 10 / 3;
  width: 100%;
  max-height: 16rem;
  border-radius: var(--cg-radius);
}

/* -------------------------------------------------------------------------- */
/* Homepage hero — visual + copy                                               */
/* -------------------------------------------------------------------------- */

.hero-visual,
#home-hero.hero-visual {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cg-space-3);
  align-items: center;
  margin: 0 0 var(--cg-section-y);
  padding: var(--cg-space-3) 0;
}

@media (min-width: 900px) {
  .hero-visual,
  #home-hero.hero-visual {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--cg-space-4);
    padding: var(--cg-space-4) 0;
  }

  .hero-visual--media-right .hero-visual__copy {
    order: 1;
  }

  .hero-visual--media-right .hero-visual__media {
    order: 2;
  }
}

.hero-visual__copy h1 {
  margin: 0 0 var(--cg-space-2);
}

.hero-visual__lead {
  margin: 0 0 var(--cg-space-3);
  color: var(--cg-ink);
  font-size: 1.0625rem;
  line-height: 1.65;
  max-width: 36rem;
}

.hero-visual__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.65rem;
  align-items: center;
  margin-bottom: var(--cg-space-2);
}

.hero-visual__secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  font-size: 0.9375rem;
  font-weight: 600;
}

.hero-visual__secondary a {
  color: var(--cg-primary);
}

/* -------------------------------------------------------------------------- */
/* Use-case strip                                                              */
/* -------------------------------------------------------------------------- */

.use-case-strip,
#use-cases {
  margin-bottom: var(--cg-section-y);
}

.use-case-strip__grid,
.use-case-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cg-gap);
}

@media (min-width: 640px) {
  .use-case-strip__grid,
  .use-case-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .use-case-strip__grid,
  .use-case-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.use-case-card {
  display: flex;
  flex-direction: column;
  background: var(--cg-surface);
  border: 1px solid var(--cg-border);
  border-radius: var(--cg-radius-lg);
  box-shadow: var(--cg-shadow);
  overflow: hidden;
  transition: transform var(--cg-motion), box-shadow var(--cg-motion);
}

.use-case-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--cg-shadow-hover);
}

.use-case-card__media {
  border-radius: 0;
  border-bottom: 1px solid var(--cg-border);
}

.use-case-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.9rem 1rem 1rem;
  flex: 1;
}

.use-case-card__body h3 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--cg-ink);
}

.use-case-card__body p {
  margin: 0;
  color: var(--cg-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
  flex: 1;
}

.use-case-card__body .button-link {
  align-self: flex-start;
  margin-top: 0.5rem;
}

/* -------------------------------------------------------------------------- */
/* Category paths — storefront feel, educational hrefs                         */
/* -------------------------------------------------------------------------- */

.category-paths,
#category-paths {
  margin-bottom: var(--cg-section-y);
}

.category-paths__grid,
.category-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cg-gap);
}

@media (min-width: 640px) {
  .category-paths__grid,
  .category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .category-paths__grid,
  .category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.category-card {
  display: flex;
  flex-direction: column;
  background: var(--cg-surface);
  border: 1px solid var(--cg-border);
  border-radius: var(--cg-radius);
  box-shadow: var(--cg-shadow);
  overflow: hidden;
  transition: transform var(--cg-motion), box-shadow var(--cg-motion);
}

.category-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--cg-shadow-hover);
}

.category-card--secondary {
  border-style: dashed;
  background: #fafbfc;
}

.category-card__media {
  border-radius: 0;
  border-bottom: 1px solid var(--cg-border);
}

.category-card__body {
  padding: 0.9rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
}

.category-card__body h3 {
  margin: 0;
  font-size: 1.05rem;
  color: var(--cg-ink);
}

.category-card__body p {
  margin: 0;
  color: var(--cg-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
  flex: 1;
}

.category-paths__footnote {
  margin-top: var(--cg-space-2);
  font-size: 0.875rem;
  color: var(--cg-muted);
}

/* -------------------------------------------------------------------------- */
/* Hub pillar — optional light header band (never above Quick Answer)          */
/* -------------------------------------------------------------------------- */

.hub-hero-band {
  margin: 0 0 var(--cg-space-3);
  border: 1px solid var(--cg-border);
  border-radius: var(--cg-radius);
  overflow: hidden;
  background: var(--cg-surface);
  box-shadow: var(--cg-shadow);
}

.hub-hero-band__media {
  border-radius: 0;
  max-height: 14rem;
}

.hub-hero-band__caption {
  margin: 0;
  padding: 0.5rem 0.9rem;
  font-size: 0.8125rem;
  color: var(--cg-muted);
  border-top: 1px solid var(--cg-border);
}

/* -------------------------------------------------------------------------- */
/* Partner picks — empty CSS-ready region (no affiliate links)                 */
/* -------------------------------------------------------------------------- */

.partner-picks,
#partner-picks {
  margin-bottom: var(--cg-section-y);
  padding: var(--cg-space-3);
  background: var(--cg-surface);
  border: 1px dashed var(--cg-border);
  border-radius: var(--cg-radius-lg);
}

.partner-picks--empty {
  opacity: 0.92;
}

.partner-picks__inner {
  max-width: var(--cg-max);
  margin: 0 auto;
}

.partner-picks__title {
  margin: 0 0 var(--cg-space-1);
  font-size: 1.25rem;
  color: var(--cg-muted);
  font-weight: 700;
}

.partner-picks__note {
  margin: 0 0 var(--cg-space-3);
  font-size: 0.9375rem;
  color: var(--cg-muted);
  max-width: 40rem;
}

.partner-picks__slots {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cg-gap);
}

@media (min-width: 640px) {
  .partner-picks__slots {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.partner-slot {
  min-height: 7.5rem;
  border-radius: var(--cg-radius-sm);
  border: 1px solid var(--cg-border);
  background: var(--cg-canvas);
}

.partner-slot--placeholder {
  /* Reserved empty cell — no hover lift (not interactive) */
  pointer-events: none;
  background: repeating-linear-gradient(
    -45deg,
    var(--cg-canvas),
    var(--cg-canvas) 8px,
    #eef1f5 8px,
    #eef1f5 16px
  );
}

/* Future fill hooks (unused until affiliates land — keep selectors stable) */
.partner-slot__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--cg-border);
}

.partner-slot__body {
  padding: 0.75rem 0.9rem;
}

.partner-slot__cta {
  /* Intentionally unstyled product CTA — do not ship affiliate anchors yet */
  display: none;
}

.partner-picks--empty .partner-slot__cta {
  display: none !important;
}

/* -------------------------------------------------------------------------- */
/* Trust strip rhythm (composes with Clear Grid .trust-strip)                  */
/* -------------------------------------------------------------------------- */

#trust-strip.trust-strip,
.trust-strip.section-band {
  margin-bottom: var(--cg-section-y);
  padding: var(--cg-space-3);
}

.trust-strip__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.1rem;
  font-weight: 600;
}

.trust-strip__links a {
  color: var(--cg-primary);
}

/* -------------------------------------------------------------------------- */
/* Reduced motion                                                              */
/* -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .use-case-card,
  .category-card,
  .hero-visual__media img,
  .use-case-card__media img,
  .category-card__media img {
    transition: none;
  }

  .use-case-card:hover,
  .category-card:hover {
    transform: none;
  }
}