/*
 * patterns/lead-gen.css — "Lead Gen"
 * Markup: wp-content/themes/fcs/patterns/lead-gen.php
 * Root:   .fcs-lead-gen
 *
 * Figma 8071:10669 — Parents › "Lead gen".
 *
 * Section padding is NOT declared here. The editor owns Medium/Large from the
 * Dimensions panel, and Small is pinned in layout/spacing.css. See CLAUDE.md
 * § "Section padding".
 *
 * The gaps ARE declared here rather than as blockGap attributes, because they
 * change with the layout below and a block attribute holds one value.
 *
 * RESPONSIVE (DERIVED; THE DESIGN IS DESKTOP ONLY)
 * ------------------------------------------------
 * As drawn, the nav (197px) sits 80px left of a row of four 215px cards with
 * 20px between them: 197 + 80 + 920 = 1197px of content.
 *
 *   Small   (0–767)    nav stacked over ONE column of cards, 32px between.
 *                      Two columns were ruled out: the app card needs
 *                      135px badge + 64px padding = 199px, and two cards on a
 *                      390px phone get ~165px each. Cards drop the 222.5px
 *                      minimum height here — a tall yellow block holding one
 *                      line of title would be mostly empty.
 *   Medium  (768+)     nav beside the cards as a 2 × 2 block, 40px between:
 *                      197 + 40 + 450 = 687px, inside the ~720px a 768px
 *                      screen leaves after its gutters. The design's 80px would
 *                      not fit (757px).
 *   Full    (inner ≥ 1197px)  the Figma layout: four across, 80px gap.
 *
 * The last step is a CONTAINER query on the section, not a 1024px
 * media query. At 1024px the inner is only ~976px wide, so the drawn layout
 * does not fit until the viewport is ~1245px. A min-width: 1024px rule would
 * have to either squeeze four cards to ~158px (the badges overflow) or wrap the
 * nav onto its own row. Keying the switch to the 1197px the layout actually
 * needs keeps the 2 × 2 arrangement until four genuinely fit, without adding a
 * fourth viewport breakpoint. This is the "fluid value" route CLAUDE.md asks
 * for before a new breakpoint.
 *
 * Hover is not designed either: the card's arrow nudges right, and the jump
 * links take the prose hover colour with a plain underline.
 *
 * WHY THE DOUBLED CLASSES
 * -----------------------
 * Core's layout rules (gap, grid columns, child margins) and the prose link
 * underline in components/links.css all reach these elements at (0,1,0) or
 * (0,1,1), several of them printed after the theme's stylesheets. Repeating
 * the class gives (0,2,0) without !important. Same idiom as logo-cloud.css.
 */

/* Layout -------------------------------------------------------------- */

/*
 * The query container is the ROOT, because a container query cannot style the
 * container itself and the inner's gap has to change. The root's content box
 * is the viewport less its gutters, the same width the alignwide inner gets
 * below the 1240px cap, so 1197px means the same thing measured on either.
 */
.fcs-lead-gen {
  container-type: inline-size;
}

.fcs-lead-gen__inner.fcs-lead-gen__inner {
  gap: 32px;
}

.fcs-lead-gen__nav.fcs-lead-gen__nav {
  width: 100%;
  gap: 12px;
}

.fcs-lead-gen__cards.fcs-lead-gen__cards {
  width: 100%;
  margin: 0;
  gap: 20px;
  grid-template-columns: 1fr;
}

@media ( min-width: 768px ) {
  .fcs-lead-gen__inner.fcs-lead-gen__inner {
    gap: 40px;
  }

  .fcs-lead-gen__nav.fcs-lead-gen__nav {
    width: auto;
  }

  .fcs-lead-gen__cards.fcs-lead-gen__cards {
    width: calc( 2 * 215px + 20px );
    grid-template-columns: repeat( 2, 215px );
  }
}

@container ( min-width: 1197px ) {
  .fcs-lead-gen__inner.fcs-lead-gen__inner {
    gap: 80px;
  }

  .fcs-lead-gen__cards.fcs-lead-gen__cards {
    width: calc( 4 * 215px + 3 * 20px );
    grid-template-columns: repeat( 4, 215px );
  }
}

/* "On This Page" ------------------------------------------------------ */

/* Figma: body font bold 16/24, #222. */
.fcs-lead-gen__nav-title.fcs-lead-gen__nav-title {
  margin: 0;
  color: var(--wp--preset--color--foreground);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 700;
  line-height: 24px;
}

.fcs-lead-gen__nav-list.fcs-lead-gen__nav-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--wp--preset--font-size--medium);
  line-height: 24px;
}

.fcs-lead-gen__nav-list.fcs-lead-gen__nav-list li {
  margin: 0;
}

/*
 * No underline at rest (Figma). The prose underline is a background-image
 * gradient, so text-decoration alone would not remove it — see
 * components/links.css.
 */
.fcs-lead-gen__nav-list.fcs-lead-gen__nav-list a {
  color: var(--wp--preset--color--link);
  text-decoration: none;
  background-image: none;
  padding-bottom: 0;
  transition: color var(--fcs-transition);
}

.fcs-lead-gen__nav-list.fcs-lead-gen__nav-list a:hover,
.fcs-lead-gen__nav-list.fcs-lead-gen__nav-list a:focus-visible {
  color: var(--wp--preset--color--primary);
  text-decoration: underline;
}

/* Cards --------------------------------------------------------------- */

/*
 * Figma: accent fill, 12px radius, 40px top/bottom × 32px sides, 215 × 222.5.
 * Title at the top; the arrow (or the badges) below it with at least 20px
 * between.
 */
.fcs-lead-gen__card.fcs-lead-gen__card {
  position: relative;
  gap: 20px;
  align-items: stretch;
  margin: 0;
  padding: 40px 32px;
  border-radius: 12px;
  background-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--on-accent);
}

@media ( min-width: 768px ) {
  .fcs-lead-gen__card.fcs-lead-gen__card {
    min-height: 222.5px;
  }
}

.fcs-lead-gen__card-title.fcs-lead-gen__card-title {
  margin: 0;
  color: inherit;
}

/*
 * The title link is the card's only link; its ::after covers the whole card
 * so the card is clickable everywhere. Colour, underline and the prose
 * gradient are all cleared: the card reads as one button-like target.
 */
.fcs-lead-gen__card-title.fcs-lead-gen__card-title a {
  color: inherit;
  text-decoration: none;
  background-image: none;
  padding-bottom: 0;
  outline: none;
}

.fcs-lead-gen__card-title.fcs-lead-gen__card-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/*
 * Not in the editor: the overlay would swallow every click on the card, so the
 * arrow could only be selected from List View.
 */
.editor-styles-wrapper .fcs-lead-gen__card-title a::after {
  content: none;
}

/* Keyboard focus rings the card, not the text inside it. */
.fcs-lead-gen__card.fcs-lead-gen__card:has( a:focus-visible ) {
  outline: 2px solid var(--wp--preset--color--primary);
  outline-offset: 2px;
}

/*
 * Figma: 28px, bottom-right, inset 3px from the content edge on both sides
 * (the "Forward Button" frame's 3px padding). margin-top: auto pins it to the
 * bottom however long the title runs.
 */
.fcs-lead-gen__card-arrow.fcs-lead-gen__card-arrow {
  align-self: flex-end;
  margin: auto 3px 3px 0;
  transition: transform var(--fcs-transition);
}

.fcs-lead-gen__card-arrow img {
  display: block;
  width: 28px;
  height: 28px;
}

.fcs-lead-gen__card:hover .fcs-lead-gen__card-arrow,
.fcs-lead-gen__card:has( a:focus-visible ) .fcs-lead-gen__card-arrow {
  transform: translateX( 4px );
}

/* App badges ---------------------------------------------------------- */

/* Figma: stacked, 14px apart, left-aligned, each at its native size. */
.fcs-lead-gen__badges.fcs-lead-gen__badges {
  gap: 14px;
  align-items: flex-start;
  margin: 0;
}

.fcs-lead-gen__badge.fcs-lead-gen__badge {
  margin: 0;
}

.fcs-lead-gen__badge img {
  display: block;
}