/* ========================================= */
/* CSS — PÁGINA ACERVO TÉCNICO
/* Escopo: .aiba-acervo-tecnico
/* Mantém linguagem visual de Revista/Anuário
/* Inclui: barra sticky (busca), grid, cards,
           capa híbrida (contain + blur),
           fallback elegante, modal
/* ========================================= */


/* ========================================= */
/* 1. RITMO E ESPAÇAMENTO DE PÁGINA
/* ========================================= */
.aiba-acervo-tecnico .at-filters{
  position: sticky;
  top: 0;
  z-index: 99;
  background: var(--color-branco);
  padding: 0 0 32px 0;
  border-bottom: 1px solid var(--border-escura);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

/* Ajuste para Barra de Admin */
body.admin-bar .aiba-acervo-tecnico .at-filters{
  top: 32px;
  padding-top: 120px;
}
@media (max-width: 782px){
  body.admin-bar .aiba-acervo-tecnico .at-filters{ top: 46px; }
}

.aiba-acervo-tecnico .at-grid-section{
  padding-top: 48px;
  padding-bottom: 120px;
}

/* Controle (sem pills) */
.aiba-acervo-tecnico .at-filter-controls{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

/* Mobile */
@media (max-width: 768px){
  .aiba-acervo-tecnico .at-filters{
    padding: 20px 0;
  }
  .aiba-acervo-tecnico .at-filter-controls{
    justify-content: stretch;
  }
  .aiba-acervo-tecnico .at-filter-controls .search-filter{
    max-width: none;
    width: 100%;
  }
}


/* ========================================= */
/* 2. SEARCH FILTER (se já for global, pode remover)
/* ========================================= */
.aiba-acervo-tecnico .search-filter{
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 260px;
  max-width: 520px;
  flex: 0 1 520px;
}

.aiba-acervo-tecnico .search-filter__icon{
  position: absolute;
  left: 14px;
  width: 18px;
  height: 18px;
  color: var(--color-nota);
  pointer-events: none;
}

.aiba-acervo-tecnico .search-filter__input{
  width: 100%;
  height: 44px;
  padding: 0 44px 0 42px;
  border-radius: 999px;
  border: 1px solid var(--border-escura);
  background: var(--color-branco);
  color: var(--color-escuro);
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.aiba-acervo-tecnico .search-filter__input:focus{
  border-color: var(--color-principal);
  box-shadow: 0 0 0 3px rgba(0, 123, 78, 0.12);
}

.aiba-acervo-tecnico .search-filter__clear{
  position: absolute;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid var(--border-escura);
  background: var(--color-verde-claro);
  color: var(--color-nota);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.aiba-acervo-tecnico .search-filter__clear:hover{
  color: var(--color-principal);
  border-color: var(--color-principal);
}


/* ========================================= */
/* 3. GRID & CARD (mantém padrões de Revista/Anuário)
/* ========================================= */
.aiba-acervo-tecnico .mag-grid{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-content: center;
}

/* Filtragem por busca */
.aiba-acervo-tecnico .mag-card.is-hidden{
  display: none;
}

/* Card base + estado inicial (animação) */
.aiba-acervo-tecnico .mag-card{
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  width: 100%;
  background: var(--color-branco);
  border: 1px solid var(--border-escura);
  border-radius: 12px;
  box-shadow: var(--shadow-padrao);
  overflow: hidden;

  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.4s ease-out,
    transform 0.4s ease-out,
    box-shadow 0.3s ease;
}

.aiba-acervo-tecnico .mag-card:hover{
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
}

/* Visível quando grid entra */
.aiba-acervo-tecnico .mag-grid.is-in-view .mag-card{
  opacity: 1;
  transform: translateY(0);
}

/* Stagger */
.aiba-acervo-tecnico .mag-grid.is-in-view :nth-child(1){ transition-delay: 0.05s; }
.aiba-acervo-tecnico .mag-grid.is-in-view :nth-child(2){ transition-delay: 0.10s; }
.aiba-acervo-tecnico .mag-grid.is-in-view :nth-child(3){ transition-delay: 0.15s; }
.aiba-acervo-tecnico .mag-grid.is-in-view :nth-child(4){ transition-delay: 0.20s; }
.aiba-acervo-tecnico .mag-grid.is-in-view :nth-child(5){ transition-delay: 0.25s; }
.aiba-acervo-tecnico .mag-grid.is-in-view :nth-child(6){ transition-delay: 0.30s; }
.aiba-acervo-tecnico .mag-grid.is-in-view :nth-child(7){ transition-delay: 0.35s; }
.aiba-acervo-tecnico .mag-grid.is-in-view :nth-child(8){ transition-delay: 0.40s; }

/* Breakpoints */
@media (max-width: 1200px){
  .aiba-acervo-tecnico .mag-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 992px){
  .aiba-acervo-tecnico .mag-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px){
  .aiba-acervo-tecnico .mag-grid{ grid-template-columns: 1fr; }
  .aiba-acervo-tecnico .mag-actions{ grid-template-columns: 1fr; }
}


/* ========================================= */
/* 4. CAPA — SOLUÇÃO ROBUSTA (HYBRID COVER)
/* - slot A4 fixo (grid estável)
/* - background blur preenchendo sobras
/* - imagem principal em contain (não corta)
/* - fallback elegante com Lucide
/* ========================================= */

/* Mantém o wrapper existente */
.aiba-acervo-tecnico .mag-cover-wrap{
  position: relative;
  overflow: hidden;
  margin: 0;
  width: 100%;
}

/* Link fica full-height do slot */
.aiba-acervo-tecnico .mag-cover-link{
  display: block;
  height: 100%;
  position: relative; /* chips e overlay */
}

/* SLOT A4 (robusto para proporções variadas) */
.aiba-acervo-tecnico .cover-slot{
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 210 / 297; /* A4 */
  background: var(--color-verde-claro);
}

/* Background blur (só quando há capa) */
.aiba-acervo-tecnico .cover-slot.has-cover::before{
  content: "";
  position: absolute;
  inset: -24px;
  background-image: var(--cover-url);
  background-size: cover;
  background-position: center;
  filter: blur(18px);
  transform: scale(1.08);
  opacity: 0.55;
}

/* Filme sutil para contraste */
.aiba-acervo-tecnico .cover-slot.has-cover::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 23, 25, 0.14);
}

/* Imagem principal: SEM CORTE */
.aiba-acervo-tecnico .cover-slot.has-cover img.mag-cover{
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: translateZ(0);
  filter: drop-shadow(0 10px 22px rgba(0,0,0,0.18));
  transition: transform 0.35s ease;
}

/* Hover leve (sem distorcer) */
.aiba-acervo-tecnico .mag-cover-link:hover .cover-slot.has-cover img.mag-cover{
  transform: scale(1.02);
}

/* Fallback elegante */
.aiba-acervo-tecnico .cover-slot.is-fallback{
  display: grid;
  place-items: center;
  background:
    radial-gradient(1000px 420px at 20% 10%, rgba(0, 123, 78, 0.20), transparent 55%),
    radial-gradient(900px 460px at 85% 85%, rgba(0, 23, 25, 0.12), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, rgba(0, 123, 78, 0.06) 100%);
}

/* Conteúdo do fallback (ícone + textos) */
.aiba-acervo-tecnico .cover-fallback{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 22px;
  color: var(--color-nota);
}

.aiba-acervo-tecnico .cover-fallback .fallback-ico{
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  border: 1px solid var(--border-escura);
  background: rgba(255,255,255,0.75);
  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
  color: var(--color-principal);
}

.aiba-acervo-tecnico .cover-fallback .fallback-kicker{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-nota);
}

.aiba-acervo-tecnico .cover-fallback .fallback-meta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-escura);
  background: rgba(0, 123, 78, 0.10);
  color: var(--color-escuro);
  font-size: 12px;
  font-weight: 700;
}

/* Chips (reaproveita padrão do seu mag) */
.aiba-acervo-tecnico .mag-cover-link .mag-chip{
  position: absolute;
  display: inline-block;
  width: auto;
  background: rgba(0, 23, 25, 0.7);
  color: var(--color-branco);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 4px;
  z-index: 2;
}
.aiba-acervo-tecnico .mag-cover-link .mag-chip.ed  { top: 12px; left: 12px; }
.aiba-acervo-tecnico .mag-cover-link .mag-chip.fmt { top: 12px; right: 12px; }

/* Overlay "Ler" (mesmo padrão da revista) */
.aiba-acervo-tecnico .mag-cover-actions{
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(0, 123, 78, 0.85);
  color: var(--color-branco);
  opacity: 0;
  transform: scale(0.92);
  transition: all 0.3s ease;
  z-index: 3;
}
.aiba-acervo-tecnico .mag-cover-actions .txt{
  font-size: 16px;
  font-weight: 600;
}
.aiba-acervo-tecnico .mag-cover-link:hover .mag-cover-actions{
  opacity: 1;
  transform: scale(1);
}


/* ========================================= */
/* 5. CORPO DO CARD (mesmo ID visual)
/* ========================================= */
.aiba-acervo-tecnico .mag-body{
  padding: 24px;
  display: flex;
  flex-direction: column;
}

.aiba-acervo-tecnico .mag-title{
  font-size: var(--font-size-h4);
  font-weight: 600;
  color: var(--color-escuro);
  line-height: 1.4;
  margin: 0 0 18px;
}

.aiba-acervo-tecnico .mag-actions{
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}


/* ========================================= */
/* 6. MODAL (mesma linguagem)
/* ========================================= */
.at-modal{
  margin: auto;
  padding: 0;
  border: none;
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  overflow: hidden;
}

.at-modal::backdrop{
  background: rgba(0, 23, 25, 0.7);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.at-modal[open]{
  animation: modal-fade-in 0.3s ease-out;
}

@keyframes modal-fade-in{
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

.at-modal__sheet{
  width: 90vw;
  max-width: 1200px;
  height: 90vh;
  display: flex;
  flex-direction: column;
  background: var(--color-branco);
}

.at-modal__close{
  flex-shrink: 0;
  text-align: right;
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
  padding: 12px 20px;
  border: none;
  background: var(--color-verde-claro);
  color: var(--color-nota);
  cursor: pointer;
}
.at-modal__close:hover{ color: var(--color-principal); }

.at-modal iframe{
  flex-grow: 1;
  border: none;
  width: 100%;
  height: 100%;
}