/*
Theme Name: Dark Premium Menu V4 (Mobile First)
Author: Shane Manga
Version: 4.0
Description: Mobile-first dark premium restaurant menu theme with full-width images and 2 cards per row on mobile.
*/

body{
  margin:0;
  font-family:'Poppins',sans-serif;
  background:#0f0f0f;
  color:#fff;
}

img{
  width:100%;
  display:block;
}

/* HEADER */
header{
  padding:14px;
  text-align:center;
}

/* HERO IMAGE */
.hero img{
  width:100%;
  height:40vw; /* responsive height for mobile */
  object-fit:cover;
  border-radius:0 0 20px 20px;
}

/* CONTAINER */
.container{
  padding:12px;
}

/* FILTER BUTTONS */
.filters{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding:10px 0;
}

.filters button{
  background:#1a1a1a;
  color:#fff;
  border:none;
  padding:8px 14px;
  border-radius:20px;
  white-space:nowrap;
  cursor:pointer;
}

/* MENU GRID */
.menu-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr); /* 2 cards per row on mobile */
  gap:12px;
}

/* MENU CARD */
.menu-card{
  background:#1a1a1a;
  border-radius:16px;
  overflow:hidden;
}

.menu-card img{
  height:auto;
  object-fit:cover;
}

/* CARD CONTENT */
.menu-card-content{
  padding:10px;
}

.price{
  color:#ff4d2d;
  font-weight:700;
  font-size:16px;
}

/* DESKTOP */
@media(min-width:768px){
  .menu-grid{
    grid-template-columns:repeat(3,1fr); /* 3 per row desktop */
    max-width:1200px;
    margin:auto;
  }
  .menu-card img{
    height:200px;
  }
}