/* =========================================================
   ECHTLEDERJACKEN
   Unsere Geschichte
   our-story.css
   ========================================================= */


/* ---------------------------------------------------------
   FOUNDATION
   --------------------------------------------------------- */

.story-page {
    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;

    background-color:
        var(--color-secondary);

    overflow-x:
        clip;
}


body.page-template-page-our-story
.site-main,
body.page-template-page-our-story
#main {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
}


.story-container {
    width: 100%;
    max-width: 1560px;

    margin-inline: auto;

    padding-inline:
        clamp(1.5rem, 4.5vw, 5rem);
}


.story-index {
    display:
        block;

    margin-bottom:
        1rem;

    color:
        var(--color-accent-gold);

    font-family:
        var(--font-display);

    font-size:
        0.82rem;

    font-style:
        italic;
}


/* ---------------------------------------------------------
   BREADCRUMB
   --------------------------------------------------------- */

.story-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap:
        0.55rem;

    margin-bottom:
        clamp(2.25rem, 4vw, 4rem);

    color:
        var(--color-text-muted);

    font-size:
        0.58rem;

    font-weight:
        650;

    letter-spacing:
        0.075em;

    text-transform:
        uppercase;
}


.story-breadcrumb
a {
    color:
        inherit;

    text-decoration:
        none;
}


.story-breadcrumb
a:hover {
    color:
        var(--color-accent-gold);
}


/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */

.story-hero {
    padding:
        clamp(2.5rem, 5vw, 5rem)
        0
        clamp(5rem, 9vw, 9rem);

    border-bottom:
        1px solid var(--color-border);
}


.story-hero__grid {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(340px, 0.8fr);

    gap:
        clamp(4rem, 8vw, 10rem);

    align-items:
        end;
}


.story-hero
h1 {
    max-width:
        1000px;

    margin:
        0;

    color:
        var(--color-primary);

    font-family:
        var(--font-display);

    font-size:
        clamp(3.7rem, 6.4vw, 7rem);

    font-weight:
        400;

    line-height:
        0.93;

    letter-spacing:
        -0.055em;
}


.story-hero__intro {
    padding-top:
        1.5rem;

    border-top:
        1px solid var(--color-primary);
}


.story-hero__intro
p {
    margin:
        0
        0
        1.25rem;

    color:
        var(--color-text-muted);

    font-size:
        0.94rem;

    line-height:
        1.8;
}


.story-hero__intro
p:last-child {
    margin-bottom:
        0;
}


/* ---------------------------------------------------------
   SHARED SECTION HEADING
   --------------------------------------------------------- */

.story-section-heading {
    max-width:
        940px;

    margin-bottom:
        clamp(2.75rem, 5vw, 5rem);
}


.story-section-heading
h2 {
    margin: 0;

    color:
        var(--color-primary);

    font-size:
        clamp(2.6rem, 4.2vw, 4.6rem);

    line-height:
        0.98;
}


.story-section-heading--split {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(340px, 520px);

    gap:
        clamp(3rem, 7vw, 8rem);

    max-width:
        none;

    align-items:
        end;
}


.story-section-heading--split
> p {
    margin:
        0
        0
        0.3rem;

    color:
        var(--color-text-muted);

    line-height:
        1.8;
}


/* ---------------------------------------------------------
   ORIGIN
   --------------------------------------------------------- */

.story-origin {
    padding:
        clamp(5rem, 9vw, 9rem)
        0;
}


.story-origin__grid {
    display:
        grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(420px, 1.1fr);

    gap:
        clamp(4rem, 9vw, 10rem);
}


.story-origin__statement
h2 {
    max-width:
        700px;

    margin:
        0;

    color:
        var(--color-primary);

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

    line-height:
        0.98;
}


.story-origin__copy {
    border-top:
        1px solid var(--color-primary);

    padding-top:
        1.5rem;
}


.story-origin__copy
p {
    margin:
        0
        0
        1.4rem;

    color:
        var(--color-text-muted);

    line-height:
        1.85;
}


.story-origin__copy
.story-lead {
    color:
        var(--color-primary);

    font-family:
        var(--font-display);

    font-size:
        clamp(1.45rem, 2vw, 1.9rem);

    line-height:
        1.5;
}


/* ---------------------------------------------------------
   PRINCIPLES
   --------------------------------------------------------- */

.story-principles {
    padding:
        clamp(5rem, 9vw, 9rem)
        0;

    background-color:
        var(--color-background-alt);

    border-top:
        1px solid var(--color-border);
    border-bottom:
        1px solid var(--color-border);
}


.story-principles__grid {
    display:
        grid;

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

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

    border-bottom:
        1px solid var(--color-border);
}


.story-principles__grid
article {
    min-height:
        270px;

    padding:
        1.5rem;
}


.story-principles__grid
article
+ article {
    border-left:
        1px solid var(--color-border);
}


.story-principles__grid
article
> span {
    display:
        block;

    margin-bottom:
        clamp(3rem, 5vw, 5rem);

    color:
        var(--color-accent-gold);

    font-family:
        var(--font-display);

    font-size:
        0.75rem;

    font-style:
        italic;
}


.story-principles__grid
h3 {
    margin:
        0
        0
        0.75rem;

    color:
        var(--color-primary);

    font-family:
        var(--font-display);

    font-size:
        1.45rem;

    font-weight:
        400;

    line-height:
        1.1;
}


.story-principles__grid
p {
    margin: 0;

    color:
        var(--color-text-muted);

    font-size:
        0.78rem;

    line-height:
        1.7;
}


/* ---------------------------------------------------------
   FOUNDER
   --------------------------------------------------------- */

.story-founder {
    padding:
        clamp(5rem, 9vw, 9rem)
        0;

    background-color:
        var(--color-primary);

    color:
        var(--color-secondary);
}


.story-founder__grid {
    display:
        grid;

    grid-template-columns:
        minmax(300px, 0.8fr)
        minmax(0, 1.2fr);

    gap:
        clamp(4rem, 9vw, 10rem);

    align-items:
        center;
}


.story-founder__identity {
    max-width:
        520px;
}


.story-founder__monogram {
    display:
        flex;

    align-items:
        center;
    justify-content:
        center;

    aspect-ratio:
        4 / 5;

    width:
        100%;

    background:
        linear-gradient(
            145deg,
            #1d2d33,
            #101b1f
        );

    border:
        1px solid rgba(249, 254, 252, 0.14);

    overflow:
        hidden;
}


.story-founder__monogram
span {
    color:
        rgba(205, 145, 60, 0.76);

    font-family:
        var(--font-display);

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

    font-style:
        italic;

    letter-spacing:
        -0.08em;

    transform:
        translateX(-0.05em);
}


.story-founder__identity-meta {
    display:
        flex;

    align-items:
        baseline;
    justify-content:
        space-between;

    gap:
        1rem;

    padding:
        1rem
        0;

    border-bottom:
        1px solid rgba(249, 254, 252, 0.18);
}


.story-founder__identity-meta
span {
    color:
        var(--color-accent-gold);

    font-size:
        0.55rem;

    font-weight:
        700;

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;
}


.story-founder__identity-meta
strong {
    color:
        var(--color-secondary);

    font-family:
        var(--font-display);

    font-size:
        1.2rem;

    font-weight:
        400;
}


.story-founder
.eyebrow {
    color:
        var(--color-accent-gold);
}


.story-founder__content
h2 {
    max-width:
        780px;

    margin:
        0
        0
        2rem;

    color:
        var(--color-secondary);

    font-size:
        clamp(2.8rem, 4.8vw, 5.1rem);

    line-height:
        0.98;
}


.story-founder__content
blockquote {
    margin:
        0
        0
        2rem;

    padding:
        1.5rem
        0
        1.5rem
        1.5rem;

    border-left:
        1px solid var(--color-accent-gold);
}


.story-founder__content
blockquote
p {
    margin: 0;

    color:
        var(--color-secondary);

    font-family:
        var(--font-display);

    font-size:
        clamp(1.3rem, 2vw, 1.8rem);

    line-height:
        1.5;
}


.story-founder__content
> p {
    max-width:
        760px;

    margin: 0;

    color:
        rgba(249, 254, 252, 0.64);

    line-height:
        1.8;
}


/* ---------------------------------------------------------
   PROCESS
   --------------------------------------------------------- */

.story-process {
    padding:
        clamp(5rem, 9vw, 9rem)
        0;
}


.story-process__grid {
    display:
        grid;

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

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

    border-bottom:
        1px solid var(--color-border);
}


.story-process__grid
article {
    min-height:
        270px;

    padding:
        1.5rem;
}


.story-process__grid
article
+ article {
    border-left:
        1px solid var(--color-border);
}


.story-process__grid
article
> span {
    display:
        block;

    margin-bottom:
        clamp(3rem, 5vw, 5rem);

    color:
        var(--color-accent-gold);

    font-family:
        var(--font-display);

    font-size:
        0.75rem;

    font-style:
        italic;
}


.story-process__grid
h3 {
    margin:
        0
        0
        0.7rem;

    color:
        var(--color-primary);

    font-family:
        var(--font-display);

    font-size:
        1.4rem;

    font-weight:
        400;
}


.story-process__grid
p {
    margin: 0;

    color:
        var(--color-text-muted);

    font-size:
        0.78rem;

    line-height:
        1.7;
}


/* ---------------------------------------------------------
   GUIDES
   --------------------------------------------------------- */

.story-guides {
    padding:
        clamp(5rem, 9vw, 9rem)
        0;

    background-color:
        var(--color-background-alt);

    border-top:
        1px solid var(--color-border);
    border-bottom:
        1px solid var(--color-border);
}


.story-guides__grid {
    display:
        grid;

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

    gap:
        1rem;
}


.story-guides__grid
a {
    display:
        grid;

    grid-template-columns:
        42px
        minmax(0, 1fr)
        auto;

    gap:
        1rem;

    align-items:
        center;

    min-height:
        160px;

    padding:
        1.5rem;

    background-color:
        var(--color-secondary);

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

    color:
        var(--color-primary);

    text-decoration:
        none;

    transition:
        border-color var(--transition-fast);
}


.story-guides__grid
a:hover {
    border-color:
        var(--color-accent-gold);
}


.story-guides__number {
    color:
        var(--color-accent-gold);

    font-family:
        var(--font-display);

    font-size:
        0.76rem;

    font-style:
        italic;
}


.story-guides__meta {
    display:
        block;

    margin-bottom:
        0.45rem;

    color:
        var(--color-text-muted);

    font-size:
        0.53rem;

    font-weight:
        700;

    letter-spacing:
        0.075em;

    text-transform:
        uppercase;
}


.story-guides__grid
strong {
    display:
        block;

    font-family:
        var(--font-display);

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

    font-weight:
        400;
}


.story-guides__grid
a
> span:last-child {
    color:
        var(--color-accent-gold);

    transition:
        transform var(--transition-fast);
}


.story-guides__grid
a:hover
> span:last-child {
    transform:
        translateX(4px);
}


/* ---------------------------------------------------------
   CATEGORIES
   --------------------------------------------------------- */

.story-categories {
    padding:
        clamp(5rem, 9vw, 9rem)
        0;
}


.story-categories__grid {
    display:
        grid;

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

    gap:
        1rem;
}


.story-categories__grid
a {
    display:
        grid;

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

    gap:
        0.5rem
        1rem;

    min-height:
        220px;

    padding:
        1.5rem;

    background-color:
        var(--color-primary);

    color:
        var(--color-secondary);

    text-decoration:
        none;
}


.story-categories__grid
a
> span:first-child {
    grid-column:
        1 / -1;

    color:
        var(--color-accent-gold);

    font-size:
        0.55rem;

    font-weight:
        700;

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;
}


.story-categories__grid
strong {
    align-self:
        end;

    font-family:
        var(--font-display);

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

    font-weight:
        400;

    line-height:
        1;
}


.story-categories__grid
a
> span:last-child {
    align-self:
        end;

    color:
        var(--color-accent-gold);

    font-size:
        1.1rem;

    transition:
        transform var(--transition-fast);
}


.story-categories__grid
a:hover
> span:last-child {
    transform:
        translateX(5px);
}


/* ---------------------------------------------------------
   FINAL CTA
   --------------------------------------------------------- */

.story-final {
    padding:
        clamp(4.5rem, 8vw, 8rem)
        0;

    background-color:
        var(--color-background-alt);

    border-top:
        1px solid var(--color-border);
}


.story-final__inner {
    display:
        grid;

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

    gap:
        clamp(3rem, 7vw, 8rem);

    align-items:
        end;
}


.story-final
h2 {
    max-width:
        1000px;

    margin: 0;

    color:
        var(--color-primary);

    font-size:
        clamp(2.7rem, 4.6vw, 4.9rem);

    line-height:
        0.98;
}


.story-final__button {
    display:
        inline-flex;

    align-items:
        center;
    justify-content:
        space-between;

    gap:
        1.5rem;

    min-width:
        260px;

    min-height:
        54px;

    padding:
        1rem
        1.15rem !important;
}


.story-final__button
span {
    color:
        var(--color-accent-gold);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .story-hero__grid,
    .story-origin__grid,
    .story-founder__grid {
        grid-template-columns:
            1fr;

        gap:
            3rem;
    }


    .story-section-heading--split {
        grid-template-columns:
            1fr;

        gap:
            1.25rem;
    }


    .story-founder__identity {
        max-width:
            440px;
    }


    .story-principles__grid,
    .story-process__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .story-principles__grid
    article:nth-child(3),
    .story-process__grid
    article:nth-child(3) {
        border-left:
            0;

        border-top:
            1px solid var(--color-border);
    }


    .story-principles__grid
    article:nth-child(4),
    .story-process__grid
    article:nth-child(4) {
        border-top:
            1px solid var(--color-border);
    }


    .story-final__inner {
        grid-template-columns:
            1fr;

        gap:
            2rem;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 680px) {

    .story-container {
        padding-inline:
            1.25rem;
    }


    .story-hero {
        padding-top:
            2rem;

        padding-bottom:
            4.5rem;
    }


    .story-hero
    h1 {
        font-size:
            clamp(3rem, 14vw, 4.7rem);
    }


    .story-principles__grid,
    .story-process__grid,
    .story-guides__grid,
    .story-categories__grid {
        grid-template-columns:
            1fr;
    }


    .story-principles__grid
    article,
    .story-principles__grid
    article:nth-child(3),
    .story-principles__grid
    article:nth-child(4),
    .story-process__grid
    article,
    .story-process__grid
    article:nth-child(3),
    .story-process__grid
    article:nth-child(4) {
        min-height:
            0;

        border-left:
            0;

        border-top:
            1px solid var(--color-border);
    }


    .story-principles__grid
    article:first-child,
    .story-process__grid
    article:first-child {
        border-top:
            0;
    }


    .story-principles__grid
    article
    > span,
    .story-process__grid
    article
    > span {
        margin-bottom:
            2rem;
    }


    .story-founder__identity {
        max-width:
            none;
    }


    .story-founder__monogram {
        aspect-ratio:
            1 / 1;
    }


    .story-founder__content
    h2 {
        font-size:
            clamp(2.6rem, 12vw, 4rem);
    }


    .story-guides__grid
    a {
        grid-template-columns:
            32px
            minmax(0, 1fr)
            auto;

        min-height:
            140px;

        padding:
            1.15rem;
    }


    .story-categories__grid
    a {
        min-height:
            180px;
    }


    .story-final
    h2 {
        font-size:
            clamp(2.5rem, 11vw, 3.9rem);
    }


    .story-final__button {
        width:
            100%;

        min-width:
            0;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

    .story-guides__grid
    a,
    .story-guides__grid
    a
    > span:last-child,
    .story-categories__grid
    a
    > span:last-child {
        transition:
            none !important;
    }


    .story-guides__grid
    a:hover
    > span:last-child,
    .story-categories__grid
    a:hover
    > span:last-child {
        transform:
            none !important;
    }

}