/* ===========================
      CLASSES DISPONÍVEIS
   =========================== */

:root{
  --color-guerreiro:#E24B4B; 
  --color-arqueiro:#7DD34B;  
  --color-barbaro:#F1B24A;   
  --color-feiticeira:#A864FF;
  --color-mago:#34C77A;      
  --color-sacerdote:#57D1A3; 

  --ring-width: 2px;         
}

/* ===== Seção ===== */
.class-navigator-section{
  position: relative;
  z-index: 0;
  min-height: clamp(360px, 32vw, 520px);
  padding: 56px 24px 60px;
  display: grid;
  grid-template-rows: auto 1fr;
}

.class-navigator-section::before{
  content:"";
  position:absolute; inset:0; z-index:-2;
  background-image: image-set(
    url("/images/backgrounds/bg-cidades-iniciais.jpg") type("image/jpeg")
  );
  background-size: cover;
  background-position: center 44%;
  background-repeat:no-repeat;
  transform: translateZ(0);
}

.class-navigator-section::after{
  content:"";
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(95% 75% at 50% 48%,
      rgba(0,0,0,.30) 0%,
      rgba(0,0,0,.58) 60%,
      rgba(0,0,0,.82) 100%);
}

.class-navigator-section .section-title::after{ display:none !important; }
.class-navigator-section > .section-title{ margin-bottom: 26px; }

/* ===== Grid de cards ===== */
.class-gallery{
  list-style:none; padding:0; margin:0 auto;
  width: min(1320px, 92%);
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 22px;
  align-self: center;
}
.class-gallery > li{ list-style:none; }

/* ===== Card base ===== */
.class-card{
  --accent:#d24a4a;

  position:relative;
  display:flex; align-items:center; justify-content:center;
  aspect-ratio: 2 / 3;
  border-radius: 6px; overflow:hidden;
  text-decoration:none; color:#eaeaea;
  background:#0e0f12;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:none;
  transition: transform .25s ease, border-color .2s ease,
              filter .35s ease, opacity .35s ease;

  perspective: 900px; transform-style: preserve-3d;
  filter: grayscale(1) brightness(.86);
  opacity:.94;

  outline: none;
}

.class-card img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transform: scale(1.04);
  transition: transform .35s ease;
  z-index:-1;
}

.class-card::before{
  content:"";
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(10,12,16,.25) 0%, rgba(10,12,16,.65) 65%, rgba(10,12,16,.9) 100%),
    radial-gradient(90% 70% at 50% 80%, rgba(0,0,0,.55), transparent 60%);
  transition: background .25s ease;
}

.class-card .class-name,
.class-card > span{
  position:absolute; left:50%; bottom:16px;
  transform: translateX(-50%) translateZ(0);
  transform-origin: center bottom;
  pointer-events:none; white-space:nowrap;

  font-family:"Cinzel", serif; font-weight:800;
  font-size: clamp(14px, 1vw + 8px, 22px);
  letter-spacing:.08em;

  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 70%, white 40%) 0%,
    color-mix(in srgb, var(--accent) 85%, black 5%) 55%,
    color-mix(in srgb, var(--accent) 60%, black 25%) 100%
  );
  -webkit-background-clip: text; background-clip: text; color: transparent;

  text-shadow:
    0 1px 0 rgba(255,255,255,.1),
    0 2px 0 rgba(0,0,0,.35),
    0 3px 0 rgba(0,0,0,.35),
    0 5px 10px rgba(0,0,0,.5);
  transition: transform .25s ease, text-shadow .25s ease;
}
.class-card .class-name::after,
.class-card > span::after{ display:none !important; }

/* Destaque */
.class-card:hover,
.class-card.is-active{
  filter:none; opacity:1;
  border-color: rgba(255,255,255,.12);
  outline: var(--ring-width) solid var(--accent);
  outline-offset: 0;
}
.class-card:hover img{ transform: scale(1.07); }
.class-card:hover::before,
.class-card.is-active::before{
  background:
    linear-gradient(180deg, rgba(10,12,16,.12) 0%, rgba(10,12,16,.45) 62%, rgba(10,12,16,.7) 100%),
    radial-gradient(90% 70% at 50% 80%, rgba(0,0,0,.25), transparent 60%);
}
.class-card:hover .class-name,
.class-card:hover > span,
.class-card.is-active .class-name,
.class-card.is-active > span{
  transform: translateX(-50%) translateZ(26px);
  text-shadow:
    0 1px 0 rgba(255,255,255,.18),
    0 2px 0 rgba(0,0,0,.35),
    0 3px 0 rgba(0,0,0,.35),
    0 4px 0 rgba(0,0,0,.35),
    0 6px 14px rgba(0,0,0,.55),
    0 0 28px color-mix(in srgb, var(--accent) 55%, transparent),
    0 0 56px color-mix(in srgb, var(--accent) 35%, transparent);
}

.class-card[data-class="guerreiro"] { --accent: var(--color-guerreiro); }
.class-card[data-class="arqueiro"]  { --accent: var(--color-arqueiro); }
.class-card[data-class="barbaro"]   { --accent: var(--color-barbaro); }
.class-card[data-class="feiticeira"]{ --accent: var(--color-feiticeira); }
.class-card[data-class="mago"]      { --accent: var(--color-mago); }
.class-card[data-class="sacerdote"] { --accent: var(--color-sacerdote); }

/* =========================
   RESPONSIVO
   ========================= */

@media (max-width: 1200px){
  .class-gallery{
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: min(980px, 94%);
  }
  .class-navigator-section{
    padding: 48px 20px 52px;
    min-height: clamp(360px, 38vw, 520px);
  }
  .class-navigator-section > .section-title{ margin-bottom: 22px; }
  .class-navigator-section::before{ background-position: center 45%; }
}

@media (max-width: 900px){
  .class-gallery{ width: min(880px, 94%); }
  .class-card{ aspect-ratio: 3 / 4; }
  .class-navigator-section{ padding: 42px 18px 48px; }
}

@media (max-width: 640px){
  .class-gallery{
    grid-template-columns: repeat(2, 1fr);
    gap:16px;
    width: min(620px, 94%);
  }
  .class-card{ aspect-ratio: 3 / 4; }
  .class-card .class-name,
  .class-card > span{ bottom: 14px; }

  .class-navigator-section{
    padding: 36px 16px 42px;
    min-height: clamp(420px, 70vw, 560px);
  }
  .class-navigator-section > .section-title{ margin-bottom: 18px; }

  .class-navigator-section::before{ background-position: center 48%; }
  .class-navigator-section::after{
    background:
      radial-gradient(85% 70% at 50% 50%,
        rgba(0,0,0,.42) 0%,
        rgba(0,0,0,.78) 62%,
        rgba(0,0,0,.88) 100%);
  }
}