/* ================================================================
   Author About Block — style.css  v2.2
   6 Designs: classic | dark | gradient | minimal | banner | glass
   Full-width / wide-width support included.

   Typography sizes & alignment are injected as inline styles from
   the global plugin settings (Settings → Author About Block).

   Mobile responsiveness is controlled via Settings → Author About
   Block → Mobile section. The dynamic <style id="aab-mobile-css">
   is output in <head> by the plugin PHP on every page load.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ── Shared base ─────────────────────────────────────────────── */
.author-about-block {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    box-sizing: border-box;
    margin: 2rem 0;
    max-width: 100%;
    overflow-x: hidden;
}

.author-about-block *,
.author-about-block *::before,
.author-about-block *::after {
    box-sizing: inherit;
}

/* Wide / Full alignment */
.author-about-block.alignfull,
.author-about-block.alignwide {
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}
.author-about-block.alignfull .aab-inner {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* Inner wrapper */
.aab-inner {
    padding: 2rem;
}

/* ── Title ───────────────────────────────────────────────────── */
.aab-title {
    display: block;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.2;
    margin: 0;
    word-break: break-word;
    /* font-size and text-align from inline styles (desktop)
       or #aab-mobile-css dynamic block (mobile) */
}

/* ── Accent line ─────────────────────────────────────────────── */
.aab-title-accent {
    display: block;
    width: 3rem;
    height: 3px;
    border-radius: 2px;
    margin-top: 0.4rem;
    margin-bottom: 1.25rem;
    /* margin-left / margin-right set via inline style for alignment */
}

/* ── Card row ────────────────────────────────────────────────── */
.aab-card {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
}

/* ── Avatar wrap — flex column: photo stacked above name ──────── */
.aab-avatar-wrap {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.65rem;
    min-width: min-content;
}

.aab-avatar {
    display: block;
    border-radius: 50%;
    object-fit: cover;
    max-width: 100%;
    /* width/height driven by inline style (desktop) or
       #aab-mobile-css dynamic block (mobile) */
}

.aab-avatar-placeholder {
    border-radius: 50%;
    background: rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Info column (bio only) ─────────────────────────────────── */
.aab-info    { flex: 1; min-width: 0; }

.aab-name {
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
    word-break: break-word;
    /* font-size and text-align from inline styles (desktop)
       or #aab-mobile-css dynamic block (mobile) */
}

.aab-bio {
    line-height: 1.75;
    margin: 0;
    word-break: break-word;
    /* font-size and text-align from inline styles (desktop)
       or #aab-mobile-css dynamic block (mobile) */
}

/* ── Tablet (≤ 900px): tighten gap ───────────────────────────── */
@media (max-width: 900px) {
    .aab-card  { gap: 1.5rem; }
    .aab-inner { padding: 1.75rem; }
}

/*
   NOTE: Mobile styles (≤ breakpoint px) are output dynamically
   by the plugin in <head> as <style id="aab-mobile-css">.
   Go to Settings → Author About Block → 📱 Mobile section to configure.
*/


/* ================================================================
   DESIGN 1 — Classic
   White card, purple accent
   ================================================================ */
.author-about-block--classic .aab-inner {
    background: #ffffff;
    border: 1px solid #e8e8f0;
    border-radius: 18px;
    box-shadow:
        0 2px 4px rgba(0,0,0,0.04),
        0 8px 28px rgba(108,99,255,0.09);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.author-about-block--classic .aab-inner:hover {
    box-shadow:
        0 4px 8px rgba(0,0,0,0.06),
        0 16px 40px rgba(108,99,255,0.15);
    transform: translateY(-2px);
}
.author-about-block--classic .aab-title        { color: #1a1a2e; }
.author-about-block--classic .aab-title-accent { background: linear-gradient(90deg, #6c63ff, #48bfe3); }
.author-about-block--classic .aab-avatar {
    border: 3px solid #fff;
    box-shadow: 0 0 0 3px #6c63ff, 0 4px 14px rgba(108,99,255,0.3);
}
.author-about-block--classic .aab-name { color: #1a1a2e; }
.author-about-block--classic .aab-bio  { color: #4a4a68; }


/* ================================================================
   DESIGN 2 — Dark
   Deep slate, glowing avatar
   ================================================================ */
.author-about-block--dark .aab-inner {
    background: #12131f;
    border-radius: 18px;
    border: 1px solid #2a2b3d;
    box-shadow: 0 0 40px rgba(108,99,255,0.12);
}
.author-about-block--dark .aab-title        { color: #e8e8ff; }
.author-about-block--dark .aab-title-accent { background: linear-gradient(90deg, #8b82ff, #63d9fa); }
.author-about-block--dark .aab-avatar {
    border: 3px solid #12131f;
    box-shadow: 0 0 0 3px #8b82ff, 0 0 20px rgba(139,130,255,0.45);
}
.author-about-block--dark .aab-name { color: #ffffff; }
.author-about-block--dark .aab-bio  { color: #a0a0c0; }


/* ================================================================
   DESIGN 3 — Gradient
   Purple to indigo to teal
   ================================================================ */
.author-about-block--gradient .aab-inner {
    background: linear-gradient(135deg, #6c63ff 0%, #3b3fce 45%, #0ea5e9 100%);
    border-radius: 18px;
    box-shadow: 0 12px 48px rgba(108,99,255,0.35);
}
.author-about-block--gradient .aab-title        { color: #ffffff; }
.author-about-block--gradient .aab-title-accent { background: rgba(255,255,255,0.5); }
.author-about-block--gradient .aab-avatar {
    border: 3px solid rgba(255,255,255,0.3);
    box-shadow: 0 0 0 3px rgba(255,255,255,0.6), 0 6px 18px rgba(0,0,0,0.2);
}
.author-about-block--gradient .aab-name { color: #ffffff; }
.author-about-block--gradient .aab-bio  { color: rgba(255,255,255,0.88); }


/* ================================================================
   DESIGN 4 — Minimal
   No box, just a top border line
   ================================================================ */
.author-about-block--minimal .aab-inner {
    background: transparent;
    padding-top: 1.5rem;
    border-top: 3px solid #6c63ff;
}
.author-about-block--minimal .aab-title        { color: #111; }
.author-about-block--minimal .aab-title-accent { background: linear-gradient(90deg, #6c63ff, #48bfe3); opacity: 0.5; }
.author-about-block--minimal .aab-avatar {
    border: 2px solid #e0e0e0;
    box-shadow: none;
    filter: grayscale(15%);
}
.author-about-block--minimal .aab-name { color: #111111; }
.author-about-block--minimal .aab-bio  { color: #444444; }


/* ================================================================
   DESIGN 5 — Banner
   Left coloured panel with avatar+name, right bio
   ================================================================ */
.author-about-block--banner .aab-inner {
    background: #ffffff;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid #eaeaf4;
    box-shadow: 0 6px 24px rgba(0,0,0,0.07);
    padding: 0;
}
.author-about-block--banner .aab-title {
    padding: 1.75rem 2rem 0;
    color: #1a1a2e;
}
.author-about-block--banner .aab-title-accent {
    background: linear-gradient(90deg, #f97316, #ec4899);
    margin-left: 2rem;
    margin-right: auto;
}
.author-about-block--banner .aab-card {
    gap: 0;
    align-items: stretch;
}
.author-about-block--banner .aab-avatar-wrap {
    background: linear-gradient(160deg, #f97316, #ec4899);
    justify-content: center;
    padding: 2rem 1.5rem;
    min-width: 160px;
    gap: 0.75rem;
}
.author-about-block--banner .aab-avatar {
    border: 4px solid rgba(255,255,255,0.9);
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.author-about-block--banner .aab-info { padding: 1.5rem 2rem; }
.author-about-block--banner .aab-name { color: #ffffff; }
.author-about-block--banner .aab-bio  { color: #555570; }


/* ================================================================
   DESIGN 6 — Glass
   Frosted glassmorphism
   ================================================================ */
.author-about-block--glass {
    background: linear-gradient(135deg, #e0eaff 0%, #f0e6ff 100%);
    border-radius: 22px;
    padding: 2px;
}
.author-about-block--glass .aab-inner {
    background: rgba(255,255,255,0.52);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.7);
    box-shadow:
        0 2px 4px rgba(108,99,255,0.06),
        0 12px 32px rgba(108,99,255,0.12);
}
.author-about-block--glass .aab-title        { color: #2d2b55; }
.author-about-block--glass .aab-title-accent { background: linear-gradient(90deg, #a78bfa, #818cf8); }
.author-about-block--glass .aab-avatar {
    border: 3px solid rgba(255,255,255,0.8);
    box-shadow: 0 0 0 3px #a78bfa, 0 6px 18px rgba(167,139,250,0.3);
}
.author-about-block--glass .aab-name { color: #1e1b4b; }
.author-about-block--glass .aab-bio  { color: #3d3a6b; }
