/**
 * African Novelist - Components CSS
 * Part 2: Featured Book, Book Cards, Bio, Countdown, Instagram, Newsletter
 */

/* Featured Book */
.featured-book { padding: var(--space-5xl) 0; background: var(--color-surface); }
.featured-book-grid { display: grid; grid-template-columns: 1fr 1fr;
    gap: var(--space-4xl); align-items: center; }
.featured-book-image img { width: 100%; max-width: 400px;
    margin: 0 auto; box-shadow: var(--shadow-xl); }
.featured-book-content { padding: var(--space-xl) 0; }
.featured-book-label { display: inline-block; font-size: var(--text-xs);
    font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-widest);
    color: var(--color-accent); margin-bottom: var(--space-lg); }
.featured-book-title { font-size: var(--text-5xl); margin-bottom: var(--space-md); }
.featured-book-subtitle { font-family: var(--font-serif); font-size: var(--text-xl);
    font-style: italic; color: var(--color-text-secondary); margin-bottom: var(--space-xl); }
.featured-book-description { color: var(--color-text-secondary);
    line-height: var(--leading-relaxed); margin-bottom: var(--space-xl); }
.retailer-badges { display: flex; align-items: center; gap: var(--space-lg); margin-bottom: var(--space-xl); }
.retailer-badge { display: flex; align-items: center; gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md); background: var(--color-background);
    border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--color-text-secondary); }
.retailer-badge:hover { background: var(--color-border); }
@media (max-width: 991px) {
    .featured-book-grid { grid-template-columns: 1fr; gap: var(--space-2xl); }
    .featured-book-image { order: -1; }
    .featured-book-title { font-size: var(--text-4xl); }
}

/* Book Cards */
.collection-section { padding: var(--space-5xl) 0; background: var(--color-background); }
.section-header { text-align: center; margin-bottom: var(--space-4xl); }
.section-header h2 { margin-bottom: var(--space-md); }
.section-header p { color: var(--color-text-secondary); max-width: 600px; margin: 0 auto; }
.book-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); }
.book-card { background: var(--color-surface); border-radius: var(--radius-lg);
    overflow: hidden; box-shadow: var(--shadow-md); transition: var(--transition-base); }
.book-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); }
.book-card-image { position: relative; aspect-ratio: 3/4; overflow: hidden;
    background: var(--color-background-alt); }
.book-card-image img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s ease; }
.book-card:hover .book-card-image img { transform: scale(1.05); }
.book-card-badge { position: absolute; top: var(--space-md); left: var(--space-md);
    display: flex; align-items: center; gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm); background: var(--color-surface);
    border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 600; }
.book-card-badge i { color: var(--color-accent); }
.book-card-wishlist { position: absolute; top: var(--space-md); right: var(--space-md);
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    background: var(--color-surface); border: none; border-radius: var(--radius-full);
    color: var(--color-text-muted); cursor: pointer; transition: var(--transition-fast); }
.book-card-wishlist:hover, .book-card-wishlist.active { color: var(--color-accent); }
.book-card-content { padding: var(--space-lg); }
.book-card-category { font-size: var(--text-xs); font-weight: 600;
    text-transform: uppercase; letter-spacing: var(--tracking-widest);
    color: var(--color-accent); margin-bottom: var(--space-sm); }
.book-card-title { font-family: var(--font-serif); font-size: var(--text-xl);
    font-weight: 500; margin-bottom: var(--space-sm); line-height: var(--leading-snug); }
.book-card-excerpt { font-size: var(--text-sm); color: var(--color-text-secondary);
    line-height: var(--leading-relaxed); margin-bottom: var(--space-md);
    display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.book-card-footer { display: flex; align-items: center; justify-content: space-between;
    padding-top: var(--space-md); border-top: 1px solid var(--color-border-light); }
.book-card-price { font-weight: 600; color: var(--color-primary); }
.book-card-link { font-size: var(--text-sm); font-weight: 500;
    color: var(--color-text-secondary); display: flex; align-items: center; gap: var(--space-xs); }
.book-card-link:hover { color: var(--color-primary); }
.book-card-link i { font-size: var(--text-xs); transition: var(--transition-fast); }
.book-card-link:hover i { transform: translateX(4px); }
@media (max-width: 991px) { .book-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .book-grid { grid-template-columns: 1fr; } }

/* Biography */
.bio-section { padding: var(--space-5xl) 0; background: var(--color-surface); }
.bio-grid { display: grid; grid-template-columns: 1fr 1.2fr;
    gap: var(--space-4xl); align-items: center; }
.bio-image { position: relative; }
.bio-image img { width: 100%; border-radius: var(--radius-lg); filter: grayscale(30%); }
.bio-image::after { content: ''; position: absolute; top: var(--space-lg);
    left: var(--space-lg); right: calc(-1 * var(--space-lg));
    bottom: calc(-1 * var(--space-lg)); border: 1px solid var(--color-accent);
    border-radius: var(--radius-lg); z-index: -1; }
.bio-content h2 { margin-bottom: var(--space-xl); }
.bio-quote { font-family: var(--font-serif); font-size: var(--text-2xl);
    font-style: italic; color: var(--color-text-secondary);
    line-height: var(--leading-relaxed); margin-bottom: var(--space-xl);
    padding-left: var(--space-xl); border-left: 2px solid var(--color-accent); }
.bio-text { color: var(--color-text-secondary); line-height: var(--leading-loose);
    margin-bottom: var(--space-xl); }
@media (max-width: 991px) {
    .bio-grid { grid-template-columns: 1fr; gap: var(--space-2xl); }
    .bio-image::after { display: none; }
}

/* Countdown */
.countdown-section { padding: var(--space-5xl) 0;
    background: linear-gradient(135deg, var(--color-footer-start) 0%, var(--color-footer-end) 100%);
    color: var(--color-text-inverse); text-align: center; }
.countdown-section h2 { color: var(--color-text-inverse); margin-bottom: var(--space-md); }
.countdown-label { font-size: var(--text-xs); text-transform: uppercase;
    letter-spacing: var(--tracking-widest); color: var(--color-accent); margin-bottom: var(--space-lg); }
.countdown-timer { display: flex; justify-content: center; gap: var(--space-2xl); margin-top: var(--space-3xl); }
.countdown-item { text-align: center; }
.countdown-value { font-family: var(--font-serif); font-size: var(--text-6xl);
    font-weight: 400; line-height: 1; margin-bottom: var(--space-sm); }
.countdown-unit { font-size: var(--text-xs); text-transform: uppercase;
    letter-spacing: var(--tracking-widest); color: rgba(255,255,255,0.6); }
@media (max-width: 576px) {
    .countdown-value { font-size: var(--text-4xl); }
    .countdown-timer { gap: var(--space-lg); }
}

/* Instagram */
.instagram-section { padding: var(--space-5xl) 0; background: var(--color-background); }
.instagram-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
.instagram-item { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-md); }
.instagram-item img { width: 100%; height: 100%; object-fit: cover;
    filter: grayscale(100%); transition: var(--transition-base); }
.instagram-item:hover img { filter: grayscale(0); transform: scale(1.05); }
.instagram-item::after { content: '\f16d'; font-family: 'Font Awesome 6 Brands';
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: var(--text-2xl); color: var(--color-text-inverse);
    opacity: 0; transition: var(--transition-fast); }
.instagram-item:hover::after { opacity: 1; }
@media (max-width: 768px) { .instagram-grid { grid-template-columns: repeat(2, 1fr); } }

/* Newsletter */
.newsletter-section { padding: 0; background: var(--color-primary); }
.newsletter-card { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4xl);
    align-items: center; padding: var(--space-4xl) 0; max-width: 1100px; margin: 0 auto; }
.newsletter-content { color: #fff; }
.newsletter-badge { display: inline-flex; align-items: center; gap: var(--space-sm);
    font-size: 10px; font-weight: 600; letter-spacing: 0.1em; color: var(--color-accent);
    background: rgba(255,255,255,0.1); padding: 6px 12px; border-radius: var(--radius-sm);
    margin-bottom: var(--space-lg); }
.newsletter-content h3 { font-family: var(--font-serif); font-size: var(--text-4xl);
    font-weight: 400; color: #fff; margin-bottom: var(--space-md); line-height: 1.2; }
.newsletter-content p { color: rgba(255,255,255,0.6); font-size: var(--text-sm); margin: 0; }
.newsletter-form-wrap { text-align: left; }
.newsletter-form { display: flex; flex-direction: column; gap: var(--space-md); }
.newsletter-form input { padding: var(--space-md) var(--space-lg);
    font-size: var(--text-sm); border: 1px solid rgba(255,255,255,0.2);
    border-radius: var(--radius-sm); background: rgba(255,255,255,0.1);
    color: #fff; outline: none; }
.newsletter-form input::placeholder { color: rgba(255,255,255,0.4); }
.newsletter-form input:focus { border-color: rgba(255,255,255,0.4); }
.newsletter-form button { padding: var(--space-md) var(--space-xl);
    background: #fff; color: var(--color-primary); border: none;
    border-radius: var(--radius-sm); font-size: 11px; font-weight: 600;
    letter-spacing: 0.05em; cursor: pointer; display: flex; align-items: center;
    justify-content: center; gap: var(--space-sm); transition: var(--transition-fast); }
.newsletter-form button:hover { background: rgba(255,255,255,0.9); }
.newsletter-disclaimer { font-size: 11px; color: rgba(255,255,255,0.4); margin-top: var(--space-md); }
@media (max-width: 768px) {
    .newsletter-card { grid-template-columns: 1fr; gap: var(--space-2xl);
        padding: var(--space-3xl) var(--space-lg); text-align: center; }
    .newsletter-form-wrap { text-align: center; }
}

/* Footer */
.site-footer {
    background: #080808;
    padding: 100px 0 40px;
    text-align: center;
    border-top: 1px solid #111;
}

.footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

/* Brand block: logo centered above the brand text on every screen size */
.footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.footer-logo {
    width: 48px;
    height: 48px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-size: 20px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
}

.brand-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.brand-main, .brand-sub {
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3em;
    color: #fff;
    text-transform: uppercase;
}

.brand-sub {
    color: #666;
}

.footer-social {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin: 10px 0;
}

.footer-social a {
    width: auto;
    height: auto;
    border: none;
    border-radius: 0;
    color: #fff;
    font-size: 14px;
    transition: color 0.3s ease;
    display: inline-block;
}

.footer-social a:hover {
    color: var(--color-accent);
    background: transparent;
}

.footer-links {
    display: flex;
    gap: 30px;
    justify-content: center;
}

.footer-links a {
    font-family: var(--font-sans);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: #444;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: #fff;
}

.footer-copyright {
    font-family: var(--font-sans);
    font-size: 9px;
    color: #333;
    letter-spacing: 0.1em;
    margin-top: 10px;
}

.footer-signature {
    font-family: var(--font-sans);
    font-size: 9px;
    color: #1a1a1a;
    letter-spacing: 0.1em;
    margin-top: 20px;
}

/* ── Footer responsive ─────────────────────────────────────── */
@media (max-width: 768px) {
    .site-footer { padding: 64px 0 36px; }
    .footer-inner { gap: 28px; }
    .footer-logo { margin-bottom: 12px; }
    .footer-social { gap: 26px; flex-wrap: wrap; }
    .footer-links { gap: 22px; flex-wrap: wrap; }
    .footer-copyright,
    .footer-signature { padding: 0 16px; text-align: center; }
}

@media (max-width: 480px) {
    .site-footer { padding: 52px 0 32px; }
    .footer-inner { gap: 24px; }
    /* Comfortable, finger-friendly social icons */
    .footer-social { gap: 22px; }
    .footer-social a { font-size: 16px; padding: 4px; }
    .footer-links { gap: 16px 18px; }
    .footer-links a { font-size: 9px; }
}

@media (max-width: 360px) {
    .footer-social { gap: 18px; }
    .footer-links { gap: 12px 16px; }
}