/**
 * Public styles: the brand card, the slider that carries it, and the static
 * grid used when there are too few brands to scroll.
 */

/* ---------- Card: shared by the slider and the grid ---------- */

.top-brand-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 318px;
  width: auto;
  border-radius: 10px;
  overflow: hidden;
  padding: 35px 20px;
  /* Shows through a transparent or missing cover. */
  background-color: #130726;
  text-decoration: none;
}

.top-brand-card__cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The overlay is the last child, so it would paint over the content too — the
   z-index on the logo and body lifts them back out. */
.top-brand-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(19, 7, 38, 0.5);
  transition: background-color 0.2s ease-in-out;
}

.top-brand-card:hover::after,
.top-brand-card:focus-visible::after {
  background-color: rgba(19, 7, 38, 0);
}

.top-brand-card__logo {
  align-self: center;
  object-fit: contain;
  z-index: 1;
  max-height: 85px;
  max-width: 100%;
}

/* Anchored to the bottom, so a long title or a third industry grows upward and
   the 35px bottom inset holds. */
.top-brand-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 1;
}

/* Scoped under the block rather than left as bare single-class selectors: the
   title is an h3, and theme heading rules like `.entry-content h3` would
   otherwise outrank it. */
.top-brand-card .top-brand-card__industry,
.top-brand-card .top-brand-card__title {
  margin: 0;
  color: #fff;
}

/* No font-family: the theme's face is inherited. Sizes stay fixed because the
   card only ever ranges ~282-360px wide. */
.top-brand-card .top-brand-card__industry {
  font-size: 16px;
  font-weight: 300;
  line-height: 22px;
}

.top-brand-card .top-brand-card__title {
  font-size: 20px;
  font-weight: 700;
  line-height: normal;
}

/* ---------- Slider ---------- */

.top-brand-slider {
  position: relative;
}

/* Swiper sets height:100% on slides; let the card's aspect-ratio decide. */
.top-brand-slider .swiper-slide {
  height: auto;
}

.top-brand-slider__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 37px;
  height: 37px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.top-brand-slider__nav svg {
  display: block;
}

.top-brand-slider__nav--prev svg {
  transform: rotate(180deg);
}

/* Narrow viewports have no gutter to sit in, so the arrows overlay the outer
   cards. */
.top-brand-slider__nav--prev {
  left: 8px;
}

.top-brand-slider__nav--next {
  right: 8px;
}

/* A 1200px track plus 2 x (37 + 16) needs 1306px, so from ~1320 the design's
   outside placement fits. calc(100% + 16px) measures off the track, not the
   viewport. */
@media (min-width: 1320px) {
  .top-brand-slider__nav--prev {
    left: auto;
    right: calc(100% + 16px);
  }

  .top-brand-slider__nav--next {
    right: auto;
    left: calc(100% + 16px);
  }
}

/* Swiper sets button.disabled at the ends — a native state, no vendor class
   needed. */
.top-brand-slider__nav:disabled {
  opacity: 0.35;
  cursor: default;
}

.top-brand-slider__nav:focus-visible {
  outline: 2px solid #b292ef;
  outline-offset: 2px;
}

/* Swiper adds .swiper-button-lock when every slide already fits. The vendor rule
   is a standalone single-class selector, so two classes here win whichever
   stylesheet loads first. */
.top-brand-slider__nav.swiper-button-lock {
  display: none;
}

/* ---------- Grid: fewer than five brands, no Swiper ---------- */

/* Fixed tracks rather than auto-fit: with two brands, auto-fit collapses the
   empty tracks and blows each card up to half the row. */
.top-brand-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 640px) {
  .top-brand-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

@media (min-width: 1024px) {
  .top-brand-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1280px) {
  .top-brand-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---------- Archive pagination ---------- */

/* The design has no pagination, but it does have a link treatment: the industry
   submenu uses 16px bold with a 2px underline, #ff6326 for links and #b292ef
   for the active item. Reused here rather than inventing a new one. */
.top-brand-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 40px;
}

.top-brand-pagination .page-numbers {
  padding-bottom: 1px;
  border-bottom: 2px solid currentColor;
  color: #ff6326;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
  text-decoration: none;
}

.top-brand-pagination .page-numbers.current {
  color: #b292ef;
}

/* The ellipsis is not a link. */
.top-brand-pagination .page-numbers.dots {
  border-bottom-color: transparent;
}

.top-brand-pagination .page-numbers:focus-visible {
  outline: 2px solid #b292ef;
  outline-offset: 2px;
}

.top-brand-empty {
  margin: 0;
  color: #fff;
  font-size: 16px;
  line-height: 22px;
}

/* ---------- Archive filters ---------- */

/* The design draws the button and every dropdown row with the same component:
   16px bold #ff6326 over a 2px underline, #b292ef for the current selection. */

.top-brand-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}

.top-brand-filter__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #ff6326;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
  cursor: pointer;
}

/* The underline belongs to the text, not the button, so it stops before the
   chevron — as drawn. */
.top-brand-filter__value,
.top-brand-filter__option {
  padding-bottom: 1px;
  border-bottom: 2px solid currentColor;
}

/* Visually hidden. Defined here rather than borrowing a theme's
   .screen-reader-text, which may not exist. */
.top-brand-filter__name {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.top-brand-filter__chevron {
  display: block;
  transition: transform 0.15s ease;
}

/* :has() reaches backwards from the open menu to the button before it, so the
   chevron costs no JavaScript. */
.top-brand-filter:has(.top-brand-filter__menu:popover-open)
  .top-brand-filter__chevron {
  transform: rotate(180deg);
}

.top-brand-filter__toggle:focus-visible {
  outline: 2px solid #b292ef;
  outline-offset: 2px;
}

/* The menu renders in the top layer, so no overflow:hidden ancestor can clip
   it. flex-direction and gap sit on the base rule — inert while display:none —
   so only display has to wait for :popover-open. */
.top-brand-filter__menu {
  inset: auto; /* the UA sets inset:0; the bundle supplies top and left */
  margin: 0;
  padding: 24px 0px;
  border: 0;
  border-radius: 10px;
  background-color: #130726;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  max-width: min(320px, calc(100vw - 32px));
  max-height: min(60vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.top-brand-filter__menu:popover-open {
  display: flex;
}

.top-brand-filter__option {
  color: #ff6326;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease-in-out;
}

.top-brand-filter__option.is-current,
.top-brand-filter__option:hover {
  color: #b292ef;
}

.top-brand-filter__option:focus-visible {
  outline: 2px solid #b292ef;
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .top-brand-filter__menu {
    padding: 24px;
    gap: 16px;
  }
}

/* ---------- Logo marquee ---------- */

/* Fixed logo height, natural width, adaptive across resolutions. clamp() rather
   than breakpoints: the vw terms reach the design's 96px band and 50.7px gap at
   its own 1440px page width, and everything below scales down from there. */
.top-brand-marquee {
  --top-brand-marquee-height: clamp(48px, 6.67vw, 96px);
  --top-brand-marquee-gap: clamp(24px, 3.5vw, 50px);
  overflow: hidden;
}

/* Scoped under the block rather than left as bare single-class selectors: this
   is a ul of li of img, and theme rules like `.entry-content ul` or
   `.entry-content img` would otherwise outrank the resets below and put back a
   list indent, an li margin, or `max-width: 100%`. */
.top-brand-marquee .top-brand-marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: top-brand-marquee-scroll var(--top-brand-marquee-duration, 60s)
    linear infinite;
}

/* Holding the row still is the only interaction it offers — a logo is only
   readable once it stops moving. */
.top-brand-marquee:hover .top-brand-marquee__track {
  animation-play-state: paused;
}

/* Half the gap as padding on every item, rather than `gap` on the track: with
   gap the track measures 2 x list + 1 gap, so -50% would stop half a gap short
   and the seam would stutter once per loop. */
.top-brand-marquee .top-brand-marquee__item {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  height: var(--top-brand-marquee-height);
  margin: 0;
  padding-inline: calc(var(--top-brand-marquee-gap) / 2);
}

/* Every logo the same height, width left to its own aspect ratio.
   ponytail: no max-width — a tightly cropped wordmark (the design has one at
   325x38) turns into a very wide item at full height. Cap with a max-width if a
   real logo blows the row out. */
.top-brand-marquee .top-brand-marquee__logo {
  width: auto;
  height: var(--top-brand-marquee-height);
  max-width: none;
}

/* The track is exactly two identical halves, so -50% lands the copy where the
   original started and the loop has no seam. */
@keyframes top-brand-marquee-scroll {
  to {
    transform: translateX(-50%);
  }
}

/* Drop the duplicate rather than leave every logo on screen twice, and hand the
   row back to the user as a scroller so nothing is unreachable. */
@media (prefers-reduced-motion: reduce) {
  .top-brand-marquee {
    overflow-x: auto;
  }

  .top-brand-marquee .top-brand-marquee__track {
    animation: none;
  }

  .top-brand-marquee .top-brand-marquee__item--clone {
    display: none;
  }
}

/* ---------- Cards grid and its modal ---------- */

/* The container, not the viewport, drives the column ramp below, so the grid
   adapts to whatever Oxygen column it is dropped into. No background of its
   own: the section behind it owns the dark canvas the tiles are designed for. */
.top-brand-cards {
  container-type: inline-size;
  color: #fff;
}

.top-brand-cards__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.1vw, 14px);
  padding-top: clamp(22px, 2.6vw, 34px);
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

@container (min-width: 430px) {
  .top-brand-cards__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container (min-width: 660px) {
  .top-brand-cards__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@container (min-width: 900px) {
  .top-brand-cards__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* A button, so the reset matters: keep the UA's font and centering out, and
   let the tile inherit the section's white text. */
.top-brand-tile {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.18s,
    background-color 0.18s;
}

.top-brand-tile:hover,
.top-brand-tile:focus-visible {
  border-color: rgba(255, 99, 38, 0.6);
}

/* The white plate a logo sits on. Shared with the modal's smaller copy. */
.top-brand-tile__plate,
.top-brand-modal__plate {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.top-brand-tile__plate {
  height: clamp(84px, 8vw, 140px);
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.top-brand-cards--plate-dark .top-brand-tile__plate,
.top-brand-cards--plate-dark .top-brand-modal__plate {
  background-color: #12061f;
}

.top-brand-tile__logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Height leads, width follows the logo's own ratio and the plate wraps it.
   min-width lets an extra-wide wordmark flex-shrink once the plate hits the
   panel's edge; contain keeps its ratio inside the squeezed box. */
.top-brand-modal__logo {
  height: clamp(52px, 6vw, 164px);
  width: auto;
  min-width: 0;
  object-fit: contain;
}

.top-brand-tile__initials,
.top-brand-modal__initials {
  padding: 3px 7px;
  border: 1px dashed rgba(23, 8, 38, 0.28);
  border-radius: 4px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(23, 8, 38, 0.55);
}

.top-brand-cards--plate-dark .top-brand-tile__initials,
.top-brand-cards--plate-dark .top-brand-modal__initials {
  border-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.6);
}

.top-brand-tile__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  flex: 1 1 auto;
  text-align: center;
  padding: clamp(13px, 1.3vw, 17px) clamp(14px, 1.4vw, 18px)
    clamp(15px, 1.5vw, 19px);
}

.top-brand-tile__name {
  font-size: clamp(15px, 1.15vw, 17.5px);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  text-wrap: balance;
  width: 100%;
}

.top-brand-tile__industry {
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.66);
}

/* The shell ships hidden and empty; cards.ts fills it from the clicked tile's
   data-* attributes and drives the fade with is-open. The [hidden] rules exist
   because the display properties here would otherwise override the attribute. */
.top-brand-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(11, 3, 20, 0.82);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.top-brand-modal[hidden] {
  display: none;
}

.top-brand-modal.is-open {
  opacity: 1;
}

.top-brand-modal__panel {
  position: relative;
  width: min(660px, 100%);
  max-height: 88vh;
  overflow: auto;
  padding: clamp(22px, 3vw, 40px);
  border: 1px solid rgba(255, 99, 38, 0.42);
  border-radius: 10px;
  background: #1f0b33;
  transform: translateY(10px);
  transition: transform 0.2s ease;
}

.top-brand-modal.is-open .top-brand-modal__panel {
  transform: translateY(0);
}

.top-brand-modal__close {
  position: absolute;
  top: clamp(14px, 1.6vw, 20px);
  right: clamp(14px, 1.6vw, 20px);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  font-family: ui-monospace, "IBM Plex Mono", monospace;
  font-size: 15px;
  line-height: 0;
  cursor: pointer;
  transition:
    background-color 0.18s,
    border-color 0.18s,
    color 0.18s;
}

.top-brand-modal__close:hover,
.top-brand-modal__close:focus-visible {
  background-color: #ff6326;
  border-color: #ff6326;
  color: #170826;
}

/* No dimensions of its own: inline-flex shrink-wraps whatever it holds — the
   logo (whose height rule above dictates the size) or the initials chip. */
.top-brand-modal__plate {
  display: inline-flex;
  max-width: 100%;
  padding: 8px 10px;
  border-radius: 6px;
}

/* The site selector carries the block prefix: the display rule below is
   `.top-brand-modal .top-brand-modal__site`, which would otherwise tie this
   specificity and win on source order, leaving the previous brand's link up. */
.top-brand-modal__logo[hidden],
.top-brand-modal__industry-row[hidden],
.top-brand-modal .top-brand-modal__site[hidden] {
  display: none;
}

/* Scoped under the block rather than left as bare single-class selectors: the
   title is an h3, and theme heading rules like `.entry-content h3` would
   otherwise outrank it. */
.top-brand-modal .top-brand-modal__title {
  margin: clamp(18px, 2vw, 26px) 0 0;
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: #fff;
  text-wrap: balance;
}

.top-brand-modal .top-brand-modal__desc {
  margin: 14px 0 0;
  font-size: clamp(14px, 1.15vw, 16.5px);
  line-height: 1.68;
  color: rgba(255, 255, 255, 0.84);
  text-wrap: pretty;
}

.top-brand-modal__industry-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: clamp(20px, 2.2vw, 28px);
  padding-top: clamp(18px, 2vw, 24px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.top-brand-modal__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9a7be8;
}

.top-brand-modal__industry {
  font-size: 14.5px;
  font-weight: 600;
  color: #fff;
}

.top-brand-modal .top-brand-modal__site {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 22px;
  padding: 12px 22px;
  border: 1px solid #ff6326;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #ff6326;
  text-decoration: none;
  transition:
    background-color 0.18s,
    color 0.18s;
}

.top-brand-modal .top-brand-modal__site:hover,
.top-brand-modal .top-brand-modal__site:focus-visible {
  background-color: #ff6326;
  color: #170826;
}

.top-brand-modal__site-arrow {
  font-size: 11px;
}

/* Added and removed by cards.ts while the modal is open. */
body.top-brand-modal-lock {
  overflow: hidden;
}

/* The fade and rise are decorative; the close still works because cards.ts
   hides on a timeout, not on transitionend. */
@media (prefers-reduced-motion: reduce) {
  .top-brand-modal,
  .top-brand-modal__panel {
    transition: none;
  }

  .top-brand-modal__panel {
    transform: none;
  }
}