/* ============================================================
   .card-next — canonical card system
   ============================================================
   Unified card ladder. Base (no hover) + orthogonal modifiers:
     --hoverable    lift + primary tint on hover; auto-applied
                    on <a class="card-next"> link cards
     --featured     emphasis card with primary gradient backdrop
                    and primary border for plan / option highlights
     --muted        "coming soon" / placeholder — reduced opacity,
                    desaturated, diagonal-stripe overlay
     --sm           compact density (smaller padding + radius)

   Inner structure helpers:
     .card-next-icon    primary-tinted 48px rounded square that holds
                        an inline SVG; "breathes" on hover when the
                        card is hoverable
     .card-next-title   font-lg / weight 600 / line-tight
     .card-next-body    font-md / text-secondary / line-normal

   Replaces legacy .card / .card-hover / .card-featured / .feature-card /
   .location-card families until each consumer migrates.
   ============================================================ */

.card-next {
    position: relative;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    transition: var(--transition-base);
}

/* Hoverable — explicit modifier OR auto on <a class="card-next"> */
.card-next--hoverable,
a.card-next {
    cursor: pointer;
}
a.card-next {
    display: block;
    text-decoration: none;
    color: inherit;
}

.card-next--hoverable:hover,
a.card-next:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--color-primary-rgb), 0.5);
    box-shadow: var(--shadow-card-hover-md);
}

.card-next--hoverable:active,
a.card-next:active {
    transform: translateY(-1px);
    box-shadow: var(--shadow-card-hover-sm);
    transition-duration: 0.08s;
}

a.card-next:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Featured — emphasis card for plan / option highlights.
   Primary-tinted gradient backdrop + primary border,
   already elevated; hover bumps to a stronger ring. */
.card-next--featured {
    border-color: rgba(var(--color-primary-rgb), 0.7);
    background: linear-gradient(180deg,
        rgba(var(--color-primary-rgb), 0.1) 0%,
        var(--color-bg-card) 100%);
    box-shadow: var(--shadow-card-hover-md);
}

.card-next--featured.card-next--hoverable:hover,
a.card-next.card-next--featured:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-card-hover-lg);
}

/* Muted — "coming soon" / placeholder card. Reduced opacity,
   gentle desaturation, diagonal-stripe overlay. Used for
   forthcoming locations, locked features, etc. */
.card-next--muted {
    opacity: 0.7;
    filter: grayscale(60%);
    background-image: repeating-linear-gradient(
        135deg,
        transparent 0,
        transparent 12px,
        rgba(255, 255, 255, 0.018) 12px,
        rgba(255, 255, 255, 0.018) 24px
    );
}

.card-next--muted.card-next--hoverable:hover,
a.card-next.card-next--muted:hover {
    opacity: 0.9;
    filter: grayscale(20%);
}

/* Size modifier — smaller padding, smaller corner radius */
.card-next--sm {
    padding: var(--space-md);
    border-radius: var(--radius-lg);
}

/* ---- Inner structure helpers ---- */

/* Primary-tinted rounded square that holds an inline SVG.
   On hover the icon "breathes" to signal the card itself is
   alive — only when the card is hoverable. */
.card-next-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background: rgba(var(--color-primary-rgb), 0.12);
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-md);
    transition: background-color var(--transition-base), transform var(--transition-base);
}

.card-next-icon svg {
    width: 24px;
    height: 24px;
}

.card-next--hoverable:hover .card-next-icon,
a.card-next:hover .card-next-icon {
    background: rgba(var(--color-primary-rgb), 0.18);
    transform: scale(1.05);
}

.card-next--sm .card-next-icon {
    width: 36px;
    height: 36px;
    margin-bottom: var(--space-sm);
}

.card-next--sm .card-next-icon svg {
    width: 18px;
    height: 18px;
}

.card-next-title {
    margin: 0 0 var(--space-sm);
    font-size: var(--font-lg);
    font-weight: 600;
    line-height: var(--line-tight);
    color: var(--color-text);
}

.card-next--sm .card-next-title {
    font-size: var(--font-md);
    margin-bottom: var(--space-xs);
}

.card-next-body {
    margin: 0;
    font-size: var(--font-md);
    color: var(--color-text-secondary);
    line-height: var(--line-normal);
}

.card-next-body + .card-next-body {
    margin-top: var(--space-sm);
}

.card-next--sm .card-next-body {
    font-size: var(--font-sm);
}

/* ============================================
   .card-next--numbered — decorative watermark number in the top-right
   ============================================
   Replaces the `.right-card` + `.right-number` pattern from privacy.css.
   Adds a big faint numeral as a `::before` pseudo-element in the
   top-right corner — reads as "this is item N of a sequence" without
   spending a full inline column on a numbered list.

   Consumer drives the number via the `--num` CSS variable on the card:
       <article class="card-next card-next--numbered" style="--num: '1';">…</article>

   `attr()` for `content` outside of strings isn't widely supported, so
   the CSS variable is the portable alternative. Default value
   `--num: ''` so the pseudo collapses if the consumer forgets to set it.

   The card title gets right padding to clear the watermark; long titles
   wrap below it instead of running into it.
   ============================================ */
.card-next--numbered {
    --num: '';
    position: relative;
    overflow: hidden;
}

.card-next--numbered::before {
    content: var(--num);
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    color: var(--color-border);
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    opacity: 0.3;
    pointer-events: none;
}

.card-next--numbered .card-next-title {
    padding-right: var(--space-3xl);
}