/* stylelint-disable property-no-vendor-prefix */

/* ============================================================ *
   GENERIC

   The Generic layer contains styles that should be applied
   widely across the DOM, i.e. you could apply styles to the
   html, body or * selectors.
 * ============================================================ */

/* ============================================================ *
   COMPONENTS

   The Components layer targets elements by their class name.
   The Components layer can contain layout AND decoration styles.
 * ============================================================ */

/* -------------------- HEADINGS -------------------- */
.heading {
    --heading-number-spacing: 0.25vw;
    --heading-caption-spacing: 4em;
    --counter-spacing: 0.5em;

    display: flex;
    flex-flow: column;
    margin-bottom: 2em;
}

h1::after,
h2::after {
    --line-width: 1.625rem;

    content: "";
    position: relative;
    width: var(--line-width);
    border-bottom: 1px solid var(--color-content-1);
    display: block;
    margin: 0;
}

h1::before {
    counter-increment: heading;
    content: counter(heading, decimal-leading-zero);
    display: block;
    font-family: var(--font-family-monospace);
    font-weight: 100;
    color: var(--color-content-2);
    padding-right: var(--heading-number-spacing);
    width: 100%;
    margin-bottom: var(--counter-spacing);
}

h2::after {
    top: 0.125em;
}

@media screen and (width >= 1024px) {
    .heading {
        --counter-spacing: 0;
    }

    h1::before {
        position: absolute;
        left: 0;
        bottom: 0;
        transform: translateX(-100%);
        text-align: right;
    }

    h1::after {
        position: relative;
        transform: translateX(-100%);
        right: calc(var(--heading-number-spacing) + 0.125em);
    }
}

.subline {
    display: block;
    color: var(--color-content-2);
    font-weight: var(--font-weight-extra-light);
    font-size: var(--font-size-bodycopy);
}

h2 + .subline {
    margin-top: -1.5em;
}

/* Set all grid items to full-width on mobile */
.grid-facts,
.grid-principles {
    --grid-column-end: span 2;
}

@media screen and (width >= 768px) {
    .grid-facts,
    .grid-principles,
    .grid-services {
        --grid-columns: repeat(2, 1fr);
        --grid-column-end: initial;
    }

    .grid-principles,
    .grid-services {
        --grid-columns: repeat(3, 1fr);
    }

    .grid-facts {
        --grid-columns: repeat(2, 1fr);
    }

    .grid-clients {
        --grid-columns: repeat(4, 1fr);
    }
}

@media screen and (width >= 1024px) {
    .grid-principles,
    .grid-about,
    .grid-services {
        --grid-columns: repeat(4, 1fr);
        --grid-column-end: initial;
    }
}

@media screen and (width >= 1700px) {
    .grid-principles,
    .grid-facts,
    .grid-services {
        --grid-columns: repeat(4, 1fr);
    }
}

@media screen and (width <= 1100px) {
    [class*="grid"].mobile-full {
        --spacing-offset: calc(var(--viewport-spacing) + var(--content-padding));

        margin: 0 calc(-1 * var(--spacing-offset));
    }
}

/* -------------------- MANTRA -------------------- */
.mantra-wrapper {
    align-self: flex-end;
}

@media screen and (width >= 768px) {
    .mantra-wrapper {
        min-width: 30rem;
        margin-left: auto;
        flex-grow: 0;
    }
}

.mantra {
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: calc(1.5rem + 1.5 * var(--font-size-factor));
}

.mantra li {
    width: auto;
    background: var(--color-brand-gradient);
    float: left;
    clear: both;
    margin-bottom: 2px;
    padding: 0 0.5em;
}

/* -------------------- CAPTION -------------------- */
[class*="caption"] {
    --caption-display: flex;
    --caption-height: 15vw;
    --caption-max-height: calc(10rem + var(--content-padding));
    --caption-color: var(--color-brand-light);
    --caption-border: 1px solid var(--caption-color);
    --caption-max-width: 18em;
    --caption-arrow-size: 1em;
    --caption-arrow-border-size: 1px;
    --caption-arrow-color: var(--caption-color);

    position: relative;
    display: var(--caption-display);
    flex-direction: column;
    align-items: center;
    color: var(--caption-color);
    background: var(--caption-background);
    background-size: 1.3em;
}

.caption p {
    min-width: initial;
    max-width: var(--caption-max-width);
}

.caption::before {
    --border-size: var(--caption-arrow-border-size);
    --color: var(--caption-arrow-color);

    content: "";
    display: block;
    position: absolute;
    bottom: var(--caption-arrow-border-size);
    width: var(--caption-arrow-size);
    height: var(--caption-arrow-size);
    box-shadow: var(--border-size) calc(-1 * var(--border-size)) 0 var(--border-size) var(--color);
    -webkit-box-shadow: var(--border-size) calc(-1 * var(--border-size)) var(--color);
    transform: rotate(135deg);
}

.caption::after {
    content: "";
    display: block;
    height: var(--caption-height);
    max-height: var(--caption-max-height);
    width: auto;
    border-left: var(--caption-border);
    margin: 0 auto;
}

.caption-mantra {
    --caption-max-width: 28em;
    --caption-background: none;
    --caption-display: block;
}

.caption-mantra::before {
    --spacing: calc(2 * var(--section-margin-top) + var(--content-padding) * 2);
    --caption-section-spacing: calc(-1 * (var(--spacing)));

    content: "";
    display: block;
    position: relative;
    height: var(--caption-height);
    max-height: var(--caption-max-height);
    width: 100%;
    border-left: var(--caption-border);
    margin-top: calc(var(--caption-section-spacing) + 1px);
    margin-bottom: 1rem;
    box-shadow: none;
    transform: none;
}

.caption-mantra::after {
    display: none;
}

/* -------------------- ABOUT ---------------------- */
.grid-about {
    grid-auto-flow: unset;
}

.grid-about > * {
    background: transparent;
}

.grid-about .type-lead { /* stylelint-disable-line no-descending-specificity */
    margin: 0;
}

@media screen and (width >= 1024px) {
    .position-1 {
        grid-column-start: 3;
    }

    .position-5 {
        grid-column-start: 3;
    }

    .position-6 {
        grid-row-start: 8;
        padding-bottom: 0;
        padding-left: 0;
    }

    .position-6 .heading {
        margin-bottom: 0;
    }
}

@media screen and (width <= 1024px) {
    .grid-about img {
        grid-column-end: span 1;
        grid-row-end: span 1;
    }
}

/* -------------------- CLIENTS -------------------- */
.grid-clients > * {
    --client-max-width: 13em;
    --client-max-height: 3.5em;
    --client-logo-spacing: 4em;
    --client-quote-spacing: 2em;
    --grid-item-padding: min(4.25vw, 5rem) min(var(--spacing-offset, 4vw), 3rem);

    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0 0 var(--font-size);
}

.grid-clients img {
    max-width: var(--client-max-width);
    max-height: var(--client-max-height);
    display: block;
}

/* -------------------- PRINCIPLES -------------------- */
.grid-principles > [class*="principle"] {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 2em 1.5em;
}

.principle-1 {
    --principle-color: var(--cd-sea-green-50);
}

.principle-2 {
    --principle-color: var(--cd-blue-50);
}

.principle-3 {
    --principle-color: var(--cd-olive-60);
}

.principle-4 {
    --principle-color: var(--cd-fuchsia-50);
}

.principle-5 {
    --principle-color: var(--cd-violet-50);
}

[class*="principle"] .number {
    color: var(--principle-color);
    font-size: calc(3rem + 1vw);
    font-weight: var(--font-weight-semibold);
    flex: 0;
}

[class*="principle"] .image {
    flex: 1;
    max-width: 15em;
    align-self: center;
}

[class*="principle"] img {
    width: auto;
    max-width: 100%;
    min-width: 5em;
}

[class*="principle"] .copy {
    flex: 1 0 100%;
}

@media screen and (width >= 1024px) {
    [class*="principle"].medium .number {
        min-width: 100%;
    }

    [class*="principle"] > .medium .copy {
        flex: 1;
    }
}

/* -------------------- JOBS -------------------- */
.jobs {
    --spacing-offset: calc(var(--viewport-spacing) + var(--content-padding));
    --spacing-offset-outer: calc(-1 * var(--spacing-offset));

    margin: 3em var(--spacing-offset-outer) 0;
}

@media screen and (width >= 1024px) {
    .jobs {
        --spacing-offset: 0rem; /* stylelint-disable-line length-zero-no-unit */
    }
}

.jobs details {
    position: relative;
    padding: 1rem max(var(--spacing-offset), 2rem);
    background: var(--color-content-darken);
}

.jobs details:not(:last-child) {
    margin-bottom: 2px;
}

.jobs summary {
    position: relative;
    padding: 1rem max(var(--spacing-offset), 2rem);
    margin: -1rem calc(-1 * max(var(--spacing-offset), 2rem));
    list-style: none;
    display: flex;
    flex-flow: row-reverse;
    justify-content: space-between;
    align-items: center;
}

.jobs summary:hover {
    cursor: pointer;
}

.jobs summary h4 {
    display: inline-block;
    max-width: 100%;
    margin: 0;
    vertical-align: middle;
    font-weight: var(--font-weight-base);
}

.job {
    padding: 2.5em 0 1em;
    max-width: 50em;
    margin: 0 auto;
}

.job p {
    font-size: inherit;
    max-width: none;
}

/* -------------------- JOBS TOGGLE ARROW -------------------- */
details summary::-webkit-details-marker {
    display: none;
}

.jobs summary::before {
    --arrow-color: var(--color-content-1);
    --arrow-size: 1em;
    --arrow-shift: calc(var(--arrow-size) / 2);
    --arrow-bd-size: 2px;

    content: "";
    display: block;
    position: relative;
    flex: 0 0 auto;
    width: var(--arrow-size);
    height: var(--arrow-size);
    right: 0;
    top: calc(var(--arrow-shift) * -1);
    box-shadow: var(--arrow-bd-size) calc(-1 * var(--arrow-bd-size)) 0 var(--arrow-bd-size) var(--arrow-color);
    -webkit-box-shadow: var(--arrow-bd-size) calc(-1 * var(--arrow-bd-size)) var(--arrow-color);
    transform: rotate(135deg);
}

.jobs details[open] summary::before {
    top: var(--arrow-shift);
    transform: rotate(-45deg);
}

/* -------------------- FACTS -------------------- */
.grid-facts {
    --fact-color: var(--cd-green-50);

    word-break: initial;
    text-align: left;

    > * {
        justify-items: left;
    }

     .number {
         color: var(--fact-color);
         font-size: calc(3rem + 1vw);
         font-weight: 200;
         white-space: nowrap;
         margin-top: -0.5rem;
     }
}

/* stylelint-disable no-descending-specificity */
.grid-facts ul,
.grid-facts ol {
    min-width: 20em;
    margin-top: 1em;
}

/* stylelint-enable no-descending-specificity */

.grid-facts li {
    margin-top: 0.25em;
}

/* -------------------- CONTACT -------------------- */
.contact {
    display: flex;
    flex-wrap: wrap;
    grid-gap: var(--section-gap);
}

.contact > div {
    flex: 1 1 auto;
}

.contact img {
    margin: 0 auto;
    display: block;
    max-width: 50vw;
}