/*
|--------------------------------------------------------------------------
| CyberDojo - About Page
|--------------------------------------------------------------------------
|
| Public About page styling.
|
| Handles:
|
| - About hero
| - Values list
| - Hero imagery
| - Sensei section
| - Experience badge
| - Sensei quote
| - CyberDojo pillars
| - Optional CMS content
| - CTA
| - Reveal states
| - Responsive layouts
|
*/


/*
|--------------------------------------------------------------------------
| Page Sections
|--------------------------------------------------------------------------
*/

.about-hero,
.about-sensei,
.about-pillars,
.about-cms,
.about-cta {
    position: relative;

    width: 100%;

    padding:
        var(--space-20)
        0;
}


.about-hero,
.about-pillars,
.about-cms {
    background:
        var(--bg-primary);
}


.about-sensei,
.about-cta {
    background:
        var(--bg-secondary);
}


/*
|--------------------------------------------------------------------------
| Container
|--------------------------------------------------------------------------
*/

.about-container {
    width:
        min(
            var(--container-width),
            calc(
                100%
                - (
                    var(--container-padding)
                    * 2
                )
            )
        );

    margin:
        0
        auto;
}


/*
|--------------------------------------------------------------------------
| Section Eyebrow
|--------------------------------------------------------------------------
*/

.about-page
.section-eyebrow {
    display: inline-flex;

    align-items: center;

    gap:
        var(--space-3);

    color:
        var(--accent);

    font-size:
        var(--text-sm);

    font-weight:
        var(--font-black);

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;
}


.about-page
.section-eyebrow::before {
    content: "";

    width: 30px;
    height: 3px;

    border-radius:
        var(--radius-pill);

    background:
        var(--accent);
}


/*
|--------------------------------------------------------------------------
| Hero
|--------------------------------------------------------------------------
*/

.about-hero {
    overflow: hidden;
}


.about-hero::before {
    content: "";

    position: absolute;

    top: -220px;
    right: -180px;

    width: 560px;
    height: 560px;

    border-radius:
        var(--radius-round);

    background:
        radial-gradient(
            circle,
            rgba(
                var(--accent-rgb),
                0.10
            ),
            transparent 68%
        );

    pointer-events: none;
}


/*
|--------------------------------------------------------------------------
| Hero Grid
|--------------------------------------------------------------------------
*/

.about-hero-grid,
.about-sensei-grid {
    position: relative;

    z-index: 1;

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:
        var(--space-12);

    align-items: center;
}


/*
|--------------------------------------------------------------------------
| Hero Content
|--------------------------------------------------------------------------
*/

.about-hero-content,
.sensei-content {
    min-width: 0;
}


/*
|--------------------------------------------------------------------------
| Main Title
|--------------------------------------------------------------------------
*/

.about-title {
    max-width: 760px;

    margin:
        var(--space-3)
        0
        0;

    color:
        var(--text-primary);

    font-size:
        clamp(
            2.6rem,
            5vw,
            4.7rem
        );

    font-weight:
        var(--font-black);

    line-height:
        0.98;

    letter-spacing:
        -0.045em;
}


.about-title span {
    color:
        var(--accent);
}


/*
|--------------------------------------------------------------------------
| Divider
|--------------------------------------------------------------------------
*/

.section-divider {
    width: 70px;
    height: 3px;

    margin:
        var(--space-5)
        0
        var(--space-6);

    border-radius:
        var(--radius-pill);

    background:
        var(--accent);
}


/*
|--------------------------------------------------------------------------
| Paragraphs
|--------------------------------------------------------------------------
*/

.about-hero-content p,
.sensei-content p,
.about-section-heading p,
.about-cta p {
    color:
        var(--text-muted);

    line-height:
        var(--leading-relaxed);
}


.about-hero-content p,
.sensei-content p {
    margin:
        0
        0
        var(--space-4);
}


.about-lead,
.sensei-lead {
    color:
        var(--text-secondary)
        !important;

    font-size:
        var(--text-lg);

    line-height:
        var(--leading-relaxed);
}


/*
|--------------------------------------------------------------------------
| Values List
|--------------------------------------------------------------------------
*/

.about-values-list {
    display: grid;

    gap:
        var(--space-3);

    margin:
        var(--space-6)
        0;

    padding: 0;

    list-style:
        none;
}


.about-values-list li {
    display: flex;

    align-items: flex-start;

    gap:
        var(--space-3);

    padding:
        var(--space-3)
        var(--space-4);

    border:
        1px solid
        var(--border-neutral);

    border-radius:
        var(--radius-md);

    background:
        rgba(
            255,
            255,
            255,
            0.018
        );
}


.about-values-list i {
    flex-shrink: 0;

    margin-top:
        3px;

    color:
        var(--accent);
}


.about-values-list strong,
.about-values-list span {
    display: block;
}


.about-values-list strong {
    color:
        var(--text-primary);

    font-size:
        var(--text-sm);

    font-weight:
        var(--font-extrabold);
}


.about-values-list span {
    margin-top:
        3px;

    color:
        var(--text-muted);

    font-size:
        var(--text-xs);

    line-height:
        1.5;
}


/*
|--------------------------------------------------------------------------
| Motto
|--------------------------------------------------------------------------
*/

.about-motto {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap:
        var(--space-2);

    margin-top:
        var(--space-6);

    color:
        var(--accent);

    font-size:
        var(--text-sm);

    font-weight:
        var(--font-black);

    letter-spacing:
        0.04em;
}


.about-motto
span[aria-hidden="true"] {
    color:
        var(--text-subtle);
}


/*
|--------------------------------------------------------------------------
| Image Frames
|--------------------------------------------------------------------------
*/

.about-image-frame,
.sensei-image-frame {
    position: relative;

    min-width: 0;
}


/*
|--------------------------------------------------------------------------
| Images
|--------------------------------------------------------------------------
*/

.about-image,
.sensei-image {
    position: relative;

    z-index: 1;

    display: block;

    width: 100%;

    border:
        1px solid
        var(--border-primary);

    border-radius:
        var(--radius-2xl);

    object-fit: cover;

    box-shadow:
        var(--shadow-lg);
}


/*
|--------------------------------------------------------------------------
| About Image Accent
|--------------------------------------------------------------------------
*/

.about-image-accent {
    position: absolute;

    right: -12px;
    bottom: -12px;

    z-index: 2;

    width: 96px;
    height: 96px;

    border-right:
        3px solid
        var(--accent);

    border-bottom:
        3px solid
        var(--accent);

    border-radius:
        0
        0
        var(--radius-xl)
        0;

    pointer-events: none;
}


/*
|--------------------------------------------------------------------------
| Sensei Section
|--------------------------------------------------------------------------
*/

.about-sensei {
    overflow: hidden;
}


.about-sensei::before {
    content: "";

    position: absolute;

    left: -200px;
    bottom: -260px;

    width: 520px;
    height: 520px;

    border-radius:
        var(--radius-round);

    background:
        radial-gradient(
            circle,
            rgba(
                var(--accent-rgb),
                0.07
            ),
            transparent 70%
        );

    pointer-events: none;
}


/*
|--------------------------------------------------------------------------
| Sensei Heading
|--------------------------------------------------------------------------
*/

.sensei-content h2 {
    margin:
        var(--space-3)
        0
        0;

    color:
        var(--text-primary);

    font-size:
        clamp(
            2.1rem,
            4vw,
            3.5rem
        );

    font-weight:
        var(--font-black);

    line-height:
        1.05;

    letter-spacing:
        -0.03em;
}


.sensei-content h2 span {
    color:
        var(--accent);
}


/*
|--------------------------------------------------------------------------
| Sensei Experience Badge
|--------------------------------------------------------------------------
*/

.sensei-experience-badge {
    position: absolute;

    right: -20px;
    bottom: 24px;

    z-index: 3;

    max-width: 200px;

    padding:
        var(--space-4);

    border:
        1px solid
        var(--border-primary);

    border-radius:
        var(--radius-lg);

    background:
        rgba(
            10,
            10,
            10,
            0.95
        );

    box-shadow:
        var(--shadow-md);

    -webkit-backdrop-filter:
        blur(12px);

    backdrop-filter:
        blur(12px);
}


.sensei-experience-badge strong,
.sensei-experience-badge span {
    display: block;
}


.sensei-experience-badge strong {
    color:
        var(--accent);

    font-size:
        1.9rem;

    font-weight:
        var(--font-black);

    line-height: 1;
}


.sensei-experience-badge span {
    margin-top:
        5px;

    color:
        var(--text-muted);

    font-size:
        var(--text-xs);

    line-height:
        1.4;
}


/*
|--------------------------------------------------------------------------
| Sensei Quote
|--------------------------------------------------------------------------
*/

.sensei-quote {
    position: relative;

    margin:
        var(--space-6)
        0
        0;

    padding:
        var(--space-5)
        var(--space-5)
        var(--space-5)
        var(--space-8);

    border:
        1px solid
        var(--border-primary);

    border-left:
        3px solid
        var(--accent);

    border-radius:
        var(--radius-lg);

    background:
        linear-gradient(
            135deg,
            var(--accent-bg-soft),
            rgba(
                255,
                255,
                255,
                0.01
            )
        );
}


.sensei-quote > i {
    position: absolute;

    top: 16px;
    left: 16px;

    color:
        var(--accent);

    font-size:
        1.2rem;
}


.sensei-quote p {
    margin:
        0
        0
        var(--space-3);

    color:
        var(--text-secondary);

    font-size:
        var(--text-base);

    font-style:
        italic;

    line-height:
        var(--leading-relaxed);
}


.sensei-quote cite {
    color:
        var(--accent);

    font-size:
        var(--text-xs);

    font-style:
        normal;

    font-weight:
        var(--font-bold);

    letter-spacing:
        0.03em;
}


/*
|--------------------------------------------------------------------------
| Section Heading
|--------------------------------------------------------------------------
*/

.about-section-heading {
    max-width:
        780px;

    margin:
        0
        auto
        var(--space-10);

    text-align:
        center;
}


.about-section-heading
.section-eyebrow {
    justify-content:
        center;
}


.about-section-heading h2 {
    margin:
        var(--space-3)
        0
        var(--space-4);

    color:
        var(--text-primary);

    font-size:
        clamp(
            2rem,
            4vw,
            3.2rem
        );

    font-weight:
        var(--font-black);

    line-height:
        1.08;

    letter-spacing:
        -0.025em;
}


.about-section-heading h2 span {
    color:
        var(--accent);
}


.about-section-heading p {
    margin: 0;

    color:
        var(--text-muted);

    line-height:
        var(--leading-relaxed);
}


/*
|--------------------------------------------------------------------------
| Pillar Grid
|--------------------------------------------------------------------------
*/

.about-card-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap:
        var(--space-5);
}


/*
|--------------------------------------------------------------------------
| Pillar Card
|--------------------------------------------------------------------------
*/

.about-card {
    min-width: 0;

    padding:
        var(--space-6);

    border:
        1px solid
        var(--border-primary);

    border-radius:
        var(--radius-xl);

    background:
        var(--bg-card);

    box-shadow:
        var(--shadow-sm);

    transition:
        border-color var(--transition-normal),
        transform var(--transition-normal),
        box-shadow var(--transition-normal);
}


.about-card:hover {
    border-color:
        var(--border-hover);

    transform:
        translateY(-4px);

    box-shadow:
        var(--shadow-accent);
}


/*
|--------------------------------------------------------------------------
| Pillar Icon
|--------------------------------------------------------------------------
*/

.about-card-icon {
    display: grid;

    place-items: center;

    width: 52px;
    height: 52px;

    margin-bottom:
        var(--space-5);

    border:
        1px solid
        var(--border-primary);

    border-radius:
        var(--radius-lg);

    background:
        var(--accent-bg);

    color:
        var(--accent);

    font-size:
        1.15rem;
}


/*
|--------------------------------------------------------------------------
| Pillar Content
|--------------------------------------------------------------------------
*/

.about-card h3 {
    margin: 0;

    color:
        var(--text-primary);

    font-size:
        var(--text-xl);

    font-weight:
        var(--font-extrabold);
}


.about-card p {
    margin:
        var(--space-3)
        0
        0;

    color:
        var(--text-muted);

    font-size:
        var(--text-sm);

    line-height:
        var(--leading-relaxed);
}


/*
|--------------------------------------------------------------------------
| CMS Content
|--------------------------------------------------------------------------
*/

.about-cms-card {
    padding:
        var(--space-8);

    border:
        1px solid
        var(--border-primary);

    border-radius:
        var(--radius-xl);

    background:
        var(--bg-card);

    box-shadow:
        var(--shadow-sm);
}


/*
|--------------------------------------------------------------------------
| CMS Typography
|--------------------------------------------------------------------------
*/

.about-cms-card h1,
.about-cms-card h2,
.about-cms-card h3,
.about-cms-card h4,
.about-cms-card h5,
.about-cms-card h6 {
    color:
        var(--text-primary);
}


.about-cms-card p,
.about-cms-card li {
    color:
        var(--text-muted);

    line-height:
        var(--leading-relaxed);
}


.about-cms-card a {
    color:
        var(--accent);

    text-decoration:
        underline;
}


.about-cms-card img {
    max-width: 100%;

    height: auto;

    border-radius:
        var(--radius-lg);
}


/*
|--------------------------------------------------------------------------
| CTA
|--------------------------------------------------------------------------
*/

.about-cta-card {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap:
        var(--space-8);

    padding:
        var(--space-8);

    border:
        1px solid
        var(--border-primary);

    border-radius:
        var(--radius-xl);

    background:
        linear-gradient(
            145deg,
            var(--bg-card),
            rgba(
                var(--accent-rgb),
                0.035
            )
        );

    box-shadow:
        var(--shadow-md);
}


/*
|--------------------------------------------------------------------------
| CTA Content
|--------------------------------------------------------------------------
*/

.about-cta-content {
    min-width: 0;
}


.about-cta h2 {
    margin:
        var(--space-3)
        0
        var(--space-4);

    color:
        var(--text-primary);

    font-size:
        clamp(
            2rem,
            4vw,
            3rem
        );

    font-weight:
        var(--font-black);

    line-height:
        1.08;
}


.about-cta h2 span {
    color:
        var(--accent);
}


.about-cta p {
    max-width:
        650px;

    margin: 0;

    color:
        var(--text-muted);

    line-height:
        var(--leading-relaxed);
}


/*
|--------------------------------------------------------------------------
| CTA Actions
|--------------------------------------------------------------------------
*/

.about-cta-actions {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    flex-wrap: wrap;

    gap:
        var(--space-3);

    flex-shrink: 0;
}


/*
|--------------------------------------------------------------------------
| Reveal Animation
|--------------------------------------------------------------------------
|
| Used by:
|
| /assets/js/pages/about.js
|
*/

[data-reveal] {
    opacity: 1;

    transform:
        none;
}


.js
[data-about-page]
[data-reveal] {
    opacity: 0;

    transform:
        translateY(24px);

    transition:
        opacity
        600ms
        ease,
        transform
        600ms
        ease;
}


.js
[data-about-page]
[data-reveal].is-visible {
    opacity: 1;

    transform:
        translateY(0);
}


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 900px) {

    .about-hero,
    .about-sensei,
    .about-pillars,
    .about-cms,
    .about-cta {
        padding:
            var(--space-16)
            0;
    }


    .about-hero-grid,
    .about-sensei-grid {
        grid-template-columns:
            1fr;

        gap:
            var(--space-8);
    }


    .about-card-grid {
        grid-template-columns:
            1fr;
    }


    .about-hero-media,
    .sensei-media {
        max-width:
            720px;
    }


    .sensei-experience-badge {
        position: static;

        max-width: none;

        margin-top:
            var(--space-3);
    }


    .about-cta-card {
        flex-direction:
            column;

        align-items:
            flex-start;
    }


    .about-cta-actions {
        justify-content:
            flex-start;
    }

}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 640px) {

    .about-hero,
    .about-sensei,
    .about-pillars,
    .about-cms,
    .about-cta {
        padding:
            var(--space-12)
            0;
    }


    .about-title {
        font-size:
            clamp(
                2.3rem,
                12vw,
                3.35rem
            );
    }


    .sensei-content h2 {
        font-size:
            clamp(
                2rem,
                10vw,
                3rem
            );
    }


    .about-lead,
    .sensei-lead {
        font-size:
            var(--text-base);
    }


    .about-motto {
        font-size:
            var(--text-xs);
    }


    .about-card {
        padding:
            var(--space-5);
    }


    .about-cms-card {
        padding:
            var(--space-5);
    }


    .about-cta-card {
        padding:
            var(--space-5);
    }


    .about-cta-actions {
        width: 100%;
    }


    .about-cta-actions
    .btn-primary,
    .about-cta-actions
    .btn-secondary {
        width: 100%;
    }

}


/*
|--------------------------------------------------------------------------
| Very Small Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 430px) {

    .about-values-list li {
        padding:
            var(--space-3);
    }


    .about-image-accent {
        right: -6px;
        bottom: -6px;

        width: 72px;
        height: 72px;
    }


    .sensei-quote {
        padding:
            var(--space-5)
            var(--space-4)
            var(--space-5)
            var(--space-7, 28px);
    }

}


/*
|--------------------------------------------------------------------------
| Reduced Motion
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion: reduce) {

    .about-card,
    [data-reveal] {
        transition:
            none;
    }


    .js
    [data-about-page]
    [data-reveal] {
        opacity: 1;

        transform:
            none;
    }

}