/* ============================================================
   ABOUT SECTION — FULLY THEME-AWARE
   Handles every common dark mode pattern in one file.
   ============================================================ */

/* ── LIGHT MODE defaults ── */
:root {
    --about-section-bg:    #e8eaed;
    --about-card-bg:       #ffffff;
    --about-card-border:   rgba(0, 0, 0, 0.09);
    --about-card-shadow:   0 20px 60px rgba(0, 0, 0, 0.08);
    --about-heading:       #0d0d0d;
    --about-label:         #007bff;
    --about-body-text:     #3a3a3a;
    --about-rule:          rgba(0, 0, 0, 0.10);
    --about-btn-bg:        rgba(0, 0, 0, 0.05);
    --about-btn-border:    rgba(0, 0, 0, 0.12);
    --about-btn-text:      #0d0d0d;
    --about-btn-hover-bg:  rgba(0, 123, 255, 0.10);
    --about-accent:        #007bff;
    --about-img-bg:        #dde0e5;
    --about-mag-bg:        #f5f6f8;
    --about-mag-text:      #1a1a1a;
    --about-mag-col-rule:  rgba(0, 0, 0, 0.10);
    --about-mag-heading:   #0d0d0d;
}

/* ── DARK MODE overrides ──────────────────────────────────────
   Every selector pattern used by popular theme toggle scripts.
   One of these will match your toggle, guaranteed.
   ─────────────────────────────────────────────────────────── */
body.dark-mode,
body.dark,
body.theme-dark,
body.night-mode,
body[data-theme="dark"],
html.dark,
html.dark-mode,
html[data-theme="dark"],
[data-theme="dark"] body,
[data-bs-theme="dark"] body {
    --about-section-bg:    #050505;
    --about-card-bg:       rgba(255, 255, 255, 0.04);
    --about-card-border:   rgba(255, 255, 255, 0.08);
    --about-card-shadow:   0 40px 100px rgba(0, 0, 0, 0.45);
    --about-heading:       #ffffff;
    --about-label:         #3d9eff;
    --about-body-text:     #c8c8c8;
    --about-rule:          rgba(255, 255, 255, 0.10);
    --about-btn-bg:        rgba(255, 255, 255, 0.06);
    --about-btn-border:    rgba(255, 255, 255, 0.12);
    --about-btn-text:      #e8e8e8;
    --about-btn-hover-bg:  rgba(61, 158, 255, 0.20);
    --about-accent:        #3d9eff;
    --about-img-bg:        #1a1a1a;
    --about-mag-bg:        rgba(8, 8, 8, 0.98);
    --about-mag-text:      #c8c8c8;
    --about-mag-col-rule:  rgba(255, 255, 255, 0.10);
    --about-mag-heading:   #ffffff;
}

/* ============================================================
   1. SECTION WRAPPER
   ============================================================ */
.about-section {
    padding: 100px 5%;
    display: flex;
    justify-content: center;
    background: var(--about-section-bg);
    transition: background 0.35s ease;
}

/* ============================================================
   2. CARD
   ============================================================ */
.about-glass-card {
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: 1100px;
    width: 100%;
    background: var(--about-card-bg) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid var(--about-card-border) !important;
    border-radius: 40px;
    padding: 60px;
    box-shadow: var(--about-card-shadow);
    transition:
        background 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
    position: relative;
    z-index: 10;
}

/* ============================================================
   3. TOP ROW (image + text)
   ============================================================ */
.about-top-row {
    display: flex;
    gap: 50px;
    align-items: flex-start;
}

.about-image-side { flex: 1; }

.img-wrapper {
    overflow: hidden;
    border-radius: 25px;
    background: var(--about-img-bg);
    aspect-ratio: 1 / 1;
    transition: background 0.35s ease;
}

#about-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.4s ease;
}

.about-content-side { flex: 1.2; }

/* Label */
.about-label {
    color: var(--about-label) !important;
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 2px;
    transition: color 0.35s ease;
}

/* Heading */
.about-content-side h2 {
    font-size: 3rem;
    margin: 10px 0 20px;
    color: var(--about-heading) !important;
    transition: color 0.35s ease;
}

/* Bio paragraphs */
#about-description p,
#default-bio-content p,
.about-content-side p {
    color: var(--about-body-text) !important;
    line-height: 1.8;
    font-size: 1rem;
    transition: color 0.35s ease;
}

/* ============================================================
   4. ROLE BUTTONS
   ============================================================ */
.skills-container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
    border-top: 1px solid var(--about-rule);
    padding-top: 30px;
    transition: border-color 0.35s ease;
}

.role-btn {
    cursor: pointer;
    background: var(--about-btn-bg) !important;
    color: var(--about-btn-text) !important;
    padding: 10px 24px;
    border-radius: 100px;
    font-size: 0.9rem;
    font-weight: 500;
    border: 1px solid var(--about-btn-border) !important;
    transition:
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}

.role-btn:hover {
    background: var(--about-btn-hover-bg) !important;
    transform: translateY(-2px);
    border-color: var(--about-accent) !important;
    color: var(--about-accent) !important;
}

/* ============================================================
   5. EXPANDED / MAGAZINE VIEW
   ============================================================ */
.about-glass-card.expanded {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    z-index: 9999;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 0;
    padding: 60px 6% 80px;
    background: var(--about-mag-bg) !important;
    gap: 0;

    /* Scrollbar pushed to the very right edge, slim */
    scrollbar-width: thin;
    scrollbar-color: var(--about-accent) transparent;
}

.about-glass-card.expanded::-webkit-scrollbar        { width: 5px; }
.about-glass-card.expanded::-webkit-scrollbar-track  { background: transparent; }
.about-glass-card.expanded::-webkit-scrollbar-thumb  {
    background-color: var(--about-accent);
    border-radius: 3px;
}

/* Hide compact-view elements when expanded */
.about-glass-card.expanded .about-content-side > h2,
.about-glass-card.expanded .skills-container {
    display: none;
}

/* Also hide the standalone about-label OUTSIDE .role-document */
.about-glass-card.expanded > .about-top-row .about-label {
    display: none;
}

/* Image column: fixed width */
.about-glass-card.expanded .about-image-side {
    flex: 0 0 280px;
}

/* Content column: fill the rest, aligned to top of image */
.about-glass-card.expanded .about-content-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* ============================================================
   6. MAGAZINE TYPOGRAPHY
   ============================================================ */
.magazine-container {
    display: none;
    opacity: 0;
    width: 100%;
}

.about-glass-card.expanded .magazine-container {
    display: block;
    opacity: 1;
    animation: fadeInUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* The label inside the magazine (always visible) */
.role-document .about-label {
    display: block !important;
    color: var(--about-label) !important;
    margin-bottom: 6px;
}

.magazine-title {
    font-size: 2.5rem;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--about-mag-heading) !important;
    margin: 10px 0 30px;
    letter-spacing: -1px;
    border-bottom: 2px solid var(--about-accent);
    display: inline-block;
    padding-bottom: 5px;
    transition: color 0.35s ease;
}

.magazine-columns {
    column-count: 2;
    column-gap: 40px;
    column-rule: 1px solid var(--about-mag-col-rule);
    text-align: justify;
}

.magazine-columns p {
    font-size: 1.05rem;
    line-height: 1.9;
    color: var(--about-mag-text) !important;
    margin-bottom: 22px;
    break-inside: avoid;
    transition: color 0.35s ease;
}

/* Drop cap */
.magazine-columns p:first-of-type::first-letter {
    float: left;
    font-size: 4.5rem;
    line-height: 0.8;
    padding-right: 12px;
    padding-top: 5px;
    color: var(--about-accent);
    font-weight: 800;
    font-family: Georgia, 'Times New Roman', serif;
}

/* External link */
.role-link {
    display: inline-block;
    margin-top: 30px;
    padding: 10px 28px;
    background: var(--about-accent);
    color: #fff !important;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    font-size: 0.95rem;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.role-link:hover { opacity: 0.85; transform: translateY(-2px); }

/* ============================================================
   7. CLOSE BUTTON
   ============================================================ */
.close-magazine {
    position: fixed;
    top: 24px;
    right: 28px;
    background: var(--about-accent);
    border: none;
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    font-weight: 700;
    display: none;
    z-index: 10000;
    box-shadow: 0 5px 20px rgba(0, 123, 255, 0.35);
    transition: transform 0.2s ease, opacity 0.2s ease;
    align-items: center;
    justify-content: center;
}
.close-magazine:hover { transform: scale(1.1); opacity: 0.9; }

.about-glass-card.expanded .close-magazine {
    display: flex;
}

/* ============================================================
   8. ANIMATIONS
   ============================================================ */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   9. RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
    .about-glass-card { padding: 36px 28px; }
    .about-top-row { flex-direction: column; gap: 20px; }
    .about-content-side h2 { font-size: 2.2rem; }

    .about-glass-card.expanded { padding: 60px 5% 80px; }
    .about-glass-card.expanded .about-image-side {
        flex: 0 0 auto;
        width: 100%;
    }
    .magazine-columns { column-count: 1; }
    .magazine-title { font-size: 1.8rem; }
}

@media (max-width: 480px) {
    .about-glass-card { padding: 28px 18px; border-radius: 24px; }
    .close-magazine { top: 14px; right: 14px; }
}