/* ============================================================
 * capua-my-submissions.css
 * Layout em cards responsivo + toolbar/dropdown.
 * Compartilhado entre /minhas-submissoes/ e /certificados/
 * (mesmas classes .capua-sub-card / .capua-sub-grid).
 * ============================================================ */

/* ── Toolbar (busca + chips) ─────────────────────────────────── */
.capua-sub-toolbar{
  display:flex; flex-direction:column; gap:.75rem;
  margin: .5rem 0 1.25rem;
}
.capua-sub-search{
  display:flex; align-items:stretch; gap:.5rem;
  max-width:520px;
}
.capua-sub-search input[type=search]{
  flex:1; min-width:0;
  padding:.55rem .75rem;
  border:1px solid var(--capua-line, #e0d8d0);
  border-radius:8px;
  font:inherit;
  background:#fff;
}
.capua-sub-search input[type=search]:focus{
  outline:2px solid var(--capua-brand, #8B1A1A);
  outline-offset:1px;
}
.capua-sub-search button{
  padding:.5rem .85rem;
  background:var(--capua-brand, #8B1A1A);
  color:#fff;
  border:1px solid var(--capua-brand, #8B1A1A);
  border-radius:8px;
  cursor:pointer;
  font-weight:600;
}
.capua-sub-search button:hover{ background:#6f1414; }

.capua-sub-filters{
  display:flex; flex-wrap:wrap; gap:.4rem;
  align-items:center;
}
.capua-chip{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.32rem .7rem;
  background:#fff;
  border:1px solid var(--capua-line, #e0d8d0);
  border-radius:999px;
  font-size:.85rem;
  color:#374151;
  text-decoration:none;
  line-height:1.2;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.capua-chip:hover{ background:#f8fafc; color:var(--capua-brand,#8B1A1A); }
.capua-chip.is-active{
  background:var(--capua-brand, #8B1A1A);
  color:#fff;
  border-color:var(--capua-brand, #8B1A1A);
}
.capua-chip-count{
  font-size:.75rem;
  font-weight:700;
  background:rgba(0,0,0,.08);
  padding:1px 7px;
  border-radius:999px;
  min-width:18px;
  text-align:center;
  line-height:1.4;
}
.capua-chip.is-active .capua-chip-count{
  background:rgba(255,255,255,.22);
}

/* ── Grid de cards ───────────────────────────────────────────── */
.capua-sub-grid{
  display:grid;
  gap:1rem;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
@media (max-width:640px){
  .capua-sub-grid{ grid-template-columns:1fr; gap:.75rem; }
}

/* ── Card individual ─────────────────────────────────────────── */
.capua-sub-card{
  display:flex; flex-direction:column;
  background:#fff;
  border:1px solid var(--capua-line, #e0d8d0);
  border-radius:12px;
  padding:1rem 1.1rem 1.1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  transition: box-shadow .18s ease, transform .18s ease;
}
.capua-sub-card:hover{
  box-shadow: 0 6px 18px rgba(0,0,0,.07);
}

.capua-sub-card-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:.5rem; margin-bottom:.6rem;
}
.capua-sub-card-title{
  margin:0;
  font-size:1rem; line-height:1.35;
  color:#1f2937;
  font-weight:700;
  font-family: var(--capua-font-serif, 'Merriweather', Georgia, serif);
  /* Limita a 2 linhas com ellipsis */
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  word-break:break-word;
}
.capua-sub-card-title a{
  color:inherit;
  text-decoration:none;
}
.capua-sub-card-title a:hover{
  color:var(--capua-brand, #8B1A1A);
  text-decoration:underline;
}

.capua-sub-card-meta{
  margin:0 0 .6rem;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:.4rem .75rem;
  font-size:.85rem;
}
.capua-sub-card-meta > div{ display:flex; flex-direction:column; }
.capua-sub-card-meta dt{
  font-size:.7rem;
  font-weight:600;
  color:#64748b;
  text-transform:uppercase;
  letter-spacing:.4px;
  margin:0;
}
.capua-sub-card-meta dd{
  margin:0;
  color:#1f2937;
  font-size:.88rem;
}

.capua-sub-card-flags{
  display:flex; flex-wrap:wrap; gap:.35rem;
  margin: 0 0 .6rem;
}

.capua-sub-card-actions{
  display:flex; align-items:center; gap:.5rem;
  margin-top:auto;
  padding-top:.6rem;
  border-top:1px solid #f1f5f9;
}
.capua-sub-card-actions .capua-btn-primary,
.capua-sub-card-actions .capua-btn{
  flex:1; min-width:0;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.capua-sub-card-actions .capua-btn-primary[aria-disabled="true"]{
  opacity:.6; cursor:not-allowed;
}

/* ── Dropdown "..." do card (com auto-flip) ──────────────────── */
.capua-sub-menu-wrap{
  position:relative;
  flex:0 0 auto;
}
.capua-sub-menu-toggle{
  width:38px; height:38px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff;
  border:1px solid var(--capua-line, #e0d8d0);
  border-radius:8px;
  cursor:pointer;
  font-size:1.25rem;
  color:#475569;
  line-height:1;
  padding:0;
}
.capua-sub-menu-toggle:hover{ background:#f8fafc; color:var(--capua-brand,#8B1A1A); border-color:#cbd5e1; }
.capua-sub-menu-toggle[aria-expanded="true"]{
  background:rgba(139,26,26,.08);
  border-color:var(--capua-brand,#8B1A1A);
  color:var(--capua-brand,#8B1A1A);
}

.capua-sub-menu{
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  min-width:240px;
  max-width: 280px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  padding:.3rem 0;
  z-index:10030; /* acima do FAB do menu (10025) */
  animation: capua-sub-menu-in .12s ease-out;
}
.capua-sub-menu[hidden]{ display:none; }
@keyframes capua-sub-menu-in{
  from{ opacity:0; transform:translateY(-4px); }
  to  { opacity:1; transform:translateY(0);    }
}
/* Auto-flip: abre pra cima quando perto da borda inferior (FAB) */
.capua-sub-menu.is-up{
  top:auto; bottom:calc(100% + 6px);
  animation-name: capua-sub-menu-in-up;
}
@keyframes capua-sub-menu-in-up{
  from{ opacity:0; transform:translateY(4px); }
  to  { opacity:1; transform:translateY(0);   }
}
/* Auto-flip: abre alinhado à esquerda quando perto da borda direita */
.capua-sub-menu.is-left{ right:auto; left:0; }

/* Itens do dropdown: aplica em <a>, <button> e qualquer [role="menuitem"]. */
.capua-sub-menu a,
.capua-sub-menu button,
.capua-sub-menu [role="menuitem"]{
  display:block;
  width:100%;
  text-align:left;
  padding:.55rem .85rem;
  font-size:.88rem;
  font-family:inherit;
  font-weight:500;
  line-height:1.35;
  color:#1f2937;
  background:transparent;
  border:0;
  text-decoration:none;
  cursor:pointer;
  box-sizing:border-box;
}
.capua-sub-menu a:hover,
.capua-sub-menu button:hover,
.capua-sub-menu [role="menuitem"]:hover{
  background:#f8fafc;
  color:var(--capua-brand, #8B1A1A);
}
.capua-sub-menu a:focus-visible,
.capua-sub-menu button:focus-visible,
.capua-sub-menu [role="menuitem"]:focus-visible{
  outline:2px solid var(--capua-brand,#8B1A1A);
  outline-offset:-2px;
}
.capua-sub-menu button:disabled,
.capua-sub-menu [role="menuitem"][disabled]{
  opacity:.5; cursor:not-allowed; color:#94a3b8;
}
.capua-sub-menu button:disabled:hover,
.capua-sub-menu [role="menuitem"][disabled]:hover{
  background:transparent; color:#94a3b8;
}

/* ── Paginação ───────────────────────────────────────────────── */
.capua-sub-pagination{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:.75rem;
  margin-top:1.25rem;
  padding-top:1rem;
  border-top:1px solid #f1f5f9;
}
.capua-sub-pagination-info{
  font-size:.9rem; color:#475569;
}
.capua-sub-pagination-nav{
  display:flex; gap:.5rem;
}
.capua-sub-pagination-nav .capua-btn{
  padding:.45rem .85rem;
  font-size:.88rem;
  border-radius:8px;
}
.capua-sub-pagination-nav .capua-btn[aria-disabled="true"]{
  opacity:.5; cursor:not-allowed;
}

/* ── Estado vazio ────────────────────────────────────────────── */
.capua-sub-empty{
  text-align:center;
  padding:3rem 1rem;
  color:#64748b;
  background:#fff;
  border:1px dashed var(--capua-line, #e0d8d0);
  border-radius:12px;
}
.capua-sub-empty p{ margin:.4rem 0; }
.capua-sub-empty strong{ color:#1f2937; font-size:1.05rem; }

/* ── Mobile fine-tuning ──────────────────────────────────────── */
@media (max-width:640px){
  .capua-sub-toolbar{ gap:.6rem; margin-bottom:1rem; }
  .capua-sub-search{ max-width:none; }
  .capua-sub-card{ padding:.85rem .9rem 1rem; }
  .capua-sub-card-meta{ grid-template-columns:1fr 1fr; gap:.3rem .5rem; }
  .capua-sub-card-actions{ gap:.4rem; }
  .capua-sub-menu-toggle{ width:42px; height:42px; }
  .capua-sub-menu{ min-width:220px; max-width: calc(100vw - 32px); }
  .capua-sub-pagination{ justify-content:center; }
}

/* ============================================================
 * /certificados/ — Banner + variante de 2 CTAs no card
 * ============================================================ */

/* Banner do "Certificado de Participação" no topo da página */
.capua-cert-banner{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:.85rem;
  background:linear-gradient(135deg, #fff8f7 0%, #fff 100%);
  border:1px solid rgba(139,26,26,.18);
  border-left:4px solid var(--capua-brand, #8B1A1A);
  border-radius:12px;
  padding:1rem 1.2rem;
  margin: .5rem 0 1.5rem;
}
.capua-cert-banner-text{ flex:1 1 280px; min-width:0; }
.capua-cert-banner-text strong{
  display:block;
  font-family: var(--capua-font-serif, 'Merriweather', Georgia, serif);
  font-size:1rem; color:var(--capua-brand, #8B1A1A);
  margin-bottom:.15rem;
}
.capua-cert-banner-text span{ font-size:.85rem; color:#475569; }
.capua-cert-banner .capua-btn-primary{
  flex:0 0 auto;
}

/* Título de seção entre banner e grid */
.capua-cert-section-title{
  font-size:.95rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:#374151;
  border-bottom:2px solid var(--capua-line, #e0d8d0);
  padding-bottom:.4rem;
  margin: 0 0 1rem;
  font-family: var(--capua-font-sans, 'Inter', system-ui, sans-serif);
}

/* Variante: 2 CTAs lado a lado em vez de 1 + dropdown.
 * Usada em /certificados/ — Carta de Aceite + Certificado de Apresentação.
 * Garante que os dois botões tenham EXATAMENTE o mesmo tamanho/tipografia,
 * independente de serem .capua-btn-primary (definido em style.css) e
 * .capua-btn-secondary (variante local). */
.capua-sub-card-actions--two{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.5rem;
  align-items:stretch;
}
/* Reset uniforme dos dois botões */
.capua-sub-card-actions--two .capua-btn,
.capua-sub-card-actions--two .capua-btn-primary,
.capua-sub-card-actions--two .capua-btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  min-width:0;
  padding:.6rem .85rem;
  font-size:.88rem;
  font-weight:600;
  line-height:1.2;
  border-radius:8px;
  text-align:center;
  text-decoration:none;
  white-space:normal;
  overflow-wrap:anywhere;
  box-sizing:border-box;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
/* Primário (Carta de Aceite): preenchido vinho */
.capua-sub-card-actions--two .capua-btn-primary{
  background:var(--capua-brand, #8B1A1A);
  color:#fff;
  border:1px solid var(--capua-brand, #8B1A1A);
}
.capua-sub-card-actions--two .capua-btn-primary:hover{
  background:#6f1414;
  border-color:#6f1414;
  color:#fff;
}
/* Secundário (Certificado de Apresentação): outline vinho */
.capua-sub-card-actions--two .capua-btn-secondary{
  background:#fff;
  color:var(--capua-brand, #8B1A1A);
  border:1px solid rgba(139,26,26,.35);
}
/* Importante: declara color explicitamente no hover para vencer
 * .capua-btn-secondary:hover { color:#ecfdf5 } definido em style.css. */
.capua-sub-card-actions--two .capua-btn-secondary:hover{
  background:rgba(139,26,26,.08);
  border-color:var(--capua-brand, #8B1A1A);
  color:var(--capua-brand, #8B1A1A);
}

@media (max-width:480px){
  .capua-sub-card-actions--two{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .capua-cert-banner{ flex-direction:column; align-items:flex-start; }
  .capua-cert-banner .capua-btn-primary{ width:100%; text-align:center; }
}

/* Texto introdutório no topo do shell (substitui H1 redundante quando o
 * label da página já existe no header global). */
.capua-page-intro{
  margin: .5rem 0 1.25rem;
  color:#475569;
  font-size:.95rem;
  line-height:1.5;
}