/* ═══════════════════════════════════════════════════
   BALNEÁRIO CAMBORIÚ
   Figma 47:1755 · bg-light · flex-col gap-80px
   px: 150px (var(--gutter)) · py: 200px
   ═══════════════════════════════════════════════════ */


/* ── Seção outer ── */
#cidade {
  background-color: var(--c-light);
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 4.17vw, 80px);
  padding: clamp(80px, 10.42vw, 200px) var(--gutter);
}


/* ── Main frame: banner + cards ── */
.cid__main {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}


/* ══════════════════════════════════════════════════
   BANNER — 1620 × 726px (@ 1920px)
   ══════════════════════════════════════════════════ */

/* Container: bg escuro · rounded-12 · overflow:hidden
   Figma: pt-492px px-72px pb-72px — padding inferior = lateral.
   Altura automática: 492 (pt) + ~202 (texto) + 72 (pb) ≈ 766px css
   Texto fica no canto inferior via align-items: flex-end              */
.cid__banner {
  position: relative;
  background-color: var(--c-dark);
  border-radius: 12px;
  overflow: hidden;
  width: 100%;

  /* Padding: top empurra conteúdo para baixo; lateral e bottom iguais */
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(24px, 3vw, 60px);
  padding: clamp(200px, 25.625vw, 492px)
           clamp(32px, 3.75vw, 72px)
           clamp(32px, 3.75vw, 72px);
}

/* ── Layer 0: grafismo triangular lateral (sangra -274px à esquerda) ──
   Figma: left calc(50%-53.43px) · top calc(50%+643.07px) ·
   translate(-50%,-50%) · container 2060×1671px
   O SVG viewBox foi corrigido para -274 0 2060.176 1671 de modo que
   o coordinate space do SVG = coordinate space do banner:
   SVG x=0 → banner x=0, SVG y=0 → banner y=container_top             */
.cid__banner-triangles {
  position: absolute;
  left:      calc(50% - 53.43px);
  top:       calc(50% + 643.07px);
  transform: translate(-50%, -50%);
  width:     2060.176px;
  height:    1671px;
  max-width: none;      /* cancela o img { max-width: 100% } do reset */
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* ── Layer 1: Image overlay — vídeo recortado com border-radius ──
   Figma: x:109 y:109 · 1402×775px · rounded-12px
   108px margem dos dois lados → left/right = 109/1620 = 6.73%     */
.cid__image-overlay {
  position: absolute;
  left:   6.73%;
  right:  6.73%;
  top:    clamp(16px, 5.677vw, 109px);
  height: clamp(250px, 40.365vw, 775px);
  border-radius: 12px;
  overflow: hidden;
  z-index: 1;
}

/* Vídeo preenche o overlay (object-fit cover) */
.cid__video {
  position: absolute;
  inset: 0;
  width:  100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  z-index: 1;
}

/* Overlay preto 15% sobre o vídeo — dentro do image-overlay */
.cid__video-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.15);
  z-index: 2;
}

/* ── Layer 2: gradiente "Title background" — contraste do texto ──
   Figma: from-rgba(27,27,27,0) to-#1b1b1b · full banner width
   Concentrado na metade inferior                                   */
.cid__banner-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(27, 27, 27, 0)    0%,
    rgba(27, 27, 27, 0.20) 35%,
    rgba(27, 27, 27, 0.80) 65%,
    #1b1b1b               100%
  );
  z-index: 2;
}

/* ── Layer 3: textos — acima dos overlays ── */

/* Headline: "Investir em" (branco) + "Balneário Camboriú." (vermelho) */
.cid__banner-title {
  position: relative;
  z-index: 3;
  font-family: var(--f-sans);
  font-size: clamp(36px, 4.58vw, 88px);
  font-weight: var(--fw-regular);
  line-height: 1.15;
  letter-spacing: -0.05em;
  flex-shrink: 0;
}

.cid__title-white {
  display: block;
  color: var(--c-light);
}

.cid__title-red {
  display: block;
  color: var(--c-red);
}

/* Subtexto: x:1220 y:599 — canto inferior direito */
.cid__banner-subtitle {
  position: relative;
  z-index: 3;
  font-family: var(--f-sans);
  font-size: clamp(15px, 1.25vw, 24px);
  font-weight: var(--fw-regular);
  line-height: 1.6;
  letter-spacing: -0.03em;
  color: rgba(244, 245, 247, 0.80);
  max-width: clamp(200px, 17.06vw, 327px);
  flex-shrink: 0;
  align-self: flex-end;
}


/* ══════════════════════════════════════════════════
   CARDS DE RANKING — 387 × 396px cada (@1920px)
   4 cards · gap 24px · flex:1 0 0 → 387px de largura
   ══════════════════════════════════════════════════ */

.cid__cards {
  display: flex;
  gap: 24px;
  align-items: stretch;
  width: 100%;
}

/* Card: glass morphism sobre o fundo claro
   justify-content: space-between empurra rank (topo) e desc (base) */
.cid__card {
  flex: 1 0 0;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(24px, 3.33vw, 64px);
  min-height: clamp(280px, 20.625vw, 396px);
  border-radius: 12px;
  background: rgba(85, 85, 85, 0.15);
  backdrop-filter: blur(75px);
  -webkit-backdrop-filter: blur(75px);
  overflow: hidden;
}

/* Grafismo triangular de fundo do card
   SVG 387×342px (= largura exata do card @ 1920px) ancorado na base.
   width: 100% escala junto com o card; opacity 0.4 já está no SVG.   */
.cid__card-graphic {
  position: absolute;
  bottom: 0;
  left:   0;
  width:  100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* Conteúdo acima do grafismo */
.cid__card-rank,
.cid__card-desc {
  position: relative;
  z-index: 1;
}

/* Rank: número grande + label ao lado, alinhados ao centro */
.cid__card-rank {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.25vw, 24px);
}

/* Número ordinal: 88px · vermelho · tracking -0.04em */
.cid__rank-num {
  font-family: var(--f-sans);
  font-size: clamp(36px, 4.58vw, 88px);
  font-weight: var(--fw-regular);
  line-height: 1.1;
  letter-spacing: -0.04em;
  color: var(--c-red);
  white-space: nowrap;
}

/* Label (lugar/cidade): 30px · escuro */
.cid__rank-label {
  font-family: var(--f-sans);
  font-size: clamp(16px, 1.5625vw, 30px);
  font-weight: var(--fw-regular);
  line-height: 1.1;
  letter-spacing: -0.04em;
  color: var(--c-dark);
  white-space: nowrap;
}

/* Bloco de descrição: categoria + fonte
   Figma gap-[24px] com text-box-trim:trim-both → em CSS (sem trim)
   line-height:1.7 adiciona ~13px de leading → gap CSS ≈ 10px para
   obter visual equivalente a 24px                                   */
.cid__card-desc {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Categoria: 24px · dark 70% · nowrap (overflow clippado pelo card) */
.cid__desc-main {
  font-family: var(--f-sans);
  font-size: clamp(16px, 1.25vw, 24px);
  font-weight: var(--fw-regular);
  line-height: 1.7;
  letter-spacing: -0.04em;
  color: rgba(27, 27, 27, 0.70);
  white-space: nowrap;
}

/* Fonte: 14px · mono · uppercase · dark 50% */
.cid__desc-source {
  font-family: var(--f-mono);
  font-size: clamp(11px, 0.73vw, 14px);
  font-weight: var(--fw-regular);
  line-height: 1.7;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: rgba(27, 27, 27, 0.50);
}


/* ══════════════════════════════════════════════════
   RODAPÉ DA SEÇÃO
   ══════════════════════════════════════════════════ */

.cid__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(32px, 4vw, 80px);
  width: 100%;
}

/* Parágrafo: 24px · dark 80% · max-width 860px */
.cid__footer-text {
  font-family: var(--f-sans);
  font-size: clamp(16px, 1.25vw, 24px);
  font-weight: var(--fw-regular);
  line-height: 1.6;
  letter-spacing: -0.03em;
  color: rgba(27, 27, 27, 0.80);
  max-width: clamp(300px, 44.8vw, 860px);
}


/* ═══════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════ */

@media (max-width: 1280px) {
  .cid__banner-subtitle {
    max-width: clamp(200px, 22vw, 327px);
  }
}

@media (max-width: 1024px) {
  .cid__banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding-bottom: clamp(24px, 3vw, 48px);
  }

  .cid__banner-subtitle {
    max-width: 100%;
    align-self: auto;
  }

  .cid__cards {
    flex-wrap: wrap;
  }

  .cid__card {
    flex: 1 1 calc(50% - 12px);
    min-width: calc(50% - 12px);
  }

  .cid__footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }

  .cid__footer-text {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .cid__cards {
    flex-direction: column;
  }

  .cid__card {
    flex: none;
    width: 100%;
    min-height: 280px;
  }
}