/* vs-categories.css — homepage category section redesign (homepage only)
 *
 * Implements the Claude Design spec "Category Buttons.dc.html" (design project
 * 9ef25e24): Archivo Black headline, 60x3px red divider, Poppins lead with the
 * red "in-house filming" accent, and the category pills as ghost outline
 * buttons that fill #15171C with a soft lifted shadow. In the design mock the
 * filled state is a *selected filter*; on the site these are plain links, so
 * that state maps to :hover / :focus-visible instead.
 *
 * ANCHOR IS STRUCTURAL: the header block is matched as
 * .wpb_content_element:has(+ .ut-btn-group) — NEVER by the headline text,
 * which has already been renamed once (ALWAYS ORIGINALS -> ORIGINAL ALWAYS by
 * a parallel session, which silently killed the old title-keyed selectors).
 *
 * Loaded ONLY on / (the <link> is injected into site/index.html alone), and
 * the homepage's only .ut-btn-group rows (one merged, or the original two)
 * ARE this section, so the bare .ut-btn-group selectors below cannot bleed
 * anywhere (inject_categories.py verifies the count and skips if a re-export
 * changes that). The theme paints per-button inline <style> blocks
 * (#bklyn_btn_x .bklyn-btn { ... !important }) later in the cascade, so every
 * property we must win is written with an #ut-sitebody anchor + !important —
 * higher specificity on purpose.
 *
 * The labels are uppercase in the static HTML (the SEO gate hashes that text);
 * vs-categories.js retitles them to the design's title case at runtime.
 */

/* ---- headline: Archivo Black, tight ------------------------------------- */
#ut-sitebody .wpb_content_element:has(+ .ut-btn-group) h2.section-title,
#ut-sitebody .wpb_content_element:has(+ .ut-btn-group) h2.section-title span {
  font-family: 'Archivo Black', 'Montserrat', sans-serif !important;
  font-weight: 400 !important;               /* Archivo Black ships one 400 cut */
  font-size: clamp(38px, 5vw, 62px) !important;
  line-height: 0.94 !important;
  letter-spacing: -0.01em !important;
  color: #15171C !important;
}
#ut-sitebody .wpb_content_element:has(+ .ut-btn-group) h2.section-title {
  margin-bottom: 22px !important;
}

/* ---- the red divider (theme draws it as span::after, 30x1px #151515) ----- */
#ut-sitebody .wpb_content_element:has(+ .ut-btn-group) .section-title span::after {
  width: 60px !important;
  height: 3px !important;
  background-color: #E4002B !important;
  border-radius: 2px;
  margin: 18px auto 0 !important;
}

/* ---- lead paragraph ------------------------------------------------------ */
#ut-sitebody .wpb_content_element:has(+ .ut-btn-group) .lead p {
  font-family: 'Poppins', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: #4C5361 !important;
  max-width: 620px;
  margin: 0 auto !important;
}
#ut-sitebody .wpb_content_element:has(+ .ut-btn-group) .lead p b,
#ut-sitebody .wpb_content_element:has(+ .ut-btn-group) .lead p strong {
  font-weight: 600 !important;
  color: #E4002B !important;
}

/* ---- the two pill rows: theme float/inline layout -> centered flex ------- */
#ut-sitebody .ut-btn-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 40px;               /* breathing room under the lead */
}
#ut-sitebody .ut-btn-group + .ut-btn-group {
  margin-top: 12px;               /* row gap between the two rows of five */
}
#ut-sitebody .ut-btn-group > .bklyn-btn-holder {
  display: block;
  margin: 0 !important;           /* kills the theme's 20px inline-gap model */
}

/* ---- idle pill: ghost outline -------------------------------------------- */
#ut-sitebody .ut-btn-group a.bklyn-btn {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;  /* vs-categories.js title-cases the labels */
  color: #4C5361 !important;
  background: transparent !important;
  border: 1px solid rgba(21, 23, 28, 0.16) !important;
  border-radius: 12px !important;
  padding: 13px 22px !important;
  margin: 0 !important;
  box-shadow: none !important;
  white-space: nowrap;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
/* some pills carry inline font-weight:100 on the inner span — win those too */
#ut-sitebody .ut-btn-group a.bklyn-btn .ut-btn-text {
  font-family: inherit !important;
  font-weight: 600 !important;
  color: inherit;
}

/* ---- filled pill (the design's selected state) on hover / keyboard focus - */
#ut-sitebody .ut-btn-group a.bklyn-btn:hover,
#ut-sitebody .ut-btn-group a.bklyn-btn:focus-visible {
  color: #FFFFFF !important;
  background: #15171C !important;
  border-color: #15171C !important;
  box-shadow: 0 12px 24px -12px rgba(20, 22, 26, 0.55) !important;
}
#ut-sitebody .ut-btn-group a.bklyn-btn:focus-visible {
  outline: 2px solid #E4002B;
  outline-offset: 2px;
}

/* ---- responsive ----------------------------------------------------------- */
@media (max-width: 767px) {
  #ut-sitebody .wpb_content_element:has(+ .ut-btn-group) h2.section-title,
  #ut-sitebody .wpb_content_element:has(+ .ut-btn-group) h2.section-title span {
    line-height: 1.02 !important;  /* headline wraps to two lines here */
  }
  #ut-sitebody .ut-btn-group {
    gap: 10px;
    margin-top: 32px;
  }
  #ut-sitebody .ut-btn-group + .ut-btn-group {
    margin-top: 10px;
  }
  #ut-sitebody .ut-btn-group a.bklyn-btn {
    font-size: 13px !important;
    padding: 11px 16px !important;
  }
}

/* ---- reduced motion -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #ut-sitebody .ut-btn-group a.bklyn-btn {
    transition: none !important;
  }
}