/* ══════════════════════════════════════════════════
   EBOOKS PAGE — RestioX Resource Hub
══════════════════════════════════════════════════ */

/* ── Shared tokens ─────────────────────────────── */
:root {
    --eb-purple:   #581c87;
    --eb-violet:   #7c3aed;
    --eb-fuchsia:  #a855f7;
    --eb-light-bg: #faf5ff;
}

/* ══ 1. HERO ══════════════════════════════════════ */
.eb-hero {
    padding: 110px 0 90px;
    background: linear-gradient(135deg, #1e0a3c 0%, #3b0764 35%, #5b21b6 70%, #7c3aed 100%);
    position: relative;
    overflow: hidden;
}
.eb-hero::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.06) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(192,132,252,0.12) 0%, transparent 50%);
    pointer-events: none;
}
/* subtle dot-grid */
.eb-hero::after {
    content: '';
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
}

/* eyebrow */
.eb-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.2);
    color: #e9d5ff;
    font-size: 13px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
    padding: 6px 16px; border-radius: 50px;
    margin-bottom: 24px;
}
.eb-eyebrow i { font-size: 14px; color: #c084fc; }

.eb-hero h1 {
    font-size: clamp(32px, 4.5vw, 54px);
    font-weight: 800; line-height: 1.12;
    color: #fff; margin-bottom: 20px; letter-spacing: -0.5px;
}
.eb-hero h1 span {
    background: linear-gradient(90deg, #c084fc, #f0abfc);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.eb-hero p.lead {
    font-size: 18px; color: rgba(255,255,255,0.72); max-width: 500px; line-height: 1.7; margin-bottom: 36px;
}
.eb-hero-stats {
    display: flex; gap: 28px; margin-bottom: 40px; flex-wrap: wrap;
}
.eb-stat {
    display: flex; flex-direction: column;
}
.eb-stat strong {
    font-size: 22px; font-weight: 800; color: #fff; line-height: 1;
}
.eb-stat span {
    font-size: 12px; color: rgba(255,255,255,0.55); margin-top: 3px; font-weight: 500;
}
.eb-hero-cta {
    display: inline-flex; align-items: center; gap: 10px;
    background: #fff; color: #5b21b6;
    font-size: 15px; font-weight: 700; padding: 14px 32px;
    border-radius: 50px; text-decoration: none;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    transition: all 0.3s ease;
}
.eb-hero-cta:hover {
    background: #f5f3ff; color: #4c1d95;
    transform: translateY(-3px); box-shadow: 0 14px 40px rgba(0,0,0,0.3);
}
.eb-hero-cta i { font-size: 18px; transition: transform 0.3s; }
.eb-hero-cta:hover i { transform: translateX(4px); }

/* ── Book stack visual ──────────────────────────── */
.eb-book-stack {
    position: relative;
    width: 320px;
    height: 380px;
    margin: 0 auto;
}
.eb-book {
    position: absolute;
    width: 220px;
    height: 290px;
    border-radius: 4px 12px 12px 4px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 24px 20px;
    box-shadow: 8px 12px 40px rgba(0,0,0,0.4), inset -4px 0 8px rgba(0,0,0,0.2);
    transition: transform 0.4s ease;
}
.eb-book::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 12px;
    background: rgba(0,0,0,0.25);
    border-radius: 4px 0 0 4px;
}
.eb-book-1 {
    background: linear-gradient(160deg, #1e0a3c 0%, #6d28d9 100%);
    bottom: 0; left: 50%; transform: translateX(-50%) rotate(-6deg);
    z-index: 1;
}
.eb-book-2 {
    background: linear-gradient(160deg, #0369a1 0%, #06b6d4 100%);
    bottom: 20px; left: 50%; transform: translateX(-42%) rotate(2deg);
    z-index: 2;
}
.eb-book-3 {
    background: linear-gradient(160deg, #be185d 0%, #f43f5e 100%);
    bottom: 40px; left: 50%; transform: translateX(-58%) rotate(-2deg);
    z-index: 3;
}
.eb-book-stack:hover .eb-book-1 { transform: translateX(-50%) rotate(-10deg) translateY(4px); }
.eb-book-stack:hover .eb-book-2 { transform: translateX(-42%) rotate(5deg) translateY(-6px); }
.eb-book-stack:hover .eb-book-3 { transform: translateX(-58%) rotate(-5deg) translateY(-4px); }

.eb-book-icon {
    font-size: 44px; color: rgba(255,255,255,0.9); margin-bottom: 14px;
}
.eb-book-title {
    font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.85);
    text-align: center; line-height: 1.4;
}
.eb-book-pages {
    font-size: 10px; color: rgba(255,255,255,0.5); margin-top: 8px;
}
/* floating badge on stack */
.eb-float-badge {
    position: absolute;
    background: #fff;
    border-radius: 14px;
    padding: 10px 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 700; color: #1e1b4b;
    z-index: 10;
}
.eb-float-badge i { font-size: 16px; }
.eb-fb-1 { top: 10px; right: 0; }
.eb-fb-2 { bottom: 20px; right: 10px; }

/* ══ 2. WAVE DIVIDER ═════════════════════════════ */
.eb-wave { display: block; margin-top: -2px; }

/* ══ 3. FEATURED SECTION ═════════════════════════ */
.eb-featured {
    padding: 80px 0 70px;
    background: var(--eb-light-bg);
    position: relative;
}
.eb-section-label {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em;
    color: var(--eb-violet);
    background: rgba(124,58,237,0.08); border-radius: 50px;
    padding: 5px 14px; margin-bottom: 10px;
}
.eb-section-title {
    font-size: clamp(26px, 3vw, 38px); font-weight: 800; color: #1e1b4b;
    letter-spacing: -0.3px; margin-bottom: 8px;
}
.eb-section-sub { font-size: 16px; color: #64748b; max-width: 540px; }

/* Featured card */
.eb-feat-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(88,28,135,0.08);
    border: 1px solid rgba(88,28,135,0.06);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    height: 100%;
}
.eb-feat-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 24px 60px rgba(88,28,135,0.16);
}
.eb-feat-cover {
    position: relative;
    height: 220px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.eb-feat-cover .eb-book-spine {
    position: absolute; left: 0; top: 0; bottom: 0; width: 14px;
    background: rgba(0,0,0,0.2);
}
.eb-feat-cover-icon {
    font-size: 56px; color: rgba(255,255,255,0.9);
    transition: transform 0.4s ease;
    position: relative; z-index: 1;
}
.eb-feat-card:hover .eb-feat-cover-icon { transform: scale(1.12) rotate(-5deg); }
.eb-feat-cover-title {
    position: absolute; bottom: 16px; left: 20px; right: 20px;
    font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.88); line-height: 1.35;
    z-index: 1;
}
.eb-feat-cover-pages {
    position: absolute; top: 14px; right: 16px;
    font-size: 10px; font-weight: 600; color: rgba(255,255,255,0.6);
    background: rgba(0,0,0,0.2); padding: 3px 9px; border-radius: 20px;
    z-index: 1;
}
.eb-feat-body { padding: 22px 24px 24px; }
.eb-cat-badge {
    display: inline-block;
    font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    padding: 4px 12px; border-radius: 20px;
    margin-bottom: 12px;
}
.eb-cat-management { background: rgba(124,58,237,0.1); color: #5b21b6; }
.eb-cat-marketing   { background: rgba(99,102,241,0.1); color: #4338ca; }
.eb-cat-social      { background: rgba(236,72,153,0.1); color: #9d174d; }
.eb-cat-ordering    { background: rgba(14,165,233,0.1); color: #0369a1; }

.eb-feat-title {
    font-size: 17px; font-weight: 700; color: #1e1b4b; line-height: 1.4; margin-bottom: 10px;
}
.eb-feat-desc { font-size: 14px; color: #64748b; line-height: 1.65; margin-bottom: 20px; }
.eb-download-btn {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 700; color: var(--eb-violet);
    background: rgba(124,58,237,0.08); border: 1.5px solid rgba(124,58,237,0.2);
    padding: 9px 20px; border-radius: 50px; text-decoration: none;
    transition: all 0.25s ease;
}
.eb-download-btn:hover {
    background: var(--eb-violet); color: #fff; border-color: var(--eb-violet);
    transform: translateY(-1px); box-shadow: 0 6px 18px rgba(124,58,237,0.35);
}
.eb-download-btn i { font-size: 15px; transition: transform 0.25s; }
.eb-download-btn:hover i { transform: translateY(2px); }

/* Popular / New pill on feat card */
.eb-feat-badge {
    position: absolute; top: 14px; left: 14px; z-index: 5;
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    padding: 4px 10px; border-radius: 20px;
}
.eb-badge-new { background: #22c55e; color: #fff; }
.eb-badge-popular {
    background: linear-gradient(90deg, #f59e0b, #ef4444);
    color: #fff;
}

/* ══ 4. LIBRARY GRID SECTION ═════════════════════ */
.eb-library {
    padding: 80px 0 100px;
    background: #fff;
}

/* ── Search + Filter bar ───────────────────────── */
.eb-filter-bar {
    background: #fff;
    border-radius: 16px;
    padding: 16px 20px;
    box-shadow: 0 2px 20px rgba(88,28,135,0.07);
    border: 1px solid #ede9f8;
    margin-bottom: 48px;
    display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
}
.eb-search-wrap {
    position: relative; flex: 1; min-width: 220px;
}
.eb-search-wrap i {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    font-size: 16px; color: #5f6b7a; pointer-events: none;
}
.eb-search-input {
    width: 100%; padding: 10px 14px 10px 42px;
    border: 1.5px solid #e8e4f5; border-radius: 12px;
    font-size: 14px; color: #374151; background: #faf8ff;
    outline: none; transition: border-color 0.2s, box-shadow 0.2s;
}
.eb-search-input:focus { border-color: #9333ea; box-shadow: 0 0 0 3px rgba(147,51,234,0.1); }
.eb-search-input::placeholder { color: #b0a7cc; }
.eb-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.eb-filter-btn {
    font-size: 13px; font-weight: 600; padding: 8px 18px;
    border-radius: 50px; border: 1.5px solid #e8e4f5;
    background: transparent; color: #64748b; cursor: pointer;
    transition: all 0.2s ease;
}
.eb-filter-btn:hover { border-color: #9333ea; color: #7c3aed; background: rgba(124,58,237,0.05); }
.eb-filter-btn.active {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: #fff; border-color: transparent;
    box-shadow: 0 4px 14px rgba(124,58,237,0.35);
}
.eb-results-count {
    font-size: 13px; color: #5f6b7a; white-space: nowrap; font-weight: 500;
}

/* ── Grid cards ────────────────────────────────── */
.eb-grid-card {
    background: #fff;
    border-radius: 18px;
    border: 1px solid #ede9f8;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    height: 100%;
    display: flex; flex-direction: column;
}
.eb-grid-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(88,28,135,0.13);
    border-color: rgba(124,58,237,0.3);
}
.eb-grid-cover {
    position: relative;
    height: 160px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.eb-grid-cover .eb-book-spine {
    position: absolute; left: 0; top: 0; bottom: 0; width: 10px;
    background: rgba(0,0,0,0.2);
}
.eb-grid-cover-icon {
    font-size: 40px; color: rgba(255,255,255,0.9);
    transition: transform 0.35s ease;
    position: relative; z-index: 1;
}
.eb-grid-card:hover .eb-grid-cover-icon { transform: scale(1.15) rotate(-8deg); }

.eb-grid-badge {
    position: absolute; top: 10px; right: 10px; z-index: 5;
    font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    padding: 3px 8px; border-radius: 20px;
}
.eb-grid-body {
    padding: 18px 18px 20px;
    flex: 1; display: flex; flex-direction: column;
}
.eb-grid-title {
    font-size: 15px; font-weight: 700; color: #1e1b4b; line-height: 1.4;
    margin-bottom: 8px;
}
.eb-grid-desc {
    font-size: 13px; color: #6b7280; line-height: 1.6; margin-bottom: 16px; flex: 1;
}
.eb-grid-meta {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: auto;
}
.eb-grid-pages {
    font-size: 11px; color: #5f6b7a; font-weight: 600;
    display: flex; align-items: center; gap: 4px;
}
.eb-grid-dl {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 700; color: var(--eb-violet);
    padding: 6px 14px; border-radius: 50px;
    border: 1.5px solid rgba(124,58,237,0.25);
    background: rgba(124,58,237,0.05);
    text-decoration: none; transition: all 0.22s;
}
.eb-grid-dl:hover {
    background: var(--eb-violet); color: #fff;
    border-color: var(--eb-violet); box-shadow: 0 4px 14px rgba(124,58,237,0.35);
}

/* No results */
.eb-no-results {
    display: none; text-align: center; padding: 60px 20px;
    color: #5f6b7a; font-size: 15px;
}
.eb-no-results i { font-size: 48px; display: block; margin-bottom: 14px; color: #ddd6fe; }

/* ══ 5. CTA SECTION ══════════════════════════════ */
.eb-cta {
    padding: 90px 0 100px;
    background: linear-gradient(135deg, #1e0a3c 0%, #3b0764 40%, #6d28d9 80%, #9333ea 100%);
    position: relative; overflow: hidden; text-align: center;
}
.eb-cta::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        radial-gradient(circle at 15% 50%, rgba(255,255,255,0.07) 0%, transparent 50%),
        radial-gradient(circle at 85% 40%, rgba(192,132,252,0.12) 0%, transparent 50%);
    pointer-events: none;
}
.eb-cta::after {
    content: '';
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
}
.eb-cta-inner { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; }
.eb-cta-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 70px; height: 70px; border-radius: 20px;
    background: rgba(255,255,255,0.12); backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.2);
    font-size: 32px; color: #e9d5ff; margin-bottom: 28px;
}
.eb-cta h2 {
    font-size: clamp(26px, 3.5vw, 42px); font-weight: 800; color: #fff;
    line-height: 1.2; letter-spacing: -0.4px; margin-bottom: 16px;
}
.eb-cta h2 span {
    background: linear-gradient(90deg, #c084fc, #f0abfc);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.eb-cta p {
    font-size: 17px; color: rgba(255,255,255,0.68); line-height: 1.7; margin-bottom: 38px;
}
.eb-cta-btns { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.eb-btn-white {
    display: inline-flex; align-items: center; gap: 9px;
    background: #fff; color: #5b21b6;
    font-size: 15px; font-weight: 700; padding: 14px 32px; border-radius: 50px;
    text-decoration: none; box-shadow: 0 8px 28px rgba(0,0,0,0.2);
    transition: all 0.28s;
}
.eb-btn-white:hover {
    background: #f5f3ff; color: #4c1d95;
    transform: translateY(-3px); box-shadow: 0 14px 36px rgba(0,0,0,0.28);
}
.eb-btn-outline {
    display: inline-flex; align-items: center; gap: 9px;
    background: rgba(255,255,255,0.1); color: #fff;
    font-size: 15px; font-weight: 700; padding: 14px 32px; border-radius: 50px;
    text-decoration: none; border: 1.5px solid rgba(255,255,255,0.3);
    backdrop-filter: blur(6px);
    transition: all 0.28s;
}
.eb-btn-outline:hover {
    background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.55); color: #fff;
    transform: translateY(-3px);
}

/* ══ Scroll-in reveal ════════════════════════════ */
.eb-reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; }
.eb-reveal.eb-visible { opacity: 1; transform: translateY(0); }

/* ══ Responsive tweaks ═══════════════════════════ */
@media (max-width: 991px) {
    .eb-hero { padding: 80px 0 60px; }
    .eb-book-stack { width: 260px; height: 310px; margin-top: 50px; }
    .eb-book { width: 180px; height: 240px; }
}
@media (max-width: 767px) {
    .eb-filter-bar { flex-direction: column; align-items: stretch; }
    .eb-filters { justify-content: flex-start; }
    .eb-book-stack { display: none; }
}

/* (audit) Contain the last 32px of sideways scroll at 360px.
   .eb-hero and .eb-cta already clip; these two sections did not, and the page
   floor sat at 377px so any viewport narrower than that scrolled sideways
   (32px at 360px, 2px at 390px, clean from 414px up). No single element owns
   the overflow — it is the combined intrinsic minimum of the filter/search row
   and the card grid — so it is contained at the section boundary, the same way
   every other section on the site handles its own overhang. */
.eb-featured,
.eb-library { overflow-x: clip; }

/* ══ 6. DEAD-END FIX — real CTAs instead of href="#" ════════════
   The cards used to end in a "Free Download" button pointing at
   href="#". They now link to a real page (article / feature page /
   service page) or to the contact form with the resource named.
   Three small additions: the arrow leans right instead of down,
   featured cards carry a secondary "related" link, and the empty
   search state offers a way to ask for what is missing. */

.eb-download-btn:hover i,
.eb-grid-dl:hover i { transform: translateX(3px); }
.eb-grid-dl i { transition: transform 0.22s; }

/* Secondary link under the primary CTA on the three featured cards */
.eb-feat-related {
    display: inline-flex; align-items: center; gap: 7px;
    margin-top: 14px;
    font-size: 12.5px; font-weight: 600; line-height: 1.5;
    color: #5b21b6; text-decoration: none;
    border-bottom: 1px solid rgba(91,33,182,0.28);
    padding-bottom: 2px;
    transition: color 0.2s, border-color 0.2s;
}
.eb-feat-related i { font-size: 13px; transition: transform 0.22s; }
.eb-feat-related:hover { color: #3b0764; border-color: #3b0764; }
.eb-feat-related:hover i { transform: translateX(3px); }
.eb-feat-related:focus-visible,
.eb-no-results-link:focus-visible {
    outline: 2px solid var(--eb-violet);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Empty-state escape hatch */
.eb-no-results-link {
    display: inline-block;
    margin-top: 14px;
    font-size: 14px; font-weight: 700;
    color: var(--eb-violet); text-decoration: none;
    border-bottom: 1.5px solid rgba(124,58,237,0.35);
}
.eb-no-results-link:hover { color: #3b0764; border-color: #3b0764; }

/* The library CTA row now carries a third link; keep the tap targets
   comfortable once they wrap onto two lines on a phone. */
@media (max-width: 575px) {
    .eb-cta-btns { gap: 12px; }
    .eb-btn-white, .eb-btn-outline { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .eb-download-btn i,
    .eb-grid-dl i,
    .eb-feat-related i { transition: none; }
    .eb-download-btn:hover i,
    .eb-grid-dl:hover i,
    .eb-feat-related:hover i { transform: none; }
}