/* ─────────────────────────────
   HOME-BRANDS.CSS — Lo Castro homepage brands marquee
   wp-content/themes/twentytwentyfive-child/styles/home-brands.css
   ───────────────────────────── */

/* Scoped with :has() to ONLY the entry-content that actually contains
   the brands marquee — this file now loads site-wide (see
   functions.php), and an unscoped .entry-content.is-layout-constrained
   rule here would strip max-width/margins from every other page's
   content too, not just pages using [lc_home_brands]. */
.entry-content.is-layout-constrained:has(.lc-home-brands) {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* WordPress's global block-spacing style also injects max-width and
   margin-block-start on every direct child of .is-layout-constrained
   (all via low-specificity :where() selectors, easily overridden
   here) — neutralize both, or the first section gets squeezed width
   and an unwanted gap under the header. Same :has() scoping as above. */
.entry-content.is-layout-constrained:has(.lc-home-brands) > * {
  max-width: none !important;
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

.lc-home-brands {
  background: var(--lc-bg);
}

.lc-home-brands-title {
  margin: 0 0 16px;
  text-align: center;
  margin-top: 3rem;

}

.lc-home-brands-desc {
  margin: 0;
  text-align:center;
}

.lc-home-brands-marquee {
  margin-top: 32px;
  display: grid;
  gap: 26px;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
}

.lc-home-brands-row {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.lc-home-brands-track {
  display: flex;
  width: max-content;
  white-space: nowrap;
}

.lc-home-brands-track-left {
  animation: lc-home-brands-marquee-left 26s linear infinite;
}

.lc-home-brands-track-right {
  animation: lc-home-brands-marquee-right 30s linear infinite;
}

@keyframes lc-home-brands-marquee-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes lc-home-brands-marquee-right {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .lc-home-brands-track-left,
  .lc-home-brands-track-right {
    animation: none;
    transform: translateX(0);
  }
}

.lc-home-brands-cell {
  width: 220px;
  height: 120px;
  display: grid;
  place-items: center;
  padding: 18px 22px;
  box-sizing: border-box;
  opacity: 0.86;
  transition: opacity 220ms ease, transform 220ms ease;
  outline: none;
  border-radius: 2px;
}

.lc-home-brands-cell:focus-visible {
  opacity: 1;
  outline: 1px solid var(--lc-border-strong);
  outline-offset: 3px;
}

.lc-home-brands-cell:hover {
  opacity: 1;
  transform: translateY(-3px);
}

.lc-home-brands-cell img {
  max-width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 900px) { /* System breakpoint: mobile */
  .lc-home-brands-cell {
    width: 190px;
    height: 110px;
  }
}

/* ─────────────────────────────
   MOBILE — static wrapped grid instead of the auto-scrolling
   marquee. Only 2-3 logos are visible at once on a narrow screen, so
   the marquee's fixed-duration animation (fine on desktop, where
   several logos are visible at a glance) turns into something the
   person has to sit and wait through, with no touch equivalent of
   "hover to pause." The grid below shows every logo at once and
   scrolls with the rest of the page instead.

   .lc-home-brands-grid-mobile is hidden by default (desktop) right
   above this block's own media query, and only THIS query turns it
   on — so a screen between 561px and 899px still gets the (shrunk)
   marquee, matching the existing 900px cell-size breakpoint above.
   ───────────────────────────── */

.lc-home-brands-grid-mobile {
  display: none;
}

@media (max-width: 560px) {
  .lc-home-brands-title {
    margin-top: 2rem;
  }

  .lc-home-brands-desc {
    padding: 0 24px;
  }

  .lc-home-brands-marquee {
    display: none;
  }

  .lc-home-brands-grid-mobile {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin-top: 20px;
    padding: 0 12px;
  }

  .lc-home-brands-grid-mobile .lc-home-brands-cell {
    width: auto;
    height: auto;
    aspect-ratio: 3 / 2;
    padding: 10px 12px;
  }
}