/**
 * Smart Fit - Chamada "encontre uma academia" do fim da home (rebranding)
 * -----------------------------------------------------------------------------
 * Depende de assets/css/brand.css (tokens) e reaproveita .sf-visually-hidden de
 * assets/css/header.css. Escrito mobile-first.
 *
 * A secao entrou no lugar de #social-medias e #recentes. Marcacao em
 * template-parts/home-academia-cta.php, copy em library/home-academia.php.
 *
 * Havia aqui tambem uma barra de busca em secao propria (.sf-home-busca). Ela foi
 * removida a pedido - a orientacao foi deixar um campo so e manter apenas este
 * bloco. Os estilos de .sf-home-academia__form, mais abaixo, sao o caminho de
 * volta caso a busca precise existir: dentro do proprio bloco, como no componente
 * de localizador do institucional, e nao em secao separada.
 *
 * NAO HA FRAME NO FIGMA para esta secao. A referencia e o componente de
 * localizador do site institucional (bloco escuro arredondado, conteudo
 * centralizado, titulo grande, apoio e uma acao). O resto segue a linguagem que o
 * header e o footer do rebranding ja estabeleceram.
 *
 * SOMBRA: nenhuma, em nenhum estado, seguindo a orientacao geral do rebranding -
 * bloco e delimitado por contorno. Nos cards, o estado de interacao e sinalizado
 * por cor de fundo (--sf-card-hover-bg, em cards.css) e nao por sombra.
 */

/* ==========================================================================
 * CHAMADA DE ACADEMIA (.sf-home-academia)
 * ==========================================================================
 * Entrou no lugar de #recentes.
 *
 * A section externa leva .sf-antes-do-footer (assets/css/footer.css), que e o
 * respiro entre a ultima secao e a curva preta do topo do footer. Aqui dentro
 * fica so o bloco escuro.
 */
.sf-home-academia {
  /**
   * Sem largura maxima propria: quem define a largura e o .container do Bootstrap
   * na section, que e o mesmo conteiner das secoes de cards acima. Era o que
   * faltava para as laterais do bloco cairem na mesma coluna dos cards.
   */
  width: 100%;
  /**
   * Espaco em relacao a ultima secao de cards.
   *
   * Precisa estar aqui porque .sf-antes-do-footer (assets/css/footer.css) so
   * cuida do lado de baixo, o respiro ate a curva do footer. Enquanto existiu uma
   * barra de busca entre os cards e este bloco, era ela que abria a distancia de
   * cima; sem ela o bloco encostava no ultimo card.
   *
   * Era 24px (32px no desktop) e ficou apertado: o bloco escuro colava na
   * fileira de cards. Subiu para 48px / 80px por pedido.
   *
   * Continua menor que o respiro de baixo (72px / 120px, em .sf-antes-do-footer)
   * de proposito, por dois motivos: os cards da home ja tem margem inferior
   * propria (16px no mobile, 24px no desktop, em assets/css/cards.css) e ela soma
   * aqui; e o vao de baixo precisa ser maior porque a curva do footer sobe ate
   * 139px nas bordas.
   */
  margin-top: 40px;
  border-radius: var(--sf-radius-lg, 24px);
  background-color: var(--sf-black, #000);
  color: var(--sf-on-dark-strong, #fff);
  font-family: var(--sf-font-text, sans-serif);
  /* Recorta a foto de fundo, quando houver, no raio do bloco. */
  overflow: hidden;
}

/**
 * Variante com foto de fundo.
 *
 * A imagem vem por style inline no template (o caminho e dado em
 * library/home-academia.php). O escurecimento e obrigatorio: o titulo e branco e
 * sem ele o contraste depende da foto, que muda. Com o gradiente o pior caso
 * continua legivel.
 *
 * Enquanto nao houver arte, o bloco fica no preto da marca - que e um estado
 * valido do desenho, nao um placeholder quebrado.
 */
.sf-home-academia--com-foto {
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  /**
   * Como a arte ocupa o bloco vem do painel, por --sf-cta-fit no style inline
   * (ver template-parts/home-academia-cta.php):
   *
   *   cover ..... preenche e corta as sobras. O bloco e muito mais largo que alto
   *               (1296x332 no desktop, ou seja perto de 4:1), e foto quase nunca
   *               tem essa proporcao - por isso o corte e o comportamento certo
   *               para foto, e por isso o assunto principal precisa estar no meio.
   *   contain ... mostra a arte inteira e deixa o preto do bloco aparecer em
   *               volta. E o que serve para logo ou arte com texto, que nao pode
   *               ser cortada.
   */
  background-size: var(--sf-cta-fit, cover);
}

/**
 * VEU ESCURO SOBRE A ARTE
 *
 * Camada propria, e nao box-shadow interno como antes. A troca foi necessaria
 * quando entrou o video: sombra interna e pintada acima do background mas ABAIXO
 * dos elementos filhos, entao ela escurecia a imagem de fundo e nao escurecia o
 * <video>, que e filho. Com a camada e o z-index explicito, os dois casos ficam
 * cobertos pela mesma regra.
 *
 * pointer-events: none para a camada nao roubar o clique do botao.
 */
.sf-home-academia--com-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: rgba(0, 0, 0, var(--sf-cta-veu, 0.6));
  pointer-events: none;
}

/**
 * Video de fundo.
 *
 * object-fit segue o mesmo --sf-cta-fit da imagem, entao a escolha feita no painel
 * vale para os dois tipos de arte.
 */
.sf-home-academia__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: var(--sf-cta-fit, cover);
  /* Sem isso o inline-level do <video> deixa uma folga abaixo do elemento. */
  display: block;
}

/* O conteudo fica acima do veu; sem isso o texto entra debaixo da camada. */
.sf-home-academia--com-foto .sf-home-academia__inner {
  position: relative;
  z-index: 2;
}

/**
 * gap-10 (40px) e px-4 py-10 (16px / 40px) do componente de referencia.
 *
 * Os 40px separam o BLOCO DE TEXTO da acao. Titulo e apoio ficam a 16px entre si,
 * dentro do proprio bloco - e por isso eles tem um wrapper: com os tres como
 * irmaos diretos, o gap de 40px se aplicaria tambem entre titulo e apoio, e o
 * cabecalho se desmancharia.
 */
.sf-home-academia__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 40px 16px;
  text-align: center;
}

.sf-home-academia__texto-bloco {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  /* max-w-5xl = 64rem, o limite do cabecalho no componente de referencia. */
  max-width: 64rem;
}

/**
 * =============================================================================
 * MEDIDAS VINDAS DO COMPONENTE DO INSTITUCIONAL
 * =============================================================================
 * A partir daqui os valores foram lidos do componente "Encontre a academia mais
 * proxima de voce" de smartfit.com.br/estrutura-smart-fit
 * (data-component="location-search-section"), que e a referencia pedida.
 *
 * O componente de la e Tailwind; a conversao usa os tokens do proprio design
 * system deles, que vieram junto do HTML:
 *
 *   rounded-xl / lg:rounded-2xl ..... 24px / 32px   (--radius-xl / --radius-2xl)
 *   py-10 / lg:py-20 ................ 40px / 80px   (--spacing-10 / --spacing-20)
 *   gap-10 .......................... 40px          entre o texto e a acao
 *   gap-4 ........................... 16px          entre titulo e apoio
 *   bg-black/50 ..................... veu de 50%
 *   text-6 / lg:text-7 .............. 32px / 48px   titulo (--text-6 / --text-7)
 *   text-2 / lg:text-4 .............. 14px / 20px   apoio  (--text-2 / --text-4)
 *   font-primary .................... muscleFont = a Muscle Display da marca
 *   font-secondary + font-medium .... DM Sans 500
 *   max-w-sm ........................ 384px         largura da acao
 *   rounded-4xl ..................... 48px          raio da acao (--radius-4xl)
 *   p-2 ............................. 8px           recuo da acao
 *   h-12 / size-12 .................. 48px          altura do rotulo e do botao
 *   alpha-white-softer / -soft ...... branco 10% / 20%  (fundo do botao e hover)
 */

/**
 * Titulo: Muscle Display, 32px no mobile e 48px no desktop.
 *
 * Tamanhos fixos por faixa, e nao clamp: sao os dois valores do componente de
 * referencia. O clamp de antes (24 a 40px) nunca chegava aos 48px do desktop.
 *
 * Sem max-width em ch: no componente de la o titulo ocupa a largura do bloco
 * (max-w-5xl, 64rem) e quebra sozinho. O limite em ch estreitava o texto e
 * forcava quebra onde nao havia necessidade.
 */
.sf-home-academia__titulo {
  margin: 0;
  font-family: var(--sf-font-display, sans-serif);
  font-size: 2rem;
  font-weight: var(--sf-fw-bold, 700);
  line-height: 1.2;
  color: var(--sf-on-dark-strong, #fff);
}

/**
 * Apoio: DM Sans 500, 14px no mobile e 20px no desktop, BRANCO CHEIO.
 *
 * Era branco a 80%. O componente de referencia usa text-white, ou seja branco
 * 100% - o que tambem e melhor de contraste, entao aqui as duas coisas apontam
 * para o mesmo lado.
 */
.sf-home-academia__texto {
  max-width: 46ch;
  margin: 0;
  font-family: var(--sf-font-text, sans-serif);
  font-size: var(--sf-fs-body-sm, 0.875rem);
  font-weight: var(--sf-fw-medium, 500);
  line-height: 1.4;
  color: var(--sf-on-dark-strong, #fff);
}

/**
 * =============================================================================
 * A ACAO E UM CAMPO DE BUSCA FALSO
 * =============================================================================
 * Aqui estava uma pilula amarela, e havia um TODO pendente para descobrir por qual
 * parametro de querystring o localizador do institucional recebia o termo, para o
 * campo virar busca de verdade.
 *
 * O HTML do componente de referencia resolveu o TODO ao contrario do esperado: o
 * campo de la NAO E UM FORMULARIO. E um <a href="/academias"> estilizado como
 * campo, com o texto do placeholder e a lupa dentro. Ninguem digita nada ali - o
 * clique leva ao localizador, que e onde a busca acontece de verdade.
 *
 * Ou seja: nao havia parametro para descobrir. O padrao da casa e exatamente o que
 * da para fazer sem ele. O <input> e o <form> sairam do componente.
 *
 * Por ser link e nao campo, o rotulo entra como texto normal e nao como
 * placeholder - e por isso ele nao precisa da cor fraca de placeholder para
 * "parecer" vazio. O componente de la usa branco 50%, que sobre o veu de 50% de
 * uma foto qualquer fica em faixa de risco de contraste; aqui fica branco 70%,
 * que mantem a aparencia de campo e ainda se le.
 */
.sf-home-academia__botao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  /* max-w-sm do componente de referencia. */
  max-width: 384px;
  padding: 8px;
  border: 0;
  border-radius: var(--sf-radius-pill, 999px);
  background-color: rgba(255, 255, 255, 0.1);
  /**
   * O desfoque do fundo e o que faz a pilula ler como vidro sobre a foto, em vez
   * de um retangulo cinza. Onde o navegador nao suporta, sobra o branco 10%, que
   * ja sustenta o contorno da pilula.
   */
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--sf-transition, 0.2s ease);
}

.sf-home-academia__botao:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.sf-home-academia__botao:focus-visible {
  outline: 3px solid var(--sf-white, #fff);
  outline-offset: 3px;
}

/* Rotulo dentro da pilula: ocupa o espaco livre e empurra a lupa para a direita. */
.sf-home-academia__botao-rotulo {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
  padding: 0 16px;
  font-family: var(--sf-font-display, sans-serif);
  font-size: var(--sf-fs-body, 1rem);
  font-weight: var(--sf-fw-bold, 700);
  line-height: 1;
  /* Nao quebra em duas linhas: a pilula tem altura fixa de 48px. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(255, 255, 255, 0.7);
}

/* Lupa: circulo de 48px, o mesmo tamanho da altura do rotulo. */
.sf-home-academia__botao-lupa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--sf-white, #fff);
}

.sf-home-academia__botao-lupa svg {
  display: block;
  width: 20px;
  height: 20px;
}

/* ------------------------------------------------------------------- Desktop */

@media (min-width: 768px) {
  .sf-home-academia {
    margin-top: 70px;
    /* rounded-2xl do componente de referencia. */
    border-radius: 32px;
  }

  .sf-home-academia__inner {
    /* gap-10 e py-20 do componente de referencia. */
    gap: 40px;
    padding: 80px 48px;
  }

  .sf-home-academia__titulo {
    /* text-7 = 3rem, com leading-small-tight = 1.1. */
    font-size: 3rem;
    line-height: 1.1;
  }

  .sf-home-academia__texto {
    /* text-4 = 1.25rem, com leading-small-loose = 1.6. */
    font-size: 1.25rem;
    line-height: 1.6;
  }
}