/* -- ARTICLES -- */

/* Article style */
.article-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.article-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 60px;
    font-family: "Merriweather Regular", serif;
}

.article-layout h1 {
    font-size: 1.6rem;
    font-family: "Merriweather Bold", serif;
    margin-bottom: 0.3em;
}

.article-layout h2 {
    font-size: 1.4rem;
    font-family: "Merriweather Bold", serif;
    margin-bottom: 0.3em;
}

.article-layout h3 {
    font-size: 1.2rem;
    font-family: "Merriweather Bold", serif;
    margin-bottom: 0.3em;
}

.article-layout h4,
.article-layout h5 {
    font-family: "Merriweather Bold", serif;
    margin-bottom: 0.3em;
}

.article-layout p {
    margin-bottom: 1em;
}

.article-layout strong {
    font-family: "Merriweather Bold", serif;
}

.article-layout ul {
    list-style: disc;
    padding-left: 1em;
}

.article-layout table {
    margin-bottom: 30px;
    border: 1px solid var(--text-color);
    border-collapse: collapse;
}

.article-layout td,
th {
    padding: 5px;
    border: 1px solid var(--text-color);
}

.article-layout th {
    font-family: "Merriweather Bold", serif;
}

.float-left {
    float: left;
    max-width: auto;
    margin: 20px 20px 20px 0;
}

.float-left img {
    width: 100%;
    height: auto;
    border-radius: 5px;
}

.float-right {
    float: right;
    max-width: 25%;
    margin: 0 0 20px 20px;
    padding: 10px;
    font-size: 0.8rem;
    border: 1px solid var(--text-color);
    border-radius: 5px;
    box-shadow: border-box 0 2px 6px rgba(0, 0, 0, 0.1);
}

.float-right h3 {
    text-align: center;
}

.breadcrumbs {
    font-size: 0.7rem;
}

.read-time {
    font-size: 0.7rem;
}

.sources {
    font-size: 0.7rem;
    margin-top: 20px;
    border-top: 1px solid var(--text-color);
}

.published {
    font-size: 0.7rem;
    text-align: right;
    margin: 20px 0;
}

.related-videos {
    margin-top: 30px;
}

/* Video Pills */
.video-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.video-pills a {
    background: var(--bg-color);
    color: var(--accent-color);
    border-radius: 999px;
    padding: 10px 12px;
    text-decoration: none;
    text-align: center;
    font-size: 0.8rem;
    transition: background 0.3s, color 0.3s;
    border: 1px solid var(--accent-color);
}

.video-pills a:hover {
    background: var(--accent-color);
    color: var(--bg-color);
}

/* end Video Pills */

.share-buttons.article-share {
    margin-top: 10px;
    text-align: center;
    font-size: 0.8rem;
}

@media (max-width: 768px) {
    .article-layout {
        flex-direction: column;
    }

    .float-left,
    .float-right {
        float: none;
        max-width: 100%;
        margin: 0 0 20px 0;
    }

    .video-pills a {
        width: 100%;
    }
}

figcaption {
    text-align: center;
    font-size: 0.5rem;
    font-style: italic;
    color: var(--text-color);
}

/* end Article style */



/* ==Press list styles== */

/* Shared list layout */
.press-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    /* space between cards */
    list-style: none;
    padding: 0;
    /* remove left indent */
    margin: .5rem 0 1rem;
}

/* Two items per row */
.press-item {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    flex: 0 1 calc(50% - 5px);
    /* 2 columns accounting for half the gap */
    font-size: 0.8rem;
    padding: 10px;
    background: var(--bg-color);
    filter: contrast(0.8);
    border: 1px solid var(--text-color);
    border-radius: 5px;
}

.press-item>p {
    margin: 0;
}

/* ==end Press list styles== */



/* -- BOOKS -- */
.book-float-right {
    float: right;
    max-width: 180px;
    margin: 0 0 10px 20px;
    padding: 10px;
    border: 1px solid var(--text-color);
    border-radius: 5px;
    box-sizing: border-box;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.book-float-right h3 {
    text-align: center;
}

aside.book-float-right p {
    margin: 0;
    font-family: "Work Sans Regular", sans-serif;
    font-size: 0.6rem;
    opacity: 0.8;
}

.rv-disclosure {
    margin-top: 10px;
    font-family: "Work Sans Regular", sans-serif;
    font-size: 0.6rem;
    opacity: 0.8;
}

/* Book card */
.book-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 210px;
    padding: 16px;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    overflow: hidden;
    background: var(--bg-color), #222;
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .13);
    transition: transform .2s, box-shadow .2s;
}

.book-card:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .16);
    color: var(--accent-color);
}

.book-card strong {
    font-family: "Merriweather Bold", serif;
    font-size: 0.8rem;
    margin: 0 0 5px;
}

.book-card small {
    font-size: 0.6rem;
    opacity: 0.9;
}

/* Responsive: 2-up on mobile */
@media (max-width:768px) {
    .book-float-right {
        float: none;
        max-width: 100%;
        margin: 0 0 20px 0;
        flex-wrap: wrap;
        flex-direction: row;
    }

    .book-float-right h3,
    .book-float-right p {
        flex: 0 0 100%;
    }

    .book-card {
        flex: 0 1 calc(50% - 5px);
        height: 220px;
        padding: 10px;
    }
}

@media (prefers-reduced-motion:reduce) {
    .book-card {
        transition: none;
    }

    .book-card:hover {
        transform: none;
    }
}

/* end BOOKS */



/* -- STAR RATINGS -- */

/* Base star style */
[class^="stars-"] {
    color: #FFA724;
    font-size: 1.2rem;
    font-family: system-ui, sans-serif;
    letter-spacing: 2px;
}

/* Static ratings */
.stars-5::before {
    content: "★★★★★";
}

.stars-4::before {
    content: "★★★★☆";
}

.stars-3::before {
    content: "★★★☆☆";
}

.stars-2::before {
    content: "★★☆☆☆";
}

.stars-1::before {
    content: "★☆☆☆☆";
}

.stars-0::before {
    content: "☆☆☆☆☆";
}

/* -- end STAR RATINGS -- */





/* -- BOOK BACKGROUNDS -- */

/* Vlad Dracula */
.bg-dracula-novel {
    background-image: url("/img_books/castle-dracula-at-night.webp");
}

.bg-prince-faces {
    background-image: url("/img_books/prince-face.webp");
}

.bg-dracula-wars {
    background-image: url("/img_books/dracula-wars.webp");
}

.bg-interview-vampire {
    background-image: url("/img_books/black-roses-dust.webp");
}

.bg-vampires-handbook {
    background-image: url("/img_books/vampires-handbook.webp");
}

/* Joan of Arc */
.bg-joan-mark-twain {
    background-image: url("/img_books/heroine-statue-purple.webp");
}

.bg-joan-herself {
    background-image: url("/img_books/heroine-battle-fleur-de-lis.webp");
}

.bg-joan-trial {
    background-image: url("/img_books/heroine-on-trial.webp");
}

.bg-saint-joan {
    background-image: url("/img_books/heroine-visions.webp");
}

.bg-joan-personal-reflections {
    background-image: url("/img_books/heroine-painting.webp");
}

.bg-joan-la-pucelle {
    background-image: url("/img_books/heroine-coronation-king.webp");
}

/* Mehmed II */
.bg-grand-turk {
    background-image: url("/img_books/conqueror-portrait.webp");
}

.bg-walls-constantinople {
    background-image: url("/img_books/constantinople-under-siege.webp");
}

.bg-holy-war-constantinople {
    background-image: url("/img_books/ottoman-empire-map.webp");
}

.bg-enemy-gate {
    background-image: url("/img_books/battle-vienna-chaos.webp");
}

.bg-byzantine-empire {
    background-image: url("/img_books/byzantine-empire-illustration.webp");
}

/* Printing Press */

.bg-gutenberg-bible {
    background-image: url("/img_books/gutenberg-bible.webp");
}

.bg-gutenberg-printing-press {
    background-image: url("/img_books/gutenberg-printing-press.webp");
}

.bg-printing-press-agent {
    background-image: url("/img_article/printing-press-gutenberg.webp");
}

.bg-coming-book {
    background-image: url("/img_books/gutenberg-book-coming.webp");
}

.bg-print-five-hudred {
    background-image: url("/img_books/gutenberg-five-hudred.webp");
}

/* Machu Picchu */

.bg-machu-picchu-turn-right {
    background-image: url("/img_books/machu-picchu-terrace.webp");
}

.bg-lost-city-incas {
    background-image: url("/img_books/machu-three-windows.webp");
}

.bg-where-is-machu-picchu {
    background-image: url("/img_books/machu-terrace-mist.webp");
}

.bg-stone-offerings {
    background-image: url("/img_books/machu-inca-quipu.webp");
}



/* end BOOK BACKGROUNDS */



/* -- ARTICLES html page -- */
.art-item {
    margin-bottom: 20px;
}