/* =========================
   Receitas (coerente com o resto do site)
   - Introdução fora do menu
   - Menu horizontal por baixo da introdução
   - Corpo da receita com scroll interno
   ========================= */

.page--recipes{ --recipes-panel-bg: #206C8A; }


/* Peixes decorativos dentro da área da receita (não no background da página) */
.page--recipes .section--dark{ position:relative; }
.page--recipes .section--dark > .container{ position:relative; z-index:1; }

.recipe-sheet{ position:relative; overflow:hidden; }
.recipe-sheet__head,
.recipe-sheet__body{ position:relative; z-index:1; }

.recipe-sheet__decor{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}

.recipe-fish{
  position:absolute;
  width: var(--size, clamp(70px, 10vw, 170px));
  height:auto;
  /* less transparent: keep visible but still decorative */
  opacity:.28;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,.22));
  transform: translate3d(var(--parallax-x, 0px), var(--parallax, 0px), 0) rotate(calc(var(--rot, 0deg) + var(--rot-delta, 0deg))) scale(var(--scale, 1));
  will-change: transform;
}

.recipe-fish--1{ top: 22px; right: -38px; --rot: 16deg; --scale: 1.02; }
.recipe-fish--2{ bottom: 42px; left: -46px; --rot: -12deg; --scale: .98; }
.recipe-fish--3{ top: 46%; left: -26px; --rot: 10deg; --scale: .80; opacity:.22; }
.recipe-fish--4{ bottom: -18px; right: 40px; --rot: -18deg; --scale: .78; opacity:.20; }



/* -------------------------
   Introdução
   ------------------------- */
.recipes-intro{ margin-top: 8px; }

.recipe-sheet--intro{
  padding:34px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background: var(--recipes-panel-bg);
  box-shadow: 0 18px 40px rgba(0,0,0,.16);
}

.recipe-intro{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:28px;
  align-items:start;
}

.recipe-intro__title{
  font-family: var(--font-serif);
  font-weight:800;
  font-style:normal;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size: clamp(28px, 3.0vw, 44px);
  color: var(--pink);
  margin:0 0 10px;
}

.recipe-intro p{
  margin:0 0 12px;
  line-height:1.6;
  opacity:.95;
}

.recipe-intro__fish{
  display:flex;
  justify-content:flex-end;
  gap:16px;
  margin-bottom:10px;
}

.recipe-intro__fish img{
  width:56px;
  height:auto;
  opacity:.95;
}

/* -------------------------
   Menu (agora em cima)
   ------------------------- */
.recipes-topnav{
  margin-top: 18px;
  background: var(--recipes-panel-bg);
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  padding:14px 14px 10px;
  position:relative; /* menu no sítio */
}

.recipes-topnav__title{
  margin:0 0 10px;
  font-family: var(--font-serif);
  font-weight:800;
  font-size:14px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--pink);
}

.recipes-topnav__list{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding-bottom:6px;
  margin:0;
  scroll-behavior:smooth;
}

.recipes-topnav__list::-webkit-scrollbar{ height:8px; }
.recipes-topnav__list::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.22); border-radius:999px; }
.recipes-topnav__list::-webkit-scrollbar-track{ background: rgba(255,255,255,.08); border-radius:999px; }

.recipe-link{
  appearance:none;
  flex:0 0 auto;
  display:grid;
  grid-template-columns: 38px 1fr;
  gap:10px;
  align-items:center;
  padding:8px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color:var(--muted);
  cursor:pointer;
  text-align:left;
  min-width:220px;
}

.recipe-link:hover{ background: rgba(255,255,255,.10); }

.recipe-link[aria-current="true"]{
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.28);
}

.recipe-link__thumb{
  width:38px;
  height:38px;
  border-radius:999px;
  overflow:hidden;
  border:2px solid rgba(243,223,227,.75);
  background: rgba(0,0,0,.12);
  display:grid;
  place-items:center;
}

.recipe-link__thumb img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.recipe-link__label{
  font-size:13px;
  line-height:1.15;
}

.recipe-link__meta{
  display:block;
  margin-top:2px;
  opacity:.86;
  font-size:11px;
  line-height:1.15;
}

/* -------------------------
   Conteúdo da receita
   ------------------------- */
.recipes-view{
  margin-top: 18px;
  min-width:0;
  overflow:visible;
}

.recipes-view .recipe-sheet{
  padding:0;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background: var(--recipes-panel-bg);
  box-shadow: 0 18px 40px rgba(0,0,0,.16);
  /* Sem scroll interno: a página é que faz scroll */
  display:block;
  overflow:visible;
  max-height:none;
}

.recipe-sheet__head{ padding:34px 34px 0; }
.recipe-sheet__body{ padding: 18px 34px 34px; overflow:visible; }

.recipe-title{
  font-family: var(--font-serif);
  font-weight:800;
  font-style:normal;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size: clamp(24px, 2.4vw, 38px);
  margin:0 0 10px;
  line-height:1.06;
  color: var(--pink);
}

.recipe-kicker{
  margin:0 0 18px;
  opacity:.92;
  font-size:15px;
  line-height:1.45;
  max-width:70ch;
}

.recipe-hero{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:22px;
  align-items:start;
}

.recipe-hero--image-left{ grid-template-columns: .9fr 1.1fr; }
.recipe-hero--no-image{ grid-template-columns: 1fr; }
.recipe-hero__block{ min-width:0; }

.recipe-hero__figure{ margin:0; display:flex; justify-content:flex-end; }
.recipe-hero--image-left .recipe-hero__figure{ justify-content:flex-start; }

.recipe-photo{
  width: clamp(160px, 18vw, 260px);
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  overflow:hidden;
  border:2px solid rgba(213,167,74,.85);
  box-shadow: 0 14px 30px rgba(0,0,0,.22);
  background: rgba(0,0,0,.12);
}

.recipe-photo img{
  width:100%;
  height:100%;
  object-fit: contain;
  display:block;
}

/* Ajuste específico — Caldeirada à Moda das Caxinas */
/* Move a imagem nas receitas (menos na Caldeirada de Ferreta) */
#recipeSheet[data-recipe="caldeirada-caxinas"] .recipe-photo,
#recipeSheet[data-recipe="caldeirada-carrasca"] .recipe-photo,
#recipeSheet[data-recipe="biqueirao-frito"] .recipe-photo,
#recipeSheet[data-recipe="biqueirao-escabeche"] .recipe-photo{
  transform: translate(-120px, 60px);
}


.ingredients-title{ margin:14px 0 10px; font-weight:700; letter-spacing:.02em; }
.ingredients-list{ margin:0; padding-left:18px; }
.ingredients-list li{ margin: 3px 0; line-height:1.35; }

.recipe-strip{
  margin:18px 0 18px;
  display:flex;
  align-items:center;
  gap:12px;
}

.recipe-strip img{
  width:min(620px, 100%);
  height:auto;
  display:block;
  opacity:.92;
}

.recipe-method{ margin-top:26px; }
.recipe-method__title{ margin:0 0 14px; font-weight:700; font-size:16px; }

.recipe-method__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:24px;
}

.recipe-method__grid p{ margin:0 0 12px; opacity:.96; line-height:1.55; }
.recipe-note{ margin-top:6px; opacity:.85; font-size:12px; }

/* Responsivo */
@media (max-width: 980px){
  .recipe-intro{ grid-template-columns: 1fr; }
  .recipes-view .recipe-sheet{ max-height: none; }
  .recipe-hero,
  .recipe-hero--image-left{ grid-template-columns: 1fr; }
  .recipe-hero__figure{ justify-content:flex-start; }
  .recipe-photo{ width: min(240px, 72vw); }
  #recipeSheet[data-recipe="caldeirada-caxinas"] .recipe-photo{ transform: translate(-28px, 12px); }
  .recipe-method__grid{ grid-template-columns: 1fr; }
  .recipe-sheet__head{ padding:26px 22px 0; }
  .recipe-sheet__body{ padding: 14px 22px 22px; }
  .recipe-sheet--intro{ padding:26px 22px; }
  .recipe-link{ min-width: 200px; }
}


@media (max-width: 420px){
  .page--recipes{ --recipes-panel-bg: #206C8A; }

}

/* === Biqueirão Frito: remover separator + subir conteúdo + cancelar translate === */
#recipeSheet[data-recipe="biqueirao-frito"] img[src*="footer-separator.png"],
#recipeSheet[data-recipe="biqueirao-frito"] .recipe-strip,
#recipeSheet[data-recipe="biqueirao-frito"] .recipe-separator {
  display: none !important;
}

/* puxa o conteúdo da receita para cima 30px */
#recipeSheet[data-recipe="biqueirao-frito"] .recipe-body,
#recipeSheet[data-recipe="biqueirao-frito"] .recipe-method,
#recipeSheet[data-recipe="biqueirao-frito"] .recipe-steps {
  margin-top: -30px !important;
}

/* remove o translate que tinhas aplicado globalmente */
#recipeSheet[data-recipe="biqueirao-frito"] .recipe-photo {
  transform: none !important;
}

/* =========================================================
   PATCH: Repor barras/separadores (footer-separator) nos biqueirões
   ========================================================= */
#recipeSheet[data-recipe="biqueirao-frito"] img[src*="footer-separator.png"],
#recipeSheet[data-recipe="biqueirao-escabeche"] img[src*="footer-separator.png"]{
  display: block !important;
}

#recipeSheet[data-recipe="biqueirao-frito"] .recipe-strip,
#recipeSheet[data-recipe="biqueirao-escabeche"] .recipe-strip{
  display: flex !important;
}

#recipeSheet[data-recipe="biqueirao-frito"] .recipe-separator,
#recipeSheet[data-recipe="biqueirao-escabeche"] .recipe-separator{
  display: block !important;
}

/* Se tinhas puxado o conteúdo para cima, desfaz (para a barra não colidir) */
#recipeSheet[data-recipe="biqueirao-frito"] .recipe-body,
#recipeSheet[data-recipe="biqueirao-frito"] .recipe-method,
#recipeSheet[data-recipe="biqueirao-frito"] .recipe-steps{
  margin-top: 0 !important;
}