/* --------------------------------------------------------------------------
   Company Facts — page layer

   Loaded via $pageStyles in company-facts.php, same as css/about.css and
   css/industries.css. Everything the page could take from the global layer it
   does take: .gs-split-hero, .gs-stat-strip, .gs-cat-filter, .gs-award-grid,
   .gs-card, .gs-logo-strip and the theme utilities all come from gensales.css
   untouched. What is left here is the one shape the site did not already have —
   a label/value reference list — plus the small amount of trim the new blocks
   need. Colours are the existing custom properties; no new tokens.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Banner

   The photograph and the left-to-right navy scrim both come from the shared
   .gs-split-hero / .layer-overlay pair in gensales.css. Only two things are
   page-specific: where the ridge line sits in frame, and the deepened bottom
   edge the overlapping figures card needs.
   -------------------------------------------------------------------------- */

/* The horizon sits high in the source frame, so centring it crops the ridge out
   on a short viewport. 38% keeps the skyline in the band the copy sits against. */
.cf-hero {
  background-position: center 38%;
}

/* Deepens the bottom edge, where .gs-stat-strip overlaps the banner by -64px:
   without it the ice-coloured card butts into a mid-tone photograph and reads as
   a crop rather than as a card in front of it.

   Paints over the shared scrim rather than under it — the theme puts
   .layer-overlay:before at z-index -1, and ::after at the same level comes
   second in paint order. */
.cf-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 45%;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(35, 42, 53, 0) 0%, rgba(35, 42, 53, 0.6) 100%);
  pointer-events: none;
}

/* Banner aside: the three facts that pin down which company this is, for a
   reader who only reads the banner. Hidden below 992px (hidden-xs hidden-sm in
   the markup), where the lead paragraph carries the same ground.

   Sits at the lighter end of the scrim (0.55 alpha there, against 0.94 behind
   the headline) with the photograph showing through, so it carries its own
   ground rather than relying on the scrim for contrast. */
.cf-hero-id {
  list-style: none;
  margin: 6px 0 0;
  padding: 20px 24px;
  background: rgba(35, 42, 53, 0.58);
  border-left: 3px solid var(--gensales-orange);
  border-radius: 4px;
}

.cf-hero-id li {
  color: #fff;
  font-size: 15px;
  line-height: 1.5;
  padding: 7px 0;
}

.cf-hero-id li + li {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.cf-hero-id span {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--gensales-orange);
  margin-bottom: 2px;
}

/* --------------------------------------------------------------------------
   Jump nav
   -------------------------------------------------------------------------- */

/* Slim rule-bounded band. Deliberately not sticky: the fixed menuzord nav is
   already overhead, and a second sticky bar under it eats a third of a phone
   screen. */
.cf-jump {
  padding: 22px 0;
  border-bottom: 1px solid var(--gensales-line);
}

/* The global pill is 8px/13px, which lands around 33px tall — under the 44px
   tap target these need as the page's primary navigation on a phone. */
.cf-jump .gs-cat-filter a {
  padding: 13px 20px;
  line-height: 1.3;
}

@media (max-width: 767px) {
  .cf-jump {
    padding: 18px 0;
  }

  /* Left-aligned and scrollable rather than centre-wrapped: five pills centred
     on a 375px screen wrap into a ragged three-line block. */
  .cf-jump .gs-cat-filter {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }

  .cf-jump .gs-cat-filter > li {
    flex: 0 0 auto;
  }
}

/* --------------------------------------------------------------------------
   The facts — four grouped definition lists
   -------------------------------------------------------------------------- */

/* Same shape as .gs-card-row in gensales.css, including the negative bottom
   margin that absorbs the last visual row's cell spacing — otherwise that 30px
   lands on top of the section's own padding and reads as a void. */
.cf-fact-groups {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: -30px;
}

/* Equal-height columns so two groups sitting side by side line their rules up
   rather than each ending wherever its copy happens to stop. */
.cf-fact-col {
  display: flex;
  margin-bottom: 30px;
}

.cf-fact-group {
  flex: 1 1 auto;
  background: var(--gensales-cream);
  border: 1px solid var(--gensales-line);
  border-radius: 8px;
  padding: 28px 30px 22px;
}

.cf-fact-group-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gensales-line);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--gensales-black);
}

.cf-fact-group-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--gensales-ice);
  color: var(--gensales-primary);
  font-size: 15px;
}

/* The reference list itself. Two columns from 768px — a narrow label rail and
   the detail beside it, which is what makes the page scannable for one fact —
   and plain stacked pairs below that, where a 130px rail would leave the detail
   column too narrow to read. */
.cf-facts {
  margin: 0;
}

.cf-facts dt {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--gensales-primary);
  line-height: 1.45;
}

.cf-facts dd {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--gensales-charcoal);
}

.cf-facts dd strong {
  color: var(--gensales-black);
}

@media (max-width: 767px) {
  .cf-facts dt {
    margin-bottom: 3px;
  }

  .cf-facts dd + dt {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--gensales-line);
  }
}

@media (min-width: 768px) {
  /* No column-gap: the row rule below has to run unbroken across both columns,
     and a gap would cut it in two. The label's breathing room comes from its own
     padding-right instead. */
  .cf-facts {
    display: grid;
    grid-template-columns: 152px minmax(0, 1fr);
  }

  .cf-facts dt {
    padding-top: 2px;
    padding-right: 20px;
  }

  /* Rule between pairs rather than around them: eleven boxed rows would turn a
     reference list into a stack of cards. The :nth-child pair is the second
     row onward — dt/dd come in twos, so items 3 and 4 start pair two. */
  .cf-facts dt:nth-child(n + 3),
  .cf-facts dd:nth-child(n + 3) {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--gensales-line);
  }
}

/* --------------------------------------------------------------------------
   Awards — the verification panel and the platform strip
   -------------------------------------------------------------------------- */

.cf-verify {
  margin-top: 44px;
  padding: 24px 28px;
  background: var(--gensales-white);
  border: 1px solid var(--gensales-line);
  border-left: 3px solid var(--gensales-primary);
  border-radius: 6px;
}

.cf-verify-title {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gensales-primary);
}

.cf-verify-title .fa {
  margin-right: 7px;
}

.cf-verify ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cf-verify li {
  position: relative;
  padding-left: 18px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--gensales-charcoal);
}

.cf-verify li + li {
  margin-top: 9px;
}

.cf-verify li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gensales-line-strong);
}

.cf-platforms {
  margin-top: 44px;
  padding-top: 34px;
  border-top: 1px solid var(--gensales-line);
}

@media (max-width: 767px) {
  .cf-verify {
    margin-top: 32px;
    padding: 20px 20px;
  }

  .cf-platforms {
    margin-top: 32px;
    padding-top: 26px;
  }
}

/* --------------------------------------------------------------------------
   Third-party coverage cards
   -------------------------------------------------------------------------- */

.cf-coverage-source {
  margin: 0 0 4px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gensales-primary);
}

.cf-coverage-title {
  margin: 0 0 12px;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--gensales-black);
}

/* What kind of publication this is. Sits apart from the description because a
   commercial roundup and an editorial feature are not the same sort of
   citation, and a facts page should not let the two read alike. */
.cf-coverage-nature {
  font-size: 13px;
  font-style: italic;
  color: #6b7681;
}

/* Pushed to the bottom so two cards of unequal copy still line their links up
   (.gs-card is already a column flexbox). */
.cf-coverage-cta {
  margin: auto 0 0;
  padding-top: 14px;
  font-weight: 600;
}

.cf-coverage-cta .fa {
  margin-left: 6px;
  font-size: 12px;
}

/* --------------------------------------------------------------------------
   Official profiles
   -------------------------------------------------------------------------- */

.cf-profiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

/* The whole tile is the link, so the tap target is the tile rather than the
   few words inside it. */
.cf-profiles a {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
  min-height: 72px;
  padding: 16px 18px;
  background: var(--gensales-white);
  border: 1px solid var(--gensales-line);
  border-radius: 8px;
  color: var(--gensales-black);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.cf-profiles a:hover,
.cf-profiles a:focus {
  border-color: var(--gensales-primary);
  box-shadow: 0 6px 16px rgba(31, 36, 39, 0.08);
  transform: translateY(-2px);
  text-decoration: none;
}

.cf-profile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gensales-ice);
  color: var(--gensales-primary);
  font-size: 16px;
}

.cf-profile-text {
  flex: 1 1 auto;
  min-width: 0;
}

.cf-profile-label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.cf-profile-note {
  display: block;
  font-size: 12.5px;
  line-height: 1.4;
  color: #6b7681;
}

.cf-profile-out {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--gensales-line-strong);
}

.cf-profiles a:hover .cf-profile-out,
.cf-profiles a:focus .cf-profile-out {
  color: var(--gensales-primary);
}

@media (max-width: 991px) {
  .cf-profiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .cf-profiles {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Company identity
   -------------------------------------------------------------------------- */

.cf-identity-title {
  margin: 0 0 12px;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--gensales-black);
}

/* The disambiguation panel is the one place on the page where a reader may be
   about to get the company wrong, so it carries a warning accent rather than
   reading as another neutral card. */
.cf-identity-warn {
  border-left: 3px solid var(--gensales-orange-dark);
}

.cf-identity-warn .gs-card-icon {
  background: rgba(242, 201, 76, 0.18);
  color: #9a7a14;
}

.cf-questions {
  margin: 10px 0 0;
  text-align: center;
  font-size: 15px;
  color: var(--gensales-charcoal);
}

/* Respect a reduced-motion preference for the one transform on this page. */
@media (prefers-reduced-motion: reduce) {
  .cf-profiles a {
    transition: none;
  }

  .cf-profiles a:hover,
  .cf-profiles a:focus {
    transform: none;
  }
}