/* Reset & body */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background:#fefefe; color:#242424; padding:2rem; }

header { text-align:center; margin-bottom:2rem; }
header h1 { font-size:2.8rem; font-weight:bold; }
header p { color:#666; margin:0.5rem 0 1.5rem 0; }

/* Search bar */
.search-container { display:flex; justify-content:center; margin-bottom:1rem; gap:0.5rem; }
.search-container input {
    width: 250px; padding:0.5rem 0.75rem; border-radius:1rem; border:1px solid #ccc;
    font-size:1rem; outline:none; transition:border 0.2s;
}
.search-container input:focus { border-color:#007aff; }
.search-container button {
    background:#007aff; border:none; padding:0.5rem 0.75rem; border-radius:50%;
    cursor:pointer; display:flex; align-items:center; justify-content:center; color:white;
}
.icon { width:1.2rem; height:1.2rem; }

/* Filters */
.filters { display:flex; justify-content:center; flex-wrap:wrap; gap:0.5rem; margin-bottom:2rem; }
.filter-btn { background:#eee; border:none; padding:0.5rem 1rem; border-radius:1rem; cursor:pointer; transition:all 0.2s; }
.filter-btn:hover, .filter-btn.active { background:#007aff; color:white; }

/* Grid layout */
main.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:1.5rem; }

/* Cards */
.card {
    background:white; border-radius:1.5rem; overflow:hidden;
    box-shadow:0 4px 10px rgba(0,0,0,0.08); transition:transform 0.2s, box-shadow 0.2s; cursor:pointer;
}
.card:hover { transform:translateY(-4px); box-shadow:0 8px 20px rgba(0,0,0,0.12); }
.card img { width:100%; height:180px; object-fit:cover; }
.card h2 { font-size:1.2rem; font-weight:600; margin:0.75rem 1rem 0.25rem 1rem; }
.card .times { display:flex; justify-content:space-between; color:#888; font-size:0.9rem; padding:0 1rem 1rem 1rem; }