/* ==========================================================
   PONCHO'S · ARTÍCULOS DEL BLOG
========================================================== */

/* INTRO */
.article-intro{
  padding:64px 0 54px;
  background:var(--cream,#f6f0e5);
}

.article-intro .breadcrumbs{
  margin:0 0 30px;
  color:#66736c;
  font-size:.88rem;
  line-height:1.4;
}

.article-intro .breadcrumbs a{
  color:#52645b;
  text-decoration:none;
  transition:color .2s ease;
}

.article-intro .breadcrumbs a:hover{
  color:var(--gold,#b9894d);
}

.article-intro__grid{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:52px;
  align-items:end;
}

.article-intro h1{
  max-width:780px;
  margin:.12em 0 0;
  font-family:var(--serif,Georgia,serif);
  font-size:clamp(3rem,4.4vw,5rem);
  line-height:.98;
  letter-spacing:-.035em;
  color:var(--green,#173126);
}

.article-intro__lead{
  max-width:620px;
  margin:0 0 .25rem;
  color:var(--muted,#66675f);
  font-size:1.08rem;
  line-height:1.7;
}

/* IMAGEN PRINCIPAL */
.article-cover{
  display:block;
  width:100%;
  height:min(52vw,580px);
  object-fit:cover;
  object-position:center;
  background:var(--cream-2,#eee4d3);
}

/* ==========================================================
   CUERPO DEL ARTÍCULO
========================================================== */

.article-shell{
  display:grid;
  grid-template-columns:minmax(0,760px) minmax(220px,300px);
  justify-content:center;
  align-items:start;
  gap:72px;
  padding-top:72px;
  padding-bottom:86px;
}

.article-body{
  min-width:0;
  color:var(--ink,#1f201c);
  font-size:1.06rem;
  line-height:1.82;
}

.article-body > p{
  margin:0 0 1.35em;
}

.article-body h2{
  margin:2.1em 0 .6em;
  font-family:var(--serif,Georgia,serif);
  font-size:clamp(2rem,3.2vw,3rem);
  line-height:1.06;
  color:var(--green,#173126);
}

.article-body h3{
  margin:1.7em 0 .5em;
  font-family:var(--serif,Georgia,serif);
  font-size:1.55rem;
  line-height:1.15;
  color:var(--green,#173126);
}

.article-body a{
  color:var(--green,#173126);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}

.article-body a:hover{
  color:var(--gold,#b9894d);
}

/* META */
.article-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px 24px;
  margin:0 0 32px;
  padding-bottom:20px;
  border-bottom:1px solid rgba(31,58,47,.12);
  color:var(--muted,#66675f);
  font-size:.9rem;
}

/* DESTACADO */
.article-highlight{
  margin:36px 0;
  padding:28px 30px;
  border-left:3px solid var(--gold,#b9894d);
  border-radius:0 18px 18px 0;
  background:#f1e6d4;
}

.article-highlight strong{
  display:block;
  margin-bottom:8px;
  font-family:var(--serif,Georgia,serif);
  font-size:1.45rem;
  line-height:1.2;
  color:var(--green,#173126);
}

/* MARIDAJES */
.pairing-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin:30px 0 40px;
}

.pairing-card{
  padding:24px;
  border:1px solid rgba(31,58,47,.13);
  border-radius:18px;
  background:#fffdfa;
  box-shadow:0 12px 32px rgba(18,33,26,.06);
}

.pairing-card strong{
  display:block;
  margin-bottom:7px;
  color:var(--green,#173126);
  font-size:1.02rem;
}

/* ÍNDICE LATERAL */
.article-aside{
  position:sticky;
  top:120px;
  padding:27px;
  border:1px solid rgba(31,58,47,.12);
  border-radius:18px;
  background:#fffdfa;
  box-shadow:0 15px 40px rgba(18,33,26,.07);
}

.article-aside h2{
  margin:0 0 16px;
  font-family:var(--serif,Georgia,serif);
  font-size:1.45rem;
  line-height:1.15;
  color:var(--green,#173126);
}

.article-aside ul{
  display:grid;
  gap:11px;
  margin:0;
  padding:0;
  list-style:none;
}

.article-aside a{
  display:block;
  padding-bottom:9px;
  border-bottom:1px solid rgba(31,58,47,.08);
  color:var(--green,#173126);
  text-decoration:none;
}

.article-aside a:hover{
  color:var(--gold,#b9894d);
}

/* CTA FINAL */
.article-cta{
  margin-top:48px;
  padding:38px;
  border-radius:20px;
  background:var(--green,#173126);
  color:#fff;
}

.article-cta .eyebrow{
  color:var(--gold,#b9894d);
}

.article-cta h2{
  margin:.15em 0 .45em;
  color:#fff;
}

.article-cta p{
  color:rgba(255,255,255,.83);
}

.article-cta .actions{
  margin-top:24px;
}

/* ==========================================================
   TABLET
========================================================== */

@media(max-width:900px){
  .article-intro{
    padding:56px 0 48px;
  }

  .article-intro__grid,
  .article-shell{
    grid-template-columns:1fr;
  }

  .article-intro__grid{
    gap:26px;
  }

  .article-intro h1{
    max-width:680px;
    font-size:clamp(2.8rem,7vw,4.3rem);
    line-height:1;
  }

  .article-intro .breadcrumbs{
    margin-bottom:26px;
    font-size:.84rem;
  }

  .article-shell{
    gap:38px;
  }

  .article-aside{
    position:static;
  }
}

/* ==========================================================
   MÓVIL
========================================================== */

@media(max-width:620px){
  .article-intro{
    padding:46px 0 40px;
  }

  .article-intro .breadcrumbs{
    margin-bottom:22px;
    font-size:.8rem;
  }

  .article-intro h1{
    max-width:none;
    font-size:clamp(2.35rem,10.5vw,3.35rem);
    line-height:1.02;
    letter-spacing:-.025em;
  }

  .article-intro__lead{
    font-size:1rem;
    line-height:1.65;
  }

  .article-cover{
    height:300px;
  }

  .article-shell{
    gap:32px;
    padding-top:50px;
    padding-bottom:64px;
  }

  .article-body{
    font-size:1rem;
  }

  .pairing-grid{
    grid-template-columns:1fr;
  }

  .article-highlight{
    padding:24px 22px;
  }

  .article-cta{
    padding:28px 23px;
  }
}
/* ==========================================================
   BOTONES CTA ARTÍCULOS
========================================================== */

.article-cta .actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px 28px;
  margin-top:24px;
}

/* Reservar mesa */
.article-cta .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:52px;
  padding:0 24px;

  border:1px solid rgba(255,255,255,.55);
  border-radius:999px;

  color:#fff;
  text-decoration:none;
  font-weight:700;

  transition:
    background-color .2s ease,
    border-color .2s ease,
    color .2s ease,
    transform .2s ease;
}

.article-cta .btn:hover{
  background:#fff;
  border-color:#fff;
  color:var(--green,#173126);
  transform:translateY(-1px);
}

/* Ver nuestros vinos */
.article-cta .actions a:not(.btn){
  display:inline-flex;
  align-items:center;

  min-height:52px;

  color:var(--gold,#b9894d);
  font-weight:700;
  text-decoration:none;

  transition:color .2s ease;
}

.article-cta .actions a:not(.btn):hover{
  color:#fff;
}

@media(max-width:620px){
  .article-cta .actions{
    gap:10px;
  }

  .article-cta .btn,
  .article-cta .actions a:not(.btn){
    width:100%;
    justify-content:center;
  }
}
/* ==========================================================
   MARCA DE AGUA PONCHO'S · CABECERA DE ARTÍCULOS
========================================================== */

.article-intro{
  position:relative;
  overflow:hidden;
}

.article-intro::after{
  content:"";
  position:absolute;

  width:420px;
  height:420px;

  right:3%;
  top:40%;

  background:
    url("/assets/images/logo-restaurante-ponchos.png")
    center / contain
    no-repeat;

  opacity:.039;

  transform:
    translateY(-50%)
    rotate(-3deg);

  pointer-events:none;
  z-index:0;
}

.article-intro .container{
  position:relative;
  z-index:2;
}

.article-intro__lead{
  position:relative;
  z-index:3;
}

@media(max-width:1100px){

  .article-intro::after{
    width:330px;
    height:330px;

    right:3%;

    opacity:.025;
  }

}

@media(max-width:900px){

  .article-intro::after{
    display:none;
  }

}