/* =========================================================
   WRITERS VS ARTISTS
   FULL CATALOG PAGE
========================================================= */


/* =========================
   ACTIVE HEADER LINK
========================= */

.active-nav-link {
    color: #d5a62b;
}



/* =========================
   CATALOG HERO
========================= */

.full-catalog-hero {
    position: relative;

    width: 100%;

    min-height: 250px;

    background-image: url("../Images/placeholder.jpg");

    background-size: cover;

    background-position: center;

    border-bottom: 1px solid #8b651d;
}


.full-catalog-hero-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(3, 9, 14, 0.95),
            rgba(3, 9, 14, 0.82),
            rgba(3, 9, 14, 0.9)
        );
}


.full-catalog-hero-container {
    position: relative;

    z-index: 1;

    width: 100%;

    max-width: 1500px;

    min-height: 250px;

    margin: 0 auto;

    padding: 42px 65px;

    display: grid;

    grid-template-columns: 0.75fr 1.75fr;

    gap: 70px;

    align-items: center;
}



/* =========================
   HERO INTRO
========================= */

.full-catalog-intro h1 {
    color: #f4f1e8;

    font-size: clamp(48px, 5vw, 70px);

    font-weight: normal;

    letter-spacing: 2px;

    margin-bottom: 12px;
}


.full-catalog-intro p {
    max-width: 470px;

    color: #e2ddd3;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 16px;

    line-height: 1.55;
}



/* =========================
   HERO SEARCH
========================= */

.full-catalog-search-area {
    width: 100%;
}


.full-catalog-search-form {
    display: flex;

    width: 100%;

    margin-bottom: 22px;
}


.full-catalog-search-form input {
    flex: 1;

    min-width: 0;

    height: 58px;

    padding: 0 20px;

    background-color: rgba(2, 8, 12, 0.92);

    color: #f4f1e8;

    border: 1px solid #956d1d;

    border-right: none;

    outline: none;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 15px;
}


.full-catalog-search-form input::placeholder {
    color: #96928a;
}


.full-catalog-search-form input:focus {
    border-color: #d5a62b;
}


.full-catalog-search-form button {
    width: 72px;

    height: 58px;

    background-color: #d5a62b;

    color: #050b10;

    border: none;

    cursor: pointer;

    font-size: 28px;
}


.full-catalog-search-form button:hover {
    background-color: #ebbd42;
}



/* =========================
   A-Z FILTER
========================= */

.alphabet-filter {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 14px;
}


.alphabet-filter span {
    color: #d5a62b;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 13px;

    font-weight: bold;

    letter-spacing: 1px;
}


.alphabet-filter button {
    padding: 0;

    background: none;

    color: #d5a62b;

    border: none;

    cursor: pointer;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 16px;
}


.alphabet-filter button:hover,
.alphabet-filter button.active-letter {
    color: #ffffff;
}



/* =========================
   FEATURE STRIP
========================= */

.catalog-feature-strip {
    width: 100%;

    background-color: #080f14;

    border-bottom: 1px solid #4a3618;
}


.catalog-feature-container {
    width: 100%;

    max-width: 1500px;

    margin: 0 auto;

    padding: 22px 65px 25px;
}



/* Tabs */

.catalog-feature-tabs {
    display: flex;

    align-items: center;

    border-bottom: 1px solid #49381d;

    margin-bottom: 15px;
}


.feature-tab {
    padding: 0 20px 12px 0;

    margin-right: 20px;

    background: none;

    color: #e4dfd5;

    border: none;

    cursor: pointer;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 13px;

    letter-spacing: 0.5px;
}


.active-feature-tab {
    color: #d5a62b;

    border-bottom: 1px solid #d5a62b;
}


.feature-view-all {
    margin-left: auto;

    padding-bottom: 12px;

    color: #d5a62b;

    text-decoration: none;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 13px;

    letter-spacing: 1px;
}



/* Mini Titles */

.featured-title-row {
    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 34px;
}


.mini-title {
    display: grid;

    grid-template-columns: 82px 1fr;

    gap: 15px;

    align-items: center;

    color: #f4f1e8;

    text-decoration: none;
}


.mini-title img {
    width: 82px;

    height: 100px;

    object-fit: cover;

    border: 1px solid #232a2f;
}


.mini-title h3 {
    font-size: 16px;

    font-weight: normal;

    line-height: 1.2;

    margin-bottom: 8px;
}


.mini-title p {
    color: #aba79f;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 11px;
}



/* =========================
   MAIN LIBRARY
========================= */

.catalog-library {
    width: 100%;

    background:
        radial-gradient(
            circle at top,
            #0b151b,
            #050b10 48%
        );

    padding: 20px 0 45px;
}


.catalog-library-container {
    width: 100%;

    max-width: 1500px;

    margin: 0 auto;

    padding: 0 65px;
}



/* =========================
   FILTER BAR
========================= */

.catalog-filter-bar {
    display: grid;

    grid-template-columns:
        repeat(5, minmax(120px, 1fr))
        minmax(170px, 1.2fr);

    gap: 12px;

    margin-bottom: 16px;
}


.catalog-select {
    position: relative;

    min-height: 56px;

    padding: 8px 12px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    border: 1px solid #8b651d;

    border-radius: 3px;

    background-color: rgba(5, 11, 16, 0.7);
}


.catalog-select span {
    color: #d5a62b;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 9px;

    font-weight: bold;

    letter-spacing: 0.8px;

    margin-bottom: 4px;
}


.catalog-select select {
    width: 100%;

    background-color: transparent;

    color: #f4f1e8;

    border: none;

    outline: none;

    cursor: pointer;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 13px;
}


.catalog-select select option {
    background-color: #081016;

    color: #f4f1e8;
}



/* =========================
   RESULTS BAR
========================= */

.catalog-results-bar {
    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 15px;
}


.catalog-results-bar p {
    color: #dfdbd2;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 13px;
}


.catalog-view-buttons {
    display: flex;

    gap: 8px;
}


.catalog-view-buttons button {
    width: 46px;

    height: 30px;

    background-color: transparent;

    color: #d6d1c8;

    border: 1px solid #775819;

    border-radius: 3px;

    cursor: pointer;

    font-size: 18px;
}


.catalog-view-buttons button:hover,
.catalog-view-buttons .active-view-button {
    background-color: #d5a62b;

    color: #050b10;
}



/* =========================
   TITLE GRID
========================= */

.full-title-grid {
    display: grid;

    grid-template-columns: repeat(6, 1fr);

    gap: 24px;
}



/* =========================
   LIBRARY CARD
========================= */

.library-card {
    min-width: 0;

    overflow: hidden;

    background-color: rgba(6, 13, 18, 0.85);

    border: 1px solid #71521a;

    border-radius: 3px;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease;
}


.library-card:hover {
    transform: translateY(-4px);

    border-color: #d5a62b;
}


.library-card-image {
    position: relative;

    width: 100%;

    aspect-ratio: 3 / 3.15;

    overflow: hidden;
}


.library-card-image img {
    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;
}


.library-type-label {
    position: absolute;

    left: 10px;

    bottom: 10px;

    padding: 4px 8px;

    background-color: #674088;

    color: #ffffff;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 9px;

    font-weight: bold;

    letter-spacing: 0.5px;
}


.light-label {
    background-color: #2377bb;
}


.comic-label {
    background-color: #d03a32;
}



/* Card Text */

.library-card-content {
    padding: 13px 14px 16px;
}


.library-card-content h2 {
    color: #f4f1e8;

    font-size: 20px;

    font-weight: normal;

    line-height: 1.05;

    margin-bottom: 8px;
}


.library-card-content p {
    color: #aba69d;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 11px;

    margin-bottom: 15px;
}


.library-card-content a {
    color: #d5a62b;

    text-decoration: none;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 11px;

    font-weight: bold;

    letter-spacing: 0.7px;
}



/* =========================
   LIST VIEW
========================= */

.full-title-grid.list-view {
    grid-template-columns: 1fr;

    gap: 12px;
}


.full-title-grid.list-view .library-card {
    display: grid;

    grid-template-columns: 150px 1fr;
}


.full-title-grid.list-view .library-card-image {
    aspect-ratio: auto;

    height: 160px;
}


.full-title-grid.list-view .library-card-content {
    display: flex;

    flex-direction: column;

    justify-content: center;
}



/* =========================
   NO RESULTS
========================= */

.full-catalog-no-results {
    padding: 70px 20px;

    text-align: center;
}


.full-catalog-no-results h2 {
    color: #d5a62b;

    font-size: 30px;

    font-weight: normal;

    margin-bottom: 10px;
}


.full-catalog-no-results p {
    color: #bbb6ad;

    font-family: Arial, Helvetica, sans-serif;
}



/* =========================
   PAGINATION
========================= */

.catalog-pagination {
    display: flex;

    justify-content: center;

    align-items: center;

    gap: 5px;

    margin-top: 18px;
}


.catalog-pagination button {
    min-width: 35px;

    height: 32px;

    padding: 0 8px;

    background: none;

    color: #f4f1e8;

    border: none;

    cursor: pointer;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 13px;
}


.catalog-pagination .active-page {
    background-color: #d5a62b;

    color: #050b10;

    border-radius: 3px;
}


.catalog-pagination span {
    color: #f4f1e8;
}



/* =========================
   NEWSLETTER
========================= */

.full-catalog-newsletter {
    width: 100%;

    background-color: #0b1217;

    border-top: 1px solid #8b651d;

    border-bottom: 1px solid #8b651d;
}


.full-catalog-newsletter-container {
    width: 100%;

    max-width: 1500px;

    min-height: 105px;

    margin: 0 auto;

    padding: 20px 65px;

    display: grid;

    grid-template-columns: 1fr 520px;

    gap: 50px;

    align-items: center;
}


.full-catalog-newsletter-text {
    display: flex;

    align-items: center;

    gap: 20px;
}


.newsletter-icon {
    color: #d5a62b;

    font-size: 46px;
}


.full-catalog-newsletter-text h2 {
    color: #f4f1e8;

    font-size: 23px;

    font-weight: normal;

    margin-bottom: 5px;
}


.full-catalog-newsletter-text p {
    color: #b5b0a7;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 12px;
}


.catalog-newsletter-form {
    display: flex;

    width: 100%;
}


.catalog-newsletter-form input {
    flex: 1;

    min-width: 0;

    height: 44px;

    padding: 0 15px;

    background-color: #f3efe6;

    color: #050b10;

    border: none;

    outline: none;
}


.catalog-newsletter-form button {
    height: 44px;

    padding: 0 24px;

    background-color: #d5a62b;

    color: #050b10;

    border: none;

    cursor: pointer;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 11px;

    font-weight: bold;

    letter-spacing: 0.7px;
}



/* =========================
   LARGE TABLET
========================= */

@media (max-width: 1200px) {

    .full-catalog-hero-container,
    .catalog-feature-container,
    .catalog-library-container,
    .full-catalog-newsletter-container {
        padding-left: 35px;

        padding-right: 35px;
    }


    .featured-title-row {
        grid-template-columns: repeat(3, 1fr);
    }


    .catalog-filter-bar {
        grid-template-columns: repeat(3, 1fr);
    }


    .full-title-grid {
        grid-template-columns: repeat(3, 1fr);
    }

}



/* =========================
   TABLET
========================= */

@media (max-width: 850px) {

    .full-catalog-hero-container {
        grid-template-columns: 1fr;

        gap: 30px;

        padding-top: 40px;

        padding-bottom: 40px;
    }


    .featured-title-row {
        grid-template-columns: repeat(2, 1fr);
    }


    .catalog-filter-bar {
        grid-template-columns: repeat(2, 1fr);
    }


    .full-title-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    .full-catalog-newsletter-container {
        grid-template-columns: 1fr;

        gap: 20px;
    }

}



/* =========================
   MOBILE
========================= */

@media (max-width: 550px) {

    .full-catalog-hero-container,
    .catalog-feature-container,
    .catalog-library-container,
    .full-catalog-newsletter-container {
        padding-left: 20px;

        padding-right: 20px;
    }


    .full-catalog-intro h1 {
        font-size: 46px;
    }


    .alphabet-filter {
        gap: 11px;
    }


    .featured-title-row {
        grid-template-columns: 1fr;
    }


    .catalog-feature-tabs {
        flex-wrap: wrap;
    }


    .feature-view-all {
        width: 100%;

        margin-top: 10px;

        margin-left: 0;
    }


    .catalog-filter-bar {
        grid-template-columns: 1fr;
    }


    .full-title-grid {
        grid-template-columns: 1fr;
    }


    .library-card {
        max-width: 340px;

        margin: 0 auto;

        width: 100%;
    }


    .full-title-grid.list-view .library-card {
        max-width: none;

        grid-template-columns: 110px 1fr;
    }


    .full-title-grid.list-view .library-card-image {
        height: 145px;
    }


    .catalog-newsletter-form {
        flex-direction: column;
    }


    .catalog-newsletter-form input,
    .catalog-newsletter-form button {
        width: 100%;
    }

}