/* =====================================================
   TODAY SOAP (SCOPED / HERO)
===================================================== */

#daily-soap {
    position: relative;
    z-index: 20;
}

#daily-soap .soap-today-link {
    display: inline-flex;
    position: relative;
    z-index: 21;
    pointer-events: auto;
    text-decoration: none;
}

#daily-soap .soap-today-card {
    display: inline-flex;
    flex-direction: column;
    width: max-content;
    max-width: 100%;

    padding: 18px 26px;
    border: 1px solid var(--wpex-palette-256-color);
    background: transparent;

    transition: background-color 160ms ease;
}

#daily-soap .soap-today-link:hover .soap-today-card {
    background-color: rgba(255, 255, 255, 0.06);
}

/* Title */
#daily-soap .spc-soap-title {
    font-family: 'Nagoda', sans-serif;
    text-transform: uppercase;
    font-size: 16px;
    letter-spacing: 0.1em;
    white-space: nowrap;
    margin-bottom: 4px;
    color: var(--wpex-palette-255-color);
}

/* Scripture */
#daily-soap .spc-soap-scripture {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.3;
    white-space: normal;
    word-break: keep-all;
    color: var(--wpex-palette-255-color);
}

/* Remove underline states */
#daily-soap a,
#daily-soap a:hover,
#daily-soap a:focus,
#daily-soap a:visited {
    text-decoration: none;
}


/* =====================================================
   SOAP RECENT – GRID (4 COLUMNS)
===================================================== */

.spc-soap-recent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 24px;
  margin-top: 40px;
}

/* Place the two cards in columns 2 and 3 */
.spc-soap-recent > .spc-soap-card:nth-child(1) {
  grid-column: 2;
}

.spc-soap-recent > .spc-soap-card:nth-child(2) {
  grid-column: 3;
}

/* =====================================================
   SOAP RECENT — MOBILE & TABLET
   Show ONLY Today SOAP
===================================================== */

@media (max-width: 960px) {

    .spc-soap-recent {
        grid-template-columns: 1fr;
    }

    /* Hide all cards except Today */
    .spc-soap-recent .spc-soap-card:not(:first-child) {
        display: none;
    }
}

/* =====================================================
   SOAP RECENT – CARD
===================================================== */

.spc-soap-card {
    background: #f7f4ef;
    padding: 24px;
    border-radius: 1px;
    color: var(--wpex-palette-252-color);
}

.spc-soap-card * {
    color: inherit;
}


/* =====================================================
   SOAP RECENT – CARD INNER LAYOUT
===================================================== */

.spc-soap-card-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}


/* =====================================================
   SOAP RECENT – TEXT STACK
===================================================== */

.spc-soap-card-text {
    display: flex;
    flex-direction: column;
}

.spc-soap-card-title {
    font-family: 'Nagoda', sans-serif;
    text-transform: uppercase;
    font-size: 18px;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.spc-soap-card-ref {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    margin-bottom: 2px;
}

.spc-soap-card-date {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    opacity: 0.7;
}


/* =====================================================
   SOAP RECENT – READ IN BIBLE BUTTON
===================================================== */

.spc-soap-read-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;

    border: 1px solid var(--wpex-palette-256-color);
    border-radius: 1px;

    font-family: 'Inter', sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;

    color: var(--wpex-palette-252-color);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;

    transition: opacity 160ms ease;
}

.spc-soap-read-btn:hover {
    opacity: 0.85;
}

.spc-soap-read-btn,
.spc-soap-read-btn:hover,
.spc-soap-read-btn:focus,
.spc-soap-read-btn:visited {
    text-decoration: none;
}


/* =====================================================
   SOAP RECENT – BIBLE ICON
===================================================== */

.spc-soap-bible-icon {
    width: 14px;
    height: 14px;
    display: inline-block;
    background-color: currentColor;

    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3h13a2 2 0 0 1 2 2v14a1 1 0 0 1-1 1H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm1 2v14h11V5H5zm2 2h7v2H7V7zm0 4h7v2H7v-2z'/%3E%3C/svg%3E")
        center / contain no-repeat;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 960px) {
    .spc-soap-recent {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    #daily-soap .soap-today-card {
        width: 100%;
    }
}

/* =====================================================
   SOAP – MONTHLY DOWNLOADS
===================================================== */

/* Wrapper */
.spc-soap-monthly-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 60px;
}

/* Grid */
.spc-soap-monthly-grid {
    width: 100%;
    max-width: 1100px;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

/* Button */
.spc-soap-month-btn {
    display: block;
    text-align: center;
    padding: 18px 16px;

    background: #F8F4E9;
    color: #272324;

    border: 1px solid #272324;
    border-radius: 0;

    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;

    transition:
        background 180ms ease,
        color 180ms ease;
}

/* Hover / focus */
.spc-soap-month-btn:hover,
.spc-soap-month-btn:focus {
    background: #272324;
    color: #F8F4E9;
}

/* Kill underline in all states */
.spc-soap-month-btn,
.spc-soap-month-btn:hover,
.spc-soap-month-btn:focus,
.spc-soap-month-btn:visited {
    text-decoration: none;
}


/* =====================================================
   SOAP – MONTHLY DOWNLOADS (RESPONSIVE)
===================================================== */

@media (max-width: 960px) {
    .spc-soap-monthly-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .spc-soap-monthly-grid {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   MOBILE – SOAP PAGE
   Show ONLY Today's SOAP card
===================================================== */

@media (max-width: 600px) {

    .page-soap .spc-soap-recent {
        grid-template-columns: 1fr;
    }

    /* Hide all cards except the first (Today) */
    .page-soap .spc-soap-card:not(:first-child) {
        display: none;
    }
}