/* =============================================================
   GNCC USP  ·  components.css
   Blocos reutilizaveis: listas de pesquisa, cards de curso, pessoas,
   noticias, filtros, chips, apoio e contato.
   ============================================================= */

/* ------------------------------------------------------------- imagens reservadas
   Enquanto nao houver fotos, estes blocos marcam o espaco e a proporcao.
   Para usar uma foto real, troque <span class="img-slot"> por <img>. */
.img-slot{
  display:block;
  width:100%;
  background:var(--tint);
  border:1px solid var(--mist);
}
.ratio-wide{aspect-ratio:16/9}
.ratio-hero{aspect-ratio:21/9}
.ratio-area{aspect-ratio:4/3}

.figure{margin:0 0 6px}
.figure figcaption{
  font-size:13px;
  color:var(--ink-mute);
  padding-top:8px;
}

/* ------------------------------------------------------------- lista de pesquisa (home) */
.research-list{border-top:1px solid var(--mist)}
.research-line{
  display:grid;
  grid-template-columns:var(--side) 1fr auto;
  gap:var(--side-gap);
  align-items:baseline;
  padding:26px 0;
  border-bottom:1px solid var(--mist);
  text-decoration:none;
  color:inherit;
  transition:background .16s ease;
}
.research-line:hover{background:#fff}
.research-cat{
  font-family:var(--sans);
  font-size:12.5px;
  font-weight:800;
  letter-spacing:.03em;
  color:#6E9A22;
  margin:0;
}
.research-body{display:block}
.research-title{
  display:block;
  font-family:var(--serif);
  font-size:clamp(19px, 2vw, 23px);
  line-height:1.3;
  color:var(--navy);
  margin-bottom:8px;
}
.research-desc{
  display:block;
  font-size:15px;
  color:var(--ink-soft);
  max-width:62ch;
}
.research-go{
  font-size:14px;
  font-weight:700;
  color:var(--navy);
  white-space:nowrap;
}

/* ------------------------------------------------------------- area de pesquisa (pagina) */
.area-rows{display:grid;gap:clamp(36px, 5vw, 64px)}
.area-row{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:clamp(22px, 4vw, 52px);
  align-items:center;
}
.area-row-flip .img-slot{order:2}
.area-row h2{margin:6px 0 12px}
.area-row-body p{color:var(--ink-soft);max-width:58ch}

/* ------------------------------------------------------------- coordenacao */
.coord-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:18px;
  margin-top:30px;
}
.coord-card{
  display:flex;
  align-items:center;
  gap:16px;
  background:#fff;
  border:1px solid var(--mist);
  padding:18px 20px;
  text-decoration:none;
  color:inherit;
  transition:border-color .16s ease;
}
.coord-card:hover{border-color:var(--navy)}
.coord-card strong{
  display:block;
  font-size:16px;
  color:var(--navy);
  line-height:1.3;
  margin-bottom:2px;
}

/* ------------------------------------------------------------- pessoas */
.people-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(168px, 1fr));
  gap:28px 22px;
}
.person-card{text-decoration:none;color:inherit;display:block}
.person-photo{
  display:grid;
  place-items:center;
  aspect-ratio:3/4;
  background:#fff;
  border:1px solid var(--mist);
  color:var(--navy);
  font-family:var(--serif);
  font-size:28px;
  margin-bottom:12px;
  transition:border-color .16s ease;
}
.section-tint .person-photo{background:#fff}
.person-card:hover .person-photo{border-color:var(--navy)}
.person-photo.small{
  aspect-ratio:1/1;
  width:54px;
  flex:none;
  font-size:19px;
  margin:0;
  background:var(--tint);
}
.person-photo.large{
  aspect-ratio:3/4;
  width:180px;
  flex:none;
  font-size:44px;
  margin:0;
}
.person-card strong{
  display:block;
  font-size:15px;
  font-weight:700;
  color:var(--navy);
  line-height:1.3;
  margin-bottom:3px;
}
.person-role{display:block;font-size:13px;color:var(--ink-mute);line-height:1.45}
.person-card-more .person-photo{font-family:var(--sans);font-weight:300}

.person-hero{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:clamp(22px, 4vw, 44px);
  align-items:center;
}

.team-group + .team-group{margin-top:clamp(44px, 5vw, 68px)}

/* ------------------------------------------------------------- curso */
.activities-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(22px, 3vw, 40px);
  align-items:start;
}
.course-card{
  background:var(--navy);
  color:#fff;
  padding:clamp(26px, 3.4vw, 42px);
}
.course-card h3{color:#fff;font-family:var(--serif);margin:0 0 14px}
.course-desc{color:#CBCEE8;font-size:15.5px;margin-bottom:24px}
.flag{
  display:inline-block;
  background:var(--green);
  color:var(--navy-deep);
  font-size:12px;
  font-weight:800;
  letter-spacing:.03em;
  padding:6px 12px;
  margin:0 0 18px;
}
.course-facts{margin:0 0 28px;display:grid;gap:0}
.course-facts .fact{
  display:grid;
  grid-template-columns:110px 1fr;
  gap:14px;
  padding:11px 0;
  border-bottom:1px solid rgba(255,255,255,.18);
  font-size:14.5px;
}
.course-facts dt{color:#9FA3CE;font-weight:600;margin:0}
.course-facts dd{margin:0;font-weight:700}
.course-card .btn-solid{background:var(--green);color:var(--navy-deep);font-weight:800}
.course-card .btn-solid:hover{background:#8abf35}

/* ------------------------------------------------------------- conteudo gratuito */
.free-list{display:grid;gap:0;border-top:1px solid var(--mist)}
.free-item{
  display:block;
  padding:20px 2px;
  border-bottom:1px solid var(--mist);
  text-decoration:none;
  color:inherit;
  transition:padding-left .16s ease;
}
.free-item:hover{padding-left:10px}
.free-kind{
  display:inline-block;
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.04em;
  color:#6E9A22;
  margin-bottom:6px;
}
.free-item h3{font-size:17px;margin:0 0 5px;font-family:var(--sans);font-weight:800}
.free-item p{font-size:14px;color:var(--ink-soft);margin:0}

.free-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
  border-top:0;
}
.free-grid .free-item{
  border:1px solid var(--mist);
  padding:24px;
}
.free-grid .free-item:hover{padding-left:24px;border-color:var(--navy)}

/* ------------------------------------------------------------- edicoes anteriores */
.past-list{display:grid;border-top:1px solid var(--mist)}
.past-item{
  display:grid;
  grid-template-columns:110px 1fr;
  gap:var(--side-gap);
  padding:24px 0;
  border-bottom:1px solid var(--mist);
}
.past-year{
  font-family:var(--sans);
  font-size:15px;
  font-weight:800;
  color:var(--navy);
  margin:0;
}
.past-item h3{font-family:var(--sans);font-size:18px;font-weight:800;margin:0 0 6px}
.past-item p{font-size:14.5px;color:var(--ink-soft);margin:0}

/* ------------------------------------------------------------- noticias */
.post-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(20px, 3vw, 34px);
}
.post-card{text-decoration:none;color:inherit;display:block}
.post-thumb{
  display:block;
  aspect-ratio:16/10;
  background:var(--tint);
  border:1px solid var(--mist);
  margin-bottom:14px;
}
.section-tint .post-thumb{background:#fff}
.post-card:hover .post-thumb{border-color:var(--navy)}
.post-meta{display:flex;align-items:center;gap:12px;margin:0 0 8px;flex-wrap:wrap}
.post-meta time{font-size:13px;color:var(--ink-mute)}
.post-card h3{
  font-size:19px;
  margin:0 0 8px;
  line-height:1.32;
}
.post-card p{font-size:14.5px;color:var(--ink-soft);margin:0}

.tag{
  display:inline-block;
  font-family:var(--sans);
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.03em;
  padding:4px 9px;
  border:1px solid var(--mist);
  color:var(--navy);
  background:#fff;
}
.tag-article{border-color:var(--green);color:#5E8A1B}
.tag-event{border-color:var(--orange);color:#C25C10}

.filter-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:36px;
  padding-bottom:22px;
  border-bottom:1px solid var(--mist);
}
.filter{
  font:inherit;
  font-size:14px;
  font-weight:700;
  color:var(--navy);
  background:#fff;
  border:1px solid var(--mist);
  padding:9px 16px;
  cursor:pointer;
}
.filter:hover{border-color:var(--navy)}
.filter.is-active{background:var(--navy);border-color:var(--navy);color:#fff}

.article-wrap{max-width:820px}
.article-wrap .prose{margin-top:30px}
.post-area{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:30px;
  padding-top:22px;
  border-top:1px solid var(--mist);
  font-size:13px;
  font-weight:800;
  color:var(--ink-mute);
  letter-spacing:.03em;
}

/* ------------------------------------------------------------- chips */
.chip-row{display:flex;gap:10px;flex-wrap:wrap}
.chip{
  display:inline-block;
  font-size:14px;
  font-weight:700;
  color:var(--navy);
  background:#fff;
  border:1px solid var(--mist);
  padding:9px 16px;
  text-decoration:none;
}
.chip:hover{border-color:var(--navy);background:var(--green-pale)}

/* ------------------------------------------------------------- frentes (sobre) */
.front-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:20px}
.front-card{
  display:block;
  border:1px solid var(--mist);
  border-top:3px solid var(--green);
  padding:26px 24px;
  text-decoration:none;
  color:inherit;
  transition:border-color .16s ease;
}
.front-card:hover{border-color:var(--navy);border-top-color:var(--navy)}
.front-card h3{font-family:var(--sans);font-size:19px;font-weight:800;margin:0 0 8px}
.front-card p{font-size:14.5px;color:var(--ink-soft);margin:0 0 16px}

/* ------------------------------------------------------------- apoio */
.support-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:40px}
.support-title{
  font-family:var(--sans);
  font-size:13px;
  font-weight:800;
  letter-spacing:.04em;
  color:var(--navy);
  border-top:3px solid var(--mist);
  padding-top:10px;
  margin:0 0 18px;
}
.logo-row{display:flex;flex-wrap:wrap;gap:14px;list-style:none;margin:0;padding:0}
/* espaco reservado para o logotipo do apoiador, troque por <img> quando tiver o arquivo */
.logo-slot{
  border:1px dashed var(--mist);
  background:#fff;
  color:var(--ink-mute);
  font-size:13px;
  font-weight:800;
  padding:16px 24px;
}

/* ------------------------------------------------------------- faixa de contato */
.contact-band{background:var(--navy);color:#fff}
.contact-band h2{color:#fff}
.contact-band p{color:#CBCEE8;max-width:52ch}
.contact-band-grid{
  display:grid;
  grid-template-columns:1.4fr auto;
  gap:32px;
  align-items:center;
}
.contact-band .btn-solid{background:var(--green);color:var(--navy-deep);font-weight:800}
.contact-band .btn-solid:hover{background:#8abf35}

/* ------------------------------------------------------------- pagina de contato */
.contact-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(26px, 4vw, 60px);
  align-items:start;
  margin-bottom:clamp(34px, 4vw, 56px);
}
.contact-info p{margin:0 0 14px;color:var(--ink-soft)}
.info-label{
  font-family:var(--sans);
  font-size:12.5px;
  font-weight:800;
  letter-spacing:.04em;
  color:var(--navy);
  margin:22px 0 4px !important;
}
.map-wrap{
  border:1px solid var(--mist);
  aspect-ratio:16/7;
  width:100%;
}
.map-wrap iframe{width:100%;height:100%;border:0;display:block}

/* ------------------------------------------------------------- responsivo */
@media (max-width:1000px){
  .research-line{grid-template-columns:1fr;gap:10px}
  .research-go{display:none}
  .area-row{grid-template-columns:1fr}
  .area-row-flip .img-slot{order:0}
  .activities-grid,
  .contact-grid,
  .contact-band-grid,
  .support-grid{grid-template-columns:1fr}
  .post-grid,
  .front-grid,
  .free-grid,
  .coord-grid{grid-template-columns:1fr}
  .person-hero{grid-template-columns:1fr}
  .person-photo.large{width:150px}
  .past-item{grid-template-columns:1fr;gap:8px}
}

@media (min-width:640px) and (max-width:1000px){
  .post-grid,
  .front-grid,
  .free-grid,
  .coord-grid{grid-template-columns:repeat(2, 1fr)}
}