/*
Theme Name: Pictodo
Author: Pictodo
Description: (Custom + SCF). Zero Gutenberga.
Version: 7.0 NoCo 
*/

*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {

    --font-base: 16px;

    --color-text: rgb(86, 86, 86);
    --color-text-on-dark: #c2c2c2;
    --color-black: hsl(60, 3%, 6%);
    --color-bg: hsl(0, 0%, 100%);
    --color-primary: #f3f2f2;
    --color-secondary: #353535;
    --color-tertiary: #bbbbba;

    --media-radius-desktop: 2rem;
    --media-radius-mobile: 1.5rem;
    --media-radius: var(--media-radius-desktop);
    --media-thumbnail-radius: clamp(0.375rem, 0.25rem + 0.3vw, 0.5rem);

    --page-padding: clamp(1rem, 5vw, 2rem);

    --nav-offset: 8%;
    --nav-margin-bottom: 10rem;
    --safe-zone: calc(var(--nav-offset) + var(--nav-margin-bottom));
    --gap-block: 3rem;
    --single-portfolio-gap-block: 4rem;
    --scroll-reveal-distance: 5.5rem;
    --scroll-reveal-duration: 1.05s;
    --scroll-reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 1024px) and (max-width: 2559px) {
    :root {

        --font-base: 1.025rem;
        --nav-offset: 4%;
        --nav-margin-bottom: 10vw;
        --gap-block: clamp(8rem, 6.6667rem + 2.0833vw, 10rem);
        --single-portfolio-gap-block: 7rem;
    }
}

@media (min-width: 2560px) {
    :root {

        --font-base: 1.13rem;
        --nav-offset: 5%;
        --nav-margin-bottom: 12vw;
        --gap-block: clamp(8rem, 7.5rem + 5.5vw, 12rem);
        --single-portfolio-gap-block: 7rem;
    }
}

html {
    font-size: var(--font-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-optical-sizing: auto;

    scrollbar-gutter: stable;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: 'body-sans', system-ui, -apple-system, sans-serif;
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: clip;

    transition: background-color 0.8s cubic-bezier(0.4, 0, 0.2, 1), color 0.8s cubic-bezier(0.4, 0, 0.2, 1), padding-top 0.4s ease;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.site-main {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--gap-block);

    padding-top: var(--safe-zone);
    padding-bottom: var(--gap-block);

    position: relative;
    z-index: 2;
    background-color: var(--color-bg);

}

.single-portfolio .site-main {
    gap: var(--single-portfolio-gap-block);
}

[data-scroll-reveal]:not(.is-scroll-revealed) {
    opacity: 0;
    transform: translate3d(0, var(--scroll-reveal-distance), 0);
}

html.pictodo-effects-pending .site-main > *:not(#hero-scroll-module):not([data-csgs-slider]),
html.pictodo-effects-pending .site-main > [data-csgs-slider] > .csgs-layout {
    opacity: 0;
    transition: none !important;
}

[data-scroll-reveal].is-scroll-reveal-lcp-safe:not(.is-scroll-revealed) {
    opacity: 0;
}

[data-scroll-reveal] {
    transition:
        opacity var(--scroll-reveal-duration) var(--scroll-reveal-ease) var(--scroll-reveal-delay, 0s),
        transform var(--scroll-reveal-duration) var(--scroll-reveal-ease) var(--scroll-reveal-delay, 0s);
    will-change: opacity, transform;
}

[data-scroll-reveal]:not(.is-scroll-reveal-ready) {
    transition: none;
}

[data-scroll-reveal].is-scroll-revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
    [data-scroll-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

.site-main> :last-child {
    margin-bottom: 4rem;
}

.home .site-main > [data-csgs-slider]:last-child,
.front-page .site-main > [data-csgs-slider]:last-child {
    margin-bottom: 0;
}

@media (max-width: 1023px) {
    :root {
        --nav-margin-bottom: 12rem;
        --media-radius: var(--media-radius-mobile);
    }

    .site-main> :last-child {
        margin-bottom: 2.6667rem;
    }

    .home .site-main > [data-csgs-slider]:last-child,
    .front-page .site-main > [data-csgs-slider]:last-child {
        margin-bottom: 0;
    }

    .module-images.has-mobile-ratio {
        --module-image-ratio: var(--module-image-mobile-ratio) !important;
    }

    .module-images.has-mobile-ratio .media-item {
        aspect-ratio: var(--module-image-mobile-ratio);
    }

    .module-images.has-mobile-ratio .media-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.site-main--404 {
    justify-content: center;
    min-height: 100vh;
    padding-bottom: var(--safe-zone);
}

.site-main--404> :last-child {
    margin-bottom: 0;
}

.error-404 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.3rem;
}

.error-404__eyebrow {
    color: var(--color-tertiary);
}

.container {
    width: 90%;
    max-width: 99%;
    margin: 0 auto;
    padding: 0;
}

.container-wide {
    width: 95%;
    max-width: 99%;
    margin: 0 auto;
    padding: 0;
}

.container-wide-plus {
    width: 95%;
    max-width: 99%;
    margin: 0 auto;
    padding: 0;
}

.container-full {
    width: 95%;
    max-width: 99%;
    margin: 0 auto;
    padding: 0;
}

@media (min-width: 1024px) {
    .container {
        max-width: 32vw;
    }

    .container-wide {
        max-width: 60vw;
    }

    .container-wide-plus {
        max-width: 70vw;
    }

    .container-full {
        width: 97vw;
        max-width: 97vw;
    }

}

@media (min-width: 2560px) {
    .container {
        max-width: 23vw;
    }

    .container-wide {
        max-width: 50vw;
    }

    .container-wide-plus {
        max-width: 60vw;
    }
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: cover;
    margin-inline: auto;
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
a {
    overflow-wrap: break-word;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol {
    margin: 0;
}

h1 {
    font-size: 1rem;
    font-weight: 370;
    line-height: 1.55;
    letter-spacing: 0.0135rem;
}

h2 {
    font-size: 1rem;
    font-weight: 420;
    line-height: 1.55;
    letter-spacing: 0.0135rem;
    color: var(--color-black);
}

h3 {
    font-size: 1rem;
    font-weight: 370;
    line-height: 1.55;
    letter-spacing: 0.0135rem;
}

p {
    font-size: 1rem;
    font-weight: 370;
    line-height: 1.6;
    letter-spacing: 0.0135rem;

}

strong,
b {
    font-weight: 450;
    color: var(--color-black);
}

em,
i {
    font-style: italic;
}

a {
    font-size: 0.95rem;
    color: inherit;
    text-decoration: none;
    transition: all 0.3s ease;
    opacity: 1;
}

a:hover {
    color: color-mix(in srgb, currentColor 60%, transparent);
}

ul,
ol {
    padding-left: 1.5rem;

}

li {
    margin-bottom: 0.5em;
}

li:last-child {
    margin-bottom: 0;
}

.block-1 {
    display: block;
    width: 100%;
    padding: 1rem 1.2rem;
    border-radius: 0.5rem;
    background: #F0F0EE;

}

.block-2 {
    display: inline;
    width: auto;
    max-width: 100%;
    padding: 0.5rem 0.8rem;
    border-radius: 0.5rem;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
    background: var(--color-primary);
}

.block-3 {
    color: var(--color-tertiary)
}

.format-text .block-2 {
    align-self: flex-start;
}

.block-1:first-child {
    margin-top: 0;
}

.block-1:last-child {
    margin-bottom: 0;
}

a.block-3 {
    text-decoration: none;
}

.has-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    overflow: hidden;
    vertical-align: baseline;
}

.has-arrow::after {
    content: "";
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='1.6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3' /%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='1.6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3' /%3E%3C/svg%3E") center / contain no-repeat;
}

.has-arrow:hover::after {
    animation: arrowLoop 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes arrowLoop {
    0% {
        transform: translateX(0);
        opacity: 1;
    }

    40% {
        transform: translateX(110%);
        opacity: 0;
    }

    42% {
        transform: translateX(-110%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.cycle-word {
    display: inline;
    white-space: nowrap;
    font-size: 0.98rem;
}

.cycle-word:is(.pill, .block-2, .block-3),
:is(.pill, .block-2, .block-3) .cycle-word {
    display: inline-flex;
    align-items: baseline;
    vertical-align: baseline;
}

.cycle-word[data-scroll-reveal],
:is(.pill, .block-2, .block-3)[data-scroll-reveal]:has(.cycle-word) {
    transition:
        opacity var(--scroll-reveal-duration) var(--scroll-reveal-ease) var(--scroll-reveal-delay, 0s),
        transform var(--scroll-reveal-duration) var(--scroll-reveal-ease) var(--scroll-reveal-delay, 0s),
        color 0.3s ease,
        border-color 0.3s ease,
        background-color 0.3s ease;
}

.cycle-word[data-scroll-reveal]:not(.is-scroll-reveal-ready),
:is(.pill, .block-2, .block-3)[data-scroll-reveal]:has(.cycle-word):not(.is-scroll-reveal-ready) {
    transition: none;
}

:is(.pill, .block-2, .block-3):has(.cycle-word) {
    display: inline-flex;
    align-items: baseline;
}

.format-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 1.32rem;
}

.format-text:not(.container) {
    width: 100%;
}

.text-center {
    text-align: center !important;
    align-items: center !important;
    align-self: center !important;
    margin-inline: auto !important;
}

.text-left {
    text-align: left !important;
    align-items: flex-start !important;
    align-self: flex-start !important;
    margin-inline: 0 auto !important;
}

.text-right {
    text-align: right !important;
    align-items: flex-end !important;
    align-self: flex-end !important;
    margin-inline: auto 0 !important;
}

.format-text *:last-child {
    margin-bottom: 0;
}

.cycle-prefix {
    display: inline;
}

.text-cycle {
    display: inline-block;
    position: relative;
    overflow: hidden;
    vertical-align: text-bottom;
    width: var(--cycle-current-word-width, auto);
    height: 1.2em;
    line-height: 1.2;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.text-cycle-sizer {
    display: block;
    height: 1.2em;
    visibility: hidden;
    white-space: nowrap;
    line-height: 1.2;
    font-weight: inherit;
    pointer-events: none;
}

.text-cycle-inner {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    flex-direction: column;
    align-items: flex-start;
    width: max-content;
    height: 1.2em;

}

.text-cycle-item {
    flex: 0 0 1.2em;
    height: 1.2em;
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    white-space: nowrap;
    width: max-content;
    font-weight: inherit;
}

@font-face {
    font-family: 'body-sans';
    src: url('assets/fonts/ptd-v5-x92.woff2') format('woff2-variations'),
        url('assets/fonts/ptd-v5-x92.woff2') format('woff2');
    font-weight: 100 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --ratio-16-9: 16 / 9;
    --ratio-4-3: 4 / 3;
    --ratio-3-4: 3.3 / 4;
}

.module-images {
    margin-inline: auto;
}

.module-images img {
    width: 100%;
    height: auto;
    display: block;
    corner-shape: squircle;
    border-radius: var(--media-radius);
}

.module-images.is-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.75rem, 2vw, 1.5rem);
}

.module-images.is-split.has-split-cover {
    align-items: stretch;
}

.module-images.is-split.has-split-cover .media-item {
    height: 100%;
}

.module-images.is-split.has-split-cover .media-item img {
    height: 100%;
    object-fit: cover;
}

.module-images .media-item {
    position: relative;
    overflow: hidden;
    corner-shape: squircle;
    border-radius: var(--media-radius);
}

.module-images .media-item.has-border::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border: 1px solid color-mix(in srgb, var(--color-text) 18%, transparent);
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
    pointer-events: none;
}

.module-images .media-item img {
    border-radius: inherit;
}

.module-images.has-ratio>img,
.module-images.has-ratio .media-item {
    aspect-ratio: var(--module-image-ratio);
}

.module-images.has-ratio>img,
.module-images.has-ratio .media-item img {
    height: 100%;
    object-fit: cover;
}

@media (max-width: 768px) {
    .module-images.is-split {
        grid-template-columns: 1fr;
    }
}