/* Books_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;
    padding: 2px 2em 2em;
    background-color: #CCC;

     b {
            font-weight: 800;
        }
}
    .ArticleBox p {
        grid-column: 1 / span 2; /* Paragraphs in second column */
        grid-row: auto; /* Each paragraph takes its own row */
        font-size: 2.0vw;
        font-weight: 300;
        margin: 0.3em 0.6em;
    }
    .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: 2px solid white;
        box-shadow: 8px 15px 5px #888888;
        width: 15vw; /* Maintain consistent image width */
        align-self: start; /* Align image to top */
    }
    #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;
    }
#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: 700;
    color: black;
    margin: 0 1em;
    text-decoration: none;
    text-align: center;
}
#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.8vw;
    font-weight: 800;
    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: 2fr; /* Single column */
        grid-template-rows: auto; /* Rows adjust to content */
        justify-items: center; /* Center items in the grid */
    }
    #ReadMore {
        grid-column: 1 / 2; /* Read more in single column */
        grid-row: auto; /* Each element takes its own row */
        font-size: 4vw; /* Adjust font size for smaller screens */
        margin: 0 5vw;
    }
    #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 */
    }
}