/*
 * Careers — an About sub-page.
 *
 * @package Refinery
 *
 * Lifted verbatim from the <style> block in the frozen static build's
 * about-careers.html. STATIC-REFERENCE.md is the authority on why it looks this way.
 * Kept page-scoped and unedited so a future diff against the static
 * build still means something; url() paths are rewritten to ../ because
 * CSS resolves them against the stylesheet, not the page.
 *
 * Enqueued only on its own page — see refinery_enqueue_assets().
 */

    #bzOpeningsContainer .bzOpeningsList {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    #bzOpeningsContainer .bzOpening {
      border-top: 1px solid rgba(255,255,255,0.12);
      padding: 1.5rem 0;
    }
    #bzOpeningsContainer .bzOpening:last-child {
      border-bottom: 1px solid rgba(255,255,255,0.12);
    }

    /* The whole row is the link — give it the layout, not the anchor's default */
    #bzOpeningsContainer .bzOpening > a {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.5rem 1.5rem;
      text-decoration: none;
      color: inherit;
    }

    #bzOpeningsContainer .bzOpening h2 {
      order: 1;
      flex: 1 1 auto;
      font-size: clamp(1.1rem, 1.6vw, 1.35rem);
      font-weight: 700;
      letter-spacing: -0.01em;
      color: var(--white);
      margin: 0;
      transition: color var(--transition-fast);
    }
    #bzOpeningsContainer .bzOpening > a:hover h2 { color: var(--chartreuse); }

    /* Meta: Breezy stacks these one per line. Inline them with separators. */
    #bzOpeningsContainer .bzMeta {
      order: 2;
      flex: 1 1 100%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.35rem 0.85rem;
      list-style: none;
      margin: 0.4rem 0 0;
      padding: 0;
      font-size: 0.875rem;
      color: rgba(255,255,255,0.55);
    }
    #bzOpeningsContainer .bzMeta li { position: relative; }
    #bzOpeningsContainer .bzMeta li + li::before {
      content: "·";
      position: absolute;
      left: -0.55rem;
      color: rgba(255,255,255,0.3);
    }

    /* The defect this block exists for: Breezy's Apply renders black-on-dark. */
    #bzOpeningsContainer .bzButtonApply {
      order: 3;
      flex: 0 0 auto;
      background: var(--chartreuse);
      color: var(--dark);
      border: 0;
      border-radius: 100px;
      padding: 0.5rem 1.25rem;
      font-family: var(--font-primary);
      font-size: 0.8125rem;
      font-weight: 600;
      letter-spacing: 0.02em;
      cursor: pointer;
      transition: var(--transition-fast);
    }
    #bzOpeningsContainer .bzOpening > a:hover .bzButtonApply {
      background: var(--white);
    }

    @media (max-width: 600px) {
      #bzOpeningsContainer .bzOpening > a { align-items: flex-start; }
      #bzOpeningsContainer .bzButtonApply { order: 4; margin-top: 0.75rem; }
    }