/* Positioning context for the badge, which straddles the card's top edge. */
.root {
    position: relative;
}

.card {
    display: flex;
    flex-direction: column;
    border: var(--border-width-sm) solid var(--border-color-light);
    border-radius: var(--border-radius-lg);
    background: var(--color-bg-base-light);
}

/* Icon + copy + description: a self-contained rounded card, subtly elevated — its bordered
   bottom edge forms the rounded divider above the disclosure, with a soft gray shadow fade.
   The -1px top/side margins overlay this border on the outer .card border so the two strokes
   coincide instead of stacking into a 2px seam (QA: consistent inside/outside strokes). */
.topCard {
    position: relative;
    z-index: 1;
    margin: -1px -1px 0;
    background: var(--color-bg-base-light);
    border: var(--border-width-sm) solid var(--border-color-light);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 12px 10px -5px rgba(0, 0, 0, 0.04);
}

.main {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-18);
    padding: var(--spacing-16);
}

.thumb {
    position: relative;
    flex-shrink: 0;
    width: var(--spacing-88);
    height: var(--spacing-88);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    background: var(--color-bg-neutral-light);
}

.image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Built-in branded membership icon: texture + program tint + HS mark. */
.iconTexture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.iconTint {
    position: absolute;
    inset: 0;
    mix-blend-mode: color;
}

.iconTint[data-theme='hormones'] {
    background: rgba(189, 176, 248, 0.5);
}

.iconTint[data-theme='senescence'] {
    background: rgba(21, 46, 74, 0.6);
}

.iconTint[data-theme='metabolic'] {
    background: rgba(166, 89, 39, 0.55);
}

.iconTint[data-theme='member'] {
    background: rgba(21, 28, 38, 0.6);
}

.iconMark {
    position: absolute;
    inset: 0;
    width: 62%;
    height: 62%;
    margin: auto;
    object-fit: contain;
}

.info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-18);
    flex: 1;
    min-width: 0;
}

/* Title + description stack directly under each other, above the renewal/price row. */
.titleBlock {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
}

.name {
    color: var(--color-text-primary);
}

/* Description sits inside the copy column under the title (Figma: aligned to the title, not the icon). */
.description {
    color: var(--color-text-secondary);
}

/* Renewal (left) + price (right) share one row below the title. */
.metaRow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-8);
}

/* Takes the remaining width; wraps (never truncates) if it would otherwise push the price off. */
.renewal {
    color: var(--color-text-secondary-hover);
    flex: 1 1 auto;
    min-width: 0;
}

/* Badge straddles the card's top edge, right-aligned. */
.badge {
    position: absolute;
    top: calc(-1 * var(--spacing-8));
    right: var(--spacing-16);
    z-index: 2;
}

.price {
    color: var(--color-text-primary);
    flex-shrink: 0;
    white-space: nowrap;
}

/* Mobile (Figma 378:7982 / 466:12443 "Top Card"): 16px card radius, 68px icon, tighter gaps,
   description on its own full-width row below the icon row. The single description node stays in
   the DOM (inside .titleBlock); `display: contents` promotes the copy column's children to grid
   items of .main so the description can be re-placed on a full-width row without a second render. */
@media screen and (width <= 768px) {
    .card,
    .topCard {
        border-radius: var(--border-radius-md);
    }

    .main {
        display: grid;
        grid-template-columns: auto 1fr;
        /* Zero row-gap: the desktop flex gap would otherwise leak in as grid row-gap; vertical
           rhythm comes from the explicit margins below. */
        gap: 0 var(--spacing-14);
        align-items: center;
    }

    .info,
    .titleBlock {
        display: contents;
    }

    .thumb {
        width: 68px; /* Figma "Membership Icon" 68×68 — no spacing token at 68 */
        height: 68px;
        grid-area: 1 / 1 / 3 / 2;
    }

    .name {
        grid-area: 1 / 2 / 2 / 3;
    }

    .metaRow {
        grid-area: 2 / 2 / 3 / 3;
        align-self: start;
        margin-top: var(--spacing-16);
    }

    /* Keep the title vertically paired with the price row beside the 68px icon. Without a
       metaRow the title spans both rows so it centers against the icon instead of hugging the
       top (row 2 would otherwise sit empty under the spanning thumb). */
    .info:has(.metaRow) .name {
        align-self: end;
    }

    .info:not(:has(.metaRow)) .name {
        grid-row: 1 / 3;
    }

    .description {
        grid-area: 3 / 1 / 4 / 3;
        margin-top: var(--spacing-12);
    }
}