/* =========================================================
   THE SPIRIT OF PRAYER — PAGE
   ========================================================= */

.wsf-prayer-page {

    --prayer-black: #080b12;
    --prayer-navy: #111927;
    --prayer-deep: #0d1320;
    --prayer-blue: #7f91ad;
    --prayer-blue-soft: #5f718d;
    --prayer-gold: #b79659;
    --prayer-cream: #ece8df;
    --prayer-muted: #aeb7c6;

    min-height: 100vh;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(92,119,157,.14),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #111825 0%,
            #0b1019 55%,
            #06090f 100%
        );

    color: var(--prayer-cream);

    overflow: hidden;
}


/* =========================================================
   HERO
   ========================================================= */

.wsf-prayer-hero {

    position: relative;

    min-height: 610px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding:
        clamp(70px,9vw,120px)
        24px
        80px;

    text-align: center;

    overflow: hidden;
}


.wsf-prayer-hero::before {

    content: "";

    position: absolute;

    width: 650px;
    height: 650px;

    left: 50%;
    top: -390px;

    transform: translateX(-50%);

    border-radius: 50%;

    background:
        rgba(78,107,147,.13);

    filter: blur(100px);

    pointer-events: none;
}


.wsf-prayer-hero::after {

    content: "";

    position: absolute;

    left: 7%;
    right: 7%;
    bottom: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(183,150,89,.34),
            transparent
        );
}


.wsf-prayer-hero__inner {

    position: relative;

    z-index: 2;

    max-width: 900px;

    margin: 0 auto;
}


.wsf-prayer-back {

    display: inline-block;

    margin-bottom: 55px;

    font-family:
        Arial,
        sans-serif;

    font-size: .66rem;

    font-weight: 600;

    letter-spacing: .20em;

    text-decoration: none;

    color:
        rgba(176,191,214,.52);
}


.wsf-prayer-hero h1 {

    margin: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(3.5rem,9vw,7rem);

    line-height: .84;

    font-weight: 400;

    letter-spacing: .015em;

    color: #efede8;
}


.wsf-prayer-rule {

    display: flex;

    align-items: center;
    justify-content: center;

    width:
        min(350px,72%);

    margin:
        34px
        auto
        30px;

    gap: 13px;
}


.wsf-prayer-rule span {

    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(183,150,89,.60),
            transparent
        );
}


.wsf-prayer-rule i {

    font-size: .62rem;

    font-style: normal;

    color: var(--prayer-gold);
}


.wsf-prayer-slogan {

    max-width: 700px;

    margin: 0 auto;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(1.1rem,2.3vw,1.45rem);

    line-height: 1.75;

    font-style: italic;

    color:
        rgba(220,225,234,.70);
}


.wsf-prayer-watermark {

    position: absolute;

    left: 50%;
    bottom: -48px;

    transform:
        translateX(-50%);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(7rem,20vw,17rem);

    line-height: 1;

    font-weight: 700;

    letter-spacing: .03em;

    white-space: nowrap;

    color:
        rgba(117,145,181,.028);

    pointer-events: none;
}


/* =========================================================
   START HERE
   ========================================================= */

.wsf-prayer-start {

    width:
        min(1100px,calc(100% - 28px));

    margin:
        0
        auto;

    padding:
        95px
        0
        100px;
}


.wsf-prayer-start__header {

    max-width: 650px;

    margin:
        0
        auto
        45px;

    text-align: center;
}


.wsf-prayer-start__header > span {

    display: block;

    margin-bottom: 13px;

    font-family:
        Arial,
        sans-serif;

    font-size: .65rem;

    letter-spacing: .29em;

    color: var(--prayer-gold);
}


.wsf-prayer-start__header h2 {

    margin: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(2.3rem,5vw,4rem);

    font-weight: 400;

    letter-spacing: .04em;

    color: var(--prayer-cream);
}


.wsf-prayer-start__header p {

    margin:
        18px
        0
        0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1rem;

    font-style: italic;

    color:
        rgba(208,216,230,.50);
}


/* =========================================================
   FEATURED TEACHING 01
   ========================================================= */

.wsf-prayer-teaching {

    position: relative;

    display: grid;

    grid-template-columns:
        minmax(170px,.40fr)
        minmax(0,1.6fr);

    min-height: 470px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 78% 15%,
            rgba(87,114,151,.15),
            transparent 30%
        ),
        repeating-linear-gradient(
            115deg,
            rgba(255,255,255,.010) 0 2px,
            rgba(0,0,0,.012) 2px 4px,
            transparent 4px 9px
        ),
        linear-gradient(
            145deg,
            #1b2638 0%,
            #121a28 48%,
            #0a0f18 100%
        );

    border:
        1px solid
        rgba(115,139,171,.40);

    box-shadow:
        0 28px 70px
        rgba(0,0,0,.40);

    color: var(--prayer-cream);
}


.wsf-prayer-teaching::after {

    content: "";

    position: absolute;

    inset: 16px;

    border:
        1px solid
        rgba(183,150,89,.08);

    pointer-events: none;
}


/* NUMBER PANEL */

.wsf-prayer-teaching__number {

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    min-width: 0;

    background:
        linear-gradient(
            180deg,
            #202f45,
            #101722
        );

    border-right:
        1px solid
        rgba(115,139,171,.26);
}


.wsf-prayer-teaching__number::before {

    content: "";

    position: absolute;

    top: 12%;
    bottom: 12%;
    right: 14px;

    width: 1px;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(183,150,89,.30),
            transparent
        );
}


.wsf-prayer-teaching__number span {

    margin-bottom: 8px;

    font-family:
        Arial,
        sans-serif;

    font-size: .60rem;

    letter-spacing: .25em;

    color:
        rgba(170,186,209,.66);
}


.wsf-prayer-teaching__number strong {

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(4rem,8vw,6.6rem);

    line-height: 1;

    font-weight: 400;

    color: #9aabc3;
}


/* FEATURE BODY */

.wsf-prayer-teaching__body {

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding:
        65px
        clamp(40px,7vw,90px);
}


.wsf-prayer-teaching__label {

    display: block;

    margin-bottom: 20px;

    font-family:
        Arial,
        sans-serif;

    font-size: .64rem;

    letter-spacing: .25em;

    color:
        rgba(183,150,89,.72);
}


.wsf-prayer-teaching__body h3 {

    margin: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(2.5rem,6vw,5.2rem);

    line-height: .92;

    font-weight: 400;

    color: #f0eee9;
}


.wsf-prayer-teaching__line {

    width: 95px;
    height: 1px;

    margin:
        30px
        0
        25px;

    background:
        rgba(183,150,89,.52);
}


.wsf-prayer-teaching__body p {

    max-width: 560px;

    margin: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(1rem,2vw,1.15rem);

    line-height: 1.75;

    font-style: italic;

    color:
        rgba(216,222,233,.64);
}


.wsf-prayer-teaching__coming {

    display: inline-block;

    align-self: flex-start;

    margin-top: 35px;

    padding:
        10px
        13px;

    border:
        1px solid
        rgba(183,150,89,.30);

    font-family:
        Arial,
        sans-serif;

    font-size: .58rem;

    letter-spacing: .18em;

    color:
        rgba(205,176,118,.82);
}


/* LIVE TEACHING LINK */

.wsf-prayer-teaching__link {

    text-decoration: none;

    cursor: pointer;

    transition:
        background .25s ease,
        border-color .25s ease,
        color .25s ease,
        transform .25s ease;
}


.wsf-prayer-teaching__link:hover {

    background:
        rgba(183,150,89,.10);

    border-color:
        rgba(183,150,89,.62);

    color:
        var(--prayer-cream);

    transform:
        translateY(-1px);
}


.wsf-prayer-teaching__link:focus-visible {

    outline:
        2px solid
        var(--prayer-gold);

    outline-offset: 4px;
}


/* =========================================================
   MORE TEACHINGS
   ========================================================= */

.wsf-prayer-library {

    position: relative;

    padding:
        72px
        0
        85px;

    border-top:
        1px solid
        rgba(114,139,171,.12);

    background:
        linear-gradient(
            180deg,
            rgba(76,101,135,.035),
            transparent
        );
}


.wsf-prayer-library__header {

    max-width: 700px;

    margin:
        0
        auto
        42px;

    padding:
        0
        24px;

    text-align: center;
}


.wsf-prayer-library__eyebrow {

    display: block;

    margin-bottom: 13px;

    font-family:
        Arial,
        sans-serif;

    font-size: .62rem;

    letter-spacing: .28em;

    color: var(--prayer-gold);
}


.wsf-prayer-library__header h2 {

    margin: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(2.2rem,5vw,3.8rem);

    font-weight: 400;

    color: var(--prayer-cream);
}


.wsf-prayer-library__rule {

    display: flex;

    align-items: center;

    width: 200px;

    margin:
        20px
        auto;

    gap: 11px;
}


.wsf-prayer-library__rule span {

    flex: 1;

    height: 1px;

    background:
        rgba(183,150,89,.28);
}


.wsf-prayer-library__rule i {

    color: var(--prayer-gold);

    font-size: .4rem;

    font-style: normal;
}


.wsf-prayer-library__header p {

    margin: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1rem;

    font-style: italic;

    color:
        rgba(210,218,231,.48);
}


/* =========================================================
   HORIZONTAL CAROUSEL
   ========================================================= */

.wsf-prayer-carousel {

    width: 100%;

    overflow: hidden;
}


.wsf-prayer-track {

    display: flex;

    gap: 20px;

    overflow-x: auto;

    scroll-snap-type: x mandatory;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;

    padding:
        0
        max(24px,calc((100vw - 1100px) / 2))
        16px;
}


.wsf-prayer-track::-webkit-scrollbar {

    display: none;
}


/* =========================================================
   SMALL TEACHING CARDS
   ========================================================= */

.wsf-prayer-small-card {

    position: relative;

    flex:
        0
        0
        min(520px,72vw);

    min-height: 310px;

    display: grid;

    grid-template-columns:
        105px
        minmax(0,1fr);

    overflow: hidden;

    scroll-snap-align: start;

    color: var(--prayer-cream);

    text-decoration: none;

    border:
        1px solid
        rgba(114,139,171,.34);

    background:
        radial-gradient(
            circle at 85% 8%,
            rgba(87,114,151,.10),
            transparent 34%
        ),
        repeating-linear-gradient(
            115deg,
            rgba(255,255,255,.008) 0 2px,
            rgba(0,0,0,.012) 2px 4px,
            transparent 4px 9px
        ),
        linear-gradient(
            145deg,
            #182337,
            #0e1521 62%,
            #080c13
        );

    box-shadow:
        0 18px 45px
        rgba(0,0,0,.30);
}


.wsf-prayer-small-card::after {

    content: "";

    position: absolute;

    inset: 10px;

    border:
        1px solid
        rgba(183,150,89,.07);

    pointer-events: none;
}


.wsf-prayer-small-card__number {

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            180deg,
            rgba(35,51,75,.82),
            rgba(17,25,38,.94)
        );

    border-right:
        1px solid
        rgba(114,139,171,.20);
}


.wsf-prayer-small-card__number span {

    margin-bottom: 8px;

    font-family:
        Arial,
        sans-serif;

    font-size: .52rem;

    letter-spacing: .22em;

    color:
        rgba(164,181,205,.62);
}


.wsf-prayer-small-card__number strong {

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 3.4rem;

    line-height: 1;

    font-weight: 400;

    color: #94a7c2;
}


.wsf-prayer-small-card__content {

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding:
        34px
        34px;
}


.wsf-prayer-small-card__label {

    display: block;

    margin-bottom: 13px;

    font-family:
        Arial,
        sans-serif;

    font-size: .56rem;

    letter-spacing: .23em;

    color:
        rgba(183,150,89,.68);
}


.wsf-prayer-small-card h3 {

    margin: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(1.8rem,3.6vw,2.8rem);

    line-height: .98;

    font-weight: 400;

    color: #f0eee9;
}


.wsf-prayer-small-card p {

    margin:
        19px
        0
        0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: .95rem;

    line-height: 1.55;

    font-style: italic;

    color:
        rgba(211,220,233,.56);
}


.wsf-prayer-small-card--coming {

    opacity: .72;
}


.wsf-prayer-coming {

    display: inline-block;

    align-self: flex-start;

    margin-top: 25px;

    padding:
        8px
        11px;

    border:
        1px solid
        rgba(183,150,89,.28);

    font-family:
        Arial,
        sans-serif;

    font-size: .54rem;

    letter-spacing: .20em;

    color:
        rgba(203,173,113,.72);
}


/* =========================================================
   SWIPE INDICATOR
   ========================================================= */

.wsf-prayer-swipe {

    display: flex;

    align-items: center;

    width:
        min(1100px,calc(100% - 48px));

    margin:
        8px
        auto
        0;

    gap: 12px;

    color:
        rgba(183,150,89,.54);
}


.wsf-prayer-swipe__line {

    flex: 1;

    max-width: 75px;

    height: 1px;

    background:
        rgba(183,150,89,.23);
}


.wsf-prayer-swipe__text {

    font-family:
        Arial,
        sans-serif;

    font-size: .52rem;

    letter-spacing: .19em;
}


.wsf-prayer-swipe__arrow {

    font-size: 1rem;

    color: var(--prayer-gold);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 820px) {

    .wsf-prayer-hero {

        min-height: 530px;
    }


    .wsf-prayer-teaching {

        grid-template-columns:
            150px
            minmax(0,1fr);

        min-height: 430px;
    }


    .wsf-prayer-teaching__body {

        padding:
            55px
            42px;
    }


    .wsf-prayer-small-card {

        flex-basis: 58vw;
    }

}


/* =========================================================
   PHONE
   ========================================================= */

@media (max-width: 600px) {

    .wsf-prayer-hero {

        min-height: auto;

        padding:
            55px
            20px
            65px;
    }


    .wsf-prayer-back {

        margin-bottom: 42px;
    }


    .wsf-prayer-slogan {

        font-size: 1.08rem;

        line-height: 1.7;
    }


    .wsf-prayer-start {

        width:
            calc(100% - 20px);

        padding:
            68px
            0
            72px;
    }


    .wsf-prayer-start__header {

        margin-bottom: 32px;

        padding:
            0
            15px;
    }


    .wsf-prayer-teaching {

        grid-template-columns: 1fr;

        min-height: auto;
    }


    .wsf-prayer-teaching__number {

        min-height: 135px;

        flex-direction: row;

        gap: 15px;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(114,139,171,.25);
    }


    .wsf-prayer-teaching__number::before {

        display: none;
    }


    .wsf-prayer-teaching__number span {

        margin: 0;
    }


    .wsf-prayer-teaching__number strong {

        font-size: 4.2rem;
    }


    .wsf-prayer-teaching__body {

        padding:
            48px
            27px
            44px;
    }


    .wsf-prayer-teaching__body h3 {

        font-size:
            clamp(2.45rem,11vw,3.7rem);
    }


    .wsf-prayer-library {

        padding:
            60px
            0
            68px;
    }


    .wsf-prayer-library__header {

        margin-bottom: 32px;
    }


    .wsf-prayer-track {

        gap: 13px;

        padding:
            0
            12vw
            14px
            10px;
    }


    .wsf-prayer-small-card {

        flex:
            0
            0
            84vw;

        min-height: 300px;

        grid-template-columns:
            84px
            minmax(0,1fr);
    }


    .wsf-prayer-small-card__number strong {

        font-size: 2.8rem;
    }


    .wsf-prayer-small-card__content {

        padding:
            28px
            23px;
    }


    .wsf-prayer-small-card h3 {

        font-size:
            clamp(1.8rem,8vw,2.6rem);
    }


    .wsf-prayer-swipe {

        width:
            calc(100% - 28px);

        margin-top: 6px;
    }

}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 1100px) {

    .wsf-prayer-small-card {

        flex-basis: 500px;
    }

}