/* -------------------- FONTS -------------------- */
@font-face {
    font-family: "FTKunstGrotesk-Light";
    src: url("../fonts/FTKunstGrotesk-Light.woff2") format("woff2");
}

@font-face {
    font-family: "FTKunstGrotesk-LightItalic";
    src: url("../fonts/FTKunstGrotesk-LightItalic.woff2") format("woff2");
}

@font-face {
    font-family: "FTKunstGrotesk-Regular";
    src: url("../fonts/FTKunstGrotesk-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "FTKunstGrotesk-RegularItalic";
    src: url("../fonts/FTKunstGrotesk-RegularItalic.woff2") format("woff2");
}

@font-face {
    font-family: "FTKunstGrotesk-Medium";
    src: url("../fonts/FTKunstGrotesk-Medium.woff2") format("woff2");
}

@font-face {
    font-family: "FTKunstGrotesk-MediumItalic";
    src: url("../fonts/FTKunstGrotesk-MediumItalic.woff2") format("woff2");
}

@font-face {
    font-family: "FTKunstGrotesk-Bold";
    src: url("../fonts/FTKunstGrotesk-Bold.woff2") format("woff2");
}

@font-face {
    font-family: "FTKunstGrotesk-BoldItalic";
    src: url("../fonts/FTKunstGrotesk-BoldItalic.woff2") format("woff2");
}

@font-face {
    font-family: "FTKunstGrotesk-Black";
    src: url("../fonts/FTKunstGrotesk-Black.woff2") format("woff2");
}

@font-face {
    font-family: "FTKunstGrotesk-BlackItalic";
    src: url("../fonts/FTKunstGrotesk-BlackItalic.woff2") format("woff2");
}


/* -------------------- VAR XS -------------------- */
:root {

    --grid-margin-s: 20px;
    --grid-gutter-s: 10px;

    --grid-margin-m: 20px;
    --grid-gutter-m: 10px;

    --fs-h1: 40px;
    --fs-h2: 20px;

    --fs-header: 16px;
    --fs-m: 16px;
    --fs-s: 14px;
    --fs-xs: 13px;
}

/* -------------------- VAR MD -------------------- */
@media screen and (min-width: 768px) {
    :root {
        --grid-margin-s: 24px;
        --grid-gutter-s: 12px;

        --grid-margin-m: 12dvw;
        --grid-gutter-m: 8dvw;

        --fs-h1: 64px;
        --fs-h2: 32px;

        --fs-header: 18px;
        --fs-m: 18px;
        --fs-s: 15px;
        --fs-xs: 13px;
    }
}

/* -------------------- VAR LG -------------------- */
@media screen and (min-width: 1024px) {
    :root {}
}

/* -------------------- VAR XL -------------------- */
@media screen and (min-width: 1280px) {
    :root {
        --fs-h1: 80px;
        --fs-h2: 40px;
    }
}

/* -------------------- VAR XXL -------------------- */
@media screen and (min-width: 1920px) {
    :root {}
}

/* -------------------- VAR GLOBAL -------------------- */
:root {
    --black: #000000;
    --white: #ffffff;

    --almost-black: #151515;
    --very-dark-grey: #2b2b2b;
    --dark-grey: #939393;
    --light-grey: #aaaaaa;
    --very-light-grey: #f5f5f5;

    --yellow: #fff18f;
    --green: #93ff8d;
    --light-blue: #8af9ff;
    --lilac: #948fff;
    --pink: #e48aff;
    --orange: #ff8d8d;

    --header-height: calc(var(--grid-margin-s)*2 + var(--fs-header)*1.2);

    --text-underline-offset: 0.1em;
    --text-underline-thickness: 0.1em;

    --shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.12);

    --lh: 1.2em;
}

/* -------------------- RESET -------------------- */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--almost-black);
}

body.menu-open {
    overflow: hidden;
}

main {
    background-color: var(--white);
}

:focus {
    outline: none;
}

::selection {
    background: var(--black);
    color: var(--white);
    text-shadow: none;
}

a {
    text-decoration: none;
    color: inherit;
}

a:hover {
    /* cursor: pointer;
    background-color: var(--black);
    color: var(--white);
    text-decoration: none; */
    /* aggiornare */
}

img {
    user-select: none;
    -webkit-user-drag: none;
}


/* -------------------- TEXT STYLES -------------------- */
/* Bold */
strong {
    font-family: "FTKunstGrotesk-Bold" !important;
}

/* Italic */
em {
    font-style: italic;
}

/* Underline */
u {
    text-underline-offset: var(--text-underline-offset);
    text-decoration-thickness: var(--text-underline-thickness);
}

/* Strikethrough */
s {
    text-decoration-thickness: 0.1em;
}

/* Paragraph */
p {
    /* aggiornare */
}

p:last-child {
    /* aggiornare */
}

/* Bullet list */
ul {
    /* removes default bullets */
    list-style: none;
    padding-left: 0;
}

ul li {
    display: flex;
    flex-direction: row;
    gap: 0.25em;
}

ul li p,
ul li strong,
ul li em,
ul li u,
ul li a,
ol li p,
ol li strong,
ol li em,
ol li u,
ol li a {
    display: contents;
}

ul li p {
    /* aggiornare */
}

ul li:last-child p:last-child {
    /* aggiornare */
}

ul li::before {
    content: "• ";
}

/* Number list */
ol {
    list-style: none;
    padding-left: 0;
    /* start counter */
    counter-reset: list-counter;
}

ol li {
    display: flex;
    flex-direction: row;
    /* increment counter for each li */
    counter-increment: list-counter;
}

ol li p {
    /* aggiornare */
}

ol li:last-child p:last-child {
    /* aggiornare */
}

ol li::before {
    content: counter(list-counter) ". ";
    /* display number */
    margin-right: 0.25em;
}

h1 {
    font-family: "FTKunstGrotesk-Medium", Arial, Helvetica, sans-serif;
    font-size: var(--fs-h1);
    margin: 0px;
}

h2,
.h2 {
    font-family: "FTKunstGrotesk-Medium", Arial, Helvetica, sans-serif;
    font-size: var(--fs-h2);
    margin: 0px;
}


.type-header {
    font-family: "FTKunstGrotesk-Medium", Arial, Helvetica, sans-serif;
    font-size: var(--fs-header);
    line-height: var(--lh);
}

.type-m-medium {
    font-family: "FTKunstGrotesk-Medium", Arial, Helvetica, sans-serif;
    font-size: var(--fs-m);
    line-height: var(--lh);
}

.type-s-medium {
    font-family: "FTKunstGrotesk-Medium", Arial, Helvetica, sans-serif;
    font-size: var(--fs-s);
    line-height: var(--lh);
}

.type-xs-medium {
    font-family: "FTKunstGrotesk-Medium", Arial, Helvetica, sans-serif;
    font-size: var(--fs-xs);
    line-height: var(--lh);
}

/* -------------------- HEADER -------------------- */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    z-index: 200;
    padding: var(--grid-margin-s);
    background-color: var(--white);
    box-shadow: var(--shadow);
    transition: transform 0.3s ease-in-out;
}

.header.header-hidden {
    transform: translateY(-101%);
}

.header-logo {
    position: absolute;
    top: var(--grid-margin-s);
    left: var(--grid-margin-s);
    z-index: 202;
    text-transform: uppercase;
}

.header-links-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0px calc(var(--grid-margin-m) - var(--grid-margin-s));
}

.header-links {
    display: flex;
    flex-direction: row;
    gap: 16px;
}

.header-links a.is-active {
    text-decoration: underline;
    text-underline-offset: var(--text-underline-offset);
    text-decoration-thickness: var(--text-underline-thickness);
}

.header-languages {
    display: inline-flex;
    gap: 8px;
}

.header-language.is-active {
    text-decoration: underline;
    text-underline-offset: var(--text-underline-offset);
    text-decoration-thickness: var(--text-underline-thickness);
}

.menu-button {
    position: absolute;
    top: var(--grid-margin-s);
    right: var(--grid-margin-s);
    z-index: 203;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: right;
}

.menu {
    width: 100dvw;
    height: 100dvh;
    position: absolute;
    top: 0;
    left: 100dvw;
    display: grid;
    grid-template-rows: 1fr auto;
    z-index: 201;
    transition: left 0.4s ease-in-out;
}

.menu.is-open {
    left: 0;
}

.menu-links-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}

.menu-links-container a {
    transition: opacity 0.2s ease-in-out;
}

.menu-links-container a:hover {
    opacity: 1;
}

.menu-links-container a {
    opacity: 0.33;
    transition: opacity 0.2s ease-in-out;
}

.menu-links-container a.is-active {
    opacity: 1;
}

.menu-links:not(:has(a.is-active)) a {
    opacity: 1;
}

.menu-links {
    display: flex;
    flex-direction: column;
    margin-top: var(--header-height);
    padding: 0px var(--grid-margin-m);
}

.menu-link {
    height: calc(var(--fs-h2) * 1.2);
    display: flex;
    align-items: center;
}

.menu-divider {
    width: calc(100% - var(--grid-margin-m) * 2);
    height: 1px;
    background-color: var(--black);
    margin: 0px var(--grid-margin-m);
}

.menu-languages {
    display: flex;
    flex-direction: column;
    padding: 0px var(--grid-margin-m);
}

.menu-language {
    height: calc(var(--fs-h2) * 1.2);
    display: flex;
    align-items: center;
}

.menu-footer {
    padding: calc(var(--grid-margin-s) * 3/2) var(--grid-margin-s);
}

.menu-footer a {
    text-decoration: underline;
    text-underline-offset: var(--text-underline-offset);
    text-decoration-thickness: var(--text-underline-thickness);
}

main {
    padding-top: var(--header-height);
}

/* Mobile */
@media screen and (max-width: 1279px) {
    .header-links-container {
        display: none;
    }
}

/* -------------------- TITLE BAR -------------------- */
.title-bar {
    display: grid;
    grid-template-columns: var(--grid-margin-m) 1fr var(--grid-margin-m);
    align-items: center;
    box-shadow: var(--shadow);
}

.title-bar-logo {
    display: flex;
    align-items: center;
    padding: 0px var(--grid-gutter-s) 0px var(--grid-margin-s);
}

.title-bar-logo img {
    display: block;
    height: calc(var(--fs-h2) * 1.2 + 32px);
}

.title-bar-title {
    padding: 16px 0px;
    text-transform: uppercase;
}

/* Mobile */
@media screen and (max-width: 767px) {
    .title-bar {
        grid-template-columns: auto 1fr;
    }

    .title-bar-title {
        padding: 10px 0px;
    }

    .title-bar-logo img {
        display: block;
        height: calc(var(--fs-h2) * 1.2 + 20px);
    }
}

/* Tablet */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .title-bar {
        grid-template-columns: auto 1fr;
    }

    .title-bar-title {
        padding: 12px 0px;
    }

    .title-bar-logo img {
        height: calc(var(--fs-h2) * 1.2 + 24px);
    }
}

/* -------------------- FOOTER -------------------- */
.footer {
    background-color: var(--almost-black);
    color: var(--white);
    padding: calc(var(--grid-margin-s) * 3/2) var(--grid-margin-s);
    display: flex;
    flex-direction: column;
    gap: calc(var(--grid-margin-s) * 3/2);
}

.footer a {
    text-decoration: underline;
    text-underline-offset: var(--text-underline-offset);
    text-decoration-thickness: var(--text-underline-thickness);
}

.footer-top {
    display: grid;
    grid-template-columns: calc(var(--grid-margin-m) - var(--grid-margin-s))1fr;
    align-items: center;
}

.footer-top-logo img {
    display: block;
    height: 100px;
}

.footer-top-infos {
    display: flex;
    flex-direction: row;
    column-gap: 72px;
}

.footer-top-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.footer-divider {
    width: 100%;
    height: 1px;
    background-color: var(--white);
}

.footer-bottom-logos {
    display: flex;
    flex-direction: row;
    justify-content: end;
    gap: 40px;
}

.footer-bottom-logos a {
    display: block;
}

.footer-bottom-logos img {
    display: block;
    height: 48px;
}

/* Mobile */
@media screen and (max-width: 767px) {
    .footer {
        gap: calc(var(--grid-margin-s) * 2);
    }

    .footer-top {
        grid-template-columns: 1fr;
    }

    .footer-top-logo {
        display: none;
    }

    .footer-top-infos {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: var(--grid-gutter-s);
        row-gap: 24px;
    }

    .footer-top-info:first-child {
        grid-column: span 2;
    }

    .footer-bottom-logos {
        align-items: center;
        gap: 24px;
    }
}

/* Mobile & Tablet */
@media screen and (max-width: 1023px) {
    .footer-bottom-logos {
        justify-content: center;
        flex-wrap: wrap;
        gap: 40px;
    }

    .footer-top-logo {
        margin-right: 32px;
    }
}

/* Tablet & Small Desktop */
@media screen and (min-width: 768px) and (max-width: 1279px) {
    .footer-top {
        grid-template-columns: auto 1fr;
    }

    .footer-top-infos {
        column-gap: 48px;
    }

    .footer-top-logo {
        margin-right: 48px;
    }
}

/* -------------------- BLOCKS -------------------- */
.editorial-blocks {
    padding: calc(var(--grid-margin-m)*0.6) 0px calc(var(--grid-margin-m)*1.2);
}

.editorial-blocks div:first-child {
    margin-top: 0;
}

.editorial-blocks div:last-child {
    margin-bottom: 0;
}

@media screen and (max-width: 767px) {
    .editorial-blocks {
        padding: calc(var(--grid-margin-m)*2) 0px calc(var(--grid-margin-m)*3);
    }
}

/* Simple Title */
.simple-title-block {
    margin: calc(var(--fs-h2) * 2) var(--grid-margin-m) var(--fs-h2);
}

.simple-title-divider {
    background-color: var(--black);
    height: 1px;
    width: 100%;
    margin-top: 2px;
}

/* Simple Text */
.simple-text-block {
    margin: var(--lh) var(--grid-margin-m);
}

/* Two & Three Column Text */
.two-column-text-block {
    margin: var(--lh) var(--grid-margin-m);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--grid-gutter-s);
}

.three-column-text-block {
    margin: var(--lh) var(--grid-margin-m);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--grid-gutter-s);
}

.simple-text-block a,
.two-column-text-block a,
.three-column-text-block a {
    text-decoration: underline;
    /* text-underline-offset: var(--text-underline-offset);
    text-decoration-thickness: var(--text-underline-thickness); */
}

.simple-text-block p,
.two-column-text-block p,
.three-column-text-block p {
    margin-bottom: var(--fs-m);
}

.simple-text-block.h2 p {
    margin-bottom: var(--fs-h2);
}

.simple-text-block p:last-child,
.two-column-text-block p:last-child,
.three-column-text-block p:last-child {
    margin-bottom: 0;
}

/* Two & Three Column Text Mobile */
@media screen and (max-width: 767px) {
    .three-column-text-block,
    .two-column-text-block {
        grid-template-columns: 1fr;
        row-gap: var(--fs-m);
    }
}

/* CTA */
.cta-block {
    margin: var(--lh) var(--grid-margin-m);
    display: flex;
    justify-content: center;
    align-items: center;
}

.cta {
    color: var(--black);
    padding: 0.2em 0.8em calc(0.2em + 2px);
    text-align: center;
    border-radius: calc(0.8em + 1px);
    border: 1px solid var(--black);
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.cta:hover {
    background-color: var(--black);
    color: var(--white);
}

/* CTA Mobile */
@media screen and (max-width: 767px) {
    .cta {
        font-size: 20px !important;
    }
}

/* Visual Caption */
.visual-caption-block {
    margin: calc(var(--grid-margin-m)*0.6) var(--grid-margin-m);
}

.visual-caption-visual {
    display: block;
    width: 100%;
}

.visual-caption-visual img,
.visual-caption-visual video {
    display: block;
    width: 100%;
}

.visual-caption-caption {
    margin-top: 8px;
    opacity: 0.33;

}

/* Visual Caption Mobile */
@media screen and (max-width: 767px) {
    .visual-caption-block {
        margin: calc(var(--grid-margin-m)*2) var(--grid-margin-m);
    }
}

/* Visuals Full */
.visuals-full-block {
    display: block;
}

.visuals-full-block img,
.visuals-full-block video {
    display: block;
    width: 100%;
    height: 50dvw;
    max-height: 100dvh;
    object-fit: cover;
}

.visuals-full-block-swiper {
    position: relative;
}

.visuals-full-block-swiper .swiper-slide img,
.visuals-full-block-swiper .swiper-slide video {
    width: 100%;
    height: 50dvw;
    max-height: 100dvh;
    object-fit: cover;
    display: block;
}

/* Remove top padding when editorial-blocks starts with visuals-full-block */
.editorial-blocks:has(> .visuals-full-block:first-child) {
    padding-top: 0;
}

/* Remove bottom padding when editorial-blocks ends with visuals-full-block (also if followed by a script) */
.editorial-blocks:has(> .visuals-full-block:last-child),
.editorial-blocks:has(> script:last-child):has(> .visuals-full-block:nth-last-child(2)) {
    padding-bottom: 0;
}

/* Double margin bottom to simple-text-block and cta-block when followed by visuals-full-block */
.simple-text-block:has(+ .visuals-full-block),
.cta-block:has(+ .visuals-full-block) {
    margin-bottom: calc(var(--lh) * 2);
}

/* Visuals Full Mobile */
@media screen and (max-width: 767px) {
    .visuals-full-block img,
    .visuals-full-block video {
        display: block;
        width: 100%;
        height: unset;
        max-height: unset;
        aspect-ratio: 1/1;
        object-fit: cover;
    }

    .visuals-full-block-swiper {
        position: relative;
    }

    .visuals-full-block-swiper .swiper-slide img,
    .visuals-full-block-swiper .swiper-slide video {
        display: block;
        width: 100%;
        height: unset;
        max-height: unset;
        aspect-ratio: 1/1;
        object-fit: cover;
    }

    .simple-text-block:has(+ .visuals-full-block),
    .cta-block:has(+ .visuals-full-block) {
        margin-bottom: calc(var(--grid-margin-m)*2);
    }
}

/* Card */
.card-text {
    position: absolute;
    width: 100%;
    bottom: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 16px var(--grid-margin-s);
    box-shadow: var(--shadow);
}

/* Video */
.video-block {
    margin: calc(var(--grid-margin-m)*0.6) var(--grid-margin-m);
}

.video-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
}

.video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* plugin embeds may output iframe without wrapper sizing */
.video-embed iframe,
.video-embed video {
    max-width: 100%;
}

/* Video Block Mobile */
@media screen and (max-width: 767px) {
    .video-block {
        margin: calc(var(--grid-margin-m)*2) var(--grid-margin-m);
    }
}

/* Logos */
.logos-block {
    margin: var(--lh) var(--grid-margin-m);
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.logos-item {
    display: block;
    width: 20%;
    padding: 4%;
    aspect-ratio: 1/1;
}

.logos-item img {
    display: block;
    width: 100%;
    height: 100%;
    /* width: 100%;
    height: 56px; */
    object-fit: contain;
}

/* Logos Medium Desktop */
@media screen and (min-width: 1280px) and (max-width: 1919px) {
    .logos-item {
        padding: 3%;
    }
}

/* Logos Small Desktop */
@media screen and (min-width: 1024px) and (max-width: 1279px) {
    .logos-item {
        width: 25%;
    }
}

/* Logos Tablet */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .logos-item {
        width: 33.33%;
    }
}

/* Logos Mobile */
@media screen and (max-width: 767px) {
    .logos-item {
        width: 50%;
    }
}

/* -------------------- YEAR FILTERS -------------------- */
.year-filters {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    padding: 12px var(--grid-margin-m);
    box-shadow: var(--shadow);
    color: var(--dark-grey);
}

.year-filters-title {
    color: var(--black);
    margin-right: 5px;
}

.year-filter {
    min-width: fit-content;
    transition: color 0.3s ease;
}

.year-filter:hover {
    color: var(--black);
}

.year-filter.is-active {
    color: var(--black);
    text-decoration: underline;
    text-underline-offset: var(--text-underline-offset);
    text-decoration-thickness: var(--text-underline-thickness);
}

.year-filter-separator {
    display: contents;
}

.year-filter-separator:after {
    content: ' ';
    min-width: 5px;
    width: 5px;
    height: 100%;
}

/* -------------------- EVENT CARDS -------------------- */
.event-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--grid-gutter-m);
    row-gap: calc(var(--grid-margin-m)*0.6);
    padding: calc(var(--grid-margin-m)*0.6) var(--grid-margin-m) calc(var(--grid-margin-m)*1.2);
}

.event-card {
    display: flex;
    flex-direction: column;
}

.event-card-header {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.event-card-subtitle {
    margin-top: 4px;
}

.event-card-cover {
    display: block;
    margin-top: 16px;
}

.event-card-cover img,
.event-card-cover video {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
}

.event-card-info {
    margin-top: 12px;
}

/* Event Cards Mobile */
@media (max-width: 767px) {
    .event-cards {
        grid-template-columns: repeat(1, 1fr);
        column-gap: var(--grid-gutter-m);
        row-gap: calc(var(--grid-margin-m)*1.5);
        padding: calc(var(--grid-margin-m)*1.5) var(--grid-margin-m) calc(var(--grid-margin-m)*3);
    }

    .event-card-cover {
        margin-top: 8px;
    }

    .event-card-subtitle {
        margin-top: 2px;
    }

    .event-card-info {
        margin-top: 4px;
    }
}

/* Event Cards Tablet */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .event-card-cover {
        margin-top: 12px;
    }

    .event-card-subtitle {
        margin-top: 4px;
    }

    .event-card-info {
        margin-top: 8px;
    }
}

/* -------------------- ANIMATIONS -------------------- */
.appear {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.appear.is-visible {
    opacity: 1;
    transform: translateY(0);
}