/* Flamingo 5 — Welcome + innovation icon row (pattern: flamingo-marine/f5-welcome).
   Comp: f5-band-2.png (1280px native) — left-aligned headline, 5-up row of white
   line-icons in rounded bordered tiles, small caption beneath each. */

/* Less bottom space than top: the next section is the pinned innovation scroll,
   and a large trailing gap here widens the dead band as that section scrolls in. */
.flm-f5welcome { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 3vw, 2.5rem); padding-inline: 0; }

.flm-f5welcome__inner { width: min(92vw, 1840px); margin-inline: auto; }

.flm-f5welcome__title {
  color: var(--wp--preset--color--text-primary);
  font-weight: 600;
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  line-height: 1.15;
  margin: 0 0 clamp(1rem, 2vw, 1.5rem);
  text-wrap: balance;
}

.flm-f5__lede { color: var(--wp--preset--color--text-primary); font-size: inherit; line-height: 1.6; max-width: 60ch; margin: 0 0 clamp(2rem, 4vw, 3rem); }

.flm-f5welcome__icons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(1rem, 2vw, 2rem);
}

.flm-f5welcome__icon a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .85rem;
  text-decoration: none;
  color: var(--wp--preset--color--text-secondary);
}

/* Icon-only (BugHerd #100): no bordered tile — just the line-icon, recoloured
   via a CSS mask so it can go pink on hover. The PNG is white line-art on
   transparent; used as an alpha mask, background-color paints the lines. */
.flm-f5welcome__glyph {
  display: block;
  width: 100%;
  max-width: clamp(72px, 7vw, 104px);
  aspect-ratio: 1;
  background-color: var(--wp--preset--color--text-primary);
  -webkit-mask: var(--flm-glyph) center / contain no-repeat;
  mask: var(--flm-glyph) center / contain no-repeat;
  transition: background-color .18s ease, transform .18s ease;
}

/* Caption reads as a link (BugHerd #130): a white label plus a persistent
   chevron so the icons are recognisably clickable AT REST — not only on hover —
   while staying tile-free per #100. On hover/focus a pink underline wipes in, the
   chevron nudges right, and the glyph lifts + goes pink. */
.flm-f5welcome__icon span {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: var(--wp--preset--font-size--caption);
  line-height: 1.2;
  color: var(--wp--preset--color--text-primary);
  padding-bottom: 3px;
  background-image: linear-gradient(var(--wp--preset--color--accent-pink), var(--wp--preset--color--accent-pink));
  background-size: 0% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .22s ease;
}

.flm-f5welcome__icon span::after {
  content: "\203A"; /* › — resting clickability cue */
  font-size: 1.05em;
  line-height: 1;
  color: var(--wp--preset--color--text-muted);
  transform: translateY(-1px);
  transition: transform .18s ease, color .18s ease;
}

.flm-f5welcome__icon a:hover span,
.flm-f5welcome__icon a:focus-visible span { background-size: 100% 1.5px; }

.flm-f5welcome__icon a:hover span::after,
.flm-f5welcome__icon a:focus-visible span::after {
  color: var(--wp--preset--color--accent-pink);
  transform: translate(3px, -1px);
}

.flm-f5welcome__icon a:hover .flm-f5welcome__glyph,
.flm-f5welcome__icon a:focus-visible .flm-f5welcome__glyph {
  background-color: var(--wp--preset--color--accent-pink);
  transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
  .flm-f5welcome__icon span,
  .flm-f5welcome__icon span::after,
  .flm-f5welcome__glyph { transition: none; }
}

@media (max-width: 700px) {
  /* Flex instead of grid so the orphan bottom row (3 + 2 wrap) centers
     rather than left-aligning (BugHerd #159). */
  .flm-f5welcome__icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 1.5rem;
  }
  /* 30% basis leaves room for the two column gaps so three fit per row;
     min-width: 0 stops long one-word labels (ServingShields) from inflating
     items past the basis — the centered label just overflows its box, as it
     did in the old 3-col grid. */
  .flm-f5welcome__icon { flex: 0 0 30%; min-width: 0; }
}