/* =========================================================
   MAMAHOOD — SUBSCRIPTIONS
   ========================================================= */
/*
 * Mechanical migration from the approved current Additional CSS.
 * No visual changes intended.
 */

/* =========================================================
   ADVERTISING SUBSCRIPTIONS HERO
   ========================================================= */


/* ---------------------------------------------------------
   HERO CONTAINER
   --------------------------------------------------------- */

.subscription-hero {
    position: relative;
    overflow: hidden !important;
    background-color: #F0E5D9 !important;
}


/* ---------------------------------------------------------
   DESKTOP + TABLET
   LEFT COLUMN VEIL
   --------------------------------------------------------- */

.subscription-hero .subscription-veil {
    position: relative;
    z-index: 2;
    align-self: stretch !important;
    overflow: visible !important;

    background: linear-gradient(
        90deg,

        rgb(240, 229, 217) 0%,
        rgb(240, 229, 217) 12%,

        rgba(240, 229, 217, 0.98) 22%,
        rgba(240, 229, 217, 0.94) 34%,
        rgba(240, 229, 217, 0.84) 46%,
        rgba(240, 229, 217, 0.68) 58%,
        rgba(240, 229, 217, 0.48) 70%,
        rgba(240, 229, 217, 0.28) 81%,
        rgba(240, 229, 217, 0.12) 90%,
        rgba(240, 229, 217, 0.04) 96%,
        rgba(240, 229, 217, 0) 100%
    ) !important;
}


/* Make sure the veil column fills the full hero height */

.subscription-hero .subscription-veil > .kt-inside-inner-col {
    height: 100% !important;
    min-height: 100% !important;
}


/* ---------------------------------------------------------
   SOLID FAR-LEFT EXTENSION — DESKTOP/TABLET ONLY
   --------------------------------------------------------- */

@media (min-width: 768px) {

    .subscription-hero .subscription-veil::before {
        content: "";
        position: absolute;

        top: 0;
        bottom: 0;

        right: calc(100% - 1px);

        width: 100vw;

        background: rgb(240, 229, 217) !important;

        pointer-events: none;
        z-index: -1;
    }

}


/* =========================================================
   ADVERTISING SUBSCRIPTIONS HERO — MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .subscription-hero .subscription-veil::before {
        content: none !important;
        display: none !important;
    }

    .subscription-hero .subscription-veil {
        overflow: hidden !important;

        background: linear-gradient(
            180deg,

            rgb(240, 229, 217) 0%,
            rgb(240, 229, 217) 18%,

            rgba(240, 229, 217, 0.98) 32%,
            rgba(240, 229, 217, 0.94) 48%,
            rgba(240, 229, 217, 0.84) 62%,
            rgba(240, 229, 217, 0.68) 74%,
            rgba(240, 229, 217, 0.46) 84%,
            rgba(240, 229, 217, 0.24) 92%,
            rgba(240, 229, 217, 0) 100%
        ) !important;
    }

}


/* =========================================================
   SUBSCRIPTION PRICE FAMILY
   Used on the Advertising Subscriptions page
   ========================================================= */

.subscription-pricing-family {
    font-family: "DM Sans", sans-serif !important;
    margin: 0 0 14px 0 !important;
    padding: 0 !important;
}


.subscription-price-monthly {
    display: flex !important;
    align-items: baseline !important;
    flex-wrap: wrap !important;
    gap: 7px !important;

    margin: 0 0 5px 0 !important;
    padding: 0 !important;

    line-height: 1.05 !important;
}


.subscription-price-amount {
    color: #F23883 !important;

    font-family: "DM Sans", sans-serif !important;
    font-size: 34px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: -1.2px !important;
}


.subscription-price-period {
    color: #073570 !important;

    font-family: "DM Sans", sans-serif !important;
    font-size: 22px !important;
    font-weight: 500 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.4px !important;
}


.subscription-price-annual {
    color: #073570 !important;

    font-family: "DM Sans", sans-serif !important;
    font-size: 22px !important;
    font-weight: 500 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.4px !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* ---------------------------------------------------------
   SUBSCRIPTION PRICE FAMILY — MOBILE
   --------------------------------------------------------- */

@media (max-width: 767px) {

    .subscription-price-amount {
        font-size: 32px !important;
    }

    .subscription-price-period,
    .subscription-price-annual {
        font-size: 21px !important;
    }

}


/* =========================================================
   SUBSCRIPTION PLAN CTA BUTTONS — TABLET
   Keep the two plan-card labels on one clean line without
   changing the approved desktop or mobile presentation.
   ========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {

    .kt-inside-inner-col:has(.subscription-pricing-family) .wp-block-button__link,
    .kt-inside-inner-col:has(.subscription-pricing-family) .kb-button {
        max-width: 100% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;

        font-size: 13px !important;
        white-space: nowrap !important;
        text-align: center !important;
        justify-content: center !important;
    }

}


/* =========================================================
   SUBSCRIPTION BENEFITS ROW
   "Clear, simple and easy to manage."
   ========================================================= */

.subscription-features-row {
    position: relative;
}

/* Tablet: keep the benefits panel comfortably inset from
   the viewport instead of touching the screen edges. */
@media (min-width: 768px) and (max-width: 1024px) {

    .subscription-features-row {
        width: calc(100% - 80px) !important;
        max-width: calc(100% - 80px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

}

.subscription-feature-one,
.subscription-feature-two,
.subscription-feature-three {
    position: relative;
}


/* =========================================================
   SUBSCRIPTION BENEFITS — MOBILE
   Three separate compact cards.
   Desktop and tablet remain unchanged.
   ========================================================= */

@media (max-width: 767px) {

    /* Remove the single-panel treatment from the outer row so
       each benefit can read as its own card, while keeping the
       group inset from the phone edges. */
    .subscription-features-row {
        width: calc(100% - 32px) !important;
        max-width: calc(100% - 32px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .subscription-features-row,
    .subscription-features-row > .kt-row-layout-inner {
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    .subscription-features-row > .kt-row-layout-inner > .kt-row-column-wrap {
        row-gap: 14px !important;
    }

    .subscription-feature-one,
    .subscription-feature-two,
    .subscription-feature-three {
        position: relative !important;

        min-height: 126px !important;
        height: auto !important;

        padding: 18px !important;
        margin: 0 0 14px 0 !important;

        background: #ffffff !important;
        border: 0 !important;
        border-radius: 14px !important;
        box-shadow: 0 3px 14px rgba(7, 53, 112, 0.10) !important;

        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .subscription-feature-three {
        margin-bottom: 0 !important;
    }

    /* The old mobile treatment used divider lines between rows.
       They are intentionally removed now that each item is a card. */
    .subscription-feature-one::after,
    .subscription-feature-two::after,
    .subscription-feature-three::after {
        content: none !important;
        display: none !important;
    }

    .subscription-feature-one .kt-row-column-wrap,
    .subscription-feature-two .kt-row-column-wrap,
    .subscription-feature-three .kt-row-column-wrap {
        min-height: 90px !important;
        height: 100% !important;
        align-items: center !important;
    }

    .subscription-feature-one p:last-child,
    .subscription-feature-two p:last-child,
    .subscription-feature-three p:last-child {
        margin-bottom: 0 !important;
    }

}