/* ===== PADRÃO ÚNICO DO SITE (heros e cards) =====
   Carregado por último no <head> de todas as páginas. Vale para todas;
   ajustes por página devem ser feitos só no --pos da foto. */

/* ---------- HERO ---------- */
html body section.hero{
  position:relative;display:grid!important;align-items:end!important;
  min-height:0!important;height:auto!important;aspect-ratio:1080/420!important;
  overflow:hidden;isolation:isolate;background:#111112
}
html body section.hero .hero__bg{position:absolute!important;inset:0!important;width:auto!important;z-index:-2;transform:none!important}
html body section.hero .hero__bg img,html body section.hero .hero__bg .ph{
  position:absolute;inset:0;width:100%!important;height:100%!important;max-height:none!important;
  object-fit:cover!important;object-position:var(--pos,50% 45%)!important;
  -webkit-mask-image:none!important;mask-image:none!important;animation:none!important
}
/* degradê: escurece o lado do texto (direita) e a base, deixando a foto visível */
html body section.hero::after{
  content:"";display:block!important;position:absolute;inset:0;z-index:-1;
  background:linear-gradient(0deg,rgba(10,10,10,.55) 0%,rgba(10,10,10,0) 45%),
             linear-gradient(270deg,rgba(10,10,10,.78) 0%,rgba(10,10,10,.5) 32%,rgba(10,10,10,0) 62%)!important
}
html body section.hero .hero__in{
  display:flex!important;flex-direction:column!important;align-items:flex-end!important;justify-content:flex-end!important;
  text-align:right!important;width:100%!important;max-width:calc(var(--maxw,1200px) + 2*var(--s3,24px))!important;
  margin:0 auto!important;padding:48px var(--s3,24px)!important;box-sizing:border-box;color:#EDE6DC;gap:0
}
html body section.hero .hero__in>*{margin-left:auto!important;margin-right:0!important;text-align:right!important}
html body section.hero .eyebrow{font-size:11px!important;letter-spacing:.14em;color:#e8dfd1!important;margin-bottom:6px!important}
html body section.hero .hero__title{
  font-size:clamp(28px,3.1vw,40px)!important;line-height:1.1!important;max-width:20ch!important;
  margin-top:0!important;color:#EDE6DC!important;justify-self:auto!important;align-self:auto!important
}
/* destaques do título no padrão do hero do Chef em Casa: dourado, caixa alta */
html body section.hero .hero__title em,html body section.hero .hero__title strong{color:#FFBA2A!important;font-style:normal!important;text-transform:uppercase;font-weight:inherit}
html body section.hero .hero__sub{
  font-size:16px!important;line-height:1.5!important;max-width:46ch!important;margin-top:12px!important;color:#FFFFFF!important
}
html body section.hero .hero__cta{display:flex!important;flex-wrap:wrap;justify-content:flex-end!important;gap:10px!important;margin-top:20px!important}
html body section.hero .hero__cta .btn{height:auto!important}

/* variante dividida (Jantar às Cegas): mesma altura e texto; foto na metade esquerda */
@media (min-width:761px){
  html body section.hero.hero--split .hero__bg{inset:0 50% 0 0!important}
  html body section.hero.hero--split::after{background:linear-gradient(90deg,rgba(0,0,0,0) 40%,#000 50%)!important}
}
/* variante clara (Sensorial): foto de fundo branco, texto escuro, sem véu */
html body section.hero.hero--claro{background:#fff}
html body section.hero.hero--claro::after{background:linear-gradient(270deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,0) 55%)!important}
html body section.hero.hero--claro .hero__title,html body section.hero.hero--claro .hero__sub{color:#111112!important}
html body section.hero.hero--claro .hero__title em{color:#810100!important}
html body section.hero.hero--claro .eyebrow{color:#810100!important}

/* celular: altura fixa proporcional à tela, texto na base */
@media (max-width:760px){
  html body section.hero:not(#_){aspect-ratio:auto!important;height:auto!important;min-height:62vh!important;min-height:62svh!important}
  html body section.hero::after{background:linear-gradient(0deg,rgba(10,10,10,.88) 0%,rgba(10,10,10,.45) 45%,rgba(10,10,10,.1) 100%)!important}
  html body section.hero.hero--claro::after{background:linear-gradient(0deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.6) 45%,rgba(255,255,255,0) 100%)!important}
  html body section.hero .hero__bg img,html body section.hero .hero__bg .ph{object-position:var(--pos-m,var(--pos,50% 40%))!important}
  html body section.hero .hero__in{padding:32px 20px!important}
  html body section.hero .hero__title{font-size:clamp(28px,8vw,36px)!important}
  html body section.hero .hero__sub{font-size:15px!important}
}

/* ---------- CARDS COM FOTO ---------- */
html body .card>img.is-photo,html body .card>.ph.is-photo,html body .card>a>img.is-photo,html body .card>.ph{
  width:100%!important;height:200px!important;max-height:none!important;aspect-ratio:auto!important;object-fit:cover!important;display:block
}
html body .card h3{font-size:18px!important;line-height:1.25!important}
html body .card .muted,html body .card p:not(.price):not(.eyebrow){font-size:14px}

/* 20/10/2026 · width/height nas imagens (evita CLS) sem distorcer: a altura segue o CSS de cada componente */
:where(img[data-wh]){width:auto;height:auto}

/* 25/10/2026 · TAMANHO FIXO EM QUALQUER MONITOR (regra do Rafael: fotos nunca mudam de tamanho entre telas grandes)
   1) a largura do conteúdo não cresce mais em telas de 1600px ou mais (antes ia a 1440 e 1600px e as fotos esticavam);
   2) o hero para de crescer a partir de 1280px: a foto fica num quadro de 1280x498, inteira e centralizada, com faixa escura nas laterais. */
@media (min-width:1600px){html:root{--maxw:1180px!important}}
@media (min-width:1281px){
  html body section.hero:not(.hero--claro){background:#111112}
  html body section.hero:not(#_){aspect-ratio:auto!important;height:498px!important}
  html body section.hero .hero__bg{left:calc(50% - 640px)!important;right:calc(50% - 640px)!important}
  html body section.hero.hero--split .hero__bg{left:calc(50% - 640px)!important;right:50%!important}
  html body section.hero .hero__in{max-width:1280px!important}
}