/* ==========================================================================
   La Bella Fiore — Estilos específicos da página inicial (index.html)
   --------------------------------------------------------------------------
   Tudo o que só existe nesta página: o hero de ecrã dividido, a secção do
   forno, a chamada para a ementa, a galeria em mosaico e o lightbox, e a
   secção de contactos. O que é partilhado com outras páginas (cabeçalho,
   rodapé, botões, contentores) fica em base.css.
   ========================================================================== */

/* ---- Hero: banner de capa + faixa de ação ----------------------------------
   A imagem de capa não é uma fotografia solta: é um banner já composto pelo
   cliente, com o logótipo, o descritivo e quatro ícones desenhados por cima
   da foto da entrada.

   Isso manda no layout. Mostramos a imagem INTEIRA, sem recorte: qualquer
   corte estragaria uma composição que já foi pensada. Por isso não há aqui
   object-fit nem alturas fixas, só a proporção natural da imagem.

   Por baixo fica uma faixa verde-oliva com a frase de posicionamento e os
   dois botões. Ficam sempre visíveis, em qualquer ecrã, sem depender de a
   pessoa deslizar. */
.hero {
  display: block;
  /* O cabeçalho é fixo e opaco, por isso a capa começa por baixo dele.
     Sem isto, o topo do banner (onde está o logótipo) ficava escondido
     atrás da barra de navegação. */
  padding-top: 5rem;
  background: var(--fundo-escuro);
}

.hero__capa {
  /* Cor de fundo igual ao tom escuro da imagem: enquanto a foto carrega,
     a área não pisca a branco. */
  background: var(--oliva-900);
}

.hero__capa img {
  display: block;
  width: 100%;
  height: auto;      /* no telemóvel mostra-se inteira, sem qualquer recorte */
}

.hero__painel {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--e-6);
  background: var(--grad-marca);
  color: var(--texto-claro);
  padding: var(--e-8) var(--recuo-lateral);
}

.hero__frase {
  max-width: 46ch;
  color: var(--texto-claro-suave);
  font-size: var(--t-destaque);
}

.hero__acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e-4);
}

@media (min-width: 880px) {
  /* No computador, a imagem inteira mede 810px de altura num ecrã de 900px,
     e empurrava os botões para fora da vista. Recortamos um pouco, mas SÓ
     por baixo: a composição gráfica (logótipo, descritivo e os quatro
     ícones) vive na metade de cima da imagem, e o que se perde em baixo é
     apenas calçada e estacionamento. O object-position aos 12% garante que
     o topo do logótipo nunca é cortado. */
  .hero__capa img {
    height: min(70svh, 700px);
    object-fit: cover;
    object-position: center 12%;
  }

  /* A faixa passa a uma linha só, frase à esquerda e botões à direita.
     Assim ocupa cerca de 100px em vez de 200px, e a ação de reservar fica
     sempre dentro do primeiro ecrã. */
  .hero__painel {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: start;
    gap: var(--e-8);
    padding: var(--e-6) var(--recuo-lateral);
  }

  .hero__frase {
    margin: 0;
    font-size: var(--t-corpo);
  }

  .hero__acoes {
    flex-wrap: nowrap;
    flex-shrink: 0;
  }
}

/* ---- Sobre: história + fotos ----------------------------------------------- */
.sobre {
  display: grid;
  gap: var(--e-12);
  align-items: start;
}

.sobre__texto {
  max-width: var(--largura-texto);
}

.sobre__enquadramento {
  font-family: var(--fonte-titulo);
  font-size: var(--t-sub);
  color: var(--marca);
  margin-block: var(--e-4) var(--e-6);
}

.sobre__paragrafo + .sobre__paragrafo {
  margin-top: var(--e-4);
}

/* Uma só fotografia, a da equipa. Mostra-se por inteiro, sem recorte:
   são pessoas, e cortar caras é a única coisa que nunca se faz numa foto
   de equipa. Antes havia aqui uma grelha de duas colunas estreitas, feita
   para duas fotos verticais; com uma foto só, essa grelha transformava a
   imagem numa tira fina que deixava de fora toda a gente e mostrava apenas
   os candeeiros do teto. */
.sobre__fotos img {
  width: 100%;
  height: auto;
  border-radius: var(--raio-m);
  box-shadow: var(--sombra-media);
}

@media (min-width: 960px) {
  .sobre {
    grid-template-columns: 1fr 0.85fr;
  }
}

/* ---- O forno ---------------------------------------------------------------
   O forno de mosaico dourado é o elemento visual mais reconhecível da casa,
   por isso a foto ocupa quase todo o ecrã em largura, com o texto sobreposto
   num cartão discreto — não competimos com a imagem, damos-lhe espaço. */
.forno {
  position: relative;
  overflow: hidden;
}

.forno__foto {
  width: 100%;
}

.forno__foto img {
  width: 100%;
  height: auto;
  max-height: 85vh;
  object-fit: cover;
  /* A foto é vertical e aqui aparece numa faixa larga, logo há muito para
     recortar. A 35% via-se só a cúpula de mosaico — bonita, mas sem história.
     A 72% entra a boca do forno com a CHAMA acesa, que é o que dá vida à
     imagem e justifica a secção. Se a foto for trocada, este valor tem de
     ser reajustado à nova composição. */
  object-position: center 72%;
}

.forno__cartao {
  position: relative;
  margin: calc(var(--e-12) * -1) auto 0;
  width: min(560px, calc(100% - var(--recuo-lateral) * 2));
  background: var(--fundo);
  border-radius: var(--raio-m);
  box-shadow: var(--sombra-alta);
  padding: var(--e-8);
  text-align: center;
  /* A secção ".forno" tem a classe utilitária ".seccao--escura", que pinta
     títulos e texto de claro para ficarem legíveis sobre o fundo oliva.
     Mas este cartão, lá dentro, tem fundo CLARO — sem este bloco, o texto
     claro-sobre-claro ficava praticamente invisível. Repomos as cores
     normais só aqui dentro. */
  color: var(--texto-forte);
}

.forno__cartao h2 {
  color: var(--texto-forte);
}

@media (min-width: 720px) {
  .forno__cartao {
    margin-top: calc(var(--e-24) * -1);
    padding: var(--e-12);
  }
}

/* ---- Ementa (chamada) --------------------------------------------------------
   Esta lista deixou de ser texto decorativo e passou a ser NAVEGAÇÃO: cada
   secção é um link direto para o sítio certo da ementa. Está dentro de um
   <nav>, mas a classe fica no <ul> e não no <nav>.

   Isso é de propósito: com a classe no <nav>, o alinhamento horizontal
   aplicava-se ao contentor e a lista lá dentro continuava a ser um bloco,
   pelo que os itens empilhavam em coluna. Mantendo a classe no <ul>, é a
   própria lista que fica em linha, que é o comportamento correto. */
.ementa-chamada__seccoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  /* A folga vertical (primeiro valor) importa mais do que parece: no
     telemóvel a lista quebra em várias linhas, e com os links a terem 44px
     de altura, linhas demasiado juntas fazem o dedo acertar na de cima ou
     na de baixo. */
  gap: var(--e-2) var(--e-4);
  margin-block: var(--e-8) var(--e-12);
  padding: 0;
  list-style: none;
}

.ementa-chamada__seccoes li {
  position: relative;
  padding-inline-end: var(--e-4);
}

.ementa-chamada__seccoes li:not(:last-child)::after {
  content: "·";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--latao-500);
  pointer-events: none;
}

.ementa-chamada__seccoes a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;          /* área de toque confortável no telemóvel */
  padding-inline: var(--e-2);
  font-family: var(--fonte-titulo);
  font-size: var(--t-destaque);
  color: var(--texto-forte);
  border-bottom: 1px solid transparent;
  transition: color var(--trans-rapida), border-color var(--trans-rapida);
}

/* O sublinhado só aparece ao passar o rato ou ao chegar pelo teclado.
   Mantém o conjunto com ar de lista elegante em repouso, mas deixa claro
   que é clicável mal a pessoa interaja. */
.ementa-chamada__seccoes a:hover,
.ementa-chamada__seccoes a:focus-visible {
  color: var(--marca);
  border-bottom-color: var(--latao-500);
}

/* Em ecrãs largos apertamos o espaçamento o suficiente para as 11 secções
   caberem numa única linha. Sem isto sobravam duas sozinhas na linha de
   baixo, o que fica desequilibrado.
   Só a partir dos 1100px: no telemóvel a lista quebra em várias linhas de
   qualquer forma, e aí a folga entre links é o que evita toques errados. */
@media (min-width: 1100px) {
  .ementa-chamada__seccoes {
    gap: var(--e-1) var(--e-2);
  }

  .ementa-chamada__seccoes li {
    padding-inline-end: var(--e-3);
  }

  .ementa-chamada__seccoes a {
    padding-inline: var(--e-1);
  }
}

.ementa-chamada__fotos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e-3);
  margin-bottom: var(--e-12);
}

.ementa-chamada__fotos img {
  width: 100%;
  /* O height: auto é ESSENCIAL. As imagens têm height="1200" no HTML (para
     o browser reservar espaço e a página não "saltar" ao carregar). Sem o
     height: auto, a imagem obedecia a esse 1200 literal e o aspect-ratio
     abaixo era ignorado: no telemóvel cada foto ficava com 101px de largura
     e 1200px de altura, ocupando ecrãs inteiros. Com height: auto, a
     proporção volta a mandar. */
  height: auto;
  border-radius: var(--raio-m);
  object-fit: cover;
  /* No telemóvel, três colunas deixam cada foto com ~100px de largura. A
     proporção 2:3 tornava-as tiras estreitas e altas. 3:4 dá-lhes um
     formato mais equilibrado, com presença mas sem dominarem o ecrã. */
  aspect-ratio: 3 / 4;
}

/* A partir do tablet há espaço para as fotos respirarem na vertical, que é
   a orientação nativa delas e a mais bonita para pratos. */
@media (min-width: 700px) {
  .ementa-chamada__fotos {
    gap: var(--e-4);
  }

  .ementa-chamada__fotos img {
    aspect-ratio: 2 / 3;
  }
}

.ementa-chamada__cta {
  text-align: center;
}

/* ---- Galeria em grelha ------------------------------------------------------
   Grelha alinhada (CSS Grid), todas as fotos com a mesma proporção. Ver a
   nota detalhada mais abaixo, na regra .galeria, sobre porque abandonámos as
   colunas CSS (masonry). */
/* Grelha verdadeira (CSS Grid), não "colunas CSS".
   As colunas CSS enchem-se de cima a baixo, uma de cada vez, e por isso
   qualquer foto com uma altura ligeiramente diferente desalinhava tudo o
   que vinha a seguir na coluna. Bastava um dos ficheiros ter sido otimizado
   com uma proporção 0.70 em vez de 0.67 para criar um degrau visível.
   A grelha alinha as fotos em linhas e colunas certinhas, e lê-se da
   esquerda para a direita, que é o esperado. */
.galeria {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-4);
}

.galeria__item {
  border-radius: var(--raio-m);
  overflow: hidden;
  position: relative;
  box-shadow: var(--sombra-baixa);
}

.galeria__botao {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}

.galeria__botao img {
  width: 100%;
  height: 100%;
  /* Todas as fotos são forçadas à MESMA proporção. Assim, mesmo que um
     ficheiro venha com uma proporção um pouco diferente, a célula mantém-se
     alinhada; o object-fit: cover recorta o excesso sem deformar a imagem. */
  aspect-ratio: 2 / 3;
  object-fit: cover;
  display: block;
  transition: transform var(--trans-media);
}

.galeria__botao:hover img,
.galeria__botao:focus-visible img {
  transform: scale(1.04);
}

/* Ícone discreto de "ampliar" que aparece sobre a foto, para deixar claro
   que é clicável antes mesmo de a pessoa tocar. */
.galeria__botao::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(28, 29, 18, 0.45) 0%, rgba(28, 29, 18, 0) 35%);
  opacity: 0;
  transition: opacity var(--trans-rapida);
}

.galeria__botao:hover::after,
.galeria__botao:focus-visible::after {
  opacity: 1;
}

@media (min-width: 620px) {
  .galeria {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .galeria {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---- Lightbox (visualização em grande) --------------------------------------
   Um <dialog> nativo do HTML faz a maior parte do trabalho pesado de
   acessibilidade por nós: foco preso lá dentro, fecha com Escape, e o
   fundo fica inerte para leitores de ecrã. Completamos com JS só o
   suficiente para trocar a foto e devolver o foco a quem abriu. */
.lightbox {
  border: none;
  padding: 0;
  background: transparent;
  max-width: min(90vw, 900px);
  max-height: 90vh;
}

.lightbox::backdrop {
  background: rgba(28, 29, 18, 0.9);
}

.lightbox__figura {
  margin: 0;
  position: relative;
}

.lightbox__imagem {
  display: block;
  width: 100%;
  height: auto;
  max-height: 82vh;
  object-fit: contain;
  border-radius: var(--raio-p);
}

.lightbox__legenda {
  color: var(--texto-claro-suave);
  font-size: var(--t-peq);
  text-align: center;
  margin-top: var(--e-3);
}

.lightbox__fechar {
  position: absolute;
  top: calc(var(--e-8) * -1);
  right: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--texto-claro);
  font-size: 1.75rem;
  line-height: 1;
  background: rgba(28, 29, 18, 0.6);
  border-radius: 50%;
}

@media (min-width: 720px) {
  .lightbox__fechar {
    top: 0;
    right: calc(var(--e-12) * -1);
  }
}

/* ---- Contactos ---------------------------------------------------------------
   Fundo: a fachada do restaurante ao anoitecer (foto "fundo-seccao" da
   seleção). É decorativa — por isso vai por CSS, não por <img>, e fica
   coberta por um véu escuro (::before) para o texto branco por cima
   continuar legível em qualquer parte da foto. */
.contactos__faixa {
  position: relative;
  padding-block: var(--e-24);
  background-image: url("../img/fachada-noite-1200.jpg");
  background-size: cover;
  background-position: center;
  isolation: isolate;
}

.contactos__faixa::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(28, 29, 18, 0.72);
  z-index: -1;
}

/* O título e o rótulo da secção de contactos assentam sobre a fotografia
   escurecida, por isso vão a cor clara. (Antes isto estava num style=""
   embutido no HTML; foi movido para aqui para a política de segurança do
   site poder proibir estilos embutidos, que são um vetor de ataque comum.) */
.contactos__cabecalho h2 {
  color: var(--texto-claro);
}

.contactos__grelha {
  display: grid;
  gap: var(--e-8);
  max-width: 840px;
  margin-inline: auto;
}

.contactos__bloco {
  background: var(--fundo);
  border-radius: var(--raio-m);
  padding: var(--e-8);
  box-shadow: var(--sombra-alta);
}

.contactos__linha {
  display: flex;
  gap: var(--e-3);
  align-items: flex-start;
  margin-bottom: var(--e-4);
}

.contactos__linha:last-child {
  margin-bottom: 0;
}

.contactos__rotulo {
  font-weight: 600;
  min-width: 6rem;
  color: var(--texto-suave);
}

/* O valor ao lado do rótulo (telefone, e-mail, Instagram) tem de poder
   quebrar. Um endereço como "info@labellafiore.pt" é uma palavra única sem
   espaços: sem isto, o browser não a parte, e ela empurra o cartão de
   contactos para fora do ecrã.
   O min-width:0 é necessário porque, dentro de um flex, os elementos
   recusam-se a encolher abaixo do seu conteúdo a menos que lho digamos. */
.contactos__linha > :not(.contactos__rotulo) {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Em ecrãs estreitos (320px a 480px), reservar 96px só para o rótulo deixava
   pouco mais de 100px para o valor. Passamos a empilhar: rótulo em cima,
   valor por baixo, com o cartão a respirar menos nas margens. */
@media (max-width: 480px) {
  .contactos__bloco {
    padding: var(--e-6);
  }

  .contactos__linha {
    flex-direction: column;
    gap: var(--e-1);
    margin-bottom: var(--e-6);
  }

  .contactos__rotulo {
    min-width: 0;
  }
}

.tabela-horario {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-peq);
}

.tabela-horario th,
.tabela-horario td {
  text-align: left;
  padding-block: var(--e-2);
  border-bottom: 1px solid var(--borda);
}

.tabela-horario th {
  color: var(--texto-suave);
  font-weight: 500;
}

.contactos__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-4);
  margin-top: var(--e-8);
}

@media (min-width: 720px) {
  .contactos__bloco {
    padding: var(--e-12);
  }
}