@import url('news-card.css');

.page-news .site-main {
    padding-top: 0;
}

body.page-news .site-header:not(.gk-header-on-dark):not(.gk-header-on-light),
body.page-news .site-header.scrolled:not(.gk-header-on-dark):not(.gk-header-on-light),
body.page-news:not(.gk-front-static) .site-header:not(.gk-header-on-dark):not(.gk-header-on-light),
body.page-news:not(.gk-front-static) .site-header.scrolled:not(.gk-header-on-dark):not(.gk-header-on-light) {
    background: transparent;
    border: 0;
    box-shadow: none;
}

body.page-news .site-header,
body.page-news-single .site-header {
    pointer-events: none;
}

body.page-news .site-header__inner,
body.page-news-single .site-header__inner {
    pointer-events: auto;
}

.news-banner {
    position: relative;
    box-sizing: border-box;
    height: auto;
    min-height: 0;
    background: var(--color-ash);
    padding: 185px var(--page-align-x) 56px;
}

.news-banner__breadcrumb {
    position: absolute;
    top: 120px;
    left: var(--page-align-x);
    right: var(--page-align-x);
    z-index: 2;
    gap: 10px;
}

.news-hero {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 80px;
    max-width: var(--max-width);
    margin: 0 auto;
}

.news-hero__media {
    flex: 0 0 536px;
    width: 536px;
    max-width: 100%;
    height: 323px;
    overflow: hidden;
    background: var(--color-ash);
}

.news-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.news-hero__img--empty {
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(var(--color-forge-rgb), 0.2);
}

.news-hero__content {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    min-height: 323px;
}

.news-hero__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    flex: 1 1 auto;
    min-height: 0;
}

.news-hero .site-header__contact-btn {
    align-self: flex-end;
    margin-top: 0;
    width: auto;
    min-width: 160px;
    max-width: 100%;

    gap: 16px;
    text-decoration: none;
}

.news-hero__meta-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
    margin-top: auto;
}

.news-hero .site-header__contact-btn__icon svg {
    transform: translate3d(-9px, 0, 0);
}

.news-hero .site-header__contact-btn:hover .site-header__contact-btn__icon svg,
.news-hero .site-header__contact-btn:focus-visible .site-header__contact-btn__icon svg {

    transform: translate3d(8px, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
    .news-hero .site-header__contact-btn__icon svg {
        transform: none;
    }

    .news-hero .site-header__contact-btn:hover .site-header__contact-btn__icon svg,
    .news-hero .site-header__contact-btn:focus-visible .site-header__contact-btn__icon svg {
        transform: none;
    }
}

.news-hero__cat {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--color-flare);
}

.news-hero__cat--natural {
    display: none;
    text-transform: none;
    font-weight: 500;
}

.news-hero__title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 28px;
    font-weight: 600;
    line-height: 32px;
    color: var(--color-forge);
    font-synthesis: none;
}

.news-hero__text:hover .news-hero__title,
.news-hero__text:focus-visible .news-hero__title {
    font-weight: 800;
    color: var(--color-forge);
}

.news-hero__date {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: var(--color-forge);
    text-transform: capitalize;
}

.news-listing {
    position: relative;
    background: var(--color-white);
    scroll-margin-top: 96px;
    --news-listing-split-max: var(--max-width);

    padding-bottom: 80px;
}

.news-listing__split {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: var(--news-listing-split-max);
    margin-inline: auto;
    overflow-x: hidden;
    background: var(--color-white);
}

.news-listing__content {
    position: relative;
    z-index: 1;
    transition: margin-left 0.3s ease;
    max-width: 100%;
    background: var(--color-white);
}

.news-listing__main {
    position: relative;
    z-index: 0;
    min-width: 0;
    background: var(--color-white);
}

.news-filter-bar {
    background: var(--color-white);
    padding: 40px var(--padding-x);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.news-filter-btn {
    background: var(--color-white);
}

@media (hover: hover) {
    .news-filter-btn:hover {
        color: var(--color-forge);
        border-color: var(--color-forge);
    }
}

.news-filter-btn:focus-visible {
    color: var(--color-forge);
    border-color: var(--color-forge);
    outline: none;
}

.news-filter-btn-clear {
    background: var(--color-white);
}

@media (hover: hover) {
    .news-filter-btn-clear:hover {
        color: var(--color-forge);
        border-color: var(--color-forge);
    }
}

.news-filter-btn-clear:focus-visible {
    color: var(--color-forge);
    border-color: var(--color-forge);
    outline: none;
}

.news-filter-btn--panel {
    display: none;
    align-self: flex-start;
    margin-bottom: 40px;
}

.news-listing.is-filter-open .news-filter-bar .news-filter-btn-group {
    display: none;
}

.news-listing.is-filter-open .news-filter-panel .news-filter-btn--panel {
    display: flex;
}

.news-listing.is-filter-open .news-filter-bar {
    justify-content: flex-end;
}

.news-results-count {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--color-forge);
}

.news-filter-panel {
    background: var(--color-white);
}

.news-filter-overlay {
    background: rgba(var(--color-forge-rgb), 0.45);
}

.news-filter-panel__inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;

    gap: 24px;
    flex: 1 1 auto;
    min-height: 0;
}

.news-filter-panel__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    margin-top: auto;

    padding-top: 8px;
    flex-shrink: 0;
}

.news-filters__group {
    flex: none;
    min-width: 0;
}

.news-filters__label {
    margin: 0 0 16px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: var(--color-forge);
}

.news-filter-panel .news-filters__label {
    margin: 0 0 12px;
    padding: 0;
    border: none;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: var(--color-flare);
}

.news-filters__pills {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;
}

.news-pill {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 48px;
    padding: 8px 16px;
    border: 1.25px solid var(--color-forge);
    border-radius: 56px;
    background: var(--color-white);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-forge);
    cursor: pointer;
    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        background-color 0.2s ease;
}

.news-pill:hover,
.news-pill:focus-visible {
    color: var(--color-flare);
    border-color: var(--color-flare);
}

.news-pill.is-active {
    border-color: var(--color-bg);
    background: var(--color-bg);
    color: var(--color-forge);
    font-weight: 400;
}

.news-pill.is-active:hover,
.news-pill.is-active:focus-visible {
    color: var(--color-flare);
    border-color: var(--color-flare);
}

.news-filter-reset {
    background: transparent;
    border: none;
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: var(--color-forge);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-transform: none;
    padding: 0;
}

.news-filter-reset:hover,
.news-filter-reset:focus-visible {
  color: var(--color-forge);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.news-filter-reset:hover .news-filter-reset__icon,
.news-filter-reset:focus-visible .news-filter-reset__icon {
    color: var(--color-forge);
}

.news-filter-reset__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 23px;
    height: 23px;
    color: inherit;
}

.news-filter-reset__icon svg {
    display: block;
}

.news-filter-done {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 0 24px;
    border: 1.25px solid var(--color-flare);
    border-radius: 56px;
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: var(--color-flare);
    background: var(--color-white);
    cursor: pointer;
    transition:
        color 0.2s ease,
        border-color 0.2s ease;
}

.news-filter-done:hover,
.news-filter-done:focus-visible {
    border-color: var(--color-forge);
    color: var(--color-forge);
}

.news-grid-wrap {
    background: var(--color-white);
    padding: 0 var(--padding-x) 0;
}

.news-grid {
    box-sizing: border-box;
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 80px;
    row-gap: 79px;
    padding-bottom: 0;

    overflow-anchor: none;
}

.news-more {
    background: var(--color-white);
}

.news-more__inner {
    box-sizing: border-box;
    max-width: var(--max-width);
    margin: 0 auto;

    padding: 40px var(--page-align-x) 0;
    display: flex;
    justify-content: flex-start;
}

.news-listing__main:has(.news-more__btn.is-hidden) .news-more {
    display: none;
}

.news-more__btn {
    box-sizing: border-box;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    height: 56px;
    padding: 8px 16px 8px 24px;
    border: 1.25px solid var(--color-flare);
    border-radius: 56px;
    background: var(--color-white);
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: var(--color-flare);
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        color 0.2s ease;
}

.news-more__btn:hover,
.news-more__btn:focus-visible {
    border-color: var(--color-forge);
    color: var(--color-forge);
    outline: none;
}

.news-more__btn.is-hidden {
    display: none;
}

.news-more__icon {
    display: flex;
    flex-shrink: 0;
    color: inherit;
}

.news-more__icon svg {
    display: block;
    transition: transform 0.2s ease;
}

.news-more__btn:hover .news-more__icon svg,
.news-more__btn:focus-visible .news-more__icon svg {
    transform: rotate(180deg);
}

.news-more__label {
    color: inherit;
}

@media (max-width: 1023px) {
    .news-banner {
        display: block;
        height: auto;
        min-height: 0;
        max-height: none;
        box-sizing: border-box;
        overflow: visible;
        padding: 96px 0 48px;
    }

    .news-banner__breadcrumb {
        position: static;
        top: auto;
        left: auto;
        right: auto;
        margin: 0 24px 40px;
    }

    .news-hero {
        display: flex;
        flex: none;
        flex-grow: 0;
        flex-shrink: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 40px;
        width: 100%;
        max-width: none;
        margin: 0;
        min-height: 0;
    }

    .news-hero__media {
        flex: 0 0 auto;
        box-sizing: border-box;
        width: calc(100% - 48px);
        max-width: 100%;
        margin-inline: auto;
        height: auto;
        aspect-ratio: 345 / 330;
        align-self: center;
    }

    .news-hero__content {
        flex: none;
        flex-grow: 0;
        min-height: 0;
        width: 100%;
        max-width: none;
        align-self: stretch;
        padding: 0 24px;
        box-sizing: border-box;
    }

    .news-hero__meta-row {
        margin-top: 0;
    }

    .news-hero__text {
        flex: none;
        flex-grow: 0;
    }

    .news-hero__cat--caps {
        display: none;
    }

    .news-hero__cat--natural {
        display: block;
    }

    .news-hero__img {
        height: 100%;
        min-height: 0;
    }

    .news-hero__title {
        font-size: 32px;
        font-weight: 600;
        line-height: 48px;
    }

    .news-listing {
        --news-listing-split-max: none;
    }

    .news-listing__split {
        max-width: none;
        margin-inline: 0;
        overflow-x: visible;
    }

    .news-filter-bar {
        position: relative;
        z-index: 1;
        padding: 24px;
    }

    .news-filter-panel {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        width: 100%;
        max-width: none;
        height: auto;
        min-height: 0;
        max-height: none;
        box-sizing: border-box;
        padding: 24px;
        overflow-y: visible;
        transform: none;
        transition: none;
        z-index: auto;
    }

    .news-filter-panel:not(.is-open) {
        display: none;
    }

    .news-filter-panel.is-open {
        display: flex;
        flex-direction: column;
        pointer-events: auto;
    }

    .news-filter-panel__inner {
        gap: 24px;
    }

    .news-filter-panel__footer {
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        padding-top: 8px;
    }

    .news-filter-overlay {
        display: none !important;
        pointer-events: none;
    }

    .news-grid-wrap {
        position: relative;
        z-index: 0;
        padding: 0 24px;
    }

    .news-grid {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 48px;
        overflow-anchor: none;
    }

    .news-listing {
        padding-bottom: 40px;
    }

    .news-more__inner {
        padding: 32px 24px 0;
    }
}

@media (min-width: 1024px) {
    .news-listing .news-filter-panel {
        position: absolute;
        top: 0;
        left: 0;
        width: 480px;
        height: auto;
        max-height: calc(100vh - 96px);
        overflow-y: auto;
        z-index: 90;
    }

    .news-listing.is-filter-open .news-listing__content {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        padding-inline: var(--padding-x);
    }

    .news-listing.is-filter-open .news-listing__main {
        display: grid;
        grid-template-columns: 480px minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "nw-panel nw-bar"
            "nw-panel nw-grid"
            "nw-panel nw-more";
        column-gap: 24px;
        align-items: stretch;
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        min-height: 0;
        max-height: var(--news-filter-stack-height, none);
        overflow: hidden;
        overscroll-behavior: auto;
    }

    .news-listing.is-filter-open .news-filter-bar {
        grid-area: nw-bar;
        flex-shrink: 0;
        padding: 40px var(--padding-x);
    }

    .news-listing.is-filter-open .news-filter-panel.is-open {
        grid-area: nw-panel;
        position: relative;
        top: auto;
        left: auto;
        width: 480px;
        max-width: 480px;
        max-height: none;
        height: auto;
        overflow: visible;
        overflow-y: visible;
        transform: none;
        align-self: start;
        display: flex;
        flex-direction: column;
        border: none;
        box-shadow: none;
        padding-bottom: 56px;
        box-sizing: border-box;
    }

    .news-listing.is-filter-open .news-listing__split {
        width: 100%;
    }

    .news-listing.is-filter-open .news-grid-wrap {
        grid-area: nw-grid;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: auto;
        overflow-anchor: none;
        padding: 0;
    }

    .news-listing.is-filter-open .news-grid {
        box-sizing: border-box;
        max-width: none;
        margin: 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 32px;
        row-gap: 48px;
        padding: 24px var(--padding-x) 32px;
    }

    .news-listing.is-filter-open .news-more {
        grid-area: nw-more;
        flex-shrink: 0;
    }

    .news-listing.is-filter-open .news-more__inner {
        padding: 40px var(--padding-x) 80px;
        max-width: none;
    }

    .news-filter-overlay,
    .news-filter-overlay.is-open {
        position: absolute;
        inset: 0;
        display: none;
        background: transparent;
        pointer-events: none;
        z-index: 89;
    }
}