/* Home page: featured bestseller, credentials strip, "Start a series" and author picker. */

/* Featured bestseller (replaces the full-screen hero on this page only) */

#hero.home-hero {
    height: auto;
    padding: 100px 0 48px;
    background: linear-gradient(135deg, #111a3a, #060c22 65%);
}

#hero.home-hero::before {
    display: none;
}

.home-hero .container {
    position: relative;
}

/* Bestsellers take turns (wwwroot/assets/js/home.js). Each slide sets --feature-accent to its
   author's colour, so the glow and buttons change with the book. The slider clips its
   contents, so each slide is padded to leave room for the cover's glow to fade out. */
.bestseller-slider .swiper-slide {
    padding-block: 70px 50px;
}

.bestseller-slider__pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 0;
}

.bestseller-slider__pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    margin: 0 !important;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.7);
    opacity: 1;
    transition: background 200ms ease, width 200ms ease;
}

.bestseller-slider__pagination .swiper-pagination-bullet-active {
    width: 32px;
    border-radius: 6px;
    background: #fff;
}

.home-hero__feature {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 56px;
}

.home-hero__cover {
    flex: 0 0 300px;
    width: 300px;
    display: block;
    transform: rotate(-3deg);
    transition: transform 300ms ease;
}

.home-hero__cover img {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 0 0 4px var(--feature-accent), 0 26px 50px rgba(0, 0, 0, 0.6),
        0 0 90px 10px color-mix(in srgb, var(--feature-accent) 50%, transparent);
}

.home-hero__cover:hover,
.home-hero__cover:focus-visible {
    transform: rotate(0deg) scale(1.03);
}

.home-hero__text {
    max-width: 560px;
    color: #fff;
}

.home-hero__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin-bottom: 14px;
}

.home-hero__bestseller {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #e6c35c, #ae841a);
    color: #1a1204;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 50px;
    box-shadow: 0 6px 16px rgba(174, 132, 26, 0.4);
}

.home-hero__series {
    color: color-mix(in srgb, var(--feature-accent) 40%, #fff);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

#hero .home-hero__title {
    font-family: "Raleway", sans-serif;
    font-size: clamp(2.6rem, 6vw, 4.2rem);
    font-weight: 800;
    text-transform: none;
    color: #fff;
    margin-bottom: 16px;
}

#hero .home-hero__hook {
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    font-style: italic;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
    border-left: 3px solid var(--feature-accent);
    padding-left: 16px;
    margin-bottom: 28px;
}

.home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.home-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 50px;
    padding: 13px 28px;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
}

.home-btn--primary {
    background: linear-gradient(135deg, var(--feature-accent), color-mix(in srgb, var(--feature-accent) 65%, #fff));
    color: #fff;
    letter-spacing: 1px;
    text-transform: uppercase;
    animation: buy-pulse 2.2s ease-in-out 600ms infinite;
}

.home-btn--ghost {
    border: 2px solid rgba(255, 255, 255, 0.6);
    color: #fff;
}

.home-btn:hover,
.home-btn:focus-visible {
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
    animation: none;
}

.home-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Credentials strip */

.home-credentials {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 36px;
    list-style: none;
    margin: 32px 0 0;
    padding: 20px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.75);
    font-size: 15px;
}

.home-credentials strong {
    color: #fff;
    font-size: 1.25rem;
    margin-right: 4px;
}

.home-credentials__usa {
    color: #e6c35c;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Start a series */

.home-section {
    padding: 70px 0;
    background: #f6f7fd;
}

.start-grid {
    /* Flex rather than grid so all seven fit on one row on desktop, and any
       cards that wrap on smaller screens stay centred. */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
}

.start-card {
    flex: 1 1 130px;
    max-width: 175px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #fff;
    border-radius: 12px;
    padding: 14px 14px 18px;
    box-shadow: 0 6px 18px rgba(14, 27, 77, 0.08);
    border-top: 4px solid var(--card-accent);
    color: #2f3138;
    text-decoration: none;
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.start-card:hover,
.start-card:focus-visible {
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgba(14, 27, 77, 0.16);
    color: #2f3138;
}

.start-card__cover {
    width: 100%;
    margin-bottom: 12px;
}

.start-card__cover img {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: 4px;
}

.start-card__series {
    color: var(--card-accent);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.start-card__title {
    font-family: "Raleway", sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #0e1b4d;
    margin: 4px 0 2px;
}

.start-card__author {
    color: #6b6f7b;
    font-size: 12px;
    margin-bottom: 10px;
}

.start-card__cta {
    margin-top: auto;
    color: var(--card-accent);
    font-size: 13px;
    font-weight: 700;
}

.start-card:hover .start-card__cta i {
    transform: translateX(3px);
}

.start-card__cta i {
    display: inline-block;
    transition: transform 200ms ease;
}

/* Choose your author */

.home-authors {
    padding: 70px 0;
    background: #060c22;
}

.home-authors .section-header h2 {
    color: #fff;
}

.home-authors .section-header p {
    color: rgba(255, 255, 255, 0.7);
}

.home-authors__grid {
    display: flex;
    justify-content: center;
    gap: 40px;
}

.home-authors .hero-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px;
    border: 2px solid var(--primaryColour);
    border-radius: 16px;
    cursor: pointer;
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.home-authors .hero-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 30px color-mix(in srgb, var(--primaryColour) 40%, transparent);
}

.home-authors__logo {
    max-height: 300px;
}

.home-authors .about-btn {
    font-family: "Raleway", sans-serif;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 1px;
    display: inline-block;
    padding: 12px 32px;
    border-radius: 50px;
    margin-top: 10px;
    color: #fff;
    border: 2px solid var(--primaryColour);
    transition: 0.5s;
}

.home-authors .about-btn:hover {
    background: var(--primaryColour);
    color: #fff;
}

@media (max-width: 991px) {
    #hero.home-hero {
        padding-top: 50px;
    }

    .home-hero__feature {
        flex-direction: column;
        text-align: center;
        gap: 32px;
    }

    .home-hero__cover {
        flex-basis: auto;
        width: 230px;
    }

    .home-hero__badges,
    .home-hero__actions {
        justify-content: center;
    }

    #hero .home-hero__hook {
        border-left: 0;
        padding-left: 0;
    }

    .home-authors__grid {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .home-authors__logo {
        max-height: 200px;
    }
}

@media (max-width: 575px) {
    .start-grid {
        gap: 14px;
    }

    .start-card {
        flex-basis: 40%;
    }

    .home-credentials {
        gap: 8px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-hero__cover,
    .home-btn,
    .start-card {
        transition: none;
    }

    .home-btn--primary {
        animation: none;
    }
}