/* =========================================================================
   Empório Portugal — Guias Premium 15F (correcao-01)
   Escopo: paginas de guias da cozinha (body.ep-guide-premium)
   Rotas: como-escolher-bacalhau, como-dessalgar-bacalhau, como-usar-azeite-portugues
   Nao afeta comunidade, gastronomia, guia comercial nem outros artigos.
   ========================================================================= */

.ep-guide-premium {
  --epg-green: var(--green, #0b2f24);
  --epg-green-2: #103b2d;
  --epg-wine: var(--wine, #7e1825);
  --epg-gold: var(--gold, #d4af37);
  --epg-ivory: #f7efe2;
  --epg-paper: var(--paper, #fbf6ec);
  --epg-line: var(--line, #e6dcc7);
  --epg-muted: var(--muted, #5b5347);
  --epg-radius: 18px;
}

/* Neutraliza estilos herdados que poderiam afetar o novo layout */
.ep-guide-premium .guide-hero__grid,
.ep-guide-premium .guide-figure,
.ep-guide-premium .guide-meta-pills { all: unset; }

/* ---------------------------------------------------------------- HERO --- */
.ep-guide-hero {
  position: relative;
  padding: 0;
  background:
    radial-gradient(120% 120% at 85% 0%, rgba(212,175,55,.18), transparent 55%),
    linear-gradient(160deg, #0c3327 0%, #0b2f24 45%, #08251c 100%);
  color: var(--epg-ivory);
  overflow: hidden;
}
.ep-guide-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(247,239,226,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247,239,226,.05) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: .35;
  pointer-events: none;
}
.ep-guide-hero__inner {
  position: relative;
  width: min(var(--max, 1200px), calc(100% - 40px));
  margin: 0 auto;
  padding: 1.4rem 0 2.6rem;
}
.ep-guide-hero .breadcrumb,
.ep-guide-hero .breadcrumb a { color: rgba(247,239,226,.82); }
.ep-guide-hero .breadcrumb a:hover { color: var(--epg-gold); }

.ep-guide-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, .62fr);
  gap: 2.6rem;
  align-items: center;
  margin-top: 1.4rem;
}
.ep-guide-hero__copy { min-width: 0; }
.ep-guide-hero__kicker {
  display: inline-flex; align-items: center; gap: .5rem;
  margin: 0 0 1rem;
  padding: .4rem .9rem;
  border: 1px solid rgba(212,175,55,.55);
  border-radius: 999px;
  background: rgba(212,175,55,.12);
  color: var(--epg-gold);
  font: 800 .74rem/1 Arial, Helvetica, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ep-guide-hero__copy h1 {
  margin: 0 0 1rem;
  color: #fffaf0;
  font: 800 clamp(2rem, 4.4vw, 3.15rem)/1.08 Georgia, "Times New Roman", serif;
  letter-spacing: -.01em;
}
.ep-guide-hero__lead {
  margin: 0 0 1.4rem;
  max-width: 40ch;
  color: rgba(247,239,226,.9);
  font: 400 clamp(1.02rem, 1.5vw, 1.2rem)/1.6 Georgia, "Times New Roman", serif;
}
.ep-guide-hero__badges { display: flex; flex-wrap: wrap; gap: .55rem; }
.ep-guide-hero__badges span {
  display: inline-flex; align-items: center; min-height: 34px;
  padding: .4rem .85rem;
  border: 1px solid rgba(247,239,226,.28);
  border-radius: 999px;
  background: rgba(255,250,240,.08);
  color: #fffaf0;
  font: 800 .8rem/1 Arial, Helvetica, sans-serif;
}

.ep-guide-hero__figure {
  position: relative;
  margin: 0;
}
.ep-guide-hero__figure img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center;
  border-radius: var(--epg-radius);
  border: 1px solid rgba(212,175,55,.5);
  box-shadow: 0 30px 70px rgba(0,0,0,.42);
}
.ep-guide-hero__figure figcaption {
  margin-top: .7rem;
  color: rgba(247,239,226,.72);
  font: 400 .8rem/1.45 Arial, Helvetica, sans-serif;
  font-style: italic;
}
.ep-guide-hero__figure::after {
  content: "";
  position: absolute; left: 14px; right: 14px; bottom: 46px; top: 14px;
  border: 1px solid rgba(247,239,226,.16);
  border-radius: 12px;
  pointer-events: none;
}

/* --------------------------------------------------- QUICK / ESSENCIAL --- */
.ep-guide-quick {
  width: min(var(--max, 1200px), calc(100% - 40px));
  margin: -1.6rem auto 0;
  position: relative;
  z-index: 2;
  padding: 1.5rem 1.6rem;
  border: 1px solid var(--epg-line);
  border-top: 4px solid var(--epg-gold);
  border-radius: var(--epg-radius);
  background: #fffaf0;
  box-shadow: 0 22px 50px rgba(11,47,36,.14);
}
.ep-guide-quick__title {
  display: flex; align-items: center; gap: .6rem;
  margin: 0 0 1rem;
  color: var(--epg-green);
  font: 900 1.12rem/1.2 Arial, Helvetica, sans-serif;
  letter-spacing: .01em;
}
.ep-guide-quick__title::before {
  content: "30s";
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--epg-green);
  color: var(--epg-gold);
  font: 800 .82rem/1 Arial, Helvetica, sans-serif;
}
.ep-guide-quick ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem 1.6rem;
  margin: 0; padding: 0;
  list-style: none;
}
.ep-guide-quick li {
  position: relative;
  padding-left: 1.5rem;
  color: #3a352c;
  font: 500 .98rem/1.5 Arial, Helvetica, sans-serif;
}
.ep-guide-quick li::before {
  content: "";
  position: absolute; left: 0; top: .55em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--epg-wine);
}

/* --------------------------------------------------------- LAYOUT ------- */
.ep-guide-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 336px;
  gap: 2.4rem;
  align-items: start;
}
.ep-guide-main { max-width: none; min-width: 0; }

.ep-guide-section { margin: 0 0 2.2rem; }
.ep-guide-section h2 {
  margin: 0 0 .8rem;
  color: var(--epg-green);
  font: 800 clamp(1.35rem, 2.4vw, 1.85rem)/1.18 Georgia, "Times New Roman", serif;
}
.ep-guide-section h3 {
  margin: 1.3rem 0 .5rem;
  color: var(--epg-wine);
  font: 800 1.12rem/1.25 Arial, Helvetica, sans-serif;
}
.ep-guide-section p { margin: 0 0 .9rem; color: #3a352c; font: 400 1.04rem/1.7 Georgia, "Times New Roman", serif; }
.ep-guide-section > ul { margin: .2rem 0 1rem; padding-left: 1.15rem; }
.ep-guide-section > ul li { margin: .4rem 0; color: #3a352c; font: 400 1.02rem/1.6 Arial, Helvetica, sans-serif; }
.ep-guide-section > ul li::marker { color: var(--epg-gold); }

/* ---- imagem interna em bloco dividido (texto + foto retrato) ----------- */
.ep-guide-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, .8fr);
  gap: 1.8rem;
  align-items: center;
  margin: 1.4rem 0 2.2rem;
}
.ep-guide-split--reverse { grid-template-columns: minmax(240px, .8fr) minmax(0, 1fr); }
.ep-guide-split--reverse .ep-guide-figure { order: -1; }
.ep-guide-split__copy { min-width: 0; }
.ep-guide-split__copy > *:first-child { margin-top: 0; }

.ep-guide-figure {
  margin: 0;
  position: relative;
}
.ep-guide-figure img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center;
  border-radius: var(--epg-radius);
  border: 1px solid var(--epg-line);
  box-shadow: 0 18px 44px rgba(11,47,36,.16);
}
.ep-guide-figure figcaption {
  margin-top: .55rem;
  color: var(--epg-muted);
  font: 400 .82rem/1.45 Arial, Helvetica, sans-serif;
  font-style: italic;
}

/* ------------------------------------------------------- CALLOUT -------- */
.ep-guide-callout {
  margin: 1.4rem 0;
  padding: 1.15rem 1.3rem;
  border: 1px solid rgba(212,175,55,.4);
  border-left: 4px solid var(--epg-gold);
  border-radius: var(--epg-radius);
  background: linear-gradient(135deg, rgba(11,47,36,.05), rgba(212,175,55,.12));
}
.ep-guide-callout strong { display: block; margin-bottom: .35rem; color: var(--epg-green); font: 900 1rem/1.2 Arial, Helvetica, sans-serif; }
.ep-guide-callout p { margin: 0; color: #3a352c; font: 400 1rem/1.6 Arial, Helvetica, sans-serif; }

/* --------------------------------------------------------- STEPS -------- */
/* Estrutura robusta: numero explicito + corpo. Sem grid no <li>,
   sem ::before gerando itens fantasma (bug corrigido do 15C). */
.ep-guide-steps { margin: 1rem 0 1.6rem; padding: 0; list-style: none; counter-reset: epstep; display: grid; gap: .9rem; }
.ep-guide-steps > li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.05rem 1.2rem;
  border: 1px solid var(--epg-line);
  border-radius: 14px;
  background: #fffaf0;
  box-shadow: 0 8px 22px rgba(11,47,36,.06);
}
.ep-guide-steps > li::before {
  counter-increment: epstep;
  content: counter(epstep);
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--epg-green);
  color: var(--epg-gold);
  font: 800 1.02rem/1 Arial, Helvetica, sans-serif;
}
.ep-guide-steps > li .ep-step-body { min-width: 0; }
.ep-guide-steps > li strong { display: block; margin-bottom: .2rem; color: var(--epg-green); font: 800 1.02rem/1.3 Arial, Helvetica, sans-serif; }
.ep-guide-steps > li p, .ep-guide-steps > li span { margin: 0; color: #3a352c; font: 400 1rem/1.55 Arial, Helvetica, sans-serif; }

/* --------------------------------------------------------- TABLE -------- */
.ep-guide-table-wrap { margin: 1rem 0 1.6rem; overflow-x: auto; border: 1px solid var(--epg-line); border-radius: 14px; }
.ep-guide-table { width: 100%; border-collapse: collapse; min-width: 380px; background: #fffaf0; }
.ep-guide-table th, .ep-guide-table td { padding: .75rem .9rem; text-align: left; border-bottom: 1px solid var(--epg-line); font: 400 .96rem/1.4 Arial, Helvetica, sans-serif; color: #3a352c; }
.ep-guide-table th { background: rgba(11,47,36,.06); color: var(--epg-green); font-weight: 800; }
.ep-guide-table tr:last-child td { border-bottom: 0; }

/* -------------------------------------------------------- SIDEBAR ------- */
.ep-guide-sidebar { display: grid; gap: 1.1rem; position: sticky; top: 104px; }
.ep-guide-side-card {
  padding: 1.2rem;
  border: 1px solid var(--epg-line);
  border-radius: var(--epg-radius);
  background: #fffaf0;
  box-shadow: 0 12px 32px rgba(11,47,36,.07);
}
.ep-guide-side-card--feature {
  border: 1px solid rgba(212,175,55,.5);
  background: linear-gradient(160deg, #0c3327, #0b2f24);
  color: var(--epg-ivory);
}
.ep-guide-side-card h2 { margin: 0 0 .85rem; color: var(--epg-green); font: 800 1.14rem/1.2 Arial, Helvetica, sans-serif; }
.ep-guide-side-card--feature h2 { color: #fffaf0; }
.ep-guide-side-card--feature p { margin: 0 0 1rem; color: rgba(247,239,226,.85); font: 400 .95rem/1.55 Arial, Helvetica, sans-serif; }
.ep-guide-side-links { display: grid; gap: .5rem; }
.ep-guide-side-links a {
  padding: .6rem .7rem;
  border: 1px solid var(--epg-line);
  border-radius: 12px;
  color: var(--epg-green);
  background: #fff;
  text-decoration: none;
  font: 800 .9rem/1.25 Arial, Helvetica, sans-serif;
  transition: border-color .15s, color .15s;
}
.ep-guide-side-links a:hover { border-color: var(--epg-gold); color: var(--epg-wine); }

/* ---------------------------------------------------------- CTA --------- */
.ep-guide-cta {
  margin: 1.4rem 0 0;
  padding: 1.8rem;
  border-radius: var(--epg-radius);
  background:
    radial-gradient(120% 120% at 90% 10%, rgba(212,175,55,.2), transparent 55%),
    linear-gradient(150deg, #0c3327, #08251c);
  color: var(--epg-ivory);
  text-align: center;
}
.ep-guide-cta h2 { margin: 0 0 .6rem; color: #fffaf0; font: 800 clamp(1.4rem, 2.6vw, 1.9rem)/1.2 Georgia, "Times New Roman", serif; }
.ep-guide-cta p { margin: 0 auto 1.3rem; max-width: 52ch; color: rgba(247,239,226,.88); font: 400 1.02rem/1.6 Arial, Helvetica, sans-serif; }
.ep-guide-cta__actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }
.ep-guide-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .8rem 1.6rem;
  border-radius: 999px;
  font: 800 .95rem/1 Arial, Helvetica, sans-serif;
  text-decoration: none;
  transition: transform .15s, box-shadow .15s;
}
.ep-guide-btn--gold { background: var(--epg-gold); color: #2a2109; box-shadow: 0 12px 28px rgba(212,175,55,.32); }
.ep-guide-btn--ghost { border: 1px solid rgba(247,239,226,.6); color: #fffaf0; }
.ep-guide-btn:hover { transform: translateY(-2px); }

/* --------------------------------------------------- RESPONSIVIDADE ----- */
@media (max-width: 980px) {
  .ep-guide-hero__grid { grid-template-columns: 1fr; gap: 1.8rem; }
  .ep-guide-hero__figure { max-width: 460px; }
  .ep-guide-layout { grid-template-columns: 1fr; }
  .ep-guide-sidebar { position: static; }
  .ep-guide-split, .ep-guide-split--reverse { grid-template-columns: 1fr; }
  .ep-guide-split--reverse .ep-guide-figure { order: 0; }
  .ep-guide-figure { max-width: 520px; }
  .ep-guide-quick ul { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .ep-guide-hero__inner, .ep-guide-quick { width: calc(100% - 28px); }
  .ep-guide-hero__badges span { width: 100%; justify-content: center; }
  .ep-guide-quick { padding: 1.2rem; }
  .ep-guide-steps > li { padding: .9rem; gap: .75rem; }
  .ep-guide-cta { padding: 1.4rem; }
  .ep-guide-btn { width: 100%; }
}