/*
 * Fichas de restaurante — estructura móvil estable.
 * En pantallas pequeñas la imagen y el contenido dejan de compartir una capa
 * superpuesta. Así el título y los botones nunca quedan cortados ni invaden la foto.
 */

.page-restaurant .phero,
.page-restaurant .phero-img,
.page-restaurant .phero-content,
.page-restaurant .pmeta,
.page-restaurant .pcontent{
  box-sizing:border-box;
}

@media (max-width: 720px){
  .page-restaurant{
    --restaurant-header-height:60px;
  }

  .page-restaurant main{
    padding-top:var(--restaurant-header-height)!important;
  }

  /* Cabecera compacta y predecible. */
  .page-restaurant .site-header{
    height:var(--restaurant-header-height)!important;
    min-height:var(--restaurant-header-height)!important;
  }
  .page-restaurant .snav{
    width:100%!important;
    height:var(--restaurant-header-height)!important;
    min-height:var(--restaurant-header-height)!important;
    padding-inline:max(12px,env(safe-area-inset-left)) max(12px,env(safe-area-inset-right))!important;
    gap:8px!important;
  }
  .page-restaurant .snav-logo{
    flex:1 1 auto!important;
    max-width:none!important;
    min-width:0!important;
    font-size:0!important;
    overflow:hidden!important;
  }
  .page-restaurant .snav-logo::after{
    content:"Restaurantes Indios Madrid"!important;
    display:block!important;
    color:#fff!important;
    font-family:Inter,system-ui,sans-serif!important;
    font-size:12px!important;
    font-weight:700!important;
    line-height:1.1!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .page-restaurant .snav-back{
    flex:0 0 auto!important;
    min-width:0!important;
    min-height:40px!important;
    padding:0 12px!important;
    font-size:0!important;
  }
  .page-restaurant .snav-back::after{
    content:"← Guía"!important;
    color:#fff!important;
    font-size:12px!important;
    font-weight:700!important;
  }

  /* Hero en dos bloques: foto y contenido. Sin posición absoluta. */
  .page-restaurant .phero{
    display:block!important;
    min-height:0!important;
    height:auto!important;
    margin:0!important;
    overflow:visible!important;
    background:#121427!important;
  }
  .page-restaurant .phero::before,
  .page-restaurant .phero::after{
    display:none!important;
    content:none!important;
  }
  .page-restaurant .phero-img{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:4 / 3!important;
    overflow:hidden!important;
    z-index:1!important;
    background:#191b2f!important;
  }
  .page-restaurant .phero-img::after{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    pointer-events:none!important;
    background:linear-gradient(180deg,rgba(8,10,22,.04),rgba(8,10,22,.28))!important;
  }
  .page-restaurant .phero-img img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    object-fit:cover!important;
    object-position:center!important;
    opacity:1!important;
    transform:none!important;
    animation:none!important;
    filter:saturate(.98) contrast(1.03)!important;
  }
  .page-restaurant .photo-credit-overlay{
    inset:auto 10px 10px auto!important;
    max-width:calc(100% - 20px)!important;
    padding:6px 9px!important;
    border-radius:999px!important;
    font-size:10px!important;
    line-height:1.2!important;
    color:#fff!important;
    background:rgba(8,10,22,.78)!important;
    border:1px solid rgba(255,255,255,.22)!important;
    backdrop-filter:blur(8px)!important;
  }
  .page-restaurant .phero-content{
    position:relative!important;
    z-index:2!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:22px 16px 24px!important;
    background:linear-gradient(155deg,#252a56 0%,#171425 100%)!important;
    color:#fff!important;
  }
  .page-restaurant .pbreadcrumb{
    display:flex!important;
    align-items:center!important;
    gap:5px!important;
    width:100%!important;
    margin:0 0 14px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:none!important;
    white-space:nowrap!important;
    font-size:11px!important;
  }
  .page-restaurant .pbreadcrumb::-webkit-scrollbar{display:none!important}
  .page-restaurant .pbreadcrumb a,
  .page-restaurant .pbreadcrumb span{
    flex:0 0 auto!important;
  }
  .page-restaurant .pzone{
    margin:0 0 8px!important;
    font-size:11px!important;
    line-height:1.35!important;
    letter-spacing:.08em!important;
  }
  .page-restaurant .ph1{
    margin:0 0 14px!important;
    max-width:100%!important;
    font-size:clamp(30px,9vw,42px)!important;
    line-height:1.02!important;
    letter-spacing:-.035em!important;
    overflow-wrap:anywhere!important;
    text-wrap:balance!important;
  }
  .page-restaurant .prating{
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    gap:6px 9px!important;
    margin:0 0 18px!important;
    line-height:1.35!important;
  }
  .page-restaurant .prc{
    flex:1 1 170px!important;
    min-width:0!important;
  }
  .page-restaurant .pbtns{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    width:100%!important;
  }
  .page-restaurant .pbtn{
    display:flex!important;
    width:100%!important;
    min-width:0!important;
    min-height:50px!important;
    margin:0!important;
    padding:12px 14px!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:14px!important;
    font-size:13px!important;
    line-height:1.3!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }

  /* Datos rápidos debajo del hero. */
  .page-restaurant .pmeta{
    position:relative!important;
    z-index:1!important;
  }
  .page-restaurant .pmeta-in{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:0!important;
    width:100%!important;
    padding:10px 16px!important;
  }
  .page-restaurant .pmi{
    display:block!important;
    width:100%!important;
    padding:8px 0!important;
    font-size:12px!important;
    line-height:1.45!important;
    overflow-wrap:anywhere!important;
  }
  .page-restaurant .pmi + .pmi,
  .page-restaurant .pmdiv + .pmi{
    border-top:1px solid rgba(255,255,255,.08)!important;
  }
  .page-restaurant .pmdiv{display:none!important}

  /* Contenido y sidebar: una sola columna real, sin sticky ni solapamientos. */
  .page-restaurant .pcontent{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:26px 12px 40px!important;
    gap:24px!important;
    overflow:visible!important;
  }
  .page-restaurant .pmain,
  .page-restaurant .psidebar{
    position:static!important;
    inset:auto!important;
    z-index:auto!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding-inline:0!important;
  }
  .page-restaurant .psidebar{
    display:flex!important;
    flex-direction:column!important;
    gap:16px!important;
  }
  .page-restaurant .sb2,
  .page-restaurant .others-box{
    position:static!important;
    inset:auto!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    overflow:hidden!important;
  }
  .page-restaurant .sb2{
    padding:20px 16px!important;
  }
  .page-restaurant .others-box{
    padding:16px!important;
  }
  .page-restaurant .other-card{
    width:100%!important;
    min-width:0!important;
    align-items:center!important;
    gap:10px!important;
  }
  .page-restaurant .other-name{
    flex:1 1 auto!important;
    min-width:0!important;
  }
  .page-restaurant .other-rating{
    flex:0 0 auto!important;
    max-width:38%!important;
    text-align:right!important;
  }
}

@media (max-width: 360px){
  .page-restaurant .phero-img{aspect-ratio:1 / 1!important}
  .page-restaurant .phero-content{padding-inline:13px!important}
  .page-restaurant .ph1{font-size:clamp(28px,9.2vw,36px)!important}
  .page-restaurant .pcontent{padding-inline:8px!important}
  .page-restaurant .other-card{padding:10px!important}
  .page-restaurant .other-name{font-size:11.5px!important}
  .page-restaurant .other-rating{font-size:10.5px!important}
}