/**
 * Book Block Styles
 * BEM methodology: .book-block__element--modifier
 */

.book-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    width: 100%;
    padding: 0;
    position: relative;
    overflow: visible;
}

/* ===========================
   Title Section
   =========================== */

.book-block__header {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex-shrink: 0;
    transform: none;
    width: 100%;
    outline: none;
}

.book-block__title {
    font-family: var(--font-family-inter);
    font-size: var(--font-size-xl); /* 22px */
    font-weight: var(--font-weight-medium); /* 500 */
    line-height: var(--line-height-heading); /* 1.4em */
    color: var(--color-dark); /* rgb(17, 24, 39) */
    margin: 0;
    padding: 0;
    text-align: left;
    white-space: pre-wrap;
    word-break: break-word;
    word-wrap: break-word;
    width: 100%;
}

/* ===========================
   Book Card
   =========================== */

.book-block__card {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 24px;
    width: 100%;
    padding: 24px;
    background-color: rgba(17, 24, 39, 0.03);
    border: 1px solid rgba(17, 24, 39, 0.05);
    border-radius: 8px;
    overflow: hidden;
    will-change: transform;
}

/* ===========================
   Book Cover
   =========================== */

.book-block__cover {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 100px;
    height: 156px;
    border-radius: 8px;
    border: 1px solid rgba(17, 24, 39, 0.05);
    background-color: rgb(255, 255, 255);
    overflow: hidden;
    position: relative;
    will-change: transform;
}

.book-block__cover-image {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.book-block__cover-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ===========================
   Book Info
   =========================== */

.book-block__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 24px;
    flex: 1 0 0px;
    width: 1px;
    overflow: hidden;
}

.book-block__details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 5px;
    width: 100%;
    overflow: hidden;
}

.book-block__name {
    font-family: var(--font-family-inter);
    font-size: var(--font-size-lg); /* 18px */
    font-weight: var(--font-weight-medium); /* 500 */
    line-height: 0.75em;
    color: var(--color-dark); /* rgb(17, 24, 39) */
    margin: 0;
    padding: 0;
    text-align: left;
    white-space: pre-wrap;
    word-break: break-word;
    word-wrap: break-word;
    width: 100%;
}

/* ===========================
   Meta Information
   =========================== */

.book-block__meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    overflow: hidden;
}

.book-block__format,
.book-block__authors {
    font-family: var(--font-family-inter);
    font-size: var(--font-size-sm); /* 12px */
    font-weight: var(--font-weight-regular); /* 400 */
    line-height: var(--line-height-normal); /* 1.2em */
    color: var(--color-gray-400); /* rgb(102, 102, 102) */
    margin: 0;
    padding: 0;
    white-space: pre;
    width: auto;
}

.book-block__dot {
    width: 2px;
    height: 2px;
    background-color: #666;
    border-radius: 50%;
    flex-shrink: 0;
    will-change: transform;
}

/* ===========================
   Button
   =========================== */

.book-block__button-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: auto;
}

.book-block__button {
    font-family: var(--font-family-inter);
    font-size: var(--font-size-base); /* 17px */
    font-weight: var(--font-weight-medium); /* 500 */
    line-height: var(--line-height-body); /* 1.5em */
    color: rgb(255, 255, 255);
    background-color: var(--color-dark); /* rgb(17, 24, 39) */
    border: none;
    border-radius: 50px;
    padding: 0 24px;
    height: 34px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    outline: none;
    box-shadow: none;
}

.book-block__button:hover {
    background-color: rgb(38, 46, 56);
    color: rgb(255, 255, 255);
}

.book-block__button svg {
    width: 20px;
    height: 20px;
    fill: rgb(255, 255, 255);
    color: rgb(255, 255, 255);
    flex-shrink: 0;
}

.book-block__button span {
    white-space: pre;
    user-select: none;
}

/* ===========================
   Responsive Styles
   =========================== */

@media (max-width: 809px) {
    .book-block {
        gap: var(--spacing-md); /* 16px */
    }
    
    .book-block__title {
        font-size: var(--font-size-lg); /* 18px */
    }
    
    .book-block__card {
        flex-direction: column;
        gap: var(--spacing-md); /* 16px */
        padding: var(--spacing-md); /* 16px */
    }
    
    .book-block__cover {
        width: 80px;
        height: 125px;
    }
    
    .book-block__info {
        gap: var(--spacing-md); /* 16px */
        width: 100%;
    }
    
    .book-block__details {
        gap: var(--spacing-xxs); /* 3px */
    }
    
    .book-block__name {
        font-size: var(--font-size-md); /* 14px */
    }
    
    .book-block__format,
    .book-block__authors {
        font-size: var(--font-size-xs); /* 10px */
    }
    
    .book-block__button {
        font-size: var(--font-size-md); /* 14px */
        padding: 0 20px;
        height: 30px;
    }
    
    .book-block__button svg {
        width: 16px;
        height: 16px;
    }
}