/*
 * Folha do projeto — nao do tema. Entra depois de todo o CSS portado.
 *
 * Tem duas responsabilidades, e so estas duas:
 *
 * 1. **Corrigir o que o porte trouxe de fora do tema** — o atributo `height` que
 *    o `next/image` acrescenta e o desenho que o navegador da a `<button>`. Vao
 *    numa `@layer` para continuarem perdendo do CSS do tema; ver o bloco abaixo.
 *
 * 2. **Salvar as regras que moravam num id do Oxygen** quando o numero de
 *    elementos deixou de ser fixo. O builder estilizava por id, e um id por item
 *    funciona para os seis que o autor escreveu a mao — o setimo, que a redacao
 *    acrescentar no CMS, nasceria sem layout. A declaracao vira classe e os ids
 *    originais ficam no HTML: por terem especificidade maior, preservam as
 *    diferencas de autoria que existiam.
 */

/*
 * ---------------------------------------------------------------------------
 * Camada de correcao: o que o porte precisa desfazer do navegador
 * ---------------------------------------------------------------------------
 *
 * Vai numa `@layer` de proposito. Regra da cascata: **toda** declaracao sem
 * camada vence uma declaracao em camada, qualquer que seja a especificidade. Ou
 * seja: isto corrige o padrao do navegador e continua perdendo para o CSS do
 * tema. Sem a camada, `background: none` aqui apagaria o fundo marrom que
 * `#fancy_icon-331-8` pinta nas setas do carrossel.
 *
 * Hints de apresentacao (os atributos `width`/`height` de um `<img>`) entram
 * **abaixo** de qualquer camada de autor, entao regra em camada tambem os vence.
 * E disso que o `img` abaixo depende.
 */
@layer spsc-corrections {
  /*
   * 🔴 `height: auto` conserta a imagem esticada.
   *
   * O `next/image` emite `width` e `height` como **atributos**, e o tema define
   * so `width` — `#image-1314-8 { width: 100% }`, `.img-block-tab { width: 100%;
   * max-width: 900px }`, `#image-1002-8 { width: 50% }` e outras oito. Sem
   * `height` no CSS, o atributo `height="750"` vira altura usada, e a imagem
   * deixa de respeitar a proporcao: as fotos das abas (1664x750 e 1920x1080)
   * apareciam alongadas na vertical.
   *
   * O `<img>` do tema nao tinha atributo nenhum, entao a altura era `auto` e a
   * proporcao vinha do arquivo. Isto devolve esse comportamento a todas as
   * imagens de uma vez — e onde o tema **quer** altura fixa
   * (`.spsc-testimonial-photo`, `#image-3471-8`) a regra dele, sem camada, vence.
   */
  img {
    height: auto;
  }

  /*
   * Zera o desenho que o navegador da a `<button>`.
   *
   * O tema usava `<div>` com handler de jQuery em tudo que era clicavel; o porte
   * troca por `<button>` para o site ser operavel por teclado (ver
   * `docs/ai/THEME_PORTING.md`). O botao traz borda e fundo proprios, e era eles
   * que desenhavam a caixa em volta do X de fechar o modal — o `background-color`
   * do tema ali e transparente, mas a **borda** do agente de usuario nao.
   */
  button {
    appearance: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: inherit;
    cursor: pointer;
  }
}

/*
 * `oxygen.css` qualifica o icone pelo elemento: `div.ct-fancy-icon { display:
 * inline-flex; border-radius: 50% }`. Como o porte transformou esses `<div>` em
 * `<button>`, o seletor deixou de casar — e com ele foram embora o
 * arredondamento e o `inline-flex`, o que deixava as setas do carrossel
 * quadradas.
 *
 * Aqui a mesma declaracao volta para o `<button>`. A centralizacao e um acrescimo:
 * com o icone centrado e a caixa quadrada por construcao (20px de SVG + 10px de
 * padding de cada lado, do `#fancy_icon-331-8`), `border-radius: 50%` da um
 * circulo simetrico.
 */
button.ct-fancy-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

/*
 * Numero do pino do master plan (`.marker-map`), fora de centro no circulo.
 *
 * `universal.css` centraliza com `line-height: 0` + `padding-top: 17px` — um
 * truque de posicionamento vertical pensado para o `<div>` original do Oxygen,
 * que so tinha o numero como conteudo. O porte para `<button>` acrescentou um
 * segundo no filho (o `<span class="visually-hidden">` com o titulo, para
 * leitor de tela), e o truque de padding/line-height nao centraliza mais nada
 * quando o elemento tem mais de um no.
 *
 * `display: flex` centraliza o filho visivel nos dois eixos e independe de
 * quantos outros nos existem — o `<span>` oculto sai do fluxo por `position:
 * absolute` (regra do Bootstrap `.visually-hidden`) e nao entra na conta.
 * `button.marker-map` (elemento + classe) tem especificidade maior que
 * `.marker-map` sozinho, e como as duas regras sao sem camada (`@layer`), a
 * mais especifica vence independente da ordem.
 */
button.marker-map {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: normal;
  padding-top: 0;
}

/*
 * Painel de uma aba de "Club completo" (`#section-906-8`).
 *
 * O tema repetia esta declaracao em seis ids (`#div_block-933-8`,
 * `#div_block-2224-8`, `#div_block-2229-8`, `#div_block-2234-8`,
 * `#div_block-2239-8`, `#div_block-2244-8`) — um por estrutura do club. As abas
 * agora vem de `clubAmenities.items` no CMS.
 */
.spsc-amenity-panel {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
}

/*
 * Item da lista empilhada de estruturas, usada abaixo de 991px
 * (`#div_block-998-8` e irmaos). O `width: 130%` e do original: a imagem
 * transborda a direita de proposito, e `body.oxygen-aos-enabled` esconde a
 * rolagem horizontal que isso criaria.
 */
.spsc-amenity-stacked {
  width: 130%;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
}

.spsc-amenity-stacked-text {
  width: 45%;
}

/*
 * Foto do atleta no cartao de depoimento.
 *
 * O tema escrevia isto em `.oxy-dynamic-list :is([data-id="image-196-8"], #incspec)`.
 * A regra precisou virar classe porque a imagem passa por `next/image`, que nao
 * repassa `data-id` ao `<img>` — ver o comentario em `ui/media/theme-image`.
 *
 * A foto fica **sobre** o video do atleta e desaparece no hover: e assim que o
 * clipe aparece.
 */
.spsc-testimonial-photo {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  object-fit: cover;
  opacity: 1;
  transition-duration: 0.4s;
}

.spsc-testimonial-photo:hover {
  opacity: 0;
  transition-duration: 0.4s;
}

/*
 * Painel do modal de um pino do master plan.
 *
 * O tema repetia as mesmas declaracoes em quatro conjuntos de ids — um por pino
 * (`#div_block-1431-8`/`#headline-1430-8`/`#text_block-1434-8` e os tres
 * equivalentes). Os pinos agora vem de `masterPlan.pins` no CMS.
 */
.spsc-pin-panel {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 20px;
  text-align: left;
}

.spsc-pin-title {
  font-family: "PeignotLTStd";
  font-size: 30px;
  font-weight: 600;
  line-height: 35px;
  color: #745c3b;
}

.spsc-pin-text {
  font-size: 20px;
}

/*
 * Titulo, texto e imagem de uma estrutura do club.
 *
 * O tema repetia as mesmas declaracoes em doze conjuntos de ids — seis nas abas
 * de desktop e seis na lista empilhada de mobile. As classes abaixo carregam a
 * versao comum; os ids originais continuam no HTML e, por terem especificidade
 * maior, preservam as diferencas de autoria que existiam (o texto da primeira aba
 * tem `margin-left: 65px` em vez de 75px, por exemplo).
 */
.spsc-amenity-title {
  font-family: "PeignotLTStd";
  font-size: 30px;
  text-align: center;
  text-transform: uppercase;
  color: #745c3b;
  padding-top: 100px;
  padding-bottom: 100px;
}

.spsc-amenity-text {
  font-family: "Zetafonts - Aristotelica Pro Text";
  font-size: 20px;
  font-weight: 400;
  color: #000000;
  margin-left: 75px;
}

.spsc-amenity-stacked-image {
  width: 50%;
}

@media (max-width: 991px) {
  .spsc-amenity-stacked {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: justify;
  }

  .spsc-amenity-stacked-text {
    width: 90%;
  }

  .spsc-amenity-stacked-image {
    width: 90%;
    margin-top: 30px;
  }

  .spsc-amenity-text {
    text-align: left;
  }
}

@media (max-width: 767px) {
  .spsc-amenity-title {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .spsc-amenity-text {
    margin-left: 0;
  }

  .spsc-amenity-stacked-text,
  .spsc-amenity-stacked-image {
    width: 100%;
  }
}

@media (max-width: 479px) {
  .spsc-amenity-title {
    font-size: 20px;
  }

  .spsc-amenity-text {
    font-size: 20px;
  }
}