/* ---------- GRID ---------- */

.desktop-background-grid {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: inherit;
    pointer-events: none;
    padding: inherit;
    z-index: -1;
}

.mobile-background-grid {
    position: absolute;
    inset: 0;
    display: none;
    grid-template-columns: inherit;
    pointer-events: none;
    padding: inherit;
    z-index: -1;
}

.col {
    border: 2px dashed rgba(85, 85, 85, 0.1);
    border-bottom: none;
}

.col-left {
    border-right: none;
}


/* ---------- HOME PAGE ---------- */
.desktop-home-wrapper {
    grid-column: 1 / 13;
    display: grid;
    grid-template-columns: subgrid;
    overflow-y: auto;
    height: 100vh;
    overflow-x: hidden;

    scrollbar-width: none;
    -ms-overflow-style: none;

    position: relative;
}

.home-landing-page {
    display: grid;
    grid-column: inherit;
    grid-template-columns: subgrid;
    grid-template-rows: repeat(8, 1fr);
    height: 100dvh;
    position: relative;
    box-sizing: border-box;
}

.info-text {
    font-size: 1rem;
    padding-right: 4rem;
}

/* ---------- HOME PAGE - DESKTOP TICKER ---------- */
#desktop-ticker {
    grid-column: 10 / 12;
    grid-row: 1;
    font-size: 0.875rem;
    font-weight: 300;
    line-height: 1.25rem;
}

#desktop-ticker :first-child {
    margin-top: 0;
}

#desktop-ticker :last-child {
    border: none;
}

.ticker-item {
    border-bottom: 0.063rem solid;
    padding: 0.438rem 0.875rem 0.625rem 0rem;
    display: flex;
    flex-direction: column;
    text-align: end;
}

#ticker-carousel {
    grid-column: 8 / 13;
    grid-row: 2 / 9;
    display: grid;
    grid-template-columns: 1fr 1rem 1fr 1fr;
    grid-template-rows: repeat(8, 1fr);
    width: 100%;
    position: relative;
}

.diagonal-wrapper {
    position: absolute;
    top: 40%;
    left: 40%;
    transform: translate(-50%, -50%) rotate(-55deg);
    width: 300vw;
    height: 100px;

    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 1;
}

.diagonal-line {
    position: absolute;
    width: 100%;
    border-bottom: 2px dashed rgba(85, 85, 85, 0.1);
}

.diagonal-line.secondary-line {
    top: 50%;
    left: 42%;
    width: 100vw;
    transform-origin: left center;
    transform: translate(0, -50%) rotate(-90deg);
}

.diagonal-text {
    position: relative;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2rem;
    padding-bottom: 1.5rem;
    transition: opacity 0.3s ease;
    opacity: 1;

    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    max-width: 10%;
    text-align: center;
    text-wrap: balance;
}

.diagonal-text.fade-out {
    opacity: 0;
}

#ticker-detail-left {
    grid-column: 1 / 4;
    grid-row: 2;
    font-size: 1.5rem;
}

#ticker-detail-right {
    grid-column: 4 / 5;
    grid-row: 4 / 6;
    align-self: center;
    font-size: 1rem;

    display: flex;
    flex-direction: column;
}

.ticker-item:hover {
    opacity: 65%;
    cursor: pointer;
}

.active-ticker {
    text-align: start;
    opacity: 100%;
    font-weight: 400;
}

.active-ticker:hover {
    opacity: 75%;
}

.active-ticker>span {
    color: #D84A4A;
}

.ticker-item span:last-child:empty {
    padding-bottom: 0.5rem;
}

.link:hover+.link-info {
    opacity: 1;
}

#ticker-detail-right>.pixel-bg {
    line-height: 1.2rem;
}

#learn-more {
    grid-column: 3/ 5;
    grid-row: 7;
    text-decoration: underline;
    text-underline-offset: 0.5rem;
    text-decoration-thickness: 0.063rem;
    font-size: 1.5rem;
    height: fit-content;
}


/* ---------- HOME PAGE - DESKTOP MENU & CONTENT ---------- */

#infrastructures {
    grid-column: 2 / 6;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-self: end;
}

#about {
    grid-column: 5 / 8;
    grid-row: 3;
    display: flex;
    flex-direction: column;
}

#archive {
    grid-column: 1 / 3;
    grid-row: 4;
    display: flex;
    flex-direction: column;
}

#search {
    grid-column: 4 / 7;
    grid-row: 6;
    display: flex;
    flex-direction: column;
}

#updates {
    grid-column: 5 / 7;
    grid-row: 8;
    display: flex;
    flex-direction: column;
}

.invisible {
    opacity: 0;
    z-index: 0;
    pointer-events: none;
}

.visible {
    opacity: 100;
    z-index: 10;
    pointer-events: auto;
}

#target-terms {
    position: fixed;
    top: 500px;
    max-width: 200px;
}

#target-terms>a {
    font-size: 1rem;
    color: #474747;
}

#target-terms>a:hover {
    color: #D84A4A;
}

.link-info {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    color: #D84A4A;
}

.pixel-bg {
    display: inline-block;
    font-family: 'Space Grotesk';

    width: fit-content;
    line-height: 2.4rem;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Crect width='8' height='8' fill='%23F2F2F2'/%3E%3C/svg%3E");

    background-size: 10px 10px;
}

#marginal-is {
    grid-column: 4 / 8;
    grid-row: 8;
    margin-top: 13.37rem;
}

#marginal-operates {
    grid-column: 5 / 9;
    grid-row: 9;
    margin-top: 4.25rem;
}

#marginal-base {
    grid-column: 8 / 12;
    grid-row: 10;
    margin-top: 4.25rem;
}

#programs {
    grid-column: 7 / 9;
    grid-row: 11;
    margin-top: 5.68rem;
}

#why {
    grid-column: 4 / 8;
    grid-row: 12;
    margin-top: 3.68rem;
}

#link-programs {
    grid-column: 5 / 8;
    grid-row: 13;
    margin-top: 3.68rem;
}

#archive-2 {
    grid-column: 10 / 12;
    grid-row: 14;
    margin-top: 5.68rem;
}

#repository {
    grid-column: 7 / 11;
    grid-row: 15;
    margin-top: 3.68rem;
}

#link-archive {
    grid-column: 10 / 12;
    grid-row: 16;
    margin-top: 3.68rem;
}

#marginal {
    grid-column: 4 / 6;
    grid-row: 17;
    margin-top: 5.68rem;
}

#culture {
    grid-column: 4 / 8;
    grid-row: 18;
    margin-top: 50px;
}

#research {
    grid-column: 5 / 9;
    grid-row: 19;
    margin-top: 24px;
}

#collaboration {
    /* grid-column: 7 / 11; */
    grid-column: 4 / 8;
    grid-row: 20;
    margin-top: 24px;
}

#generation {
    /* grid-column: 8 / 11; */
    grid-column: 7 / 11;
    grid-row: 21;
    margin-top: 24px;
}

#sharing {
    /* grid-column: 10 / 12; */
    grid-column: 7 / 11;
    grid-row: 22;
    margin-top: 24px;
}

#link-manifesto {
    /* grid-column: 8 / 12; */
    grid-column: 5 / 9;
    grid-row: 23;
    margin-top: 3.68rem;
    margin-bottom: 10rem;
}

#menu-targets {
    grid-row: 8;
    padding-top: 0;
}

.sticky-menu {
    position: fixed;
    left: 0;
    top: 20vh;
}

/* ---------- HOME PAGE - MOBILE  ---------- */
#mobile-title,
#carousel-indicators {
    display: none;
}

/* ---------- INFRASTRUCTURES PAGE ---------- */
#infrastructures-wrapper {
    grid-column: 1 / 9;
    display: grid;
    grid-template-columns:
        1fr 1fr 1rem 1fr 1fr 1rem 1fr 1fr;
    margin-bottom: 15rem;
}

/* ---------- ARCHIVE PAGE ---------- */
#archive-wrapper {
    grid-column: 1 / 9;
    display: grid;
    grid-template-columns:
        1fr 1fr 1rem 1fr 1fr 1rem 1fr 1fr;
    margin-bottom: 15rem;
}

#filters-overlay,
.filters-content {
    grid-column: 1 / 9;
    display: grid;
    grid-template-columns: inherit;
    width: 100%;
}


#mobile-filter-toggle,
#close-filters-overlay {
    display: none;
}

#archive-wrapper .sub-menu-item {
    padding: 0;
    margin-bottom: 2rem;
    border-top: 1px solid black;
}

#search-in-archive-wrapper {
    grid-column: 1/3;
    display: flex;
    border-bottom: 1px solid black;
}

#search-in-archive {
    border: none;
    font-size: 1.25rem;
    font-family: 'Space Grotesk';
    background-color: transparent;
    margin-top: 1rem;
}

#search-in-archive::placeholder {
    color: black;
}


#make-it-simple {
    grid-column: 7/10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #D84A4A;
    color: white;
    font-family: 'Space Grotesk';
    line-height: 1.5rem;
    padding: 0.563rem 0;
    height: fit-content;
}

#apply-filters-btn {
    display: none;
}

#make-it-simple:hover {
    opacity: 90%;
}

#make-it-simple.active-simple {
    background-color: #5F5F5F;
    color: white;
}

#make-it-simple .simple-title {
    font-size: 1.25rem;
}

#make-it-simple .simple-subtitle {
    font-size: 0.875rem;
}

.archive-grid {
    margin-top: 2rem;
    grid-column: 1/9;
    display: grid;
    grid-template-columns: inherit;
    row-gap: 1rem;
    margin-bottom: 20rem;
}

.no-results-message {
    font-size: 2rem;
    color: #D84A4A;
    grid-column: 1/9;
    text-align: center;
}

#active-filters-counter {
    height: 4.125rem;
    display: flex;
    align-items: end;
    font-size: 1.5rem;
    font-family: 'Space Grotesk';
    margin-top: 3.25rem;
    grid-column: 1 / 2;
}

.clear-filters-btn {
    background: none;
    border: none;
    text-decoration: underline;
    font-size: 0.875rem;
    padding: 0;
    text-align: start;
    align-items: end;
    display: none;
    font-family: 'Be Vietnam Pro';
    cursor: pointer;
    width: fit-content;
    height: fit-content;
    align-self: flex-end;
}

.clear-filters-btn.mobile-clear-btn {
    display: none !important;
}

.clear-filters-btn.desktop-clear-btn.has-active {
    display: flex !important;
}