@import url(headerfooter.css);


/* ── Search bar ── */

body>div {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0.5rem;

padding: var(--padding) 1rem;
background-color: var(--bg);
border-bottom: 1px solid var(--border);

position: sticky;
top: 0;
z-index: 100;
}

@media (min-width: 640px) {
body>div {
flex-wrap: nowrap;
padding: 0.875rem 1.5rem;
}

}

/* ── Search input ── */

body>div>input {
width: 100%;
padding: 0.5rem var(--padding);
font-size: 0.9rem;
font-family: var(--font);
color: var(--text);
border: 1px solid var(--border);
border-radius: var(--radius);
}

body>div>input:focus {
border-color: var(--accent);
}

@media (min-width: 640px) {
body>div>input { width: 260px; }
}

/* ── Search buttons ── */

body>div>button {
flex: 1;
padding: 0.5rem 1rem;
font-size: var(--fontone);
font-family: var(--font);
border-radius: var(--radius);
border-width: 1px;
border-style: solid;
cursor: pointer;
}

@media (min-width: 640px) {
body>div>button {
flex: none;
}
}


body>div>button.search {
border-color: var(--accent);
background-color: var(--accent);
color: #fff;
}

body>div>button.reset {
border-color: var(--border);
background-color: var(--bg);
color: var(--text);
}

body>div>button.search:hover {
background-color: var(--accentdark);
}
body>div>button.reset:hover  {
background-color: var(--surface);
}





/* ── Main ── */
body>main {
padding: 1.5rem 1rem;
}

@media (min-width: 640px) {
body>main {
padding: 2.5rem 1.5rem;
}
}

/* badsearch */
body>main>p {
text-align: center;
color: var(--muted);
padding: 2rem 0;
}


/* ── Grid ── */

body>main>section {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}

@media (min-width: 640px) {
body>main>section {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: 1.5rem;
max-width: 1200px;
margin: 0 auto;
}
}


body>main>section>article {
display: flex;
flex-direction: column;
width: 100%;
max-width: 400px;
border: 1px solid var(--border);
background-color: var(--surface);
}

@media (min-width: 640px) {
body>main>section>article {
width: 320px;
max-width: none;
}
}

body>main>section>article.hideitem {
display: none !important;
}

body>main>section>article>h2 {
border-bottom: 1px solid var(--border);
padding: var(--padding) 1rem;

font-size: 0.8rem;
font-weight: 600;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--muted);
}

body>main>section>article>a,
body>main>section>article>p>a {
display: block;
}

body>main>section>article>a {
border-bottom: 1px solid var(--border);
}

body>main>section>article>a>img {
display: block;
width: 100%;
height: 260px;
object-fit: cover;
}

body>main>section>article>p {
padding: var(--padding);
text-align: center;
}

body>main>section>article>p>a {
font-size: var(--fontone);
font-weight: 500;
color: var(--accent);
text-decoration: none;
}

body>main>section>article>p>a:hover {
text-decoration: underline;
}