/*
 * Página `global` (etapa G9) -- a moldura, e só ela.
 *
 * Transcreve as regras `.page__global` e `.page__carousel` do `main.css` que está no ar
 * (linhas 2390-2696), conferido byte a byte contra `https://www.sebeducation.com` antes de
 * escrever -- a lição da G2. O escopo é `.pagina--global`, que o `base.html` põe no `<main>`
 * a partir do registro de `backend/montagem`; sem ele estas regras não teriam onde se
 * pendurar, porque as classes que os plugins emitem são as mesmas em toda página.
 *
 * ### As três faixas, e como cada uma é alcançada
 *
 * | faixa do original | seletor |
 * |---|---|
 * | `.wrapper__banner` | `> .banner` |
 * | `.wrapper__about` | `> .bloco-sobre` |
 * | `section.page__carousel` | `> .secao` |
 *
 * Uma de cada tipo, então não há `:has()` a escrever: é a página mais simples de alcançar do
 * bloco G até aqui, ao contrário do learning, que tem quatro envelopes do mesmo tipo.
 *
 * ### O que o carrossel traz pronto, e o que sobra para cá
 *
 * A máquina de rolar é toda da F3 -- `scroll-snap`, a trilha, a faixa das setas com o
 * `min()` que corrige o transbordo do original, os marcadores. **O que sobra é a caixa do
 * cartão**, e é o que a F3 mandou para esta etapa quando mediu que os dois carrosséis do
 * site não têm a mesma caixa (ver `carousel_app/models.py`).
 *
 * Três divergências medidas contra o original ficam registradas na entrada da **G9**, e as
 * três nascem de decisões da F3: o cartão que cresce em vez de transbordar, as setas
 * centradas no cartão (no original elas estão 10px abaixo do centro, e não por desenho -- é o
 * `margin-top: 10px` que o `owl.theme.default.css` dá ao `.owl-nav`) e os marcadores de 24px
 * de alvo de toque, que deixam a faixa 16px mais alta no celular.
 */

.pagina--global {
  margin-top: 35px;
}

/* --------------------------------------------------------------------- o banner
 *
 * `.wrapper__banner` no original: **sem largura máxima e sem recuo**, e é isso que faz a foto
 * encostar na borda esquerda da tela, como no conduta e no parcerias.
 */
.pagina--global > .banner {
  gap: 64px;
  margin-bottom: 62px;
}

.pagina--global > .banner .banner__imagem {
  max-width: 660px;
  width: 100%;
}

.pagina--global > .banner .banner__conteudo {
  max-width: 423px;
  width: 100%;
}

.pagina--global > .banner .banner__titulo {
  line-height: 32px;
  margin-bottom: 52px;
}

/*
 * `display: block` é o que quebra a linha -- no original a quebra é um `<br>` dentro do
 * `<h2>`, e quebra de linha não entra no campo do editor.
 *
 * É a mesma construção que a G8 mediu no learning, onde o destaque também é a **segunda**
 * linha: a `line-height` é a do `<h2>`, e é ela que põe a tinta no lugar (caixa de 122px
 * centrada numa linha de 32 → topo da tinta a 47,5px acima do bloco; medido no original,
 * 193,7px contra 194,5 aqui, a 1440px).
 *
 * **E os 19px de `padding-bottom` são a altura que a linha inline tinha e o bloco não tem.**
 * No original a segunda linha do `<h2>` mede 51px, e não os 32 da entrelinha: a caixa do
 * script desce abaixo da base da linha e a caixa da linha cresce para contê-la. Num bloco
 * quem manda é só a `line-height`, então sem eles o `<h2>` sairia 19px mais curto -- e o
 * banner é `align-items: center`, então a coluna inteira subiria 9,5px, título e descrições
 * com ela. São os mesmos 19px do learning, o que confirma que eles são o descendente da
 * fonte e não uma medida desta página.
 *
 * O `padding: 0 16px` do componente sai: aqui o respiro é o `margin-left: 12px` do original.
 */
.pagina--global > .banner .banner__destaque {
  display: block;
  font-size: 122px;
  line-height: 32px;
  margin-left: 12px;
  padding: 0 0 19px;
}

/* A `description-1`: 32/36px contra os 18/26 do componente. */
.pagina--global > .banner .banner__descricao {
  font-size: 32px;
  line-height: 36px;
  margin-bottom: 24px;
  max-width: 369px;
}

/*
 * A `description-2`, que é um bloco de texto filho do banner -- ela tem `<strong>` dentro, e
 * o campo da E1 é texto escapado (ver `backend/montagem/global_.py`). 20px é o degrau
 * `seb-texto` da D3, que é o mesmo do original; só a entrelinha e a largura entram.
 */
.pagina--global > .banner .texto--seb-texto {
  line-height: 28px;
  max-width: 365px;
}

/* --------------------------------------------------------------------- a prosa
 *
 * `.wrapper__about`, que aqui é o `.bloco-sobre` da E2 -- o terceiro dos 11 usos em que o
 * bloco **não tem texto próprio**, depois do seguranca e do parcerias, e pela mesma razão:
 * a prosa tem `<strong>` e quebras, e o campo `texto` da E2 é texto escapado.
 */
.pagina--global > .bloco-sobre {
  margin-bottom: 92px;
}

/*
 * **O grafismo, que no original é fundo da `<main>` e aqui não pode ser.** Lá a
 * `section.page__carousel` está **fora** da `<main class="page__global">`, então
 * `background-position: bottom right` cai no canto do bloco banner+prosa. Aqui a faixa do
 * carrossel está dentro do `<main>` (o conteúdo da página é um placeholder só), e o mesmo
 * fundo cairia no rodapé da página, atrás da faixa opaca.
 *
 * Então ele é ancorado no canto inferior direito **do bloco "sobre"**, que é onde o original
 * o põe. Um `background-image` no próprio bloco não serve: o desenho tem 354px de altura
 * (210×465 do arquivo a 160px de largura) contra os 280 da prosa, e fundo é recortado na
 * caixa -- o pseudo-elemento sai dela, e o original também sai (a 1440px ele começa 12px
 * acima da faixa da prosa, sobrepondo o fim do banner).
 *
 * **Ele fica atrás da prosa pelo mesmo mecanismo que a linha decorativa da E2**, e não por
 * `z-index`: o `.bloco-sobre__conteudo` é `position: relative` no componente exatamente para
 * isso, e entre elementos posicionados sem `z-index` quem pinta por baixo é quem vem antes na
 * árvore -- o `::before` vem antes de tudo no bloco. Um `z-index: -1` aqui foi a primeira
 * versão, e ela era pior: fora de um contexto de empilhamento o -1 sobe até a raiz, e o
 * grafismo **desapareceria em silêncio** no dia em que a `<main>`, a `.pagina--global` ou
 * qualquer ancestral ganhasse um fundo ou virasse contexto de empilhamento (um `transform`,
 * um `filter`, um `opacity`) -- e nenhum teste pegaria, porque eles afirmam a declaração e
 * não a pintura.
 *
 * O que se paga por não ter o -1 é a ordem contra o **banner**, que é irmão anterior: ali o
 * grafismo pintaria por cima. Medido, ele não chega perto -- a 1440px a coluna de texto do
 * banner acaba em `x: 1087` e o grafismo começa em 1265; a 900px, onde a faixa é estreita e a
 * prosa mais alta, o grafismo começa 200px **abaixo** do fim do banner. Não há sobreposição em
 * largura de desktop nenhuma.
 *
 * `pointer-events: none` como as 7 marcas do learning: enfeite não recebe clique.
 */
.pagina--global > .bloco-sobre::before {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 160px;
  height: 354px;
  background-image: url('../../icones/detail-global.svg');
  background-repeat: no-repeat;
  background-size: 160px 354px;
  pointer-events: none;
}

/*
 * A linha decorativa. O padrão do componente é o canto superior **direito**; aqui ela fica à
 * esquerda da prosa, como no original, daí o `right: auto`. O tamanho é o natural do arquivo
 * (236x72), que é o que o original usa -- como em parcerias.
 */
.pagina--global .bloco-sobre__linha {
  left: 0;
  right: auto;
  top: 8px;
  width: 236px;
  height: 72px;
}

/*
 * O recuo do texto é o que no original são os 236px da linha mais os 20 de `gap` da faixa.
 * Recuo e não `gap` porque a linha saiu do fluxo -- é o `position: absolute` que a E2
 * escolheu para ela não empurrar o texto.
 */
.pagina--global .bloco-sobre__conteudo {
  padding-left: 256px;
}

/* 20/16px é o degrau `seb-texto` da D3, que é o mesmo do original. Entram a entrelinha, que a
 * D3 não declara em degrau nenhum, e a largura. */
.pagina--global .bloco-sobre__conteudo .texto--seb-texto {
  line-height: 28px;
  max-width: 927px;
}

/* --------------------------------------------------------------------- a faixa do carrossel
 *
 * `section.page__carousel`: a faixa azul-claro com o par de títulos e o carrossel. A cor
 * chega pelo campo `background_color` do `SectionPlugin`, num `style` inline.
 *
 * **O recuo é da coluna de dentro, e não dos campos de `padding` do plugin**: aqueles saem no
 * mesmo `style` inline, que media query nenhuma desfaz -- e aqui o recuo de topo muda no
 * celular. É a decisão que a G7 registrou na faixa do fim de parcerias.
 */
.pagina--global > .secao > .coluna {
  padding: 62px 0;
}

/* O `carousel__title`: 32px contra os 28 do degrau `seb-subtitulo`, que é quem emite o
 * `<h3>`. A cor e o alinhamento são campos do plugin, não daqui. */
.pagina--global > .secao > .coluna > .texto--seb-subtitulo {
  font-size: 32px;
  margin-bottom: 8px;
}

/*
 * O `subtitle`: 20px é o degrau `seb-texto`, o mesmo do original, e daqui vai só o espaço até
 * a trilha.
 *
 * **O `> .coluna >` não é decoração de especificidade:** o texto de cada cartão usa o mesmo
 * degrau, e sem o caminho direto esta regra daria 42px de espaço aos cinco.
 */
.pagina--global > .secao > .coluna > .texto--seb-texto {
  margin-bottom: 42px;
}

/*
 * **O cartão -- a única coisa que a F3 deixou para esta etapa.**
 *
 * O slide precisa ser flex para o cartão poder esticar até a altura dele. **Essa regra saiu
 * desta folha na G12b**, quando o segundo carrossel do site pediu a mesma coisa: ela é do
 * componente agora (`componentes/carrossel.css`), pela regra do segundo uso que a E2 e a D3
 * também seguem. O registro fica porque a entrada da G9 a descreve como sendo daqui.
 */

/*
 * `.card__global`: 927px centrados, fundo branco, o texto de um lado e a foto do outro.
 *
 * `flex-wrap: nowrap` porque a `.linha` da D2 é `wrap`, para o empilhamento móvel funcionar:
 * com ele, o texto e a foto quebrariam de linha em telas médias -- é o mesmo ajuste que a G8
 * fez nas três faixas do learning.
 *
 * **`min-height`, e o original é `height: 418px`.** Ali o primeiro cartão tem 446px de
 * conteúdo e o texto dele **vaza 14px acima e abaixo** da caixa branca, sobre o azul (medido
 * a 1440px: os cinco têm 446, 418, 306, 390 e 334). Como piso, a altura fechada continua
 * valendo para os quatro que caberiam e o quinto cresce -- e o `stretch` da trilha leva os
 * outros com ele, então a faixa não muda de altura entre slides. É a mesma escolha que a G8
 * registrou na grade de cartões do learning: `min-height` como piso, e não altura fixa.
 *
 * A divisão 453/474 é a do original, e ela chega na regra da foto, abaixo.
 */
.pagina--global .carrossel__slide > .linha {
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;
  max-width: 927px;
  min-height: 418px;
  margin: 0 auto;
  background-color: var(--seb-branco);
}

/*
 * **A foto preenche a altura do cartão, e é o par obrigatório do `min-height` acima.**
 *
 * No original os dois números coincidem -- a caixa tem 418px fechados e o arquivo tem 453×418
 * --, então a foto encosta em cima e embaixo sem regra nenhuma. Com o cartão crescendo até
 * 446, o `align-items: center` da caixa passava a centrar uma foto de 418 e sobravam **14px de
 * branco em cima e embaixo dela**: o defeito que o `min-height` tirou do texto reaparecia na
 * foto, e num lugar onde a caixa branca o deixa à vista.
 *
 * `align-self: stretch` desfaz o centramento só para ela (o texto continua centrado, que é o
 * que o original faz com o `.card__content` dos quatro cartões curtos), e o `height: auto` do
 * `.imagem` da D4 é justamente a condição para o `stretch` valer.
 *
 * **Os 453px têm de ser ditos, e é o que a primeira versão desta regra errou.** Com a altura
 * esticada e a largura em `auto`, a proporção do arquivo passa a *derivar* a largura: a foto
 * saía com 483px e comia 30 do texto, que caía de 474 para 444. Declarada, ela é a divisão
 * 453/474 do original -- e é também o `max-width` que o `main.css` dá ao `.cover` daquele
 * cartão, numa das regras que ficaram mortas lá (aquela marcação não existe; quem dava a
 * largura de fato era o `.owl-carousel .owl-item img` do Owl).
 *
 * `flex: 0 0 auto` para o `flex-basis` **não** ser uma medida: no celular a caixa vira
 * `column-reverse`, e um `flex-basis: 453px` viraria altura ali.
 *
 * `object-fit: cover` é o que impede o esticão: sem ele a foto sairia deformada nos 28px que
 * ganhou. Com ele a proporção fica, e o excedente é recortado -- 30px numa foto de 453 de
 * largura, e ela é uma fotografia de cena, não um diagrama.
 */
.pagina--global .carrossel__slide .imagem {
  align-self: stretch;
  flex: 0 0 auto;
  width: 453px;
  object-fit: cover;
}

/*
 * O `card-text`: 20px é o degrau, e o recuo é o do `.card__content` do original -- lá ele é um
 * `<div>` em volta do parágrafo, e aqui o parágrafo **é** o item flex. O resultado é o mesmo
 * porque o recuo entra na conta de encolhimento do flex: 474px de caixa, 402 de texto.
 */
.pagina--global .carrossel__slide .texto--seb-texto {
  line-height: 28px;
  padding: 55px 43px 55px 29px;
}

/*
 * **A bolinha do marcador é vazada, e a do componente é preenchida.** A F3 mediu a do
 * carrossel de visão (cinza cheia, `#8c918d`); a deste é contorno azul sobre transparente, e
 * a ativa é preenchida no mesmo azul -- que é o que o componente já faz. Sem `box-sizing`,
 * como no original: a borda soma 2px e a bolinha sai com 10px pintados.
 */
.pagina--global .carrossel__marcador::before {
  background-color: transparent;
  border: 1px solid var(--seb-azul);
}

@media (max-width: 768px) {
  /* Sem o grafismo, como no original -- lá a `.page__global` é `background: none` no celular. */
  .pagina--global > .bloco-sobre::before {
    content: none;
  }

  /*
   * O banner empilha com a foto **em cima**, que é a ordem do documento -- aqui não há o
   * `column-reverse` que a G6 precisou, porque lá a foto vinha depois do texto no original.
   */
  .pagina--global > .banner {
    gap: 32px;
    margin-bottom: 42px;
  }

  .pagina--global > .banner .banner__imagem {
    width: 92%;
    margin-left: 0;
    margin-right: auto;
  }

  .pagina--global > .banner .banner__conteudo {
    margin-left: 16px;
    margin-right: 16px;
    width: calc(100% - 32px);
  }

  .pagina--global > .banner .banner__titulo {
    font-size: 42px;
    line-height: 24px;
    margin-left: 12px;
  }

  /*
   * Os mesmos 16px do learning, medidos aqui: a segunda linha do original mede 40px contra os
   * 24 da entrelinha, e a caixa do script de 102px é o que a faz crescer. A tinta cai no
   * mesmo lugar dos dois lados (topo a 420px, medido a 375px).
   */
  .pagina--global > .banner .banner__destaque {
    font-size: 102px;
    line-height: 24px;
    padding-bottom: 16px;
  }

  .pagina--global > .banner .banner__descricao {
    font-size: 24px;
    line-height: 26px;
  }

  /* 16px é o degrau `seb-texto` no celular, que é o do original. Só a entrelinha entra. */
  .pagina--global > .banner .texto--seb-texto {
    line-height: 22px;
  }

  .pagina--global > .bloco-sobre {
    margin-bottom: 42px;
  }

  /* O "L" do celular, que no original é o par de `<div>` de 16x1 e 1x151. */
  .pagina--global .bloco-sobre__linha {
    top: 0;
    width: 17px;
    height: 151px;
  }

  /*
   * 17px da linha mais os 16 que no original são o `gap` da faixa; à direita, os 32 que a
   * prosa de lá reserva com `width: calc(100% - 32px)` **e** `margin-right: 32px` -- as duas
   * declarações juntas, que é o que dá os 310px de texto medidos a 375px.
   */
  .pagina--global .bloco-sobre__conteudo {
    padding-left: 33px;
    padding-right: 32px;
  }

  .pagina--global .bloco-sobre__conteudo .texto--seb-texto {
    line-height: 22px;
  }

  .pagina--global > .secao > .coluna {
    padding-top: 42px;
  }

  /*
   * 24px contra os 22 do degrau no celular.
   *
   * **E o peso, que é o único do site que muda por ponto de quebra.** O original põe
   * `font-weight: 600` neste título só no celular -- o título do carrossel de visão, que é o
   * irmão dele, fica em 400 nos dois. Não é diferença cosmética: em 400 a frase cabe em
   * **duas** linhas na coluna de 343px e em 600 ocupa **três**, então o título sai 28px mais
   * curto e a faixa inteira abaixo dele sobe, cartão e marcadores com ela.
   *
   * Esta é uma regra comum, e é por causa desta página que ela pode ser: o peso da D3 saía
   * como declaração no atributo `style`, que nenhuma folha alcança, e a G9 o passou para a
   * custom property `--texto-peso` -- aplicada pelo `font-weight` do `texto.css`, que esta
   * regra vence por especificidade. Ver o comentário de lá; a alternativa era um
   * `!important`, e o projeto não tem nenhum.
   */
  .pagina--global > .secao > .coluna > .texto--seb-subtitulo {
    font-size: 24px;
    font-weight: 600;
    margin-left: 16px;
    margin-right: 16px;
  }

  .pagina--global > .secao > .coluna > .texto--seb-texto {
    font-size: 18px;
    margin-left: 16px;
    margin-right: 16px;
    margin-bottom: 76px;
  }

  /*
   * As setas sobem para cima do carrossel, e os 52px são **medidos no original**: lá a regra
   * da página dá `top: -40px` e o `owl.theme.default.css` soma um `margin-top: 10px`, que com
   * o `translateY(-50%)` de uma faixa de 44px resulta em -52. O componente centra a faixa nos
   * mesmos 16px de folga, então só o `top` entra aqui.
   */
  .pagina--global .carrossel__nav {
    top: -52px;
  }

  /* 40px, contra os 32 do componente -- que são os do carrossel de visão, o que a F3 mediu. */
  .pagina--global .carrossel__seta img {
    width: 40px;
    height: 40px;
  }

  /*
   * O cartão empilha com a foto **em cima**, que é o `column-reverse` do original -- aqui ele
   * é necessário, ao contrário do banner, porque no documento a foto vem depois do texto.
   *
   * `justify-content: flex-end` é do original também: em `column-reverse` o fim do eixo é o
   * topo, então ele encosta o par lá e a sobra fica embaixo (12px, medidos a 375px).
   *
   * A foto larga o `width: 453px` do desktop e volta a preencher a caixa, que é o que o
   * `width: 100%` do Owl fazia -- aqui ela tem 343px, e a altura de 316 sai da proporção.
   */
  .pagina--global .carrossel__slide > .linha {
    flex-direction: column-reverse;
    justify-content: flex-end;
    width: calc(100% - 32px);
    max-width: none;
    min-height: 632px;
    margin: 0 16px 30px;
  }

  .pagina--global .carrossel__slide .imagem {
    width: 100%;
  }

  .pagina--global .carrossel__slide .texto--seb-texto {
    line-height: 22px;
    padding: 20px;
  }
}