/* BookPage_ArticleBox */
/*    https://css-tricks.com/snippets/css/complete-guide-grid/  */
.ArticleBox {
    display: grid;
    grid-template-columns: minmax(0, 15vw) minmax(0, 1fr); /* Image column fixed width, content column flexible */
    /*grid-template-rows: auto;  **** Rows adjust to content */
    grid-auto-rows: minmax(0,auto);
    gap: 1.0vw; /* Space between grid items */
    border: thick ridge #CCC;
    border-bottom-color: #009;
    border-radius: 20px;
    margin-top: 1em;
    margin-bottom: 1em;
    padding: 2px 2em;
    background-color: #CCC;
}

    .ArticleBox h3 {
        color: black;
        font-size: 2.5vw;
        font-weight: 800;
    }

    .ArticleBox a h2 {
        color: black;
        font-size: 2.5vw;
        font-weight: 800;
        text-decoration: none;
        text-decoration-line: none;
    }

    .ArticleBox em {
        color: black;
        font-size: 1.5vw;
        font-weight: 800;
        margin: 0 2em 0 2em;
    }

    .ArticleBox h3 a {
        color: darkred;
        font-size: 2.5vw;
        font-weight: 800;
        text-decoration: none;
        text-decoration-line: none;
    }

    .ArticleBox img.imageLeftShadow_Book {
        grid-column: 1 / 2; /* Image in first column */
        grid-row: 2 / span 4; /* Image spans multiple rows for alignment */
        margin: 0; /* Remove default margins */
        padding: 0;
        border: 4px solid #000;
        box-shadow: 8px 15px 5px #888888;
        width: 15vw; /* Maintain consistent image width */
        align-self: start; /* Align image to top */
    }

    .ArticleBox #ReadMore {
        grid-column: 2 / 3;
        grid-row: auto;
        font-family: Georgia;
        font-size: 2.5vw;
        font-style: italic;
        font-weight: 700;
        color: black;
        /* margin: 0; */
        text-decoration: none;
        text-align: center;
        padding: 0.5em 0;
        border: 8px groove Black;
        background-color: lightgoldenrodyellow;
        border-radius: 10px;
        width: 10em;
        margin: 0 0 .5em 8em;
        box-shadow: -12px -3px 22px 8px gold;
    }

    .ArticleBox #AmazonLogo {
        grid-column: 2 / 3;
        grid-row: auto;
        font-family: Georgia;
        font-size: 2.5vw;
        font-style: italic;
        font-weight: 700;
        color: black;
        /* margin: 0; */
        text-decoration: none;
        text-align: center;
        padding: 0.25em 0 0.5em 0;
        border: 8px groove Black;
        background-color: lightgoldenrodyellow;
        border-radius: 10px;
        width: 10em;
        margin: 0 0 .5em 8em;
        box-shadow: -12px -3px 22px 8px gold;
    }
.ExcerptText {
    grid-column: 1 / span 2; /* Excerpt in first column */
    grid-row: auto; /* Excerpt below heading */
    font-family: Georgia;
    font-size: 2.5vw;
    font-weight: 500;
    color: black;
    text-align: left;
    margin: 0 5vw;
}
.ExcerptChapter {
    grid-column: 2/3; 
    grid-row: auto; /* Excerpt below heading */
    font-family: Times New Roman, Times, serif;
    font-size: 3.2vw;
    font-weight: 800;
    color: black;
    text-align: center;
    margin: 0 5vw;
}
.ExcerptDateTime {
    grid-column: 2/3; 
    grid-row: auto; /* Excerpt below heading */
    font-family: Georgia;
    font-size: 1.8vw;
    font-style: italic;
    font-weight: 800;
    color: black;
    text-align: right;
    margin: 0 5vw;
}
 .Excerpt {
        grid-column: 1 / span 2; /* Paragraphs in first column */
        grid-row: auto; /* Each paragraph takes its own row */
        font-size: 2.5vw;
        font-weight: 800;
        margin: 0.5em 0;
    }
#container {
    display: flex;
    flex-direction: column;
    border: 4px solid #000000;
    text-align: left; /* this overrides the text-align: center on the body element. */
    width: 95vw;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    font-size: 2.0vw;
}

#BookList_Nolen {
    display: inherit;
    flex-direction: column;
}

#BookName {
    grid-column: 2 / 3; /* Heading in second column */
    grid-row: 1 / 2; /* Heading in first row */
    font-size: 3.0vw;
    font-style: italic;
    font-weight: 800;
    color: black;
    margin: 0;
    text-decoration: none;
    text-align: center;
}

#AudibleName {
    grid-column: 2 / 3; /* Heading in second column */
    grid-row: auto;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size: 3.0vw;
    font-style: italic;
    font-weight: 800;
    color: black;
    margin: 0;
    text-decoration: none;
    text-align: center;
}
#SubTitle {
    grid-column: 2 / 3; /* Heading in second column */
    grid-row: auto; /* Heading in first row */
    font-family: Georgia;
    font-size: 1.9vw;
    font-style: italic;
    font-weight: 600;
    color: black;
    margin: 0;
    text-decoration: none;
    text-align: center;
}
#Elevator {
    grid-column: 2 / 3; /* Heading in second column */
    grid-row: auto; /* Heading in first row */
    font-family: Georgia;
    font-size: 2.0vw;
    font-style: italic;
    font-weight: 400;
    color: black;
    margin: 0;
    text-decoration: none;
    text-align: center;
    padding: 0 0.5em;
}

#Quote {
    grid-column: 2 / 3; /* Quotes in second column */
    grid-row: auto; /* Quotes below heading */
    font-style: italic;
    text-decoration: none;
    color: black;
    font-size: 2.0vw;
    font-weight: 500;
    margin: 0 2em;
}

#QuoteAuthority {
    grid-column: 2 / 3; /* Quotes in second column */
    grid-row: auto; /* Quotes below heading */
    color: black;
    text-decoration: none;
    font-size: 1.5vw;
    font-weight: 400;
    margin: 0;
    text-align: right;
}

#Excerpt {
    grid-column: 1/3;
    grid-row: auto;
    font-family: 'Georgia';
    font-size: 2.5vw;
    font-weight: 800;
    color: black;
    text-align: left;
    margin: 0 5vw;
}

    #Excerpt p {
        grid-column: 1 / 3; /* Paragraphs in second column */
        grid-row: auto; /* Each paragraph takes its own row */
        font-size: 2.5vw;
        font-weight: 800;
        margin: 0.5em 0;
    }

#PushC2 {
    margin: 1vw 2em;
    grid-column: 2/3; /* push paragraph to 2nd col*/
}

.ArticleBox strong {
    font-weight: 800;
}

.ArticleBox a {
    color: black;
    font-size: 2vw;
    font-weight: 800;
    text-decoration-line: underline;
}

    .ArticleBox a h2 {
        color: black;
        font-size: 2.5vw;
        font-weight: 800;
        text-decoration: none;
    }

.ArticleBox #DivButton {
    grid-column: 2 / 3;
    grid-row: auto;
    color: black;
    border: 6px groove black;
    border-radius: 18px;
    background-color: tan;
    box-shadow: 4px 12px gray;
    padding: 4px 1em;
    font-size: 2vw;
    font-weight: 800;
    margin: auto;
    text-decoration: none;
}

.ArticleBox h3 {
    grid-column: 2 / 3; /* Subheadings in second column */
    grid-row: auto; /* Each subheading takes its own row */
    color: red;
    font-size: 2.5vw;
    font-weight: 800;
    margin: 0.5em 0;
}

    .ArticleBox h3 a {
        color: darkred;
        font-size: 2.5vw;
        font-weight: 800;
        text-decoration: none;
    }

.ArticleBox #BuyLinks {
    display: contents;
}

#BuyButton {
    grid-row: auto; /* Each paragraph takes its own row */
    font-size: 2.0vw;
    font-weight: 400;
    margin: 0 .5em;
    width: 18vw;
}

.ArticleBox hr {
    grid-column: 2 / 3; /* Horizontal rules in second column */
    grid-row: auto;
    width: 30%;
    margin: 0.5em 0;
}
/* smaller screens, media query to stack the grid into a single column:*/
@media (max-width: 600px) {
    .ArticleBox {
        grid-template-columns: 1fr; /* Single column */
        grid-template-rows: auto; /* Rows adjust to content */
    }

        .ArticleBox a #DivButton {
            grid-column: 2 / 3;
        }
        .ArticleBox #DivButton {
            grid-column: 2 / 3;
            width: 33vw;
            font-size: 3.0vw;
        }

    #BookName {
        grid-column: 1/2;
        grid-row: 1/2;
        font-size: 4vw;
    }

    .ArticleBox img.imageLeftShadow_Book {
        grid-column: 1 / 2;
        grid-row: auto; /* Image at top */
        width: 50vw; /* Larger image for small screens */
        margin: 0 auto; /* Center image */
    }

    #Elevator,
    #Quote,
    #QuoteAuthority,
    #AudibleName,
    #PushC2,
    .ArticleBox h2,
    .ArticleBox em,
    .ArticleBox p,
    .ArticleBox h3,
    .ArticleBox hr {
        grid-column: 1 / 2; /* All content in single column */
        grid-row: auto; /* Sequential rows */
        font-size: 3.5vw; /* Adjust font size for smaller screens */
    }

    #Excerpt {
        grid-column: 1 / 2; /* Excerpt in single column */
        grid-row: auto; /* Excerpt below heading */
        font-size: 4.5vw; /* Adjust font size for smaller screens */
        margin: 0 5vw;
    }

        #Excerpt p {
            grid-column: 1 / 2; /* Paragraphs in single column */
            grid-row: auto; /* Each paragraph takes its own row */
            font-size: 4.2vw; /* Adjust font size for smaller screens */
        }
}