/*
 * 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;
}

/*
 * Caixa da midia de uma estrutura do club — onde antes havia uma foto e hoje
 * ha um carrossel.
 *
 * `.spsc-amenity-media` carrega os valores de `.img-block-tab`
 * (`universal.css`), menos o `margin-right: -330px`: aquele sangramento de 330px
 * para fora da coluna esconderia a seta "proxima imagem" do carrossel. As
 * quebras de `max-width` sao as do tema (1340, 1190 e 993px).
 *
 * `.spsc-amenity-stacked-media` herda as larguras que moravam em
 * `#image-1002-8` e nos onze ids irmaos.
 */
.spsc-amenity-media {
  width: 100%;
  max-width: 900px;
  min-width: 0;
  margin-top: 50px;
}

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

@media (max-width: 1340px) {
  .spsc-amenity-media {
    max-width: 800px;
  }
}

@media (max-width: 1190px) {
  .spsc-amenity-media {
    max-width: 750px;
  }
}

@media (max-width: 993px) {
  .spsc-amenity-media {
    max-width: 100%;
    margin-top: 40px;
  }
}

@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-media {
    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-media {
    width: 100%;
  }
}

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

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

/*
 * Icone das setas do carrossel de imagens (`.jhsf-slider`).
 *
 * O bloco de codigo do tema desenha essas setas com o mesmo par de ids das setas
 * do carrossel de depoimentos — `#fancy_icon-331-8` e `#fancy_icon-332-8` — e por
 * isso a pagina publicada tem quatro elementos com dois ids. Repetir isso aqui
 * poria dois `id` iguais no DOM, que e invalido e faz `getElementById` e o
 * `aria-labelledby` apontarem para o primeiro que aparecer.
 *
 * As duas declaracoes desses ids viram esta classe, e as setas do carrossel de
 * imagens a usam. As de depoimentos continuam com os ids: sao um par fixo, e o
 * CSS do tema que as estiliza continua valendo sem copia.
 *
 * O fundo marrom e o tamanho da caixa vem daqui; o circulo de 41px em volta e do
 * `<button>`, no bloco `#jhsf-slider-1` de `site-inline.css`.
 */
.spsc-slider-arrow-icon {
  background-color: #745c3b;
  border: 1px solid #745c3b;
  padding: 10px;
  color: #ffffff;
}

.spsc-slider-arrow-icon > svg {
  width: 20px;
  height: 20px;
}

/*
 * Carrossel de uma estrutura do club (`#section-906-8`).
 *
 * O bloco `#jhsf-slider-1` de `site-inline.css` estiliza **um** carrossel, o da
 * secao de surf, e por id. Aqui sao doze — seis abas de desktop e seis itens da
 * lista empilhada —, e o numero deles vem de `clubAmenities.items` no CMS: nao ha
 * id fixo que valha para o setimo que a redacao acrescentar. Vale a regra 2 do
 * topo deste arquivo, e as declaracoes viram classe.
 *
 * As setas sao as mesmas do carrossel de surf (o circulo de 41px de
 * `.spsc-slider-arrow-icon`), e nao as caixas quadradas de 48px que o bloco de
 * codigo empilhado do site publicado desenha: as duas variantes nunca aparecem
 * juntas na mesma largura de tela, e uma seta so no site inteiro e o
 * comportamento que o resto do porte segue.
 */
.spsc-amenity-slider {
  position: relative;
  width: 100%;
}

.spsc-amenity-slider .jhsf-slider__viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.spsc-amenity-slider .jhsf-slider__track {
  display: flex;
  width: 100%;
  transition: transform 0.8s ease;
  will-change: transform;
}

.spsc-amenity-slider .jhsf-slider__slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 100%;
  width: 100%;
}

.spsc-amenity-slider .jhsf-slider__slide img {
  display: block;
  width: 100%;
  height: 480px;
  object-fit: cover;
  object-position: center center;
}

/*
 * Sob `/en`, `page-en.css` devolve a regra que `universal.css` escreveu para a
 * secao de abas em ingles:
 *
 *   #section-906-8 .oxy-tabs-contents .oxy-tab-content .ct-div-block img {
 *     margin-right: calc(20% + -600px); padding-left: 50px }
 *
 * Ela foi escrita para a **foto unica** da aba. Agora casa com o slide do
 * carrossel, e os -600px de margem jogam a imagem para fora da viewport. O
 * `!important` e o mesmo recurso que o bloco de codigo do site publicado usa:
 * aquele seletor tem um id e tres classes, e nenhum seletor de classe daqui o
 * vence por especificidade.
 */
.spsc-amenity-slider .jhsf-slider__slide img {
  margin-right: 0 !important;
  padding-left: 0 !important;
}

.spsc-amenity-slider .jhsf-slider__arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 41px;
  height: 41px;
  padding: 0;
  border: 0;
  border-radius: 100px;
  background: #745c3b;
  color: #ffffff;
  line-height: 1;
  cursor: pointer;
}

.spsc-amenity-slider .jhsf-slider__arrow--prev {
  left: 18px;
}

.spsc-amenity-slider .jhsf-slider__arrow--next {
  right: 18px;
}

.spsc-amenity-slider .jhsf-slider__dots {
  position: absolute;
  left: 50%;
  bottom: 14px;
  z-index: 3;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgb(255 255 255 / 16%);
}

.spsc-amenity-slider .jhsf-slider__dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

.spsc-amenity-slider .jhsf-slider__dot.is-active {
  background: #ffffff;
  transform: scale(1.15);
}

@media (max-width: 767px) {
  .spsc-amenity-slider--stacked .jhsf-slider__slide img {
    height: 240px;
  }

  .spsc-amenity-slider .jhsf-slider__arrow {
    width: 40px;
    height: 40px;
  }

  .spsc-amenity-slider .jhsf-slider__arrow--prev {
    left: 12px;
  }

  .spsc-amenity-slider .jhsf-slider__arrow--next {
    right: 12px;
  }

  .spsc-amenity-slider .jhsf-slider__dots {
    bottom: 10px;
  }
}

/*
 * Skeleton de midia.
 *
 * A classe entra no proprio `<img>` — nao num elemento em volta —, e sai no
 * `load`. E deliberado: o CSS do tema posiciona as imagens por id e por seletor
 * de filho (`.spsc-amenity-panel` e flex, `#image-1314-8` mede a largura), e um
 * `<div>` embrulhando cada foto trocaria o filho que essas regras enxergam. Como
 * o brilho e `background` da imagem, ele aparece na caixa que o tema ja
 * reservou e desaparece atras do arquivo quando ele pinta.
 *
 * React Suspense nao espera imagem: um `<img>` nao suspende a renderizacao, quem
 * avisa que o arquivo chegou e o evento `load`. Por isso a espera **do dado**
 * tem o boundary de Suspense da rota (`src/app/[lang]/loading.tsx`) e a espera
 * **do arquivo** tem esta classe.
 */
.spsc-media-skeleton {
  background-color: #e9e4dc;
  background-image: linear-gradient(
    90deg,
    rgb(255 255 255 / 0%) 0%,
    rgb(255 255 255 / 55%) 50%,
    rgb(255 255 255 / 0%) 100%
  );
  background-repeat: no-repeat;
  background-size: 200% 100%;
  animation: spsc-media-shimmer 1.4s ease-in-out infinite;
}

@keyframes spsc-media-shimmer {
  from {
    background-position: -100% 0;
  }

  to {
    background-position: 200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .spsc-media-skeleton {
    animation: none;
  }
}

/*
 * Fallback da rota enquanto o CMS responde (`src/app/[lang]/loading.tsx`).
 *
 * Repete a silhueta da home: uma faixa de altura de tela para o hero e faixas de
 * texto + midia para as secoes seguintes, com o mesmo fundo `bg.webp` que o tema
 * pinta nas secoes.
 */
.spsc-page-skeleton {
  display: flex;
  flex-direction: column;
  gap: 60px;
  padding-bottom: 60px;
  background-image: url("/theme/assets/images/bg.webp");
  background-size: contain;
  background-repeat: repeat;
}

.spsc-page-skeleton__band {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}

.spsc-page-skeleton__band:first-child {
  max-width: 100%;
  padding: 0;
}

.spsc-page-skeleton__media {
  width: 100%;
  height: 390px;
  border-radius: 0;
}

.spsc-page-skeleton__media--hero {
  height: 100vh;
  min-height: 600px;
}

.spsc-page-skeleton__text {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.spsc-page-skeleton__line {
  display: block;
  width: 100%;
  height: 20px;
}

.spsc-page-skeleton__line--title {
  width: 45%;
  height: 34px;
}

.spsc-page-skeleton__line--short {
  width: 70%;
}

@media (max-width: 767px) {
  .spsc-page-skeleton__media {
    height: 240px;
  }

  .spsc-page-skeleton__line--title {
    width: 70%;
  }
}