:root {
  --brand-blue:#0F58B3; --brand-blue-700:#0A3E80;
  --ink-900:#121417; --ink-800:#1b2024; --ink-700:#2D3436; --ink-500:#63707A;
  --ink-300:#A7B0B7; --ink-100:#E9EEF2;
  --bg-0:#FFFFFF; --bg-50:#F7FAFC;
  --radius:12px;
  --shadow-1:0 6px 20px rgba(18,20,23,.08);
  --shadow-2:0 12px 34px rgba(18,20,23,.12);
}

/* Reset e base */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg-50);color:var(--ink-900);line-height:1.5}
a{color:var(--brand-blue);text-decoration:none} a:hover{text-decoration:underline}
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.section{padding:24px 0}

/* Header */
.header{background:#fff;border-bottom:1px solid var(--ink-100)}
.nav{height:70px;display:flex;justify-content:space-between;align-items:center}
.logo img{width:160px;height:auto}
.menu{display:flex;gap:16px}

/* Footer */
.footer{background:#fff;border-top:1px solid var(--ink-100);margin-top:24px}
.footer-inner{padding:14px 0;text-align:center;color:var(--ink-500)}

/* Tipografia e inputs */
label{font-weight:700;color:var(--ink-700);font-size:14px}
.input{padding:8px 10px;font-size:14px;border:1px solid var(--ink-300);border-radius:8px;background:#fff;color:var(--ink-900)}
.input:focus{border-color:var(--brand-blue);outline:none;box-shadow:0 0 0 3px rgba(15,88,179,.12)}
.help{font-size:12px;color:var(--ink-500)}

/* Botões */
.btn{padding:10px 16px;border-radius:10px;font-weight:700;cursor:pointer;border:1px solid transparent;transition:.2s}
.btn-primary{background:var(--brand-blue);color:#fff}
.btn-primary:hover{background:var(--brand-blue-700);transform:scale(1.05)}
.btn-outline{border:1px solid var(--ink-300);background:#fff;color:var(--ink-900)}
.btn-outline:hover{border-color:var(--brand-blue);color:var(--brand-blue);transform:scale(1.05)}

/* Lista de campeonatos */
.grid-full{grid-column:1/-1;margin-bottom:12px}
.championships-scroll{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;
  max-height:320px;overflow-y:auto;padding:8px;border:1px solid var(--ink-100);border-radius:var(--radius);background:#fff
}
.championships-scroll::-webkit-scrollbar{width:8px}
.championships-scroll::-webkit-scrollbar-thumb{background:var(--ink-300);border-radius:4px}
.championships-scroll::-webkit-scrollbar-thumb:hover{background:var(--brand-blue)}

.champ-card {
  display:flex;
  flex-direction:column;
  background:#fff;
  border-radius:var(--radius);
  box-shadow:var(--shadow-1);
  transition:transform 0.25s ease, box-shadow 0.25s ease;
  overflow:hidden;
}
.champ-card:hover {
  transform:translateY(-4px) scale(1.02);
  box-shadow:var(--shadow-2);
}
.champ-card input{display:none}

.card-image {
  width: 100%;
  aspect-ratio: 4 / 3;   /* proporção padrão, pode ser 16/9 se preferir */
  overflow: hidden;
  border-radius: 8px 8px 0 0;
}

.card-image img,
.championship-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* mantém proporção e corta excesso */
  display: block;
  transition: transform 0.3s ease;
}

.champ-card:hover .card-image img {
  transform:scale(1.05); /* leve zoom na imagem */
}

.card-info {
  flex:1;
  padding:16px;
  text-align:center;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.card-info h3 {
  margin:6px 0;
  font-weight:800;
  font-size:16px;
  color:var(--brand-blue);
}
.card-info p {
  font-size:13px;
  color:var(--ink-700);
  margin-bottom:12px;
}

.actions {
  display:flex;
  justify-content:center;
  gap:12px;
  margin-top:12px;
}

/* Form no modal */
.card{background:#fff;border-radius:16px;box-shadow:var(--shadow-1);padding:16px}
form.card{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
form.card > div{display:flex;flex-direction:column;gap:4px}
.actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:10px;margin-top:8px}

/* Modal */
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);justify-content:center;align-items:center;z-index:200}
.modal-content{background:#fff;border-radius:12px;padding:24px;max-width:640px;width:95%;box-shadow:var(--shadow-2);animation:fadeIn .25s ease}
.modal-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:20px}
@keyframes fadeIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}

/* Sumário de confirmação */
.confirm-summary{display:grid;gap:10px;margin-top:8px}
.summary-row{display:flex;justify-content:space-between}
.summary-label{font-weight:700;color:var(--ink-700)}
.summary-value{color:var(--ink-900)}

/* Loading overlay */
.loading-overlay{display:none;position:fixed;inset:0;background:rgba(18,20,23,.6);backdrop-filter:saturate(120%) blur(2px);z-index:300;align-items:center;justify-content:center}
.loading-box{background:#fff;border-radius:12px;box-shadow:var(--shadow-2);padding:20px 24px;display:flex;flex-direction:column;align-items:center;gap:10px;min-width:260px}
.spinner{width:28px;height:28px;border:3px solid var(--ink-100);border-top-color:var(--brand-blue);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Responsivo */
@media (max-width:600px){
  form.card{grid-template-columns:1fr}
}

/* Modal imagem */
.image-modal {
  display:flex;
  justify-content:center;
  align-items:center;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.8);
  z-index:9999;
  animation:fadeIn .25s ease;
}
.image-modal .modal-content {
  background:#fff;
  padding:1rem;
  border-radius:8px;
  max-width:90%;
  max-height:90%;
  text-align:center;
}
.image-modal img.img-fluid {
  max-width:100%;
  max-height:80vh;
  border-radius:6px;
}
.champ-card:hover .card-image img {
  transform: scale(1.05);
}

form.card .two-cols {
  display: grid;
  grid-template-columns: 1fr 1fr; /* duas colunas iguais */
  gap: 12px;
  grid-column: 1 / -1; /* ocupa a linha inteira da grade principal */
}


/* Garante que o card/modal ocupe espaço suficiente */
.modal-content {
  max-width: 90%;   /* aumenta a largura máxima */
  width: auto;      /* deixa se adaptar ao conteúdo */
  height: auto;     /* evita cortar conteúdo */
}

/* Ajusta o formulário para não ficar pequeno */
form.card {
  width: 100%;      /* ocupa toda a largura disponível */
  max-width: 600px; /* limite confortável para leitura */
  margin: 0 auto;   /* centraliza */
}

/* Imagem do campeonato */
.championship-thumb {
  display: block;
  max-width: 100%;  /* nunca ultrapassa o card */
  height: auto;     /* mantém proporção */
  margin: 10px 0;
}

/* Imagem dentro do modal de visualização */
.image-view img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}