/* ========================================================================
   card.css -- ScribeHold card components

   Component layer of the modular CSS bundle. Consumes tokens from
   tokens.css. Provides three composable card variants:

     .card                  -- base surface (background, radius, shadow,
                               padding, border). Full-width by default.
     .card-feature          -- icon + headline + body layout (used in the
                               three-up feature grid on Index and similar
                               feature blocks on /for/* pages).
     .card-pricing          -- pricing tier card (price block, feature
                               list, CTA slot). Full-width by default.
     .card-pricing--featured -- highlighted state (accent border + focus
                                wash) for the recommended tier (Pro).

   Cards are full-width by default; column / grid layout is the
   responsibility of layout.css (.grid, .grid--2, .grid--3, .grid--auto).
   Do NOT add grid-template-columns or column-count rules here.

   All color, type, spacing, radius, and shadow values come from
   tokens.css via var(...). No hard-coded hex values in this file.

   Bundle order: tokens -> base -> layout -> components/* -> pages/*
   ======================================================================== */

/* ------------------------------------------------------------------------
   1. .card -- base surface
   ------------------------------------------------------------------------ */

.card {
    display: block;
    width: 100%;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5);
    color: var(--color-ink);
}

@media (min-width: 768px) {
    .card {
        padding: var(--space-6);
    }
}

/* ------------------------------------------------------------------------
   2. .card-feature -- icon + headline + body layout

   Markup pattern:
     <article class="card card-feature">
       <div class="card-feature__icon">...</div>
       <h3 class="card-feature__title">Headline</h3>
       <p class="card-feature__body">Body copy.</p>
     </article>

   The icon block is a fixed-size square so any SVG / glyph child
   centers cleanly without per-icon sizing rules.
   ------------------------------------------------------------------------ */

.card-feature {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.card-feature__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-10);
    height: var(--space-10);
    border-radius: var(--radius-md);
    background: var(--color-accent-wash-10);
    color: var(--color-accent-ink);
}

.card-feature__icon > * {
    width: var(--space-6);
    height: var(--space-6);
}

.card-feature__title {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    color: var(--color-ink);
}

.card-feature__body {
    margin: 0;
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--color-muted);
}

/* ------------------------------------------------------------------------
   3. .card-pricing -- pricing tier card

   Markup pattern:
     <article class="card card-pricing">
       <div class="card-pricing__badge">★ Most Popular</div>  <!-- optional -->
       <h2 class="card-pricing__name">Pro</h2>
       <p class="card-pricing__price">
         $19.99<span class="card-pricing__period">/yr</span>
       </p>
       <p class="card-pricing__alt">or $2.99/mo</p>
       <p class="card-pricing__value">Lead value line.</p>
       <ul class="card-pricing__features">...</ul>
       <div class="card-pricing__cta">...</div>
     </article>

   Flex column. The parent grid stretches cards to equal height
   (align-items: stretch in pricing.css), so the CTA slot uses
   margin-top: auto to absorb surplus space and pin itself to the bottom.
   This keeps the Free and Pro CTA buttons aligned on the same baseline
   even though the two cards carry different amounts of body copy.
   ------------------------------------------------------------------------ */

.card-pricing {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.card-pricing__badge {
    display: inline-block;
    align-self: flex-start;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    background: var(--color-accent-wash-15);
    color: var(--color-accent-ink);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

.card-pricing__name {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    color: var(--color-ink);
}

.card-pricing__price {
    margin: 0;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-ink);
}

.card-pricing__period {
    margin-left: var(--space-1);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    color: var(--color-muted);
}

.card-pricing__alt {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-muted);
}

.card-pricing__value {
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-snug);
    color: var(--color-ink);
}

.card-pricing__features {
    margin: 0;
    padding-left: var(--space-5);
    list-style: disc;
}

.card-pricing__features > li {
    margin-top: var(--space-1);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    color: var(--color-ink);
}

.card-pricing__features > li:first-child {
    margin-top: 0;
}

/* CTA slot: last flex child. margin-top: auto pushes it to the bottom of
   the stretched card. The PRIMARY BUTTON — not the slot — is what aligns
   across Free and Pro: the alt-action below it occupies a fixed-height
   reserved row (present on every card via min-height) so the button's
   baseline is identical whether or not a card carries an alt-action link.
   Buttons stretch to card width for consistent click target. */
.card-pricing__cta {
    padding-top: var(--space-2);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: auto;
}

.card-pricing__cta > .btn {
    width: 100%;
}

/* Secondary/alt action below primary CTA — ghost-style link, no button chrome.
   The fixed min-height reserves the same vertical space on cards WITHOUT an
   alt-action (e.g. Free), so the primary buttons stay baseline-aligned. */
.card-pricing__alt-action {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--space-6);
    text-align: center;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-link);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Empty reserved alt-action slot for cards that have no secondary link.
   Keeps the primary button baseline aligned with cards that do. */
.card-pricing__alt-action--empty {
    display: flex;
    min-height: var(--space-6);
}

.card-pricing__alt-action:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
}

/* ------------------------------------------------------------------------
   3a. .card-pricing--featured -- highlighted state

   Applied to Pro (the hero tier). Amber (--color-accent) 4px top border
   band + faint warm wash + elevated shadow signals "this is the one to
   pick". Navy is reserved for CTA buttons only.
   ------------------------------------------------------------------------ */

.card-pricing--featured {
    border-color: var(--color-accent);
    border-top-width: 4px;
    background: var(--color-accent-wash-04);
    box-shadow: var(--shadow-md);
}

/* ------------------------------------------------------------------------
   3b. .card-pricing__legal -- layman-friendly trigger + CSS-only popover

   The LEP band carries plain-language copy. The precise evidentiary/legal
   text (Bates numbering, FRE 902(14), SHA-256 manifest, etc.) is moved
   into a hover/focus popover so it does not crowd the band for non-lawyer
   readers.

   No JavaScript: the popover reveals on hover of, and keyboard focus
   within, the trigger. The trigger is focusable (tabindex=0) and labels
   the popover via aria-describedby for screen-reader users.
   ------------------------------------------------------------------------ */

.card-pricing__legal {
    position: relative;
    margin: 0;
    align-self: start;
}

.card-pricing__legal-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    cursor: help;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-accent);
    border-bottom: 1px dotted var(--color-accent);
    line-height: var(--line-height-tight);
}

.card-pricing__legal-trigger::after {
    content: "\25BE"; /* down triangle hint */
    font-size: var(--font-size-xs);
}

.card-pricing__legal-trigger:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Popover: hidden by default, revealed on trigger hover or focus-within. */
.card-pricing__legal-popover {
    position: absolute;
    z-index: 20;
    left: 0;
    top: calc(100% + var(--space-2));
    width: max(100%, 18rem);
    max-width: 22rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 120ms ease, transform 120ms ease, visibility 0s linear 120ms;
    pointer-events: none;
}

.card-pricing__legal-trigger:hover + .card-pricing__legal-popover,
.card-pricing__legal-trigger:focus-visible + .card-pricing__legal-popover,
.card-pricing__legal:hover .card-pricing__legal-popover,
.card-pricing__legal:focus-within .card-pricing__legal-popover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 120ms ease, transform 120ms ease;
    pointer-events: auto;
}

.card-pricing__legal-popover-inner {
    display: block;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--space-4);
    font-size: var(--font-size-sm);
    color: var(--color-ink);
}

.card-pricing__legal-popover-inner strong {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--color-ink);
}

.card-pricing__legal-popover-inner ul {
    margin: 0;
    padding-left: var(--space-5);
    list-style: disc;
}

.card-pricing__legal-popover-inner li {
    margin-top: var(--space-1);
}

.card-pricing__legal-popover-inner li:first-child {
    margin-top: 0;
}