/* ============================================================
   curriculum_pricing — Section 3 of the Structured Learning
   landing. Visual reference: Section 3.png.
   Heading + sub-heading + 3 pricing tiers (monthly / quarterly /
   yearly). Each tier has a title, duration, price, tagline, a
   features list, an optional highlight badge ("BEST VALUE"), and
   a CTA that flips to a non-clickable "Coming Soon" pill before
   the official launch.
   Palette + wallpaper accents match the rest of the curriculum
   landing for visual consistency. Light / Dark / wallpaper / RTL
   aware.
   ============================================================ */

.curriculum-pricing-section {
    position: relative;
    overflow: hidden;
    padding: 32px 0;
}

/* ---- Heading + sub-heading ----
   The heading carries a comfortable bottom margin on its own so the
   pricing tiers don't crash into it when the admin clears the
   subheading. When BOTH heading and subheading are present, the
   adjacent-sibling rule below tightens the gap between them so they
   read as one block, and the subheading then provides the 36px
   spacer to the tiers. */
.curriculum-pricing-section__heading {
    margin: 0 0 36px;
    text-align: center;
    font-weight: 800;
    font-size: clamp(1.5rem, 2.4vw, 2.2rem);
    line-height: 1.25;
    color: var(--dark);
}
.curriculum-pricing-section__heading + .curriculum-pricing-section__subheading {
    margin-top: -28px;          /* pulls the subheading back up under the heading */
}
.curriculum-pricing-section__subheading {
    margin: 0 auto 36px;
    max-width: 720px;
    text-align: center;
    font-size: clamp(0.92rem, 1vw, 1rem);
    line-height: 1.6;
    color: var(--gray-500);
}
body.dark-mode .curriculum-pricing-section__heading { color: #ffffff; }
body.dark-mode .curriculum-pricing-section__subheading { color: var(--gray-400); }
body.home-wallpaper-active:not(.dark-mode) .curriculum-pricing-section__heading {
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(20, 0, 40, 0.35);
}
body.home-wallpaper-active:not(.dark-mode) .curriculum-pricing-section__subheading {
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 2px rgba(20, 0, 40, 0.20);
}

/* ============================================================
   Tier grid — 3 columns on desktop, stacks on mobile via the
   shared four-breakpoint cascade.
   ============================================================ */
.curriculum-pricing-section__tiers {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
}

/* ---- Tier card — matches the ai-card / ch-card lavender shell
       for visual consistency with the rest of the landing. ---- */
.cp-tier {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0;                                  /* moved to .__body so the highlight pill can sit at the top edge */
    border: 1.5px solid var(--primary);
    border-radius: 24px;
    background: #fbdefcf8;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 16px 36px rgba(62, 0, 95, 0.10);
    transition: transform .25s ease, box-shadow .25s ease;
    overflow: hidden;
}
.cp-tier:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 48px rgba(62, 0, 95, 0.16);
}
body.dark-mode .cp-tier {
    background: rgba(31, 15, 51, 0.55);
    border-color: rgba(180, 143, 255, 0.65);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.30);
}
body.dark-mode .cp-tier:hover {
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.40);
}

/* ---- Highlighted tier ("BEST VALUE") — slightly emphasized border + shadow ---- */
.cp-tier--highlighted {
    transform: translateY(-6px);
    border-width: 2px;
    box-shadow: 0 22px 48px rgba(62, 0, 95, 0.20);
}
.cp-tier--highlighted:hover {
    transform: translateY(-10px);
}

/* ---- Highlight badge — pill at the top of the card ---- */
.cp-tier__highlight {
    display: inline-block;
    align-self: center;
    margin: 16px auto 0;
    padding: 6px 18px;
    border-radius: 100px;
    background: var(--primary);
    color: var(--primary-btn-color);
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 8px 18px rgba(62, 0, 95, 0.25);
}

/* ---- Inner body — padding + flex column so the CTA sticks to the bottom ---- */
.cp-tier__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 28px 22px;
    flex: 1 1 auto;
}

/* ---- Tier text ---- */
.cp-tier__title {
    margin: 0;
    font-weight: 800;
    font-size: clamp(1.05rem, 1.25vw, 1.3rem);
    line-height: 1.3;
    color: var(--dark);
}
.cp-tier__duration {
    margin: 0;
    font-size: clamp(0.85rem, 0.92vw, 0.95rem);
    color: var(--gray-500);
}
.cp-tier__price {
    margin: 6px 0 0;
    font-weight: 800;
    font-size: clamp(2rem, 3.2vw, 3rem);
    line-height: 1;
    color: var(--primary);
}
.cp-tier__tagline {
    margin: 0 0 8px;
    font-size: clamp(0.85rem, 0.95vw, 0.95rem);
    line-height: 1.5;
    color: var(--gray-500);
}

body.dark-mode .cp-tier__title { color: #ffffff; }
body.dark-mode .cp-tier__duration,
body.dark-mode .cp-tier__tagline { color: var(--gray-400); }
body.dark-mode .cp-tier__price { color: var(--accent); }
body.home-wallpaper-active:not(.dark-mode) .cp-tier__title { color: #6a0d7a; }
body.home-wallpaper-active:not(.dark-mode) .cp-tier__price { color: #6a0d7a; }
body.home-wallpaper-active:not(.dark-mode) .cp-tier__duration,
body.home-wallpaper-active:not(.dark-mode) .cp-tier__tagline { color: #8a3d96; }

/* ---- Features list — single column of items, each prefixed with
       a primary checkmark. ---- */
.cp-tier__features {
    list-style: none;
    padding: 0;
    margin: 8px 0 16px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: start;
}
.cp-tier__features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: clamp(0.82rem, 0.9vw, 0.95rem);
    line-height: 1.5;
    color: var(--gray-500);
    word-break: break-word;
    overflow-wrap: anywhere;
}
.cp-tier__feature-check {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--primary-btn-color);
}
.cp-tier__feature-check svg { display: block; }
body.dark-mode .cp-tier__features li { color: var(--gray-400); }
body.home-wallpaper-active:not(.dark-mode) .cp-tier__features li { color: #6a0d7a; }

/* ---- CTA — bottom of card. "Coming Soon" mode renders a disabled
       outline pill instead of the active primary button. ---- */
.cp-tier__cta-wrap {
    margin-top: auto;
    width: 100%;
    display: flex;
    justify-content: center;
}
.cp-tier__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 160px;
    padding: 12px 28px;
    border-radius: 100px;
    background: var(--primary);
    color: var(--primary-btn-color);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(62, 0, 95, 0.25);
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.cp-tier__cta:hover {
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(255, 107, 157, 0.30);
    color: var(--primary-btn-color);
}
/* Coming-Soon pill — same primary-fill + white-text look as the
   waitlist submit button (.cw-submit) so the visual language stays
   consistent across the landing. It just doesn't react to hover
   because there's nothing to click yet. */
.cp-tier__cta--coming-soon {
    background: var(--primary);
    color: var(--primary-btn-color);
    border: 0;
    cursor: default;
    box-shadow: 0 10px 26px rgba(62, 0, 95, 0.25);
}
.cp-tier__cta--coming-soon:hover {
    background: var(--primary);
    color: var(--primary-btn-color);
    transform: none;
    box-shadow: 0 10px 26px rgba(62, 0, 95, 0.25);
}

/* ============================================================
   Responsive — same four-breakpoint cascade as every other
   landing builder component (1199 / 991 / 767 / 575).
   ============================================================ */
@media (max-width: 1199px) {
    .curriculum-pricing-section__tiers { gap: 16px; }
}

@media (max-width: 991px) {
    .curriculum-pricing-section__tiers {
        grid-template-columns: 1fr;
        max-width: 480px;
        margin: 0 auto;
        gap: 20px;
    }
    .cp-tier--highlighted { transform: none; }
    .cp-tier--highlighted:hover { transform: translateY(-4px); }
}

@media (max-width: 767px) {
    .cp-tier__body { padding: 24px 18px; }
}

@media (max-width: 575px) {
    .curriculum-pricing-section__heading { font-size: clamp(1.3rem, 5.5vw, 1.7rem); }
    .cp-tier__body { padding: 22px 16px; }
    .cp-tier__cta { min-width: 140px; padding: 10px 22px; }
}