.curiosities {
  padding: 100px 0 40px;
  background: var(--white);
}

.curiosities .eyebrow {
  color: var(--red);
  display: block;
}

.curiosities h2 {
  font-family: var(--font-main);
  text-transform: uppercase;
  font-size: clamp(1.7rem, 3.6vw, 2.9rem);
  font-weight: 800;
  color: var(--text);
  line-height: 1.08;
  margin: 8px 0 16px;
  max-width: 20ch;
}

.curiosities .curiosities__sub {
  color: var(--gray-text);
  font-size: 1.05rem;
  max-width: 56ch;
  margin-bottom: 8px;
}

.curiosities__stack {
  margin-top: 56px;
  padding-bottom: 12vh;
}

.curiosity-card {
  position: sticky;
  top: 110px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 44px;
  padding: 48px 52px;
  border-radius: 28px;
  margin-bottom: 40px;
  overflow: hidden;
  min-height: 340px;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.18);
  will-change: transform;
}

.curiosity-card__text h3 {
  font-family: var(--font-main);
  text-transform: uppercase;
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  font-weight: 800;
  line-height: 1.12;
  margin-bottom: 16px;
}

.curiosity-card__text p {
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 46ch;
}

.curiosity-card__index {
  display: inline-block;
  font-family: var(--font-main);
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  opacity: 0.7;
  margin-bottom: 14px;
}

.curiosity-card__media {
  height: 100%;
  min-height: 240px;
}

.curiosity-card__media img {
  width: 100%;
  height: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: 18px;
  display: block;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}

.curiosity-card--1 {
  background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
  color: var(--white);
}
.curiosity-card--1 .curiosity-card__text h3 { color: var(--white); }
.curiosity-card--1 .curiosity-card__text p  { color: rgba(255, 255, 255, 0.9); }

.curiosity-card--2 {
  background: linear-gradient(135deg, #232323 0%, #0d0d0d 100%);
  color: var(--white);
}
.curiosity-card--2 .curiosity-card__text h3 { color: var(--white); }
.curiosity-card--2 .curiosity-card__text p  { color: rgba(255, 255, 255, 0.82); }

.curiosity-card--3 {
  background: var(--gray-light);
  color: var(--text);
  border: 1px solid var(--gray);
}
.curiosity-card--3 .curiosity-card__text h3 { color: var(--text); }
.curiosity-card--3 .curiosity-card__text p  { color: var(--gray-text); }

.curiosity-card--4 {
  background: linear-gradient(135deg, #fdeaea 0%, #f7d9d9 100%);
  color: var(--text);
}
.curiosity-card--4 .curiosity-card__text h3 { color: var(--red-dark); }
.curiosity-card--4 .curiosity-card__text p  { color: #6a4a4a; }

[data-theme="dark"] .curiosities { background: var(--d-bg); }
[data-theme="dark"] .curiosities h2 { color: var(--d-txt); }
[data-theme="dark"] .curiosities .curiosities__sub { color: var(--d-txt-soft); }

[data-theme="dark"] .curiosity-card--3 {
  background: var(--d-surface);
  border-color: var(--d-border);
}
[data-theme="dark"] .curiosity-card--3 .curiosity-card__text h3 { color: var(--d-txt); }
[data-theme="dark"] .curiosity-card--3 .curiosity-card__text p  { color: var(--d-txt-soft); }

[data-theme="dark"] .curiosity-card--4 {
  background: linear-gradient(135deg, #3a1620 0%, #2a0f17 100%);
}
[data-theme="dark"] .curiosity-card--4 .curiosity-card__text h3 { color: #ff9b9b; }
[data-theme="dark"] .curiosity-card--4 .curiosity-card__text p  { color: rgba(255, 255, 255, 0.78); }

@media (max-width: 860px) {
  .curiosity-card {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 32px 26px;
    top: 88px;
    min-height: 0;
    margin-bottom: 28px;
  }

  .curiosity-card__media { order: -1; min-height: 0; }
  .curiosity-card__media img { max-height: 200px; }
  .curiosities { padding-top: 70px; }
  .curiosities__stack { margin-top: 36px; }
}

/* cor de destaque de cada card — usada como camada de cor sobre a foto no celular */
.curiosity-card--1 { --ov: 198, 28, 28; }   /* vermelho */
.curiosity-card--2 { --ov: 26, 26, 26; }    /* grafite */
.curiosity-card--3 { --ov: 51, 65, 85; }    /* azul-ardósia */
.curiosity-card--4 { --ov: 160, 13, 36; }   /* vinho */

/* versão curta do texto: só aparece no celular */
.curiosity-card__short { display: none; }

/* ===== Celular: a FOTO vira o fundo do card (escurecida + camada de cor) ===== */
@media (max-width: 600px) {
  .curiosity-card {
    grid-template-columns: 1fr;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0;
    padding: 24px 22px;
    top: 80px;
    min-height: 300px;
    margin-bottom: 16px;
    border-radius: 20px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
  }

  /* a imagem preenche o card inteiro, como fundo */
  .curiosity-card__media {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    height: 100%;
    min-height: 0;
    margin: 0;
    order: 0;
  }
  .curiosity-card__media img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    border-radius: 0;
    box-shadow: none;
  }

  /* camada de cor (topo) + escurecimento p/ leitura (base), por cima da foto */
  .curiosity-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      linear-gradient(
        180deg,
        rgba(13, 13, 13, 0.12) 0%,
        rgba(13, 13, 13, 0.55) 55%,
        rgba(13, 13, 13, 0.90) 100%
      ),
      linear-gradient(
        135deg,
        rgba(var(--ov, 13, 13, 13), 0.74) 0%,
        rgba(var(--ov, 13, 13, 13), 0.34) 100%
      );
    pointer-events: none;
  }

  /* texto por cima de tudo e sempre claro */
  .curiosity-card__text {
    position: relative;
    z-index: 2;
  }
  .curiosity-card__text h3,
  .curiosity-card__text p,
  .curiosity-card__index {
    color: #fff !important;
  }
  .curiosity-card__index { margin-bottom: 10px; opacity: 0.85; }

  .curiosity-card__text h3 {
    font-size: 1.3rem;
    margin-bottom: 10px;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
  }

  .curiosity-card__text p {
    font-size: 0.95rem;
    line-height: 1.5;
    max-width: none;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
  }

  /* no celular usa o texto curto e esconde o longo */
  .curiosity-card__text > p:not(.curiosity-card__short) { display: none; }
  .curiosity-card__short { display: block; }

  .curiosities__stack {
    margin-top: 28px;
    padding-bottom: 8vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .curiosity-card { position: static; }
}