/* PostVault 網站版：方案比較頁。
   外框（頂列、頁尾、按鈕、字級、深淺色）、插圖與大標（.hero）沿用 app.css。
   版面是「方案卡片」：手機直向堆疊、電腦並排，和 Usermeld、KapZoom 的定價頁同一種做法。
   電腦版的卡片用 subgrid，讓同一個功能項目在每張卡上橫向對齊，一眼就能比較。 */

/* 這一頁在電腦上要比首頁寬：首頁是單欄的工具，這頁是並排比較 */
body.is-wide .top {
    max-width: 68rem;
}

.wrap.plans {
    max-width: 68rem;
}

.plans-hero {
    padding-top: 0;
}

.plans-hero .scene {
    width: min(100%, 230px, 30dvh);
}

.plans-desc {
    margin: 12px auto 0;
    max-width: 32rem;
    text-align: center;
    text-wrap: balance;
    color: var(--muted);
}

.plans-grid {
    display: grid;
    gap: 20px;
    margin: 32px auto 0;
}

.plan-card {
    --plan-pad: 24px;
    display: grid;
    align-content: start;
    padding: var(--plan-pad);
    border: 1px solid var(--line);
    border-radius: 24px;
    background: var(--surface);
}

.plan-card--recommended {
    border-color: var(--ok);
    box-shadow: 0 0 0 1px var(--ok);
}

.plan-card__head {
    display: grid;
    gap: 6px;
    grid-template-columns: 1fr auto;
    align-items: center;
}

.plan-card__name {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
}

.plan-card__badge {
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--ok);
    color: var(--bg);
    font-size: 0.8125rem;
    font-weight: 700;
    white-space: nowrap;
}

.plan-card__summary {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--muted);
    font-size: 0.9375rem;
    line-height: 1.5;
    text-wrap: pretty;
}

.plan-card__price {
    display: grid;
    align-content: start;
    gap: 2px;
    padding: 18px 0 20px;
    border-bottom: 1px solid var(--line);
}

.plan-card__amount {
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
}

.plan-card__amount-sub {
    color: var(--muted);
    font-size: 0.9375rem;
    font-variant-numeric: tabular-nums;
}

.plan-card__features {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.plan-feature {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
    font-size: 1rem;
    line-height: 1.45;
}

.plan-feature__mark {
    color: var(--ok);
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 1.3;
}

.plan-feature__text {
    display: grid;
    align-content: start;
    gap: 2px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.plan-feature__value {
    color: var(--muted);
    font-size: 0.9375rem;
}

.plan-feature__value--strong {
    color: var(--ok);
    font-weight: 600;
}

/* 這個方案沒有的功能：整列淡掉，名稱仍然看得到，比較時才知道「少了什麼」 */
.plan-feature--off,
.plan-feature--off .plan-feature__mark {
    color: var(--faint);
}

.plan-card__cta {
    display: grid;
    padding-top: 20px;
}

.plan-card__cta .btn {
    width: 100%;
}

.plans-note {
    margin: 20px 0 0;
    font-size: 0.9375rem;
    color: var(--muted);
    text-align: center;
}

/* 平板以上：並排。卡片的每一段（標頭、價格、每個功能、按鈕）共用同一組列線，所以橫向對齊 */
@media (min-width: 760px) {
    .plans-grid {
        grid-template-columns: repeat(var(--plans-count, 3), minmax(0, 1fr));
        /* 兩欄時不要拉到整個畫面寬 */
        max-width: calc(var(--plans-count, 3) * 23rem);
        gap: 24px;
    }

    .plan-card {
        --plan-pad: 28px;
        /* 標頭、價格、功能 x N、按鈕 */
        grid-row: span var(--plans-span, 15);
        grid-template-rows: subgrid;
    }

    /* 讓功能項目直接成為卡片的列，才能和隔壁那張對齊 */
    .plan-card__features {
        display: contents;
    }
}

/* 手機：推薦的放最上面，不用一路捲到底才看到 */
@media (max-width: 759px) {
    .plans-grid {
        max-width: 30rem;
    }

    .plan-card--recommended {
        order: -1;
    }
}

/* Pro 還沒開賣：標籤用淡色，按鈕位置放一個不能點的「即將推出」 */
.plan-card__badge--soon {
    background: var(--surface-2);
    color: var(--muted);
}

.plan-card__soon {
    display: grid;
    place-items: center;
    min-height: 3.25rem;
    border: 1px dashed var(--faint);
    border-radius: 14px;
    color: var(--muted);
    font-weight: 600;
}