/* ============================================
   searching.css
   Styles for the Searching For Shaun page
   ============================================ */

.table {
    width: 100%;
    margin-bottom: 2rem;
    font-size: 0.9rem;
}

.book {
    border-bottom: 1px solid #ccc;
}

.book:first-child .row {
    background-color: #333;
    color: #fff;
    padding: 0.3rem 0.5rem;
    border-radius: 4px;
    font-size: 0.85rem;
}

.row {
    display: flex;
    align-items: center;
    padding: 0.4rem 0;
    gap: 0.5rem;
}

.title  { flex: 0 0 20%; }								/* book */
.format { flex: 0 0 11%; }								/* format */
.isbn   { flex: 0 0 15%; }								/* isbn */
.detail { flex: 0 0 16%; font-size: 0.9em; }			/* date & publisher */
.ff     { flex: 0 0 8%; text-align: center; }			/* fantastic fiction */
.bf     { flex: 0 0 8%; text-align: center; }			/* bookfinder */
.nb     { flex: 0 0 8%; text-align: center; }			/* nicebooks */
.google { flex: 0 0 8%; text-align: center; }			/* google */

/* Those should total ~94%, leaving breathing room */


.title,
.format,
.detail {
    text-transform: uppercase;
}


.ff img,
.bf img,
.nb img,
.google img {
    max-width: 32px;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Responsive — stack on small screens */
@media only screen and (max-width: 768px) {

    .row {
        flex-wrap: wrap;
    }

    .title  { flex: 0 0 100%; font-weight: bold; }
    .format { flex: 0 0 100%; }
    .isbn   { flex: 0 0 100%; }
    .detail { flex: 0 0 100%; }
    .ff,
    .bf,
    .nb,
    .google { flex: 0 0 25%; }
}