/**
 * plans.css — E77 Batch 1 (v1.5.79)
 *
 * Public plan catalog + plan-detail surfaces. Design tokens sourced from
 * `components.css` :root. All accents inherit `--cits-wpel-primary-color`
 * so the surfaces re-tint with the operator's Customizer choice.
 *
 * Responsive strategy:
 *   • Container queries on the wrapping surfaces so narrow-theme
 *     containers (Blocksy sidebar, Astra narrow container, etc.) fold
 *     properly even when the viewport is wide.
 *   • Viewport @media rules cover the mobile-first fallback.
 *
 * Enqueued from `Assets::maybeEnqueue` only when either shortcode is
 * present on the page (builder-aware detection).
 * =============================================================== */

/* ============================================================
 * CATALOG
 * ============================================================ */

.cwl-plans {
    container-type: inline-size;
    container-name: cwl-plans;
    max-width: 100%;
    margin: 0 auto;
}

/* v1.7.9 — Defensive breakout for block themes.
 * v1.7.13 — Boosted specificity + `!important` to beat WP block-layout CSS.
 * v1.7.14 — Corrected the max-width target from `none` (full viewport)
 *           to the theme's wide-size CSS variable so the block gets
 *           `.alignwide` treatment (~1200px centered), NOT `.alignfull`
 *           treatment (edge-to-edge). v1.7.13 was too aggressive:
 *           `max-width: none` + `width: 100%` + `margin: 0` made the
 *           plans grid touch the browser edges, when it should sit in
 *           the wide-alignment band.
 *
 * The right WP-native behaviour for `.alignwide`:
 *   - `max-width: var(--wp--style--global--wide-size)` — theme.json
 *     wide-size, typically 1200-1400px. Falls back to 1200px.
 *   - `margin-inline: auto` — centered horizontally in the parent.
 *   - No `width: 100%` — that would stretch past the max-width cap. */
.is-layout-constrained > .cwl-plans.alignwide,
.wp-block-post-content > .cwl-plans.alignwide,
.entry-content > .cwl-plans.alignwide {
    max-width: var(--wp--style--global--wide-size, 1200px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.cwl-plans__grid {
    display: grid;
    /* v1.7.9 — `auto-fit` (was `auto-fill`) collapses empty tracks so
     * 4 cards stretch to fill the full container width evenly. Previous
     * `auto-fill` reserved empty tracks on the right when card count
     * was less than tracks-that-fit, making the row look left-aligned
     * inside a wide container. */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--et-space-5, 20px);
    align-items: stretch;
}

@container cwl-plans (max-width: 780px) {
    .cwl-plans__grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
@container cwl-plans (max-width: 520px) {
    .cwl-plans__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .cwl-plans__grid { grid-template-columns: 1fr; }
}

/* ---- Card ---- */
.cwl-plans__card {
    background: var(--et-surface, #ffffff);
    border: 1px solid var(--et-border, #e5e7eb);
    border-radius: var(--et-radius, 10px);
    padding: var(--et-space-6, 24px);
    display: flex;
    flex-direction: column;
    gap: var(--et-space-4, 16px);
    transition:
        transform var(--et-motion-medium, 200ms ease),
        box-shadow var(--et-motion-medium, 200ms ease),
        border-color var(--et-motion-medium, 200ms ease);
    position: relative;
    overflow: hidden;
    /* v1.8.3.1 — Cap card width so a single-card catalog (e.g. the
     * instructor-plans page when only one tier is published) doesn't
     * stretch edge-to-edge inside the wide-alignment container. Grid
     * cell may be 1200px, card caps at 400px + centers itself. Doesn't
     * affect the 4-card layout because each auto-fit track is already
     * ~300px in that case. */
    width: 100%;
    max-width: 400px;
    justify-self: center;
}
.cwl-plans__card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--cits-wpel-primary-color);
    opacity: 0;
    transition: opacity var(--et-motion-medium, 200ms ease);
}
.cwl-plans__card:hover,
.cwl-plans__card:focus-within {
    transform: translateY(-2px);
    box-shadow: var(--et-shadow-md, 0 8px 24px rgba(0, 0, 0, 0.08));
    border-color: color-mix(in srgb, var(--cits-wpel-primary-color) 30%, var(--et-border, #e5e7eb));
}
.cwl-plans__card:hover::before,
.cwl-plans__card:focus-within::before { opacity: 1; }

.cwl-plans__card--free {
    border-color: color-mix(in srgb, var(--cits-wpel-success-color) 40%, var(--et-border, #e5e7eb));
}
.cwl-plans__card--free::before {
    background: var(--cits-wpel-success-color);
    opacity: 1;
}

.cwl-plans__card-head { display: flex; flex-direction: column; gap: var(--et-space-1, 4px); }
.cwl-plans__card-title {
    margin: 0;
    font-size: var(--et-fs-h3, 17px);
    font-weight: 700;
    line-height: var(--et-lh-tight, 1.2);
    color: var(--et-ink, #111827);
}
.cwl-plans__card-title a {
    color: inherit;
    text-decoration: none;
    background: none;
}
.cwl-plans__card-title a:hover,
.cwl-plans__card-title a:focus-visible {
    color: var(--cits-wpel-primary-color);
    text-decoration: none;
}

.cwl-plans__card-billing {
    margin: 0;
    font-size: 0.8rem;
    color: var(--et-ink-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.cwl-plans__card-price {
    display: flex;
    align-items: baseline;
    gap: var(--et-space-1, 4px);
    padding: var(--et-space-3, 12px) 0;
    border-top: 1px solid var(--et-border, #e5e7eb);
    border-bottom: 1px solid var(--et-border, #e5e7eb);
}
.cwl-plans__card-price-amount {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--et-ink, #111827);
    line-height: 1;
}
.cwl-plans__card-price-suffix {
    font-size: 0.9rem;
    color: var(--et-ink-muted, #6b7280);
    font-weight: 500;
}

.cwl-plans__card-desc {
    margin: 0;
    font-size: 0.9rem;
    line-height: var(--et-lh-body, 1.5);
    color: var(--et-ink-soft, #374151);
}

.cwl-plans__card-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--et-space-2, 8px);
}
.cwl-plans__card-features li {
    display: flex;
    align-items: center;
    gap: var(--et-space-2, 8px);
    font-size: 0.875rem;
    color: var(--et-ink-soft, #374151);
}
.cwl-plans__card-features svg {
    flex-shrink: 0;
    color: var(--cits-wpel-primary-color);
}

.cwl-plans__card-foot {
    margin-top: auto;
    padding-top: var(--et-space-3, 12px);
}
.cwl-plans__card-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--et-space-3, 12px) var(--et-space-4, 16px);
    background: var(--cits-wpel-primary-color);
    color: #ffffff;
    border-radius: var(--et-radius-sm, 6px);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition:
        filter var(--et-motion-fast, 120ms ease),
        transform var(--et-motion-fast, 120ms ease);
}
.cwl-plans__card-cta:hover,
.cwl-plans__card-cta:focus-visible {
    filter: brightness(0.92);
    color: #ffffff;
    text-decoration: none;
    outline: none;
    transform: translateY(-1px);
}

/* ---- Pagination ---- */
.cwl-plans__pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--et-space-4, 16px);
    margin-top: var(--et-space-6, 24px);
    font-size: 0.9rem;
}
.cwl-plans__pager-link {
    display: inline-flex;
    align-items: center;
    padding: var(--et-space-2, 8px) var(--et-space-4, 16px);
    color: var(--cits-wpel-primary-color);
    text-decoration: none;
    border: 1px solid var(--et-border, #e5e7eb);
    border-radius: var(--et-radius-sm, 6px);
    font-weight: 500;
    transition: background var(--et-motion-fast, 120ms ease);
}
.cwl-plans__pager-link:hover,
.cwl-plans__pager-link:focus-visible {
    background: color-mix(in srgb, var(--cits-wpel-primary-color) 8%, transparent);
    text-decoration: none;
    outline: none;
}
.cwl-plans__pager-status {
    color: var(--et-ink-muted, #6b7280);
    font-weight: 500;
}

/* ============================================================
 * PLAN DETAIL
 * ============================================================ */

.cwl-plan-detail {
    container-type: inline-size;
    container-name: cwl-plan-detail;
    max-width: 900px;
    margin: 0 auto;
}

.cwl-plan-detail__hero {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--cits-wpel-primary-color) 8%, var(--et-surface, #ffffff)) 0%,
        var(--et-surface, #ffffff) 100%);
    border: 1px solid var(--et-border, #e5e7eb);
    border-left: 4px solid var(--cits-wpel-primary-color);
    border-radius: var(--et-radius, 10px);
    padding: var(--et-space-8, 32px);
    display: flex;
    flex-direction: column;
    gap: var(--et-space-3, 12px);
}
@container cwl-plan-detail (max-width: 600px) {
    .cwl-plan-detail__hero { padding: var(--et-space-5, 20px); }
}

.cwl-plan-detail__breadcrumb {
    margin: 0;
    font-size: 0.85rem;
}
.cwl-plan-detail__breadcrumb a {
    color: var(--cits-wpel-primary-color);
    text-decoration: none;
    font-weight: 500;
}
.cwl-plan-detail__breadcrumb a:hover,
.cwl-plan-detail__breadcrumb a:focus-visible {
    text-decoration: underline;
    outline: none;
}

.cwl-plan-detail__title {
    margin: 0;
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 700;
    color: var(--et-ink, #111827);
    line-height: var(--et-lh-tight, 1.2);
}

.cwl-plan-detail__billing {
    margin: 0;
    font-size: 0.8rem;
    color: var(--et-ink-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.cwl-plan-detail__price {
    display: flex;
    align-items: baseline;
    gap: var(--et-space-1, 4px);
    margin-top: var(--et-space-2, 8px);
}
.cwl-plan-detail__price-amount {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--cits-wpel-primary-color);
    line-height: 1;
}
.cwl-plan-detail__price-suffix {
    font-size: 1rem;
    color: var(--et-ink-muted, #6b7280);
    font-weight: 500;
}

.cwl-plan-detail__body {
    margin-top: var(--et-space-6, 24px);
    display: flex;
    flex-direction: column;
    gap: var(--et-space-6, 24px);
}

.cwl-plan-detail__section {
    background: var(--et-surface, #ffffff);
    border: 1px solid var(--et-border, #e5e7eb);
    border-radius: var(--et-radius, 10px);
    padding: var(--et-space-6, 24px);
}
@container cwl-plan-detail (max-width: 600px) {
    .cwl-plan-detail__section { padding: var(--et-space-4, 16px); }
}

.cwl-plan-detail__section-title {
    margin: 0 0 var(--et-space-3, 12px);
    font-size: var(--et-fs-h3, 17px);
    font-weight: 600;
    color: var(--et-ink, #111827);
}

.cwl-plan-detail__desc {
    margin: 0;
    color: var(--et-ink-soft, #374151);
    line-height: var(--et-lh-body, 1.5);
    white-space: pre-wrap;
}

.cwl-plan-detail__features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--et-space-3, 12px);
}
@container cwl-plan-detail (max-width: 500px) {
    .cwl-plan-detail__features { grid-template-columns: 1fr; }
}
.cwl-plan-detail__features li {
    display: flex;
    align-items: center;
    gap: var(--et-space-2, 8px);
    padding: var(--et-space-3, 12px);
    background: var(--et-surface-tint, #fafafa);
    border-radius: var(--et-radius-sm, 6px);
    font-size: 0.9rem;
    color: var(--et-ink-soft, #374151);
    font-weight: 500;
}
.cwl-plan-detail__features svg {
    flex-shrink: 0;
    color: var(--cits-wpel-primary-color);
}
.cwl-plan-detail__features-empty {
    grid-column: 1 / -1;
    font-style: italic;
    color: var(--et-ink-muted, #6b7280);
    justify-content: center;
    background: transparent;
}

.cwl-plan-detail__activation {
    background: color-mix(in srgb, var(--cits-wpel-primary-color) 5%, var(--et-surface, #ffffff));
    border-color: color-mix(in srgb, var(--cits-wpel-primary-color) 20%, var(--et-border, #e5e7eb));
}
.cwl-plan-detail__activation--held {
    background: color-mix(in srgb, var(--cits-wpel-success-color) 6%, var(--et-surface, #ffffff));
    border-color: color-mix(in srgb, var(--cits-wpel-success-color) 25%, var(--et-border, #e5e7eb));
}
.cwl-plan-detail__activation-note {
    margin: 0 0 var(--et-space-4, 16px);
    color: var(--et-ink-soft, #374151);
    line-height: var(--et-lh-body, 1.5);
}
.cwl-plan-detail__activation-note:last-child {
    margin-bottom: 0;
}

/* v1.5.80 (E77 Batch 2) — Buy button + error notice + form wrapper. */
.cwl-plan-detail__buy-form {
    margin: 0;
    padding: 0;
    display: flex;
}
.cwl-plan-detail__activation-cta-row {
    margin: 0;
    display: flex;
    gap: var(--et-space-3, 12px);
    flex-wrap: wrap;
}
.cwl-plan-detail__buy-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--et-space-3, 12px) var(--et-space-5, 20px);
    background: var(--cits-wpel-primary-color);
    color: #ffffff;
    border: 0;
    border-radius: var(--et-radius-sm, 6px);
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition:
        filter var(--et-motion-fast, 120ms ease),
        transform var(--et-motion-fast, 120ms ease);
}
.cwl-plan-detail__buy-cta:hover,
.cwl-plan-detail__buy-cta:focus-visible {
    filter: brightness(0.92);
    color: #ffffff;
    text-decoration: none;
    outline: none;
    transform: translateY(-1px);
}
.cwl-plan-detail__buy-cta--secondary {
    background: transparent;
    color: var(--cits-wpel-primary-color);
    border: 1px solid var(--cits-wpel-primary-color);
}
.cwl-plan-detail__buy-cta--secondary:hover,
.cwl-plan-detail__buy-cta--secondary:focus-visible {
    background: color-mix(in srgb, var(--cits-wpel-primary-color) 8%, transparent);
    color: var(--cits-wpel-primary-color);
    filter: none;
}
.cwl-plan-detail__activation-error {
    padding: var(--et-space-3, 12px) var(--et-space-4, 16px);
    background: color-mix(in srgb, var(--cits-wpel-danger-color) 8%, var(--et-surface, #ffffff));
    border: 1px solid color-mix(in srgb, var(--cits-wpel-danger-color) 30%, var(--et-border, #e5e7eb));
    border-radius: var(--et-radius-sm, 6px);
    color: var(--cits-wpel-danger-color);
    font-size: 0.9rem;
    margin: 0 0 var(--et-space-3, 12px);
}
@media (prefers-reduced-motion: reduce) {
    .cwl-plan-detail__buy-cta {
        transition: none;
    }
    .cwl-plan-detail__buy-cta:hover,
    .cwl-plan-detail__buy-cta:focus-visible {
        transform: none;
    }
}

/* ---- prefers-reduced-motion — kill non-essential transitions ---- */
@media (prefers-reduced-motion: reduce) {
    .cwl-plans__card,
    .cwl-plans__card::before,
    .cwl-plans__card-cta,
    .cwl-plans__pager-link {
        transition: none;
    }
    .cwl-plans__card:hover,
    .cwl-plans__card:focus-within,
    .cwl-plans__card-cta:hover,
    .cwl-plans__card-cta:focus-visible {
        transform: none;
    }
}

/* -----------------------------------------------------------------
 * E84.4 (v1.8.3) — Instructor-audience plans variant.
 *
 * `.cwl-plans--instructor` is emitted by PlansShortcode's wrapper when
 * `audience="instructor"`. Colours + accents ALL inherit the theme via
 * `--cits-wpel-primary-color` (set by `CustomizerCssInjector` per E61.1
 * — the same variable every other plugin surface uses). The variant
 * only adjusts LAYOUT for the denser feature list, never colours.
 *
 * Earlier v1.8.3 draft hardcoded amber for accent + CTA. That broke the
 * theme-inheritance contract every other frontend page follows. Fixed
 * per operator feedback 2026-07-25.
 * ----------------------------------------------------------------- */

.cwl-plans--instructor .cwl-plans__card-features {
    /* More items → tighter row height. Instructor cards can carry up
       to 11 feature lines vs student's 2-3, so packing them slightly
       tighter keeps the card scannable without becoming a wall of text. */
    gap: 8px;
}
.cwl-plans--instructor .cwl-plans__card-features li {
    font-size: 14px;
    line-height: 1.45;
}
.cwl-plans--instructor .cwl-plans__card-features li svg {
    flex-shrink: 0;
    margin-top: 2px;
    /* Colour inherits — same treatment as student card checkmarks. */
}