/*
 * insights-hero.css — Toro Legal Marketing
 * Figma node: 377:2489 (Blog Page / Option 1 — hero + filter row)
 *
 * Insights Index page header. Three parts:
 *   1. H1 — inner-page hero standard (44 mobile → 56 desktop).
 *      Plain navy — NOT the .tlm-heading-accent gradient. Paul's
 *      call 2026-05-21: this page's H1 opts out of the heading
 *      accent. Deliberate per-page choice, not drift.
 *   2. Lead paragraph
 *   3. Filter bar — Category text-tabs (left) + Search input (right)
 *
 * FacetWP contract: the filter bar (.tlm-insights-hero__filters) is
 * a standalone block OUTSIDE the feed listing container. At WP-port
 * time the Category tabs become a FacetWP facet and the search input
 * a FacetWP/Relevanssi facet; both must survive the listing's AJAX
 * refresh, so they live here in the hero, never inside the feed.
 *
 * Cream page bg (--color-cream) — matches every other hero section.
 * Sits flush under the transparent navbar — no svh fill (this is an
 * index header, not a full-viewport hero).
 */

.tlm-insights-hero {
  position: relative;
  background: var(--color-cream);
  padding-top: 100px;             /* clears the transparent navbar */
  /* Tight — just closes the cream block under the filter bar. The
     white featured section below owns the real gap to the first
     card via its own padding-top, so this stays small to avoid a
     stacked dead zone. */
  padding-bottom: var(--space-lg);
  /* No overflow:hidden here — it clipped the desktop "More" popover where
     it extends below the section. The gradient ::before is inset:0 and
     sized to the box, so it never spills; clipping isn't needed. */
}

/* Brand gradient backdrop, anchored top-right (same asset as the
   shared service-page-hero). Mobile knocks it back to 0.65; desktop
   shows it full strength (set in the 1024 block). */
.tlm-insights-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url('../../images/service/hero-gradient-bg.webp') no-repeat right top / auto 100%;
  opacity: 0.65;
}

.tlm-insights-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
  padding-top: var(--space-3xl);
}

/* ============================================
 * Intro — eyebrow + H1 + lead
 * ============================================ */

.tlm-insights-hero__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.tlm-insights-hero__title {
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  /* Inner-page hero H1 standard — matches service-page-hero +
     blog-single-hero: 44 mobile (--text-h1-mobile) / leading-snug
     → 56 desktop / leading-tight. */
  font-size: var(--text-h1-mobile);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-display);
  color: var(--color-navy);
  margin: 0;
  max-width: 18ch;
}

/* Forced desktop line breaks; hidden on mobile so the title keeps its
   natural 18ch wrap there. */
.tlm-insights-hero__title-break {
  display: none;
}

.tlm-insights-hero__lead {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-tight);
  color: var(--color-navy);
  margin: 0;
  max-width: 46ch;
}

/* ============================================
 * Filter bar — Category tabs + Search
 * ============================================
 * Mobile: stacked — category strip scrolls horizontally, search
 * full-width below. Desktop: one row, tabs left / search right.
 */

.tlm-insights-hero__filters {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* --- Category text-tabs ---
   Horizontal scroll strip on mobile; a plain text row on desktop.
   Same control role as the service-page sub-nav — text labels with
   a solid 2px navy underline marking the active item. */
.tlm-insights-hero__categories {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0;
  /* min-width: 0 lets this scroll container shrink below its
     content width when it's a flex child — without it the nowrap
     category row forces the whole filter bar (and hero) wider than
     the viewport. See [[feedback_grid_flex_direct_children]]. */
  min-width: 0;
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.tlm-insights-hero__categories::-webkit-scrollbar {
  display: none;
}

.tlm-insights-hero__category {
  flex-shrink: 0;
}

.tlm-insights-hero__category-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  /* button reset — the "More" tab is a <button>, the rest are <a>.
     Padding is symmetric top+bottom so the label centres in the box;
     with the filter row on align-items:center this lines the tab
     text up with the search input's text. The 2px underline still
     sits on the bottom border. */
  margin: 0;
  padding: var(--space-xs) 0;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-tight);
  color: var(--color-navy);
  text-decoration: none;
  white-space: nowrap;
  transition: color 120ms ease, border-color 120ms ease;
}

@media (hover: hover) {
  .tlm-insights-hero__category-link:not(.is-active):hover {
    color: var(--color-navy-muted);
  }
}

.tlm-insights-hero__category-link:focus-visible {
  outline: 2px solid var(--color-navy);
  outline-offset: 2px;
}

/* Active tab — solid navy text + solid 2px navy underline.
   Matches the site's established active-text-tab pattern (the
   service-page sub-nav marks its active link with a solid
   border-bottom-color). Not a hyperlink underline — it's the
   active-tab indicator. */
.tlm-insights-hero__category-link.is-active {
  font-weight: var(--weight-semibold);
  color: var(--color-navy);
  border-bottom-color: var(--color-navy);
}

.tlm-insights-hero__category-caret {
  display: inline-flex;
  color: var(--color-navy);
  transition: transform 150ms ease;
}

/* --- "More" overflow dropdown ---
   The last category tab is a "More" disclosure. Clicking it opens a
   panel of overflow categories. The panel is a card-styled popover;
   on mobile it's full-width under the tab, on desktop it anchors
   left under the More tab. At WP-port time these become additional
   FacetWP Category terms — the dropdown is just a UI grouping. */
/* Mobile shows every category inline in the scroll strip (the overflow
   pills) and hides the "More" disclosure — the strip just scrolls.
   Desktop flips this in the ≥1024 block: overflow pills hidden, More tab
   shown. */
.tlm-insights-hero__category--more {
  position: relative;
  display: none;
}

.tlm-insights-hero__category--more .tlm-insights-hero__category-caret {
  transform: none;
}

.tlm-insights-hero__category--more.is-open .tlm-insights-hero__category-caret {
  transform: rotate(-180deg);
}

.tlm-insights-hero__more-panel {
  position: absolute;
  top: calc(100% + var(--space-xs));
  left: 0;
  z-index: 20;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-xs);
  background: var(--color-white);
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.tlm-insights-hero__more-panel[hidden] {
  display: none;
}

.tlm-insights-hero__more-link {
  display: block;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-navy);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 120ms ease;
}

@media (hover: hover) {
  .tlm-insights-hero__more-link:hover {
    background-color: var(--color-cream);
  }
}

.tlm-insights-hero__more-link:focus-visible {
  outline: 2px solid var(--color-navy);
  outline-offset: -2px;
}

/* --- Search input + Subscribe button --- */
/* Mobile: search bar, then the Subscribe button stacked beneath it.
   Switches to a side-by-side row on desktop (see ≥1024px below). */
.tlm-insights-hero__search-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-sm);
  width: 100%;
}

.tlm-insights-hero__search {
  flex: 1 1 auto;
  min-width: 0;
}

/* Match the pill button height to the search field and stop the
   label wrapping in the narrow desktop column. Padding-block is
   trimmed from the button default so it lines up with the 313px
   search box height; the locked .tlm-button base owns the rest. */
.tlm-insights-hero__subscribe {
  flex-shrink: 0;
  gap: var(--space-2xs);
  padding-block: 14px;
  white-space: nowrap;
}

.tlm-insights-hero__subscribe-icon {
  display: inline-flex;
  flex-shrink: 0;
}

.tlm-insights-hero__subscribe-icon svg {
  width: 1.125em;
  height: 1.125em;
}

.tlm-insights-hero__search-field {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
  padding: 14px var(--space-sm);
  background: var(--color-white);
  border: 1px solid var(--color-grey-300);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.tlm-insights-hero__search-icon {
  flex-shrink: 0;
  display: flex;
  color: var(--color-navy-subtle);
}

.tlm-insights-hero__search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-navy);
}

.tlm-insights-hero__search-input::placeholder {
  color: var(--color-navy-subtle);
}

.tlm-insights-hero__search-input:focus {
  outline: none;
}

/* Active (focused) search box — pink border + 2px pink ring.
   Mirrors the service-page pricing-card hover so the "active /
   engaged" affordance is consistent across the site. */
.tlm-insights-hero__search-field:focus-within {
  border-color: var(--color-pink-stop);
  box-shadow:
    0 0 0 2px var(--color-pink-stop),
    var(--shadow-sm);
}

/* ============================================
 * Desktop (≥1024px)
 * ============================================ */

@media (min-width: 1024px) {
  /* Desktop: gradient at full strength (mobile keeps the 0.65 tint). */
  .tlm-insights-hero::before {
    opacity: 1;
  }

  .tlm-insights-hero__title {
    font-size: var(--text-h2);               /* 56 */
    line-height: var(--leading-tight);
    max-width: none;
  }
  /* Desktop: force the exact 3-line break:
     "Insights for" / "relationship-driven" / "law firms". */
  .tlm-insights-hero__title-break {
    display: inline;
  }

  .tlm-insights-hero__filters {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
  }

  .tlm-insights-hero__categories {
    /* Size to the tab content, don't grow to fill the line (that was
       stealing the whole row and forcing the search to wrap). The
       flexible search box on the right takes the leftover space and
       shrinks first. overflow-x visible so the "More" dropdown (a
       child of this ul) isn't clipped. */
    flex: 0 1 auto;
    /* Reset the base width:100% (mobile scroll strip) so the tab row is
       only as wide as its content and doesn't push the search box into a
       cramped slot on the right. */
    width: auto;
    overflow-x: visible;
  }

  /* Desktop: the inline overflow pills collapse into the "More" tab. */
  .tlm-insights-hero__category--overflow {
    display: none;
  }

  .tlm-insights-hero__category--more {
    display: block;
  }

  /* Right group: the search box only (Subscribe button removed from this
     hero — subscribe stays reachable via menu/footer). Flexible so it
     fills the space the tab row leaves and shrinks as the tabs grow,
     keeping the whole row on ONE line without overlap, inside the
     1440px-capped container. */
  .tlm-insights-hero__search-row {
    /* Size to its content (the search box); don't grow to fill the row,
       or the surplus space becomes empty margin and the box collapses to
       its placeholder width. */
    flex: 0 1 auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    width: auto;
  }

  .tlm-insights-hero__search {
    /* Figma-exact 313px basis; holds that width when there's room and
       shrinks (down to 180) only when the tab row squeezes it, so it's
       never needlessly narrow at wide desktop. */
    flex: 0 1 313px;
    width: 313px;
    min-width: 180px;
    max-width: 313px;
  }
}

/* ============================================
 * Tablet-landscape band (1024-1261px)
 *
 * In this range the full tab row (~850px) + the 313px search box don't
 * fit on one line inside the container, so the inline desktop layout
 * above made them OVERLAP (search box painting over the Social/More
 * tabs). Confirmed live: overlaps ~1028px, clears ~1262px. Here we drop
 * the search onto its own line below the tabs (right-aligned) so they
 * never collide. At >=1262px the inline layout above takes over.
 * ============================================ */

@media (min-width: 1024px) and (max-width: 1261px) {
  .tlm-insights-hero__filters {
    flex-wrap: wrap;
  }

  /* Tabs take the full first line... */
  .tlm-insights-hero__categories {
    flex: 1 1 100%;
  }

  /* ...and the search wraps to its own line, staying on the right. */
  .tlm-insights-hero__search-row {
    flex: 0 0 auto;
    margin-left: auto;
  }
}

/* Real FacetWP facets — visually hidden but kept in the render tree
   and interactive. NOT display:none / [hidden]: FacetWP must render
   and process these for nav-insights.js to forward clicks to them. */
.tlm-insights-hero__facets {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}