/**
 * Grade de Corpo Docente — estilos.
 *
 * Layout (desktop): card destaque à esquerda (foto de fundo + gradiente +
 * texto branco na base) + coluna com a grade 4×2 e a paginação ancorada na
 * base, alinhada com o rodapé do destaque.
 * Mobile: destaque full-width (quadrado) no topo + grade 2 colunas + só dots.
 *
 * Convenções do projeto:
 * - Fontes hardcoded ("Poppins" / "Source Sans Pro"), carregadas globalmente.
 * - Seletores de button/img/dot escopados sob `.pucpr-depo` (0,2,0) pra vencer
 *   o Elementor global kit, que estiliza `button`/`img` em (0,1,1) e pintaria
 *   os botões de roxo / colapsaria as fotos (mesmo padrão do widget Depoimentos
 *   em Vídeo).
 * - Cores do badge "+" e do dot ativo sobrescritas pelos controles via {{WRAPPER}}.
 */

.pucpr-depo {
  --pucpr-depo-radius: 20px;
  --pucpr-depo-gap: 30px;
  --pucpr-depo-badge: #e4e98d;
  --pucpr-depo-dot: #ff0040;

  display: flex;
  align-items: stretch;
  gap: var(--pucpr-depo-gap);
}

/* `hidden` precisa sempre vencer as regras de display do próprio widget:
   display:flex/inline-flex (regra de autor) ganha do [hidden] do user-agent,
   então sem isto seções vazias vazariam visíveis — disciplinas sem conteúdo,
   botão sem URL, `actions` sem nenhum link, foto ausente e a paginação de 1
   página. Escopado aos dois roots (widget + modal, que vive fora no <body>). */
.pucpr-depo [hidden],
.pucpr-depo-modal [hidden] {
  display: none !important;
}

/* ---------- Card destaque ---------- */
.pucpr-depo__featured {
  position: relative;
  flex: 0 0 clamp(300px, 32%, 390px);
  min-height: 440px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  border-radius: var(--pucpr-depo-radius);
  overflow: hidden;
  isolation: isolate;
}

/* Foto de fundo — escopo extra pra vencer o kit (`img { height:auto }` em 0,1,1). */
.pucpr-depo .pucpr-depo__featured-photo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  z-index: 0;
}

/* Gradiente transparente→preto (specs do Figma: 35.48%→94.52%). */
.pucpr-depo__featured::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 35.48%,
    #000 94.52%
  );
  pointer-events: none;
}

.pucpr-depo__featured-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

.pucpr-depo__featured-id {
  display: flex;
  flex-direction: column;
}

.pucpr-depo__featured-name {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 28px;
  color: #fff;
}

.pucpr-depo__featured-role {
  margin: 0;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
}

/* Descrição curta no destaque — Source Sans Pro Regular 14, branco. */
.pucpr-depo__featured-text {
  margin: 0;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: #fff;
}

/* ---------- Coluna direita (grade + paginação) ---------- */
.pucpr-depo__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ---------- Grade (mini-cards) ---------- */
.pucpr-depo__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 20px;
  row-gap: 40px;
}

.pucpr-depo__mini {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: left;
}

/* ---------- Gatilho da modal (botão esticado sobre o card) ---------- */
/* Escopo (0,2,0) pra vencer o kit (button { background: … }): o gatilho é
   transparente e cobre o card inteiro — clicar em qualquer ponto abre a modal.
   z-index 3 pra ficar acima do body do destaque (z-index 2). */
.pucpr-depo .pucpr-depo__trigger {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: inherit;
}
.pucpr-depo .pucpr-depo__trigger:focus-visible {
  outline: 2px solid var(--roxo, #3e0f8a);
  outline-offset: 2px;
}

.pucpr-depo__mini-head {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

/* Escopo extra pra vencer o kit (`img { height:auto }`). */
.pucpr-depo .pucpr-depo__mini-photo {
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  border-radius: 10px;
  object-fit: cover;
  display: block;
}

.pucpr-depo__mini-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pucpr-depo__mini-id {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pucpr-depo__mini-name {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.1;
  color: #000;
}

.pucpr-depo__mini-role {
  margin: 0;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: #000;
}

/* Descrição curta no mini — Source Sans Pro Regular 14, limitada a 2 linhas. */
.pucpr-depo__mini-text {
  margin: 0;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: #000;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Badge "+" (verde) ---------- */
/* Escopo (0,2,0) pra vencer o kit; o controle cor_badge ({{WRAPPER}} .pucpr-depo__plus,
   também 0,2,0) sobrescreve a cor por vir depois na cascata. Serve tanto pro
   <button> do mini quanto pro <span> decorativo do destaque. */
.pucpr-depo .pucpr-depo__plus {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 6px;
  background: var(--pucpr-depo-badge);
  color: #000;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

/* O "+" agora é decorativo (span aria-hidden); quem clica é o gatilho esticado.
   O feedback de hover/foco passa a reagir ao card inteiro (hover do mouse ou
   foco por teclado no gatilho, via :focus-within). !important pra vencer o
   controle cor_badge do Elementor. Sem scale/brightness. */
.pucpr-depo .pucpr-depo__mini:hover .pucpr-depo__plus,
.pucpr-depo .pucpr-depo__mini:focus-within .pucpr-depo__plus,
.pucpr-depo .pucpr-depo__featured:hover .pucpr-depo__plus,
.pucpr-depo .pucpr-depo__featured:focus-within .pucpr-depo__plus {
  background: var(--roxo, #3e0f8a) !important;
  color: #fff;
}

/* ---------- Paginação ---------- */
.pucpr-depo__pagination {
  display: flex;
  align-items: center;
  gap: 14px;
  /* Empurra a paginação pra base da coluna, alinhando com o rodapé do destaque
     (a coluna estica via align-items:stretch no pai). */
  margin-top: auto;
  padding-top: 24px;
}

/* Setas — escopo (0,2,0) pra vencer o kit (que pintaria de roxo). */
.pucpr-depo .pucpr-depo__arrow {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: #f5f0f2;
  color: #000;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.4s ease;
}

.pucpr-depo .pucpr-depo__arrow:hover,
.pucpr-depo .pucpr-depo__arrow:focus-visible {
  background: #ece2e6;
  outline: none;
}

.pucpr-depo__arrow-ico {
  display: block;
  width: 8px;
  height: 16px;
}

/* O SVG é chevron-left; o botão "next" espelha pra direita. */
.pucpr-depo__next .pucpr-depo__arrow-ico {
  transform: scaleX(-1);
}

.pucpr-depo__dots {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pucpr-depo .pucpr-depo__dot {
  width: 10px;
  height: 10px;
  border: 0;
  border-radius: 999px;
  background: #f0e8eb;
  cursor: pointer;
  padding: 0;
  transition:
    background 0.4s ease,
    transform 0.4s ease;
}

.pucpr-depo .pucpr-depo__dot:hover {
  background: #e3d6db;
}

.pucpr-depo .pucpr-depo__dot.is-active {
  background: var(--pucpr-depo-dot);
}

/* ---------- Responsivo ---------- */
/* Tablet: grade 3 colunas, destaque mais estreito. */
@media (max-width: 1024px) {
  .pucpr-depo__featured {
    flex-basis: clamp(240px, 32%, 320px);
    min-height: 400px;
  }
  .pucpr-depo__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Mobile: empilha — destaque quadrado full-width, grade 2 colunas, só dots. */
@media (max-width: 767px) {
  .pucpr-depo {
    flex-direction: column;
    gap: 40px;
  }
  .pucpr-depo__featured {
    flex: none;
    width: 100%;
    min-height: 0;
    aspect-ratio: 1 / 1;
  }
  .pucpr-depo__grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 20px;
  }
  .pucpr-depo__pagination {
    margin-top: 24px;
    padding-top: 0;
    justify-content: center;
  }
  /* Só dots no mobile — as setas somem. Escopo (0,2,0) pra vencer a regra base. */
  .pucpr-depo .pucpr-depo__arrow {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pucpr-depo .pucpr-depo__plus,
  .pucpr-depo .pucpr-depo__arrow,
  .pucpr-depo .pucpr-depo__dot {
    transition: none;
  }
}

/* ==================== Modal de detalhes ==================== */

/* Trava o scroll do body enquanto a modal está aberta. */
.pucpr-depo-locked {
  overflow: hidden;
}

.pucpr-depo-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.pucpr-depo-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
}

/* Wrapper do diálogo (desktop): painel + X lado a lado, X alinhado ao topo do
   painel (Figma: X branco fora do card, à direita). No mobile vira coluna com o
   X acima do painel (ver media query). */
.pucpr-depo-modal__dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 20px;
  width: min(1080px, 100%);
  max-height: calc(100vh - 40px);
}

/* Painel branco (Figma: 1080×500, radius 20, sombra 10/10/30 @ .8). */
.pucpr-depo-modal__panel {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  height: 500px;
  min-height: 0;
  max-height: 100%;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.8);
}

/* Foto à esquerda — 500/1080 ≈ 46% da largura do painel. */
.pucpr-depo-modal__photo-wrap {
  flex: 0 0 46%;
}

/* Escopo extra pra vencer o kit (img { height:auto }). */
.pucpr-depo-modal .pucpr-depo-modal__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Coluna de conteúdo — texto no topo, botões ancorados na base
   (justify-between, como o Figma desktop de altura fixa 500px). */
.pucpr-depo-modal__body {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 50px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}

.pucpr-depo-modal__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.pucpr-depo-modal__text {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pucpr-depo-modal__name {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
  color: #000;
}

.pucpr-depo-modal__title {
  margin: 0;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: normal;
  color: #000;
}

.pucpr-depo-modal__desc {
  margin: 0;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: #000;
  white-space: pre-line;
}

.pucpr-depo-modal__disciplinas {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pucpr-depo-modal__disc-heading {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: normal;
  color: #000;
}

.pucpr-depo-modal__disc-list {
  margin: 0;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: #000;
  white-space: pre-line;
}

.pucpr-depo-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Botões — escopo (0,2,0) pra vencer o kit (a/button). Figma: lilás, 44px de
   altura, pílula, ícone + label em Source Sans Pro Regular 16px. */
.pucpr-depo-modal .pucpr-depo-modal__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 44px;
  padding: 5px 20px;
  border-radius: 1000px;
  background: var(--lilás, #863bff);
  color: #fff;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: background 0.3s ease;
}

/* Hover: escurece de lilás pro roxo — mesma linguagem de hover do "+" do card
   (lilás → --roxo), então o botão fala a mesma língua do resto do widget. */
.pucpr-depo-modal .pucpr-depo-modal__btn:hover {
  background: var(--roxo, #3e0f8a);
  color: #fff;
}

/* Foco por teclado: mantém o fundo lilás e adiciona um anel roxo — visível sobre
   o painel branco. O fill não escurece no foco pra o anel não se fundir com ele. */
.pucpr-depo-modal .pucpr-depo-modal__btn:focus-visible {
  outline: 2px solid var(--roxo, #3e0f8a);
  outline-offset: 2px;
}

.pucpr-depo-modal__btn-ico {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

/* Botão de fechar (X) — branco, sem fundo. Desktop: à direita do painel
   (order:2 + align-items:flex-start do dialog o mantêm no topo). Mobile: acima. */
.pucpr-depo-modal .pucpr-depo-modal__close {
  order: 2;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.3s ease;
}

.pucpr-depo-modal .pucpr-depo-modal__close:hover {
  opacity: 0.7;
}

/* Foco por teclado: anel branco visível sobre o backdrop escuro. O hover só
   muda a opacidade; o foco precisa de um indicador claro (WCAG 2.4.7). */
.pucpr-depo-modal .pucpr-depo-modal__close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  border-radius: 4px;
  opacity: 1;
}

.pucpr-depo-modal__close-ico {
  display: block;
}

/* Mobile: empilha (foto no topo 233px, conteúdo abaixo). O painel rola por
   dentro; os blocos passam a ter 30px de gap e a tipografia encolhe. */
@media (max-width: 767px) {
  /* Mobile: X acima do painel (coluna), alinhado à direita. */
  .pucpr-depo-modal__dialog {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .pucpr-depo-modal .pucpr-depo-modal__close {
    order: 0;
    align-self: flex-end;
  }
  .pucpr-depo-modal__panel {
    flex: 0 1 auto;
    width: 100%;
    flex-direction: column;
    height: auto;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .pucpr-depo-modal__photo-wrap {
    flex: 0 0 auto;
    width: 100%;
    height: 233px;
  }
  .pucpr-depo-modal__body {
    height: auto;
    padding: 15px 20px 20px;
    justify-content: flex-start;
    gap: 30px;
    overflow-y: visible;
  }
  .pucpr-depo-modal__content {
    gap: 30px;
  }
  /* Escopado com .pucpr-depo-modal (2 classes): o Global Kit do Elementor
     (.elementor-kit-125 h2, 0,1,1) vencia a classe sozinha e deixava o nome
     em 48px no mobile. */
  .pucpr-depo-modal .pucpr-depo-modal__name {
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
  }
  /* Foto cortada pelo topo (rosto) no card de 233px: ancora no topo. */
  .pucpr-depo-modal .pucpr-depo-modal__photo {
    object-position: top;
  }
  .pucpr-depo-modal__title {
    font-size: 16px;
  }
  /* No mobile o título "Disciplinas que ministra:" usa Source Sans Pro Bold 16px
     (no desktop é Poppins Bold 18px). */
  .pucpr-depo-modal__disc-heading {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pucpr-depo-modal .pucpr-depo-modal__btn,
  .pucpr-depo-modal .pucpr-depo-modal__close {
    transition: none;
  }
}