/* ==========================================================================
   Mister Frango - pagina sobre
   (cabecalho de pagina partilhado esta em paginas.css)
   ========================================================================== */

/* --- historia -------------------------------------------------------------- */

.historia{padding-block:1rem 5rem}

.historia__grid{
  display:grid;
  grid-template-columns:1fr .92fr;
  gap:clamp(2.5rem,6vw,5rem);
  align-items:center;
}

.historia__media{position:relative}
.historia__media img{
  border-radius:var(--radio);
  aspect-ratio:4/3;object-fit:cover;
  width:100%;
}
.historia__media::after{
  content:"";
  position:absolute;
  right:-1.25rem;bottom:-1.25rem;
  width:60%;height:60%;
  border:2px solid var(--linha-forte);
  border-radius:var(--radio);
  z-index:-1;
}

.historia__texto .etiqueta{margin-bottom:1rem}
.historia__texto h2{max-width:13ch}
.historia__texto p{
  margin-top:1.5rem;
  max-width:36rem;
  font-size:var(--fs-lead);
  color:var(--creme-70);
}
.historia__texto p + p{margin-top:1rem}

@media (max-width:56.25rem){
  .historia__grid{grid-template-columns:1fr;gap:3rem}
  .historia__media{order:-1;max-width:26rem;margin-inline:auto}
}

/* --- diferenca --------------------------------------------------------------
   Lista editorial, nao grid de icones em circulo. Cada linha compara um
   habito de fast-food generico com o que se faz aqui. */

.diferenca{padding-block:1rem 5rem}

.diferenca__cabecalho{max-width:34rem;margin-bottom:3rem}
.diferenca__cabecalho h2{max-width:14ch}
.diferenca__cabecalho p{margin-top:1.25rem;font-size:var(--fs-lead);color:var(--creme-70)}

.lista-diferenca{list-style:none;margin:0;padding:0}

.linha-diferenca{
  display:grid;
  grid-template-columns:3.5rem 1fr 1fr;
  gap:1.5rem;
  align-items:baseline;
  padding-block:1.75rem;
  border-top:1px solid var(--linha);
}
.lista-diferenca li:last-child{border-bottom:1px solid var(--linha)}

.linha-diferenca__num{
  font-family:var(--mono);
  font-weight:700;
  font-size:1.125rem;
  color:var(--brasa);
}
.linha-diferenca__generico{
  font-size:.9375rem;
  color:var(--creme-45);
  text-decoration:line-through;
  text-decoration-color:rgba(249,241,231,.3);
}
.linha-diferenca__casa{
  font-weight:700;
  font-size:1.0625rem;
}

@media (max-width:37.5rem){
  .linha-diferenca{grid-template-columns:2.5rem 1fr}
  .linha-diferenca__generico{grid-column:2;order:2}
  .linha-diferenca__casa{grid-column:2;order:1;margin-bottom:.25rem}
  .linha-diferenca__num{grid-row:1 / span 2}
}

/* --- tira de fotos ----------------------------------------------------------
   Carrossel magnetico: em ecras com rato, as barras alargam perto do
   cursor (efeito de doca) e clicar abre a foto em grande, desfocando as
   outras. Em touch, sem rato para "aproximar", ficam do tamanho normal e
   clicar abre da mesma forma. */

.tira-fotos{padding-block:1rem 5rem}
.tira-fotos__titulo{margin-bottom:1.5rem}
.tira-fotos__titulo h2{white-space:nowrap}

@media (max-width:30rem){
  .tira-fotos__titulo h2{white-space:normal}
}

.carrossel-imas{
  display:flex;gap:1rem;
  overflow-x:auto;
  padding-bottom:.5rem;
  scroll-snap-type:x proximity;
  -ms-overflow-style:none;scrollbar-width:none;
}
.carrossel-imas::-webkit-scrollbar{display:none}

.carrossel-imas__item{
  flex:0 0 auto;
  scroll-snap-align:start;
  width:15rem;height:20rem;
  margin:0;padding:0;border:0;
  border-radius:var(--radio);
  overflow:hidden;
  background:var(--carvao);
  cursor:pointer;
  transition:width .2s ease,height .2s ease,filter .3s ease,opacity .3s ease;
}
.carrossel-imas__item img{
  width:100%;height:100%;object-fit:cover;display:block;
  -webkit-user-drag:none;user-select:none;
}

/* a foto aberta sai do fluxo (position:fixed, centrada no ecra) em vez de
   crescer dentro da fila — assim a fila nunca muda de altura e a secção
   a seguir (cta-final) não se mexe nem muda de tamanho ao abrir/fechar.
   O fundo escuro (.carrossel-imas__fundo) fecha ao clicar fora. */
.carrossel-imas__item.is-ativo{
  position:fixed;inset:0;margin:auto;
  width:min(34rem,82vw);height:min(34rem,72vh);
  z-index:110;
  box-shadow:0 1.5rem 4rem rgba(0,0,0,.55);
}
.carrossel-imas__item.is-desfocado{filter:blur(3px);opacity:.55}

.carrossel-imas__fundo{
  position:fixed;inset:0;
  background:rgba(23,20,21,.75);
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
  z-index:100;
  opacity:0;pointer-events:none;
  transition:opacity .25s ease;
}
.carrossel-imas__fundo.is-visivel{opacity:1;pointer-events:auto}

@media (hover:hover) and (pointer:fine){
  /* altura fixa no contentor (igual ao maior estado, HOVER_H no JS) para a
     seccao nunca mudar de tamanho — sem isto, o item que cresce em altura
     ao aproximar o rato esticava a fila toda (align-items:stretch por
     defeito), empurrando a secao seguinte para baixo a cada hover. */
  .carrossel-imas{
    justify-content:center;
    align-items:center;
    height:25rem;
    overflow:visible;
    padding-bottom:0;
  }
  .carrossel-imas__item{width:8rem;height:21.25rem}
  .carrossel-imas__item.is-colapsado{width:8rem!important;height:21.25rem!important}
}