/* GREMAB — styles for the "2" section patterns (aliados-representaciones2,
 * carousel-empresas2, banner-quienes-somos2).
 * Only classes used by those patterns live here, so existing pages built with the
 * original patterns (styled by carousel.css) are never affected.
 */

/* ── Carousel speed for 40 large logos: ~1 logo per second (lower = faster) ── */
.animate-scroll-right-medium {
  display: flex !important;
  width: max-content !important;
  animation: scroll-right 90s linear infinite;
}

.animate-scroll-right-medium:hover {
  animation-play-state: paused;
}

/* The carousel container uses WordPress's "constrained" layout, which caps every child at the
   content width (1280px). The looping track must be as wide as all its logos, or the animation
   only slides a few logos and jumps back. */
.carousel-container > .js-carousel-loop {
  max-width: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .js-carousel-loop {
    animation: none !important;
    flex-wrap: wrap !important;
    width: auto !important;
    justify-content: center;
    row-gap: 16px;
  }
}

/* ── Logo card, original size, always in full color ── */
.gremab-logo-card-v1-color {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffffff !important;
  height: 90px !important;
  width: 200px !important;
  min-width: 200px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(194, 199, 206, 0.4) !important;
  padding: 10px 16px !important;
  filter: none !important;
  transition: all 0.3s ease;
  flex-shrink: 0 !important;
  margin-right: 24px !important;
}

.gremab-logo-card-v1-color:hover {
  border-color: #012a44 !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(1, 42, 68, 0.08);
}

/* ── Logo card, larger, always in full color ── */
.gremab-logo-card-v2 {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffffff !important;
  height: 110px !important;
  width: 240px !important;
  min-width: 240px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(194, 199, 206, 0.4) !important;
  padding: 12px 20px !important;
  filter: none !important;
  transition: all 0.3s ease;
  flex-shrink: 0 !important;
  margin-right: 24px !important;
}

.gremab-logo-card-v2:hover {
  border-color: #012a44 !important;
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(1, 42, 68, 0.1);
}

.gremab-logo-card-v1-color .wp-block-image,
.gremab-logo-card-v2 .wp-block-image {
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.gremab-logo-card-v1-color img,
.gremab-logo-card-v2 img {
  max-width: 100% !important;
  object-fit: contain !important;
  margin: 0 auto !important;
  filter: none !important;
}

.gremab-logo-card-v1-color img {
  max-height: 50px !important;
}

.gremab-logo-card-v2 img {
  max-height: 75px !important;
}

/* Logos copied from the original carousel carry .gremab-logo-placeholder, which paints a
   gray box behind the logo. In the new cards, keep only the white card. */
.gremab-logo-card-v1-color .gremab-logo-placeholder,
.gremab-logo-card-v2 .gremab-logo-placeholder {
  background: none !important;
  border-radius: 0 !important;
}

/* Optional: add the CSS class "logo-grande" to a logo's image block (Advanced → Additional CSS class)
   to show that logo larger inside its card. */
.gremab-logo-card-v1-color .logo-grande img,
.gremab-logo-card-v2 .logo-grande img {
  transform: scale(1.3);
}

/* ── Banner Quiénes Somos 2: yellow block on the left fading into a photo on the right ── */
.gremab-gold-fade-cover {
  background-color: #fdae03 !important;
}

.gremab-gold-fade-cover .wp-block-cover__image-background {
  width: 60% !important;
  left: auto !important;
  right: 0 !important;
  object-position: center !important;
}

.gremab-gold-fade-cover .wp-block-cover__background {
  background: linear-gradient(90deg, #fdae03 0%, #fdae03 42%, rgba(253, 174, 3, 0.85) 52%, rgba(253, 174, 3, 0) 72%) !important;
  opacity: 1 !important;
}

.gremab-gold-fade-cover .wp-block-cover__inner-container {
  width: 100%;
}

@media (max-width: 768px) {
  .gremab-gold-fade-cover .wp-block-cover__image-background {
    width: 100% !important;
  }
  .gremab-gold-fade-cover .wp-block-cover__background {
    background: rgba(253, 174, 3, 0.9) !important;
  }
}

/* ── Editor: show the looping carousels as an editable grid instead of an animation ── */
.editor-styles-wrapper .js-carousel-loop {
  animation: none !important;
  flex-wrap: wrap !important;
  width: auto !important;
  row-gap: 16px;
  justify-content: center;
}

.editor-styles-wrapper .carousel-container:has(.js-carousel-loop) {
  -webkit-mask-image: none;
  mask-image: none;
}