/*
 * SIBSOKNSK
 * FAQ + Promotions Production V2
 */


/* =========================================
   SHARED DARK HERO
========================================= */

.faq-pro-hero,
.promotions-pro-hero,
.promotion-pro-hero {
    position: relative;
    overflow: hidden;
    background: #101112;
}

.faq-pro-hero,
.promotions-pro-hero {
    min-height: 690px;
    padding:
        clamp(155px,16vw,225px)
        0
        58px;
}

.promotion-pro-hero {
    min-height: 750px;
    padding:
        clamp(155px,16vw,220px)
        0
        85px;
}

.faq-pro-grid-bg,
.promotions-pro-grid-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .31;
    background-image:
        linear-gradient(
            rgba(255,255,255,.04) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.04) 1px,
            transparent 1px
        );
    background-size: 84px 84px;
}

.faq-pro-glow,
.promotions-pro-glow {
    position: absolute;
    width: 760px;
    height: 760px;
    top: -360px;
    right: -180px;
    border-radius: 50%;
    pointer-events: none;
    background:
        radial-gradient(
            circle,
            rgba(190,135,72,.21),
            transparent 68%
        );
}

.faq-pro-hero-layout,
.promotions-pro-hero-layout {
    position: relative;
    display: grid;
    grid-template-columns:
        minmax(0,1.45fr)
        minmax(280px,.6fr);
    align-items: end;
    gap:
        clamp(60px,9vw,145px);
}

.faq-pro-kicker,
.promotions-pro-kicker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 50px;
}

.faq-pro-kicker
> span:last-child,
.promotions-pro-kicker
> span:last-child {
    color:
        rgba(235,232,224,.42);
    font-size: 10px;
    letter-spacing: .18em;
}

.faq-pro-hero h1,
.promotions-pro-hero h1 {
    margin: 0;
    font-size:
        clamp(68px,9.4vw,142px);
    line-height: .86;
    letter-spacing: -.057em;
}

.faq-pro-hero h1 span,
.promotions-pro-hero h1 span {
    color:
        rgba(207,154,91,.96);
}

.faq-pro-hero-aside > p,
.promotions-pro-hero-aside > p {
    max-width: 430px;
    margin: 0 0 58px;
    color:
        rgba(235,232,224,.61);
    font-size:
        clamp(16px,1.35vw,20px);
    line-height: 1.7;
}

.faq-pro-count,
.promotions-pro-count {
    display: flex;
    align-items: flex-end;
    gap: 18px;
    padding-top: 24px;
    border-top:
        1px solid rgba(255,255,255,.14);
}

.faq-pro-count strong,
.promotions-pro-count strong {
    color:
        rgba(207,154,91,.96);
    font-size: 54px;
    font-weight: 400;
    line-height: .9;
}

.faq-pro-count span,
.promotions-pro-count span {
    color:
        rgba(235,232,224,.43);
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.faq-pro-hero-bottom,
.promotions-pro-hero-bottom {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    margin-top:
        clamp(75px,9vw,135px);
    padding-top: 26px;
    border-top:
        1px solid rgba(255,255,255,.14);
}

.faq-pro-hero-bottom > span,
.promotions-pro-hero-bottom > span {
    color:
        rgba(235,232,224,.43);
    font-size: 12px;
}

.faq-pro-hero-bottom a,
.promotions-pro-hero-bottom a {
    display: inline-flex;
    align-items: center;
    gap: 17px;
    color:
        rgba(235,232,224,.62);
    font-size: 10px;
    letter-spacing: .18em;
    text-decoration: none;
}

.faq-pro-hero-bottom i,
.promotions-pro-hero-bottom i {
    display: block;
    width: 30px;
    height: 1px;
    background:
        rgba(207,154,91,.94);
}


/* =========================================
   FAQ CONTENT
========================================= */

.faq-pro-content {
    padding:
        clamp(95px,11vw,165px)
        0;
    background: #ece7de;
    color: #151617;
}

.faq-pro-heading,
.promotions-pro-heading {
    display: grid;
    grid-template-columns:
        minmax(0,1.3fr)
        minmax(250px,.6fr);
    align-items: end;
    gap: 60px;
    margin-bottom: 55px;
}

.faq-pro-heading .eyebrow {
    color: #806c4d;
}

.faq-pro-heading h2,
.promotions-pro-heading h2 {
    margin: 16px 0 0;
    font-size:
        clamp(42px,5.4vw,80px);
    line-height: 1;
    letter-spacing: -.045em;
}

.faq-pro-heading > p {
    max-width: 430px;
    margin: 0;
    color: #68635c;
    line-height: 1.7;
}

.faq-pro-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 55px;
}

.faq-pro-categories > span {
    min-height: 43px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    border:
        1px solid rgba(0,0,0,.17);
    font-size: 11px;
}

.faq-pro-categories small {
    color: #806c4d;
}

.faq-pro-list {
    border-top:
        1px solid rgba(0,0,0,.20);
}

.faq-pro-item {
    border-bottom:
        1px solid rgba(0,0,0,.20);
}

.faq-pro-item summary {
    min-height: 125px;
    display: grid;
    grid-template-columns:
        70px
        minmax(0,1fr)
        42px;
    gap: 28px;
    align-items: center;
    cursor: pointer;
    list-style: none;
}

.faq-pro-item
summary::-webkit-details-marker {
    display: none;
}

.faq-pro-number {
    color: #806c4d;
    font-size: 10px;
    letter-spacing: .18em;
}

.faq-pro-question {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size:
        clamp(24px,2.5vw,38px);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -.03em;
}

.faq-pro-question small {
    color: #817c74;
    font-size: 9px;
    font-weight: 400;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.faq-pro-icon {
    position: relative;
    width: 28px;
    height: 28px;
    justify-self: end;
}

.faq-pro-icon::before,
.faq-pro-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 1px;
    background: #6f5c3d;
    transition:
        transform .25s ease;
}

.faq-pro-icon::before {
    transform:
        translate(-50%,-50%);
}

.faq-pro-icon::after {
    transform:
        translate(-50%,-50%)
        rotate(90deg);
}

.faq-pro-item[open]
.faq-pro-icon::after {
    transform:
        translate(-50%,-50%)
        rotate(0deg);
}

.faq-pro-answer {
    padding:
        0
        70px
        45px
        98px;
}

.faq-pro-answer-inner {
    max-width: 850px;
    color: #656059;
    font-size: 17px;
    line-height: 1.75;
}

.faq-pro-answer-inner
> :first-child {
    margin-top: 0;
}

.faq-pro-answer-inner
> :last-child {
    margin-bottom: 0;
}

.faq-pro-empty,
.promotions-pro-empty {
    display: grid;
    grid-template-columns:
        85px
        minmax(0,1fr);
    gap: 35px;
    align-items: center;
    min-height: 330px;
    padding: 38px 36px;
    border:
        1px solid rgba(0,0,0,.16);
}

.faq-pro-empty-number,
.promotions-pro-empty-number {
    color: #806c4d;
    font-size: 11px;
    letter-spacing: .18em;
}

.faq-pro-empty h2,
.promotions-pro-empty h2 {
    margin: 13px 0 14px;
    font-size:
        clamp(32px,4.2vw,60px);
    line-height: 1.02;
}

.faq-pro-empty p,
.promotions-pro-empty p {
    max-width: 650px;
    margin: 0 0 28px;
    color: #68635c;
    line-height: 1.7;
}


/* =========================================
   FAQ CTA
========================================= */

.faq-pro-cta {
    position: relative;
    overflow: hidden;
    padding:
        clamp(95px,11vw,170px)
        0;
    background: #101112;
}

.faq-pro-cta-glow,
.promotion-pro-cta-glow {
    position: absolute;
    width: 650px;
    height: 650px;
    right: -230px;
    bottom: -350px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(190,135,72,.20),
            transparent 68%
        );
}

.faq-pro-cta-grid,
.promotion-pro-cta-grid {
    position: relative;
    display: grid;
    grid-template-columns:
        minmax(0,1.4fr)
        minmax(280px,.65fr);
    align-items: end;
    gap:
        clamp(60px,9vw,140px);
}

.faq-pro-cta h2,
.promotion-pro-cta h2 {
    max-width: 900px;
    margin: 20px 0 0;
    font-size:
        clamp(44px,6vw,88px);
    line-height: .98;
    letter-spacing: -.05em;
}

.faq-pro-cta-grid
> div:last-child p,
.promotion-pro-cta-grid
> div:last-child p {
    max-width: 490px;
    margin: 0 0 30px;
    color:
        rgba(235,232,224,.58);
    line-height: 1.7;
}


/* =========================================
   PROMOTIONS ARCHIVE
========================================= */

.promotions-pro-content {
    padding:
        clamp(95px,11vw,165px)
        0;
}

.promotions-pro-heading > p {
    max-width: 430px;
    margin: 0;
    color:
        rgba(235,232,224,.54);
    line-height: 1.7;
}

.promotions-pro-grid {
    display: grid;
    grid-template-columns:
        repeat(2,minmax(0,1fr));
    gap:
        clamp(40px,5vw,70px)
        22px;
}

.promotions-pro-card a {
    display: block;
    color: inherit;
    text-decoration: none;
}

.promotions-pro-card-media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    border:
        1px solid rgba(255,255,255,.09);
    background: #171819;
}

.promotions-pro-card-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition:
        transform .45s ease,
        filter .45s ease;
}

.promotions-pro-card:hover
.promotions-pro-card-media img {
    transform: scale(1.025);
    filter: brightness(1.04);
}

.promotions-pro-card-placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    gap: 12px;
    text-align: center;
    background:
        radial-gradient(
            circle at 72% 28%,
            rgba(202,149,87,.14),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #202123,
            #101112
        );
}

.promotions-pro-card-placeholder span {
    color:
        rgba(207,154,91,.20);
    font-size:
        clamp(80px,10vw,145px);
}

.promotions-pro-card-placeholder small {
    color:
        rgba(235,232,224,.30);
    font-size: 9px;
    letter-spacing: .20em;
}

.promotions-pro-card-copy {
    padding-top: 23px;
}

.promotions-pro-card-kicker {
    color:
        rgba(207,154,91,.84);
    font-size: 9px;
    letter-spacing: .17em;
}

.promotions-pro-card h2 {
    margin: 15px 0 15px;
    font-size:
        clamp(30px,3.2vw,48px);
    line-height: 1.04;
    letter-spacing: -.035em;
}

.promotions-pro-card p {
    max-width: 630px;
    margin: 0 0 22px;
    color:
        rgba(235,232,224,.54);
    line-height: 1.65;
}

.promotions-pro-link {
    color:
        rgba(235,232,224,.43);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.promotions-pro-empty {
    border-color:
        rgba(255,255,255,.13);
    background:
        linear-gradient(
            120deg,
            rgba(207,154,91,.055),
            rgba(255,255,255,.015)
        );
}

.promotions-pro-empty-number {
    color:
        rgba(207,154,91,.78);
}

.promotions-pro-empty h2 {
    color: #f0ede6;
}

.promotions-pro-empty p {
    color:
        rgba(235,232,224,.56);
}

.promotions-pro-pagination {
    margin-top: 70px;
}

.promotions-pro-pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.promotions-pro-pagination
.page-numbers {
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    border:
        1px solid rgba(255,255,255,.13);
    color:
        rgba(235,232,224,.61);
    text-decoration: none;
}

.promotions-pro-pagination
.page-numbers.current {
    border-color:
        rgba(207,154,91,.5);
    background:
        rgba(207,154,91,.09);
    color:
        rgba(225,181,125,.98);
}


/* =========================================
   SINGLE PROMOTION
========================================= */

.promotion-pro-topline {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin-bottom:
        clamp(65px,8vw,110px);
}

.promotion-pro-topline a,
.promotion-pro-topline span {
    color:
        rgba(235,232,224,.43);
    font-size: 10px;
    letter-spacing: .14em;
    text-decoration: none;
}

.promotion-pro-hero-grid {
    position: relative;
    display: grid;
    grid-template-columns:
        minmax(0,.9fr)
        minmax(420px,1.1fr);
    align-items: center;
    gap:
        clamp(60px,8vw,125px);
}

.promotion-pro-copy h1 {
    max-width: 850px;
    margin: 24px 0 32px;
    font-size:
        clamp(56px,7vw,108px);
    line-height: .91;
    letter-spacing: -.055em;
}

.promotion-pro-lead {
    max-width: 650px;
    margin: 0;
    color:
        rgba(235,232,224,.63);
    font-size:
        clamp(18px,1.6vw,22px);
    line-height: 1.66;
}

.promotion-pro-media {
    overflow: hidden;
    aspect-ratio: 1 / 1;
    border:
        1px solid rgba(255,255,255,.10);
    background: #18191a;
}

.promotion-pro-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.promotion-pro-placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-content: center;
    gap: 10px;
    text-align: center;
    background:
        radial-gradient(
            circle at 70% 30%,
            rgba(201,149,87,.15),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #202123,
            #101112
        );
}

.promotion-pro-placeholder span {
    color:
        rgba(207,154,91,.25);
    font-size:
        clamp(100px,12vw,180px);
    line-height: .8;
}

.promotion-pro-placeholder strong {
    color:
        rgba(222,179,121,.86);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .18em;
}

.promotion-pro-placeholder small {
    color:
        rgba(235,232,224,.28);
    font-size: 8px;
    letter-spacing: .17em;
}


/* =========================================
   PROMOTION BODY
========================================= */

.promotion-pro-body {
    padding:
        clamp(95px,11vw,165px)
        0;
    background: #ece7de;
    color: #151617;
}

.promotion-pro-body-grid {
    display: grid;
    grid-template-columns:
        minmax(160px,.35fr)
        minmax(0,1.65fr);
    gap:
        clamp(60px,9vw,130px);
}

.promotion-pro-body .eyebrow {
    color: #806c4d;
}

.promotion-pro-editor {
    max-width: 900px;
    font-size:
        clamp(19px,1.8vw,25px);
    line-height: 1.72;
}

.promotion-pro-editor
> :first-child {
    margin-top: 0;
}

.promotion-pro-editor
> :last-child {
    margin-bottom: 0;
}

.promotion-pro-editor img {
    max-width: 100%;
    height: auto;
}

.promotion-pro-no-content {
    color: #68635c;
}


/* =========================================
   RELATED PROMOTIONS
========================================= */

.promotion-pro-related {
    padding:
        clamp(90px,10vw,150px)
        0;
}

.promotion-pro-related-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 40px;
    margin-bottom: 48px;
}

.promotion-pro-related-head h2 {
    margin: 15px 0 0;
    font-size:
        clamp(38px,4.5vw,68px);
    line-height: 1;
}

.promotion-pro-related-grid {
    display: grid;
    grid-template-columns:
        repeat(3,minmax(0,1fr));
    gap: 18px;
}

.promotion-pro-related-card {
    position: relative;
    min-height: 325px;
    padding: 30px;
    border:
        1px solid rgba(255,255,255,.13);
    color: inherit;
    text-decoration: none;
    background:
        linear-gradient(
            145deg,
            rgba(207,154,91,.055),
            rgba(255,255,255,.012)
        );
}

.promotion-pro-related-card > span {
    color:
        rgba(207,154,91,.82);
    font-size: 9px;
    letter-spacing: .17em;
}

.promotion-pro-related-card h3 {
    margin: 78px 0 15px;
    font-size:
        clamp(25px,2.4vw,36px);
    line-height: 1.08;
}

.promotion-pro-related-card p {
    margin: 0;
    color:
        rgba(235,232,224,.53);
    line-height: 1.6;
}

.promotion-pro-related-card i {
    position: absolute;
    right: 27px;
    bottom: 24px;
    color:
        rgba(207,154,91,.90);
    font-size: 23px;
    font-style: normal;
}


/* =========================================
   PROMOTION CTA
========================================= */

.promotion-pro-cta {
    position: relative;
    overflow: hidden;
    padding:
        clamp(95px,11vw,170px)
        0;
    background: #101112;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 760px) {

    .faq-pro-hero,
    .promotions-pro-hero,
    .promotion-pro-hero {
        min-height: auto;
        padding:
            130px
            0
            45px;
    }

    .faq-pro-hero-layout,
    .promotions-pro-hero-layout,
    .faq-pro-heading,
    .promotions-pro-heading,
    .promotion-pro-hero-grid,
    .promotion-pro-body-grid,
    .faq-pro-cta-grid,
    .promotion-pro-cta-grid {
        grid-template-columns: 1fr;
    }

    .faq-pro-hero-layout,
    .promotions-pro-hero-layout,
    .promotion-pro-hero-grid {
        gap: 55px;
    }

    .faq-pro-hero h1,
    .promotions-pro-hero h1 {
        font-size:
            clamp(56px,17vw,86px);
    }

    .faq-pro-hero-bottom,
    .promotions-pro-hero-bottom {
        flex-direction: column;
        align-items: flex-start;
        margin-top: 60px;
    }

    .faq-pro-item summary {
        grid-template-columns:
            35px
            minmax(0,1fr)
            28px;
        gap: 12px;
        min-height: 105px;
    }

    .faq-pro-question {
        font-size: 23px;
    }

    .faq-pro-answer {
        padding:
            0
            20px
            32px
            47px;
    }

    .faq-pro-empty,
    .promotions-pro-empty {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 24px;
        padding: 28px 24px;
    }

    .promotions-pro-grid {
        grid-template-columns: 1fr;
    }

    .promotion-pro-copy h1 {
        font-size:
            clamp(49px,14vw,76px);
    }

    .promotion-pro-related-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .promotion-pro-related-grid {
        grid-template-columns: 1fr;
    }

}


/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    .faq-pro-icon::before,
    .faq-pro-icon::after,
    .promotions-pro-card-media img {
        transition: none;
    }

}