/* styles.css - modern card + detail layout similar to screenshots */
:root{
  --bg:#f6f7fb;
  --accent1:#6756f6;
  --accent2:#a464d9;
  --muted:#7b7f88;
  --card:#ffffff;
  --radius:16px;
  --max-width:1100px;
}

/* base */
*{box-sizing:border-box}
body{
  margin:0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(90deg, rgba(103,86,246,0.07) 0%, rgba(164,100,217,0.02) 100%), var(--bg);
  color:#111827;
  -webkit-font-smoothing:antialiased;
}

/* page shell adds purple rounded border */
.page-shell{
  max-width:1200px;
  margin:28px auto;
  background: #fff;
  border-radius:18px;
  box-shadow: 0 20px 60px rgba(16,24,40,0.12);
  position:relative;
  overflow:hidden;
  border-left: 18px solid transparent;
  padding-bottom:30px;
}

/* decorative left gradient bar */
.page-shell::before{
  content:"";
  position:absolute;
  left: -2px;
  top: -2px;
  bottom: -2px;
  width:36px;
  background: linear-gradient(180deg, var(--accent1), var(--accent2));
  border-radius:18px 0 0 18px;
  z-index:0;
}

/* hero */
.hero{
  text-align:center;
  padding:36px 24px 18px;
  background:transparent;
  z-index:1;
}
.hero-inner{max-width:900px; margin:0 auto; position:relative; z-index:2}
.logo{font-size:34px; font-weight:700; display:flex; align-items:center; justify-content:center; gap:10px}
.logo-text{font-weight:800}
.subtitle{color:var(--muted); margin-top:6px; margin-bottom:18px}

/* search */
.search-block{display:flex; gap:12px; justify-content:center; margin-top:12px}
.search-input{
  width:640px;
  max-width:70%;
  padding:14px 18px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,0.06);
  box-shadow: 0 6px 18px rgba(16,24,40,0.04) inset;
  font-size:15px;
}
.btn{
  padding:11px 18px;
  border-radius:10px;
  border:none;
  background:#eee;
  cursor:pointer;
  font-weight:700;
}
.btn.primary{
  background:linear-gradient(90deg,var(--accent1),var(--accent2));
  color:white;
  box-shadow: 0 8px 30px rgba(103,86,246,0.12);
}
.btn.outline{
  background:transparent;
  border:2px solid rgba(103,86,246,0.14);
  color:var(--accent1);
  padding:8px 14px;
}

/* container */
.container{max-width:var(--max-width); margin:18px auto; padding:0 28px 20px; z-index:2; position:relative}

/* results title */
.results-title{font-size:26px; text-align:center; margin:8px 0 6px}
.status-text{color:var(--muted); text-align:center; margin-bottom:20px}

/* results grid */
.results-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap:22px;
  padding: 8px 6px 40px;
}

/* card */
.card{
  background:var(--card);
  border-radius:14px;
  overflow:hidden;
  box-shadow: 0 6px 20px rgba(16,24,40,0.06);
  border:1px solid rgba(16,24,40,0.04);
  display:flex;
  flex-direction:column;
}
.card .thumb{height:170px; width:100%; overflow:hidden}
.card .thumb img{width:100%; height:100%; object-fit:cover; display:block}
.card-body{padding:14px 16px 18px; display:flex; flex-direction:column; gap:8px}
.card h3{margin:0; font-size:18px}
.card p{margin:0; color:var(--muted); font-size:13px}
.tag{display:inline-block; padding:6px 10px; border-radius:999px; font-size:13px; background:#efe9ff; color:#5b3bd1; font-weight:700}

/* detail section (full width content area) */
.detail-section{
  margin-top:14px;
  padding:18px 24px 40px;
  background:transparent;
}
.detail-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:28px;
  align-items:start;
  margin-top:14px;
}
.detail-image img{width:100%; height:auto; border-radius:14px; box-shadow:0 10px 30px rgba(16,24,40,0.08)}
.detail-content h1{margin:0; font-size:34px}
.tags{display:flex; gap:10px; margin:12px 0}
.ingredient-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  margin-bottom:18px;
}
.ingredient-item{background:#f3f5f8; padding:10px 12px; border-radius:8px; color:#111}

/* instructions */
.instructions{color:#333; line-height:1.6; margin-top:8px}

/* hidden utility */
.hidden{display:none}

/* responsive */
@media (max-width:900px){
  .detail-grid{grid-template-columns:1fr; }
  .search-input{width:100%; max-width:600px}
  .results-grid{grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:16px}
}