/* recipe-frontend.css — tiny CSS for A–Z & cards */
.gc-atoz{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin:1rem 0}
.gc-az-letter{display:inline-block;padding:.4rem .6rem;border:1px solid #e5e7eb;border-radius:.5rem;text-decoration:none}
.gc-az-letter:hover{background:#f8fafc}
.gc-az-letter.active{background:#111;color:#fff;border-color:#111}

.gc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}
.gc-card{display:block;border:1px solid #e5e7eb;border-radius:.75rem;overflow:hidden;text-decoration:none;color:inherit;background:#fff}
.gc-card-img-wrap{aspect-ratio:4/3;overflow:hidden;background:#f3f4f6}
.gc-card-img{width:100%;height:100%;object-fit:cover;display:block}
.gc-card-body{padding:.75rem 1rem}
.gc-card-title{font-weight:600;line-height:1.3}

.gc-pager{display:flex;gap:.75rem;align-items:center;justify-content:center;margin:1rem 0}
.gc-btn{display:inline-block;padding:.45rem .7rem;border:1px solid #e5e7eb;border-radius:.5rem;text-decoration:none;background:#fff}

.gc-detail{display:grid;grid-template-columns:1fr 1.2fr;gap:1.25rem}
.gc-detail-img{width:100%;height:auto;border-radius:.75rem;border:1px solid #e5e7eb;background:#f3f4f6}
.gc-detail-title{margin:.25rem 0 1rem 0}
.gc-pre{white-space:pre-wrap;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;background:#f9fafb;border:1px solid #e5e7eb;border-radius:.5rem;padding:.75rem}
@media (max-width: 900px){
  .gc-detail{grid-template-columns:1fr}
}