/* =========================================================================
   Diario do Professor - estilos exclusivos da pagina
   Mockup: "03 Diario do Professor/Pagina Acadesc Diario do Professor_Mockup.png"
   (1915x1871)

   As medidas entre parenteses sao as do mockup em 1920px; os valores
   aplicados sao elas x 0,75 (referencia de 1440px), como no site.css.

   Ordem das medias queries: sempre do MAIOR para o menor.
   ========================================================================= */


/* =========================================================================
   1. Banner de abertura
   Mockup: y 139..960 (821 -> 616). Texto a esquerda, professora a direita
   sobre a arte amarela.
   ========================================================================= */

.dp-hero {
  position: relative;
  overflow-x: clip;
  background: var(--branco);
}

/* Arte amarela do canto direito, ancorada ao CONTAINER e nao a borda da tela,
   como a forma amarela da Home e a cunha da Acadesc Web. */
.dp-hero__arte {
  position: absolute;
  z-index: 0;
  top: 0;
  right: calc(50% - (var(--container) / 2) - var(--gutter) - 30px);
  width: 925px;   /* (1233) */
  height: 524px;  /* (698)  */
  background: url("../../img/diario_do_professor/banner-fundo.webp") right top / contain no-repeat;
  pointer-events: none;
}

.dp-hero__interno {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding-block: 50px 46px;  /* (66 / 61) */
}

.dp-hero__texto {
  flex: 1 1 auto;
  max-width: 600px;
}

/* Sobretitulo + titulo + paragrafo.

   A altura minima existe por causa da lista logo abaixo: ela tem duas colunas
   e e mais larga que esta coluna de texto, entao precisa comecar depois que a
   foto termina - senao a segunda coluna passaria por cima do canto da lousa,
   que comeca em x=720 numa tela de 1440.

   A conta: a foto tem 401px de altura e sobe 6 (ver .dp-hero__professora),
   entao a lista so pode comecar 407px abaixo do topo deste bloco. Desses 407
   a propria lista ja poe 84 no seu margin-top; sobram 323 aqui.

   Abaixo de 1400 a foto encolhe e o paragrafo cresce, e o proprio conteudo ja
   passa dessa altura: o valor e reajustado nos media queries. */
.dp-hero__intro { min-height: 323px; }

.dp-hero__sobretitulo {
  text-transform: uppercase;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 18px;  /* (24) */
  line-height: 1.2;
  color: var(--navy);
  margin-bottom: .5em;
}

.dp-hero__titulo {
  /* Mockup: 50px, e a 2a linha do titulo mede 783 (587 na escala do site).
     O Poppins do Google renderiza ~8% mais largo (ver a nota no
     acadesc_web.css); a 33px a linha fecha em 588 e bate com o desenho. */
  font-size: 33px;
  line-height: 1.3;
  margin-bottom: 16px;
}

.dp-hero__resumo {
  max-width: 580px;  /* (773) */
  text-align: justify;

  /* Sem margin-bottom de proposito. Dentro do .dp-hero__intro este paragrafo
     e o ULTIMO filho, e o `p:last-child { margin-bottom: 0 }` do site.css
     (secao 2) zera a margem dele - e ganha na especificidade, porque
     `p:last-child` vale (0,1,1) contra os (0,1,0) da classe. O respiro ate a
     lista mora no margin-top da propria lista. */
}

/* --- Lista dos 6 itens: 3 linhas em 2 colunas ---------------------------

   O mockup traz as 6 numa coluna so. O Dorival pediu 3 x 2 para ocupar o
   vazio que sobra embaixo da foto.

   A grade preenche por COLUNA (grid-auto-flow: column + 3 linhas fixas), para
   os tres primeiros itens ficarem na esquerda e os tres ultimos na direita,
   na ordem em que estao em views/dados/diario_do_professor.php.

   `width: max-content` e de proposito: os dois itens mais largos medem 344 e
   343px e, com a calha, a lista fecha em 761 - mais que os 600px da coluna de
   texto. Ela vaza para a direita e cai no espaco livre embaixo da foto. */

.dp-lista {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(3, auto);
  justify-content: start;
  width: max-content;
  column-gap: 74px;  /* (99) */
  row-gap: 9px;      /* (12) */

  /* No mockup sao 26px (35) entre o paragrafo e a lista: la ela tem 6 linhas
     e nasce colada. Em duas colunas a lista e mais larga que a coluna de
     texto e precisa de mais ar para nao ser lida como parte do paragrafo - o
     valor veio do rascunho do Dorival. Abaixo de 992px, com a lista de volta
     a uma coluna, o respiro volta ao do mockup. */
  margin-top: 84px;  /* (112) */

  margin-bottom: 30px;  /* (40) */
}

.dp-lista__item {
  display: flex;
  align-items: center;
  gap: 11px;  /* (15) */
  font-size: var(--fs-corpo);
  line-height: 1.3;
  color: var(--texto);
}

.dp-lista__marca {
  flex-shrink: 0;
  width: 21px;   /* (28) */
  height: 21px;
}

/* A cor vem da POSICAO, nao do HTML: em duas colunas a da esquerda e azul e a
   da direita amarela (foi o que o Dorival pediu). Quando a lista volta a ter
   uma coluna so, no celular, elas voltam a alternar linha a linha como no
   mockup - a troca esta no media query de 991px. */
.dp-lista__item:nth-child(-n+3) .dp-lista__marca { color: var(--azul); }
.dp-lista__item:nth-child(n+4)  .dp-lista__marca { color: var(--amarelo); }

.dp-hero__cta {
  min-width: 274px;  /* (366) */
  min-height: 49px;  /* (65)  */
  font-size: var(--fs-h4);
}

/* A professora vem isolada com transparencia e senta sobre a arte amarela.
   Reduzida para caber, nunca cortada. */
.dp-hero__professora {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 713px;  /* (950) */
  height: auto;
  margin-top: -6px;
  margin-right: -30px;
}


/* =========================================================================
   2. Faixa dos selos
   Mockup: y 960..1096. Aqui sao QUATRO, com o do login em dois fatores.
   ========================================================================= */

.dp-selos { padding-block: 10px 40px; }

.dp-selos__lista {
  flex-wrap: wrap;
  gap: 44px;  /* (59) */
}


/* =========================================================================
   3. Faixa de login
   Mockup: y 1170..1871 (701 -> 526), de ponta a ponta da tela.

   PROVISORIO: o cartao de login esta impresso dentro da imagem de fundo -
   ver a explicacao em views/pages/diario_do_professor/login.php.
   ========================================================================= */

.dp-login {
  position: relative;
  background: var(--navy);
}

/* A imagem manda na altura da faixa: assim tudo que e posicionado em
   porcentagem sobre ela (o link do Continuar) acompanha em qualquer largura. */
.dp-login__fundo {
  display: block;
  width: 100%;
  height: auto;
}

.dp-login__interno {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
}

/* Painel escuro do texto. No mockup ele sangra pela borda esquerda da tela;
   aqui avanca so sobre a calha, para acompanhar o container. */
.dp-login__painel {
  position: relative;
  margin-left: calc(var(--gutter) * -1);
  padding: 26px 40px 26px calc(var(--gutter) + 40px);
  background: rgba(18, 60, 102, .88);
  color: var(--branco);
  max-width: 560px;
}

.dp-login__titulo {
  text-transform: uppercase;
  color: var(--branco);
  font-size: var(--fs-h2);
  line-height: 1.25;
  margin-bottom: .55em;
}

/* Link sobre o botao "Continuar" impresso na imagem. As medidas sao
   porcentagens do arquivo (x 1540..1731 e y 524..568 de 1915x701), entao ele
   acompanha a imagem em qualquer largura. Nao e mais o unico caminho - o
   botao amarelo do painel agora aparece tambem no desktop -, mas continua
   aqui para quem clicar no botao impresso assim mesmo. Sai junto com o cartao
   quando o export limpo chegar. */
.dp-login__entrar {
  position: absolute;
  left: 80.42%;
  top: 74.75%;
  width: 10.03%;
  height: 6.42%;
  border-radius: 3px;
}

.dp-login__entrar:hover { box-shadow: 0 0 0 2px var(--amarelo); }

/* Botao de verdade dentro do painel: o caminho oficial para o sistema, em
   qualquer largura. Antes so aparecia abaixo de 991px, e no desktop o unico
   caminho era o link invisivel sobre o "Continuar" impresso - o que fazia a
   pessoa achar que o cartao da imagem era um formulario de verdade. */
.dp-login__botao {
  display: inline-flex;
  margin-top: 20px;
}


/* =========================================================================
   4. Responsivo - do maior para o menor
   ========================================================================= */

@media (max-width: 1399.98px) {

  .dp-hero__professora { width: 620px; }

  .dp-hero__texto { max-width: 540px; }

  .dp-hero__arte { width: 800px; height: 453px; }

  /* A foto agora tem 349px de altura e termina 343px abaixo do topo do texto:
     a lista comeca em 355, menos os 84 do margin-top dela, dao 271. Nesta
     faixa o paragrafo sozinho ja passa disso, entao na pratica a altura
     minima nao muda nada - fica pelo acerto de contas. */
  .dp-hero__intro { min-height: 271px; }
}


/* --- Abaixo de 1200px o texto nao cabe mais ao lado da professora sem o
       titulo quebrar em quatro linhas: a foto desce para baixo do texto e o
       banner passa a ser uma coluna so. -------------------------------- */
@media (max-width: 1199.98px) {

  .dp-hero__interno {
    flex-direction: column;
    align-items: stretch;
  }

  .dp-hero__titulo { font-size: 28px; }

  .dp-hero__texto { max-width: 100%; }

  .dp-hero__resumo { max-width: 100%; }

  .dp-hero__professora {
    width: min(560px, 100%);
    align-self: center;
    margin: 20px 0 0;
  }

  .dp-hero__arte { display: none; }

  /* A foto desceu para baixo do texto: nao ha mais o que evitar, e a altura
     minima so abriria um vazio embaixo do paragrafo. */
  .dp-hero__intro { min-height: 0; }

  .dp-login__titulo { font-size: var(--fs-h3); }

  .dp-login__painel { padding-block: 20px; max-width: 460px; }
}


/* --- Tablet: a faixa de login e larga demais para caber inteira ---------- */
@media (max-width: 991.98px) {

  /* A imagem da faixa fica larga demais para caber inteira sem virar uma
     tirinha: passa a preencher a altura e o excesso e cortado nas laterais. */
  .dp-login { min-height: 380px; }

  .dp-login__fundo {
    height: 380px;
    object-fit: cover;
    object-position: left center;
  }

  /* A imagem e cortada, entao o botao impresso sai de cena e o link
     transparente que fica sobre ele nao aponta mais para lugar nenhum. */
  .dp-login__entrar { display: none; }

  /* Duas colunas pedem 761px e aqui o container ja esta perto disso: a lista
     volta a ser uma coluna so, e as cores voltam a alternar linha a linha
     como no mockup. Deixando de ser mais larga que o texto, ela tambem nao
     precisa mais do respiro extra: volta o do mockup. */
  .dp-lista {
    grid-auto-flow: row;
    grid-template-rows: none;
    width: auto;
    margin-top: 26px;  /* (35) */
  }

  .dp-lista__item:nth-child(odd)  .dp-lista__marca { color: var(--azul); }
  .dp-lista__item:nth-child(even) .dp-lista__marca { color: var(--amarelo); }
}


@media (max-width: 767.98px) {

  .dp-hero__interno { padding-block: 34px 30px; }

  .dp-hero__resumo { text-align: left; }

  .dp-hero__cta { width: 100%; }

  .dp-selos__lista { gap: 22px; }

  .dp-login { min-height: 340px; }
  .dp-login__fundo { height: 340px; }

  .dp-login__painel {
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
    max-width: none;
    padding-inline: var(--gutter);
  }
}