/* Round Carousel — adaptado do componente "Round Carousel" da Originkit para HTML/CSS/JS puro.
   Todas as classes têm o prefixo rc- para não colidir com o resto do site.
   Os valores numéricos (tamanhos, inclinação, velocidade…) estão no objeto RC_CONFIG em js/round-carousel.js;
   as variáveis abaixo são preenchidas a partir dele. */

.rc {
  --rc-gold: rgba(226, 189, 133, .24);
  position: relative;
  outline: none;
}

/* Lista original das fotos: sem JavaScript é uma grelha simples; com o carrossel ativo fica só para leitores de ecrã. */
.rc__source {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rc__source img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 16px;
}
.rc.rc--ready .rc__source {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Palco 3D */
.rc__stage {
  display: none;
  align-items: center;
  justify-content: center;
  height: var(--rc-stage-h, 520px);
  overflow: hidden;
  perspective: var(--rc-perspective, 3000px);
  cursor: grab;
  touch-action: pan-y;          /* o scroll vertical da página continua a funcionar no telemóvel */
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.rc.rc--ready .rc__stage { display: flex; }
/* Telemóvel: o anel ocupa a largura total do ecrã e esbate nas laterais em vez de ser cortado pela margem. */
@media (max-width: 640px) {
  .rc__stage {
    margin-inline: calc(-1 * var(--gutter, 20px));
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
  }
}
.rc__stage.rc--dragging { cursor: grabbing; }
.rc__stage:focus-visible { outline: 2px solid var(--gold-hi, #f3d6a6); outline-offset: 4px; border-radius: 16px; }

.rc__tilt { transform-style: preserve-3d; }
.rc__ring { position: relative; transform-style: preserve-3d; will-change: transform; }
.rc__item { position: absolute; inset: 0; transform-style: preserve-3d; }

.rc__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--rc-radius, 22px);
  background: #16120d;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.rc__face img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}
.rc__face--front {
  border: 1px solid var(--rc-gold);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}
/* Face interior (vista por dentro do anel): escurecida */
.rc__face--back { transform: rotateY(180deg); }
.rc__face--back img { filter: brightness(var(--rc-inner-dim, .35)); }

.rc__hint {
  display: none;
  margin-top: 4px;
  text-align: center;
  color: var(--text-dim, #9b8f7e);
  font: 500 .6875rem/1.4 var(--font-sans, sans-serif);
  letter-spacing: .22em;
  text-transform: uppercase;
}
.rc.rc--ready .rc__hint { display: block; }