/* ExpandCards — acordeão de 3 cartões (hover no desktop, toque no mobile) */
.xcards { display: flex; flex-direction: column; gap: var(--Content-Gap-5); overflow: hidden; }
.xcard {
  position: relative; overflow: hidden; border-radius: 16px;
  height: 120px; transition: height .5s ease, flex .5s ease;
  cursor: pointer; background: #e6e6e6;
  -webkit-tap-highlight-color: transparent;
}
.xcard.is-selected { height: 320px; cursor: default; }
.xcard__media { position: absolute; top: 0; bottom: 0; left: 50%; width: 672px; transform: translateX(-50%); }
.xcard__media > img, .xcard__media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
@media (min-width: 1025px) { .xcard__media > img, .xcard__media > video { object-position: center center; } }
.xcard__media > video { opacity: 0; transition: opacity .4s; }
.xcard.is-selected .xcard__media > video.is-ready { opacity: 1; }
.xcard__label {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
  padding: 24px 32px;
  background: linear-gradient(0deg, rgba(0,0,0,.6) 0%, transparent 100%);
  font-size: var(--Title-4-Size); line-height: var(--Title-4-Line-Height); font-weight: 700;
  color: var(--ink-on-dark); text-align: start;
}
.xcard__btn { position: absolute; inset: 0; z-index: 2; width: 100%; }
@media (min-width: 1025px) {
  .xcards { flex-direction: row; gap: var(--Gutter-Gap-1); height: 440px; }
  .xcard, .xcard.is-selected { height: auto; flex: 1 1 0%; min-width: 0; }
  .xcard.is-selected { flex: 2 1 0%; }
  .xcard__media { left: 0; width: 100%; transform: none; }
}
@media (min-width: 1440px) { .xcards { height: 520px; } }

/* MediaGallery — slide principal + miniaturas verticais (desktop) / carrossel com paginação (mobile) */
.gallery { position: relative; overflow: hidden; }
.gallery__viewport {
  display: flex; gap: 24px; padding: 0 24px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  scroll-padding: 0 24px;
}
.gallery__viewport::-webkit-scrollbar { display: none; }
.gallery__slide {
  position: relative; flex: 0 0 292px; height: 420px; margin: 0;
  scroll-snap-align: start; overflow: hidden; border-radius: 16px;
}
@media (min-width: 768px) { .gallery__slide { flex-basis: 320px; } }
.gallery__slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gallery__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: var(--Content-Gap-7);
  background: linear-gradient(0deg, rgba(0,0,0,.7) 0%, transparent 100%);
  display: flex; flex-direction: column; gap: var(--Content-Gap-1);
  color: var(--ink-on-dark);
}
.gallery__name { font-size: var(--Body-1-Size); line-height: var(--Body-1-Line-Height); font-weight: 700; }
.gallery__div { display: none; width: 1px; height: 30px; border-left: 1px solid rgba(255,255,255,.4); }
.gallery__tag { display: flex; align-items: center; gap: 4px; }
.gallery__tag svg { width: 28px; height: 28px; flex-shrink: 0; }
.gallery__tagtxt { font-size: var(--Body-4-Size); line-height: var(--Body-4-Line-Height); font-weight: 700; white-space: pre-line; }
.gallery__dots { display: flex; justify-content: center; align-items: center; gap: 4px; margin-top: var(--Content-Gap-6); }
.gallery__dot { position: relative; width: 16px; height: 16px; padding: 4px; transition: width .1s; }
.gallery__dot::after { content: ""; display: block; width: 100%; height: 100%; border-radius: 4px; background: var(--ink-soft); opacity: .4; }
.gallery__dot.is-active { width: 56px; }
.gallery__dot.is-active::after { background: #000; opacity: 1; }
@media (min-width: 768px) { .gallery__viewport { padding: 0 calc(50vw - 336px); scroll-padding: 0 calc(50vw - 336px); } .gallery__slide { flex-basis: 320px; } }
.gallery__thumbs { display: none; }

@media (min-width: 1025px) {
  .gallery { display: flex; gap: var(--Gutter-Gap-1); }
  .gallery__viewport {
    flex: 1 1 0%; min-width: 0; padding: 0; gap: 0;
    border-radius: 16px; height: 508px; overflow: hidden; scroll-snap-type: none;
  }
  .gallery__slide { border-radius: 0; }
  .gallery__name { font-size: var(--Title-3-Size); line-height: var(--Title-3-Line-Height); }
  .gallery__tag svg { width: 36px; height: 36px; }
  .gallery__tagtxt { font-size: var(--Body-3-Size); line-height: var(--Body-3-Line-Height); }
  .gallery__track { display: flex; width: 100%; height: 100%; transition: transform .3s ease; }
  .gallery__slide { flex: 0 0 100%; height: 100%; }
  .gallery__cap { flex-direction: row; align-items: center; gap: var(--Content-Gap-3); }
  .gallery__div { display: block; }
  .gallery__dots { display: none; }
  .gallery__thumbs { display: flex; flex-direction: column; gap: 5px; flex-shrink: 0; }
  .gallery__thumb {
    position: relative; width: 102px; height: 58px; border-radius: 8px; overflow: hidden; flex-shrink: 0;
  }
  .gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
  .gallery__thumb::after {
    content: ""; position: absolute; inset: 0; border-radius: 8px;
    box-shadow: inset 0 0 0 2px transparent; background: rgba(255,255,255,.35);
    transition: background-color .2s, box-shadow .2s;
  }
  .gallery__thumb:hover::after { background: rgba(255,255,255,.15); }
  .gallery__thumb::after { display: none; }
}
@media (min-width: 1440px) {
  .gallery__viewport { height: 600px; }
  .gallery__thumbs { gap: 6px; }
  .gallery__thumb { width: 121px; height: 69px; }
}
/* no mobile o track é só um wrapper transparente */
@media (max-width: 1024px) { .gallery__track { display: contents; } }
@media (max-width: 1024px) { .gallery { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } }