/* ============================================================================
   Featured author card (home, under the main slider).
   Replaced the two footer banners; see partials/_featured-authors.blade.php.
   Logical properties throughout so the card mirrors itself in Arabic.
   ========================================================================== */

/* A little more air under the main slider than the row gutter gives
   (.row > * sets margin-top to the gutter; this adds .5rem on top). */
.row > .fa-col {
    margin-block-start: calc(var(--bs-gutter-y, 1rem) + .5rem);
}

.fa-card {
    position: relative;
    block-size: 100%;
    padding: 1.1rem 1.25rem .9rem;
    border-radius: var(--dream-radius, .875rem);
    border: 1px solid var(--dream-line, rgba(15, 23, 42, .08));
    background:
        radial-gradient(120% 140% at 100% 0%, var(--dream-tint-strong, rgba(146, 64, 14, .14)) 0%, transparent 55%),
        linear-gradient(135deg, var(--dream-tint, rgba(146, 64, 14, .07)), var(--dream-surface, #fff) 70%);
    box-shadow: var(--dream-shadow-sm);
    overflow: hidden;
    color: var(--dream-ink, #1f2430);
}

.fa-card__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-block-end: .6rem;
    padding: .2rem .7rem;
    border-radius: var(--dream-radius-pill, 50rem);
    background: rgba(var(--dream-primary-rgb, 146, 64, 14), .12);
    color: var(--dream-primary, #92400E);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
}

/* Every slide sits in the same grid cell: the card takes the height of the
   tallest one, so rotating never makes the page jump. */
.fa-card__slides {
    display: grid;
}

.fa-slide {
    grid-area: 1 / 1;
    display: flex;
    align-items: center;
    gap: 1.1rem;
    min-inline-size: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .45s var(--dream-ease, ease), transform .45s var(--dream-ease, ease), visibility 0s linear .45s;
}

.fa-slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .45s var(--dream-ease, ease), transform .45s var(--dream-ease, ease), visibility 0s;
}

/* ---- avatar / monogram ---- */
.fa-slide__avatar {
    position: relative;
    flex-shrink: 0;
    inline-size: 5.5rem;
    block-size: 5.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(145deg, hsl(var(--fa-hue, 30) 45% 92%), hsl(var(--fa-hue, 30) 40% 82%));
    color: hsl(var(--fa-hue, 30) 45% 28%);
    box-shadow: 0 0 0 4px var(--dream-surface, #fff), 0 0 0 5px rgba(var(--dream-primary-rgb, 146, 64, 14), .25), var(--dream-shadow-sm);
    text-decoration: none;
}

.fa-slide__avatar img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    z-index: 1;
}

.fa-slide__monogram {
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1;
    padding-inline: .2rem;
}

/* ---- text ---- */
.fa-slide__body {
    flex: 1 1 auto;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .3rem;
}

.fa-slide__name {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.3;
}

.fa-slide__name a {
    color: inherit;
    text-decoration: none;
}

.fa-slide__name a:hover {
    color: var(--dream-primary, #92400E);
}

.fa-slide__count {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--dream-ink-soft, #6b7280);
}

.fa-slide__bio {
    margin: 0;
    font-size: .85rem;
    line-height: 1.6;
    color: var(--dream-ink-soft, #6b7280);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fa-slide__more {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-block-start: .2rem;
    padding: .35rem .95rem;
    border-radius: var(--dream-radius-pill, 50rem);
    background: var(--dream-primary, #92400E);
    color: var(--dream-on-primary, #fff) !important;
    font-size: .8rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform .2s var(--dream-ease, ease), box-shadow .2s var(--dream-ease, ease);
}

.fa-slide__more:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(var(--dream-primary-rgb, 146, 64, 14), .3);
}

[dir="rtl"] .fa-slide__more-icon {
    transform: scaleX(-1);
}

/* ---- covers: a small fanned stack ---- */
.fa-slide__books {
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    padding-inline-end: .25rem;
}

.fa-slide__book {
    display: block;
    inline-size: 3.6rem;
    aspect-ratio: 2 / 3;
    border-radius: 4px;
    overflow: hidden;
    background: var(--dream-line);
    box-shadow: var(--dream-shadow-md);
    border: 2px solid var(--dream-surface, #fff);
    transition: transform .25s var(--dream-ease, ease);
}

.fa-slide__book + .fa-slide__book {
    margin-inline-start: -1.1rem;
}

.fa-slide__book:nth-child(odd) { transform: rotate(-4deg); }
.fa-slide__book:nth-child(even) { transform: rotate(3deg) translateY(-4px); }

.fa-slide__book:hover {
    transform: translateY(-8px) rotate(0);
    z-index: 2;
}

.fa-slide__book img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

/* ---- dots ---- */
.fa-card__dots {
    display: flex;
    justify-content: center;
    gap: .35rem;
    margin-block-start: .7rem;
}

.fa-card__dot {
    inline-size: .45rem;
    block-size: .45rem;
    padding: 0;
    border: 0;
    border-radius: var(--dream-radius-pill, 50rem);
    background: rgba(var(--dream-primary-rgb, 146, 64, 14), .25);
    transition: inline-size .3s var(--dream-ease, ease), background .3s;
    cursor: pointer;
}

.fa-card__dot.is-active {
    inline-size: 1.3rem;
    background: var(--dream-primary, #92400E);
}

/* ---- dark mode ---- */
body[theme="dark"] .fa-card__eyebrow {
    background: rgba(255, 255, 255, .08);
    color: var(--dream-ink, #e8eaed);
}

body[theme="dark"] .fa-slide__avatar {
    background: linear-gradient(145deg, hsl(var(--fa-hue, 30) 22% 26%), hsl(var(--fa-hue, 30) 20% 20%));
    color: hsl(var(--fa-hue, 30) 45% 82%);
}

/* ---- narrower screens: fewer covers ---- */
@media (max-width: 767.98px) {
    .fa-slide__book:nth-child(n+3) { display: none; }
    .fa-slide__avatar { inline-size: 4.5rem; block-size: 4.5rem; }
}

/* ---- phones: compact grid ----
   avatar | name + count
   bio (full width)
   read more | covers
   .fa-slide__body becomes display:contents so its children join the grid. */
@media (max-width: 575.98px) {
    .fa-card { padding: .75rem .85rem .6rem; }
    .fa-card__eyebrow { margin-block-end: .5rem; font-size: .7rem; padding: .15rem .6rem; }

    .fa-slide {
        display: grid;
        grid-template-columns: 3.4rem auto 1fr;
        grid-template-areas:
            "avatar name  name"
            "avatar count count"
            "bio    bio   bio"
            "more   more  books";
        column-gap: .7rem;
        row-gap: .2rem;
        align-items: center;
    }
    .fa-slide__body { display: contents; }

    .fa-slide__avatar {
        grid-area: avatar;
        inline-size: 3.4rem;
        block-size: 3.4rem;
        box-shadow: 0 0 0 3px var(--dream-surface, #fff), 0 0 0 4px rgba(var(--dream-primary-rgb, 146, 64, 14), .25);
    }
    .fa-slide__monogram { font-size: 1.15rem; }

    .fa-slide__name { grid-area: name; align-self: end; font-size: 1rem; }
    .fa-slide__count { grid-area: count; align-self: start; font-size: .75rem; }
    .fa-slide__bio { grid-area: bio; margin-block-start: .35rem; font-size: .78rem; line-height: 1.55; }
    .fa-slide__more { grid-area: more; justify-self: start; margin-block-start: .5rem; padding: .35rem .85rem; font-size: .75rem; }

    .fa-slide__books {
        grid-area: books;
        justify-self: end;
        align-self: end;
        margin-block-start: .5rem;
        padding-inline-end: 0;
    }
    .fa-slide__book { inline-size: 2.3rem; border-width: 1.5px; }
    .fa-slide__book + .fa-slide__book { margin-inline-start: -.75rem; }
    .fa-slide__book:nth-child(n+3) { display: block; }
    .fa-slide__book:nth-child(n+4) { display: none; }

    .fa-card__dots { margin-block-start: .55rem; }
}

@media (prefers-reduced-motion: reduce) {
    .fa-slide, .fa-slide.is-active, .fa-slide__book, .fa-card__dot { transition: none; }
}