/* =========================================================================
   template-parts/sections/section-logo-cloud.php
   Moved out of the partial's inline <style id="es-logos-css"> on the owner's
   instruction, 10 Sep 2026. en_print_css() (inc/css-loader.php) prints this
   file's <link> where the <style> used to be, once per page, so every page
   that renders this section shares this one file.
   ========================================================================= */

/* Section clips its own decoration, so nothing can push the page
   sideways. Content sits above the background layer. */
.es-logos { position: relative; overflow: hidden; }
.es-logos > .es-container { position: relative; z-index: 1; }

/* ── Section background decoration ─────────────────────────
   Large, soft brand blobs hugging the left and right edges,
   concentric arcs in the bottom-left corner, and a dot-grid
   patch in the left gutter, echoing the reference. The rgba
   brand glow and the arc pattern follow the same convention
   the hero uses, since a token cannot carry the alpha. All of
   it is absolutely positioned inside a clipped section, so it
   is purely decorative and cannot push the page sideways. */
.es-logos__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(38% 42% at -3% 32%,  rgba(232, 93, 32, 0.20), transparent 72%),  /* left, mid   */
    radial-gradient(42% 48% at 103% 72%, rgba(232, 93, 32, 0.22), transparent 72%),  /* right, low  */
    radial-gradient(26% 30% at 101% 4%,  rgba(232, 93, 32, 0.14), transparent 72%),  /* right, top  */
    radial-gradient(26% 32% at -2% 99%,  rgba(232, 93, 32, 0.14), transparent 72%);  /* left, low   */
}

/* Dot-grid patch, left gutter. */
.es-logos__bg::before {
  content: "";
  position: absolute;
  top: 44%;
  left: 1.5%;
  width: 104px;
  height: 116px;
  background-image: radial-gradient(circle at center, var(--brand-400) 1.3px, transparent 1.5px);
  background-size: 22px 22px;
  opacity: 0.85;
}

/* Concentric arcs, bottom-left corner, faded out toward the middle. */
.es-logos__bg::after {
  content: "";
  position: absolute;
  left: -70px;
  bottom: -70px;
  width: 280px;
  height: 280px;
  background-image: repeating-radial-gradient(circle at 0% 100%, transparent 0 30px, rgba(232, 93, 32, 0.22) 30px 32px);
  -webkit-mask-image: radial-gradient(circle at 0% 100%, #000, transparent 70%);
  mask-image: radial-gradient(circle at 0% 100%, #000, transparent 70%);
  opacity: 0.9;
}

@media (max-width: 767px) {
  .es-logos__bg::before,
  .es-logos__bg::after { display: none; }
}

.es-logos__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--gap-fluid-sm);
  grid-template-columns: 1fr;
}

@media (min-width: 576px) {
  .es-logos__grid--2,
  .es-logos__grid--3,
  .es-logos__grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
  .es-logos__grid--3 { grid-template-columns: repeat(3, 1fr); }
  .es-logos__grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ── Marquee slider ────────────────────────────────────────
   Same idea as the homepage logo strip, rebuilt token-first so
   it survives the legacy stylesheet being dequeued. The logo
   set is rendered twice and the track translates exactly one
   set width (-50%), so the loop is seamless. It pauses on hover
   and on keyboard focus. The container clips the wide track, so
   it never adds page scroll. The edge mask fades the first and
   last logos the way the homepage strip does. */
.es-logos__marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}

.es-logos__track {
  display: flex;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: esLogosMarquee var(--es-marquee-dur, 46s) linear infinite;
}

.es-logos__marquee:hover .es-logos__track,
.es-logos__marquee:focus-within .es-logos__track { animation-play-state: paused; }

/* Gap sits on each card (including the last of each set) so the
   two sets tile exactly and -50% never drifts. */
.es-logos__track .es-logos__card {
  flex: 0 0 auto;
  width: clamp(190px, 20vw, 240px);
  margin-right: var(--gap-fluid-sm);
}

@keyframes esLogosMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Logo cell ─────────────────────────────────────────────
   Deliberately bare: no card frame, fill, shadow or corner
   decoration. The logos alone carry the section, so the wall
   reads as one calm texture and nothing competes with the
   brand marks. All the life is in the logo hover below. */
.es-logos__card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(72px, 8vw, 104px);
  padding: var(--space-4) var(--space-5);
}

/* ── Logo ──────────────────────────────────────────────────
   Greyscale + dimmed at rest, full colour on hover. */
.es-logos__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}

.es-logos__logo {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: clamp(34px, 4vw, 46px);
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.72;
  transition: filter var(--duration-normal) var(--ease-out),
              opacity var(--duration-normal) var(--ease-out),
              transform var(--duration-normal) var(--ease-out);
}

.es-logos__card:hover .es-logos__logo {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.04);
}

/* ── Trust note ────────────────────────────────────────────
   Centred pill under the grid. */
.es-logos__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: fit-content;
  max-width: 100%;
  margin: var(--gap-fluid-lg) auto 0;
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  background: var(--accent-subtle);
  color: var(--text-body);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-subhead);
  text-align: center;
}

.es-logos__note svg {
  flex-shrink: 0;
  color: var(--brand-500);
}

@media (prefers-reduced-motion: reduce) {
  .es-logos__logo { transition: none; }
  .es-logos__card:hover .es-logos__logo { transform: none; }

  /* No auto-scroll: the track wraps to a centred row and the
     duplicate set is dropped so nothing shows twice. */
  .es-logos__track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
    gap: var(--gap-fluid-sm);
  }
  .es-logos__track .es-logos__card { margin-right: 0; }
  .es-logos__card--dup { display: none; }
}