/* Squadra Brasil — Projetos de Trade / Field MKT */

.page-trade-projects {
  overflow-x: clip;
  overflow-y: visible;
  background: var(--paper);
}

.trade-projects-gallery {
  position: relative;
  overflow: hidden;
  color: #292a32;
  background: var(--paper);
}

.trade-projects-gallery__texture {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  background-image: url("../images/events/events-halftone.svg");
  background-position: center top;
  background-repeat: repeat;
  background-size: 100% auto;
  pointer-events: none;
}

.trade-projects-gallery__texture img {
  visibility: hidden;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.trade-projects-gallery__inner {
  position: relative;
  z-index: 2;
  width: min(1160px, calc(100% - 48px));
  padding: clamp(118px, 7vw, 142px) 0 clamp(115px, 7.4vw, 150px);
  margin-inline: auto;
}

.trade-projects-confetti {
  position: absolute;
  top: 34px;
  display: flex;
  width: 68px;
  height: 43px;
  gap: 7px;
  animation: trade-projects-confetti-float 5.8s ease-in-out infinite alternate;
}

.trade-projects-confetti--top-left { left: 9%; }
.trade-projects-confetti--top-right { right: 9%; animation-direction: alternate-reverse; }

.trade-projects-confetti__column {
  --confetti-color: var(--pink);
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  justify-content: space-between;
}

.trade-projects-confetti__column:nth-child(even) { translate: 0 28%; }
.trade-projects-confetti__column--pink { --confetti-color: var(--pink); }
.trade-projects-confetti__column--yellow { --confetti-color: #f3d915; }
.trade-projects-confetti__column--cyan { --confetti-color: var(--cyan); }
.trade-projects-confetti__column--purple { --confetti-color: #8f00ff; }

.trade-projects-confetti__column i {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--confetti-color);
  animation: trade-projects-dot-pulse 1.7s ease-in-out infinite both;
}

.trade-projects-confetti__column i:nth-child(2) { animation-delay: 110ms; }
.trade-projects-confetti__column i:nth-child(3) { animation-delay: 220ms; }
.trade-projects-confetti__column i:nth-child(4) { animation-delay: 330ms; }

.trade-project {
  position: relative;
  width: 100%;
  margin-bottom: clamp(102px, 7vw, 142px);
  margin-inline: auto;
}

.trade-project:last-child { margin-bottom: 0; }

.trade-project h2 {
  margin: 0 0 17px;
  font-size: clamp(1.02rem, 1.25vw, 1.45rem);
  font-weight: 400;
  line-height: 1.25;
  text-align: center;
}

.trade-project h2 strong { font-weight: 800; }

.trade-projects-list {
  display: grid;
  gap: clamp(88px, 7vw, 138px);
}

.trade-project--portfolio {
  width: min(1120px, 100%);
  margin-bottom: 0;
}

.trade-project--portfolio h2 {
  text-align: center;
}

.trade-project-slider { width: 100%; }
.trade-project-slider .events-project-slider__thumb img { height: 100%; aspect-ratio: auto; }

.trade-project--single-wide { width: min(860px, 100%); }
.trade-project--single-portrait { width: min(500px, 100%); }

.trade-project__media--single {
  margin: 0;
  cursor: zoom-in;
}

.trade-project__media--single img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.trade-project__mosaic {
  display: grid;
  min-width: 0;
}

.trade-project__media {
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background: #ececf1;
  border-radius: 15px;
  box-shadow: 0 15px 32px rgba(24, 24, 70, .09);
}

.trade-project__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--media-hover-duration) var(--media-hover-ease);
}

.trade-project__media[role="button"] { cursor: zoom-in; }
.trade-project__media[data-video-id]:not([data-video-id=""]) { cursor: pointer; }

.trade-project__media[role="button"]:focus-visible {
  outline: 4px solid var(--pink);
  outline-offset: 5px;
}

.trade-project__media figcaption {
  position: absolute;
  z-index: 2;
  top: 56%;
  right: 0;
  left: 0;
  padding: 13px 12px;
  color: var(--white);
  background: rgba(184, 34, 62, .8);
  font-size: clamp(.72rem, 1.1vw, 1rem);
  line-height: 1.1;
  text-align: center;
  translate: 0 -50%;
  pointer-events: none;
}

/* Preserve the supplied photo ratio; only the designed Frooty mosaic fills fixed cells. */
.trade-project__media--natural {
  aspect-ratio: auto;
}

.trade-project__media--natural img {
  display: block;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}

@media (hover: hover) and (pointer: fine) {
  .trade-project__media:hover img { transform: scale(var(--media-hover-scale)); }
}

.trade-project--layout-frooty { width: min(980px, 100%); }
.trade-project__mosaic--frooty {
  grid-template-columns: minmax(0, .4fr) minmax(0, .6fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  aspect-ratio: 1.65 / 1;
  gap: 18px 36px;
}
.trade-project__play {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: clamp(44px, 6vw, 68px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #e262a0cf;
  color: #fff;
  pointer-events: none;
  animation: trade-project-play-pulse 2.8s ease-in-out infinite;
}

.trade-project__play svg { display: block; width: 26px; height: 26px; fill: currentColor; }

@keyframes trade-project-play-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.06); }
}

.events-project-lightbox.is-video { width: min(90vw, calc(82vh * 9 / 16)); width: min(90vw, calc(82dvh * 9 / 16)); }
.events-project-lightbox [hidden] { display: none; }
.events-project-lightbox__video { aspect-ratio: 9 / 16; background: #000; border-radius: 12px; overflow: hidden; }
.events-project-lightbox__video iframe { display: block; width: 100%; height: 100%; border: 0; }

.trade-project__media--frooty-1 { grid-row: 1 / 3; }
.trade-project__media--frooty-1 img { object-position: center 58%; }
.trade-project__media--frooty-2 img { object-position: center; }
.trade-project__media--frooty-3 img { object-position: center; }

.trade-project--layout-overlap { width: min(960px, 100%); }
.trade-project__mosaic--overlap {
  position: relative;
  display: block;
  aspect-ratio: 2 / 1;
}
.trade-project__mosaic--overlap .trade-project__media { position: absolute; }
.trade-project__media--overlap-1,
.trade-project__media--overlap-3 {
  z-index: 2;
  top: 10%;
  width: 26%;
  height: 88%;
}
.trade-project__media--overlap-1 { left: 0; }
.trade-project__media--overlap-2 {
  z-index: 1;
  top: 0;
  left: 18%;
  width: 64%;
  height: 90%;
}
.trade-project__media--overlap-3 { right: 0; }

.trade-project--layout-triptych { width: min(1000px, 100%); }
.trade-project__mosaic--triptych {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.trade-project__mosaic--triptych .trade-project__media { aspect-ratio: .62 / 1; }

.trade-project--layout-duo { width: min(720px, 100%); }
.trade-project__mosaic--duo {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.trade-project__mosaic--duo .trade-project__media { aspect-ratio: .59 / 1; }

.trade-project--nauterra { width: min(840px, 100%); }
.trade-project__mosaic--nauterra {
  display: block;
  height: auto;
}
.trade-project__mosaic--nauterra .trade-project__media { aspect-ratio: auto; }

.trade-project__media--wide { aspect-ratio: 1.78 / 1; }
.trade-project__media--wide img { object-position: center; }
.trade-project__media--natural.trade-project__media--wide { aspect-ratio: auto; }


.trade-projects-vertical-dots {
  position: absolute;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, 9px);
  gap: 12px 10px;
  width: max-content;
  animation: trade-projects-confetti-float 6.4s ease-in-out infinite alternate;
}

.trade-projects-vertical-dots i {
  width: 9px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--pink);
  animation: trade-projects-dot-pulse 1.9s ease-in-out infinite both;
}

.trade-projects-vertical-dots i:nth-child(3n + 2) { animation-delay: 150ms; }
.trade-projects-vertical-dots i:nth-child(3n) { animation-delay: 300ms; }
.trade-projects-vertical-dots--left { top: 38%; left: -70px; }
.trade-projects-vertical-dots--right { top: 57%; right: -64px; }
.trade-projects-vertical-dots--right i { background: #8f00ff; }

@keyframes trade-projects-confetti-float {
  from { transform: translate3d(-4px, -4px, 0); }
  to { transform: translate3d(6px, 8px, 0); }
}

@keyframes trade-projects-dot-pulse {
  0%, 68%, 100% { opacity: .35; scale: .78; }
  30%, 44% { opacity: 1; scale: 1; }
}

@media (max-width: 900px) {
  .trade-projects-gallery__texture {
    background-image: url("../images/events/events-halftone-mobile.svg");
    background-size: 100% auto;
  }
  .trade-projects-gallery__inner { width: min(100% - 36px, 760px); }
  .trade-project__mosaic--frooty { height: auto; gap: 14px 24px; }
  .trade-project__mosaic--nauterra { height: auto; }
  .trade-projects-vertical-dots { display: none; }
}

@media (max-width: 620px) {
  .trade-projects-gallery__inner { padding-top: 96px; }
  .trade-projects-confetti { width: 48px; height: 34px; gap: 5px; }
  .trade-projects-confetti--top-left { left: 8%; }
  .trade-projects-confetti--top-right { right: 8%; }

  .trade-project { margin-bottom: 88px; }
  .trade-project:last-child { margin-bottom: 0; }
  .trade-project--portfolio { width: 100%; margin-bottom: 0; }
  .trade-projects-list { gap: 82px; }
  .trade-project h2 { margin-bottom: 13px; font-size: .98rem; }

  .trade-project__mosaic--frooty {
    grid-template-columns: minmax(0, .4fr) minmax(0, .6fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
    aspect-ratio: 1.65 / 1;
    gap: 8px 10px;
  }
  .trade-project__media--frooty-1 { grid-row: 1 / 3; aspect-ratio: auto; }

  .trade-project__mosaic--overlap { aspect-ratio: 2 / 1; }
  .trade-project__mosaic--triptych,
  .trade-project__mosaic--duo { gap: 8px; }
  .trade-project__media { border-radius: 10px; }
  .trade-project__media figcaption {
    padding: 7px 5px;
    font-size: clamp(.55rem, 2.35vw, .7rem);
  }

  .trade-project__mosaic--nauterra {
    grid-template-columns: 1fr;
    height: auto;
    gap: 16px;
  }
  .trade-project__mosaic--nauterra .trade-project__media,
  .trade-project__mosaic--nauterra .trade-project__media:first-child,
  .trade-project__mosaic--nauterra .trade-project__media:last-child {
    aspect-ratio: auto;
    border-radius: 15px;
  }

  .trade-project__media--wide { aspect-ratio: 1.3 / 1; }
  .trade-project__media--natural.trade-project__media--wide { aspect-ratio: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .trade-project__play,
  .trade-projects-confetti,
  .trade-projects-confetti__column i,
  .trade-projects-vertical-dots,
  .trade-projects-vertical-dots i { animation: none; }

  .trade-project__media img { transition: none; }
  .trade-project__media:hover img { transform: none !important; }
}