/*
 * File: /assets/css/plugins.css
 * Module: /plugins/ (the hub) and /pricing/ (plans tool by tool)
 *
 * Builds on assets/css/cwvm.css, loaded first on every Plugins route: its
 * tokens (--cwvm-*), buttons, plan cards, steps, FAQ, close band, reveal and
 * failsafes. This file adds the hub's hero picture, the plugin cards, the
 * in-development row, the pricing band and the platform price cards. Prefix chp-.
 *
 * Sections:
 *   1. Hub hero picture     4. Pricing band
 *   2. Plugin cards         5. Pricing, one card per platform
 *   3. In development       6. Motion and narrow screens
 */

/* ==========================================================================
   1. HUB HERO PICTURE: an example product page the plugins improve
   ========================================================================== */

.chp-art { padding: 3.25rem 0 4rem; }
.chp-store { position: relative; overflow: hidden; margin: 0 1.25rem 0 0; border: 1px solid var(--cwvm-line); border-radius: 20px; background-color: var(--cwvm-card); box-shadow: var(--cwvm-shadow-lift); }
.chp-store-body { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 1.1rem; padding: 1.1rem; }
.chp-photo { position: relative; display: grid; place-items: center; min-height: 250px; overflow: hidden; border-radius: 14px; background: radial-gradient(120% 90% at 30% 20%, #FEF3C7 0%, #FDE68A 45%, #F59E0B 130%); }
html[data-theme="dark"] .chp-photo { background: radial-gradient(120% 90% at 30% 20%, #78350F 0%, #92400E 50%, #451A03 130%); }
.chp-photo-shape { width: 62%; aspect-ratio: 1 / 1.05; border-radius: 22% 22% 10% 10% / 16% 16% 8% 8%; background: linear-gradient(160deg, #FFFFFF 0%, #F1F5F9 100%); box-shadow: 0 18px 30px -18px rgba(120, 53, 15, 0.6); clip-path: polygon(22% 0, 38% 6%, 50% 12%, 62% 6%, 78% 0, 100% 16%, 90% 34%, 80% 30%, 80% 100%, 20% 100%, 20% 30%, 10% 34%, 0 16%); }
html[data-theme="dark"] .chp-photo-shape { background: linear-gradient(160deg, #E2E8F0 0%, #CBD5E1 100%); }
.chp-photo .cwvm-example { position: absolute; top: 10px; left: 10px; }
.chp-buy { display: flex; flex-direction: column; gap: 0.55rem; min-width: 0; }
.chp-pname { color: var(--cwvm-ink); font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; }
.chp-stars { display: flex; align-items: center; gap: 2px; color: #F59E0B; }
.chp-stars svg { fill: currentColor; }
.chp-stars small { margin-left: 0.4rem; color: var(--cwvm-body); font-size: 0.74rem; font-weight: 600; }
.chp-price { color: var(--cwvm-ink); font-size: 1.15rem; font-weight: 800; }
.chp-sizes { display: flex; gap: 0.35rem; }
.chp-sizes i { display: grid; place-items: center; min-width: 2rem; height: 1.8rem; border: 1px solid var(--cwvm-line); border-radius: 8px; color: var(--cwvm-ink-2); font-size: 0.72rem; font-style: normal; font-weight: 700; }
.chp-sizes i.is-on { border-color: var(--cwvm-ink); }
.chp-atc { display: grid; place-items: center; height: 42px; border-radius: 11px; background-color: #0F172A; color: #FFFFFF; font-size: 0.88rem; font-weight: 800; }
html[data-theme="dark"] .chp-atc { background-color: #F1F5F9; color: #0F172A; }
.chp-badges { display: flex; justify-content: space-between; gap: 0.25rem; padding-top: 0.15rem; }
.chp-badge { display: block; flex: 0 1 76px; min-width: 0; line-height: 0; filter: drop-shadow(0 6px 10px rgba(15, 23, 42, 0.18)); }
.chp-badge svg { display: block; width: 100%; height: auto; }
.chp-seal svg { display: block; width: 100%; height: auto; }

.chp-cwv { top: 0; right: 0; width: 13.5rem; }
.chp-flip { display: grid; margin-top: 0.35rem; }
.chp-flip-before, .chp-flip-after { grid-area: 1 / 1; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; transition: opacity 0.45s var(--cwvm-ease), transform 0.45s var(--cwvm-ease); }
.chp-flip b { color: var(--cwvm-ink); font-size: 1.2rem; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; }
.chp-flip em { padding: 0.12rem 0.5rem; border-radius: 999px; font-size: 0.7rem; font-style: normal; font-weight: 800; }
.chp-flip em.is-good { background-color: var(--cwvm-good-bg); color: var(--cwvm-good-ink); }
.chp-flip em.is-poor { background-color: var(--cwvm-poor-bg); color: var(--cwvm-poor-ink); }
.chp-flip-before { opacity: 0; transform: translateY(-6px); }
.chp-seen { left: 0; bottom: 0; width: 13.5rem; }

/* ==========================================================================
   2. PLUGIN CARDS
   ========================================================================== */

.chp-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin-top: 2rem; }
@media (min-width: 900px) { .chp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.chp-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--cwvm-line); border-radius: 24px; background-color: var(--cwvm-card); box-shadow: var(--cwvm-shadow); }
.chp-card-art { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 0.45rem; min-height: 170px; padding: 1.4rem 1.5rem; background-color: var(--cwvm-tile); background-image: radial-gradient(120% 100% at 0% 0%, var(--cwvm-em-wash), transparent 65%); border-bottom: 1px solid var(--cwvm-line); }
.chp-card-art .cwvm-example { position: absolute; top: 12px; right: 12px; }
.chp-mini-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 3.6rem; align-items: center; gap: 0.6rem; max-width: 22rem; padding: 0.45rem 0.7rem; border: 1px solid var(--cwvm-line); border-radius: 11px; background-color: var(--cwvm-card); color: var(--cwvm-ink-2); font-size: 0.86rem; font-weight: 600; }
.chp-mini-row b { color: var(--cwvm-ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.chp-mini-row em { color: var(--cwvm-good-ink); font-size: 0.76rem; font-style: normal; font-weight: 800; text-align: end; }
.chp-card-art.is-trust-badges-seals { align-items: center; gap: 0.9rem; }
.chp-seals { display: flex; justify-content: center; gap: 0.6rem; width: 100%; }
.chp-seal { display: block; flex: 0 1 92px; min-width: 0; line-height: 0; filter: drop-shadow(0 8px 12px rgba(15, 23, 42, 0.2)); transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.chp-card:hover .chp-seal:nth-child(odd) { transform: rotate(-4deg) translateY(-2px); }
.chp-card:hover .chp-seal:nth-child(even) { transform: rotate(4deg) translateY(-2px); }
.chp-langs { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.35rem; }
.chp-langs i { padding: 0.15rem 0.5rem; border: 1px solid var(--cwvm-line); border-radius: 7px; background-color: var(--cwvm-card); color: var(--cwvm-ink-2); font-family: var(--cwvm-mono); font-size: 0.68rem; font-style: normal; font-weight: 700; }
.chp-langs i.is-on { border-color: var(--cwvm-em-line); background-color: var(--cwvm-em-wash); color: var(--cwvm-em); }
.chp-langs span { display: inline-flex; align-items: center; gap: 0.3rem; margin-left: 0.35rem; color: var(--cwvm-body); font-size: 0.8rem; font-weight: 700; }
.chp-langs span svg { color: var(--cwvm-em); }
.chp-card-body { display: flex; flex: 1; flex-direction: column; gap: 0.75rem; padding: 1.4rem 1.5rem 1.5rem; }
.chp-card-k { display: flex; align-items: center; gap: 0.45rem; color: var(--cwvm-em); font-family: var(--cwvm-mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.chp-card-h { margin: 0; color: var(--cwvm-ink); font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.chp-card-p { color: var(--cwvm-body); font-size: 0.98rem; line-height: 1.6; }
.chp-plats { display: grid; flex: 1; align-content: start; gap: 0.4rem; margin: 0.25rem 0 0.5rem !important; }
.chp-plats li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 0.75rem; padding: 0.55rem 0.75rem; border-radius: 12px; background-color: var(--cwvm-tile); }
.chp-plat-name { color: var(--cwvm-ink); font-size: 0.92rem; font-weight: 700; }
.chp-plat-kind { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.18rem 0.6rem; border: 1px solid var(--cwvm-line); border-radius: 999px; color: var(--cwvm-body); font-size: 0.76rem; font-weight: 700; }
a.chp-plat-kind, a.chp-plat-kind:visited { border-color: var(--cwvm-em-line); background-color: var(--cwvm-em-wash); color: var(--cwvm-em); text-decoration: none; }
a.chp-plat-kind:hover, a.chp-plat-kind:focus, a.chp-plat-kind:active { border-color: var(--cwvm-em); background-color: var(--cwvm-card); color: var(--cwvm-em); text-decoration: none; }
a.chp-plat-kind:focus-visible { outline: 2px solid var(--cwvm-em); outline-offset: 2px; }
.chp-plat-kind.is-soon { border-style: dashed; }

/* ==========================================================================
   3. IN DEVELOPMENT
   ========================================================================== */

.chp-next { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-top: 2rem; }
@media (min-width: 900px) { .chp-next { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.chp-next-card { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.3rem; border: 1px solid var(--cwvm-pro-line); border-radius: 20px; background-color: var(--cwvm-card); background-image: linear-gradient(160deg, var(--cwvm-pro-wash) 0%, transparent 55%); }
.chp-next-ico { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--cwvm-pro-line); border-radius: 12px; background-color: var(--cwvm-card); color: var(--cwvm-pro); }
.chp-next-h { margin: 0; color: var(--cwvm-ink); font-size: 1.1rem; font-weight: 800; letter-spacing: -0.01em; }
.chp-next-p { flex: 1; color: var(--cwvm-body); font-size: 0.94rem; line-height: 1.55; }
.chp-next-tags { display: flex; align-items: center; gap: 0.45rem; }
.chp-soon { display: inline-flex; align-items: center; padding: 0.12rem 0.45rem; border: 1px solid var(--cwvm-line); border-radius: 6px; color: var(--cwvm-body); font-family: var(--cwvm-mono); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }

/* ==========================================================================
   4. PRICING BAND (hub)
   ========================================================================== */

.chp-band { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; align-items: center; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border: 1px solid var(--cwvm-em-line); border-radius: 26px; background-color: var(--cwvm-card); background-image: radial-gradient(90% 120% at 0% 0%, var(--cwvm-em-wash), transparent 60%); box-shadow: var(--cwvm-shadow-lift); }
@media (min-width: 900px) { .chp-band { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 2.5rem; } }
.chp-band-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.chp-band-plan { padding: 1rem 1.1rem; border: 1px solid var(--cwvm-em-line); border-radius: 16px; background-color: var(--cwvm-card); }
.chp-band-plan.is-pro { border-color: var(--cwvm-pro-line); background-image: linear-gradient(160deg, var(--cwvm-pro-wash), transparent 70%); }
.chp-band-plan .cwvm-plan-k { font-size: 0.68rem; }
.chp-band-plan.is-pro .cwvm-plan-k { color: var(--cwvm-pro); }
.chp-band-plan .cwvm-plan-price { min-height: 0; margin-top: 0.35rem !important; font-size: 0.88rem; }
.chp-band-plan .cwvm-plan-price[data-cwvm-prices] { height: 2.4rem; }
.cwvm-js .chp-band-plan .cwvm-plan-price[data-cwvm-prices]:not(.is-filled)::before { top: 0.25rem; width: 7rem; height: 1.8rem; box-shadow: none; }
.chp-band-plan .cwvm-plan-price b { font-size: 1.6rem; }
.chp-band-plans .cwvm-btn { grid-column: 1 / -1; }

/* ==========================================================================
   5. PRICING: one card per platform
   ========================================================================== */

.chp-price-hero { padding-top: clamp(1rem, 0.5rem + 2vw, 2.25rem); }
.chp-price-head { max-width: 46rem; margin: 0 auto; text-align: center; }
.chp-price-head .cwvm-lead { margin: 0 auto; }
.chp-platforms { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; max-width: 62rem; margin: 2.5rem auto 0; }
@media (min-width: 860px) { .chp-platforms { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } }
.chp-platform { display: flex; flex-direction: column; padding: 1.5rem; border: 1px solid var(--cwvm-line); border-radius: 24px; background-color: var(--cwvm-card); box-shadow: var(--cwvm-shadow); }
.chp-platform.is-wordpress { border-color: var(--cwvm-pro-line); background-image: linear-gradient(160deg, var(--cwvm-pro-wash) 0%, transparent 55%); box-shadow: var(--cwvm-shadow-lift); }
.chp-platform-k { display: flex; align-items: center; gap: 0.75rem; padding-bottom: 1rem; border-bottom: 1px solid var(--cwvm-line); }
.chp-platform-k b { display: block; color: var(--cwvm-ink); font-size: 1.2rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.chp-platform-k small { display: block; color: var(--cwvm-body); font-size: 0.86rem; font-weight: 600; }
.chp-platform-ico { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border: 1px solid var(--cwvm-line); border-radius: 13px; background-color: var(--cwvm-card); color: var(--cwvm-em); }
.chp-platform.is-wordpress .chp-platform-ico { border-color: var(--cwvm-pro-line); color: var(--cwvm-pro); }
.chp-platform-what { display: flex; align-items: center; gap: 0.5rem; margin-top: 1.1rem !important; color: var(--cwvm-em); font-family: var(--cwvm-mono); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.chp-platform.is-wordpress .chp-platform-what { color: var(--cwvm-pro); }
.chp-fixed-price { height: auto !important; }
.chp-platform-sum { margin-top: 0.75rem !important; color: var(--cwvm-body); font-size: 0.97rem; line-height: 1.55; }
.chp-platform-sum strong { color: var(--cwvm-ink); }
.chp-apps { display: grid; flex: 1; align-content: start; gap: 0.4rem; margin: 1rem 0 1.25rem !important; }
.chp-apps li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0.75rem; padding: 0.6rem 0.75rem; border-radius: 12px; background-color: var(--cwvm-tile); }
.chp-app-name { min-width: 0; color: var(--cwvm-ink); font-size: 0.95rem; font-weight: 700; }
a.chp-app-name, a.chp-app-name:visited { color: var(--cwvm-em); text-decoration: underline; text-underline-offset: 3px; background-color: transparent; }
a.chp-app-name:hover, a.chp-app-name:focus, a.chp-app-name:active { color: var(--cwvm-em-deep); background-color: transparent; }
html[data-theme="dark"] a.chp-app-name:hover, html[data-theme="dark"] a.chp-app-name:focus, html[data-theme="dark"] a.chp-app-name:active { color: #6EE7B7; }
.chp-app-price { color: var(--cwvm-ink-2); font-size: 0.86rem; font-weight: 700; white-space: nowrap; }
.chp-platform.is-wordpress .chp-app-price { color: var(--cwvm-pro); }
.chp-app-st { min-width: 4.6rem; padding: 0.14rem 0.5rem; border: 1px solid var(--cwvm-line); border-radius: 999px; color: var(--cwvm-body); font-family: var(--cwvm-mono); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.06em; text-align: center; text-transform: uppercase; white-space: nowrap; }
.chp-app-st.is-live { border-color: var(--cwvm-em-line); background-color: var(--cwvm-em-wash); color: var(--cwvm-em); }
.chp-platform-note { display: flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 50px; padding: 0 1rem; border: 1px dashed var(--cwvm-line); border-radius: 14px; color: var(--cwvm-body); font-size: 0.95rem; font-weight: 700; }
.chp-platform-note svg { color: var(--cwvm-em); }

/* ==========================================================================
   6. MOTION AND NARROW SCREENS
   ========================================================================== */

/* The hub story: badges arrive under Add to cart, Core Web Vitals turn from
   Poor to 3 of 3 pass, the view count rises. Finished state without JS. */
.chp-badge { transition: opacity 0.45s var(--cwvm-ease), transform 0.55s var(--cwvm-ease-pop); }
.cwvm-js .chp-art.is-armed:not(.is-play) .chp-badge { opacity: 0; transform: translateY(10px) scale(0.9); }
.cwvm-js .chp-art.is-armed:not(.is-play) .chp-flip-before { opacity: 1; transform: none; }
.cwvm-js .chp-art.is-armed:not(.is-play) .chp-flip-after { opacity: 0; transform: translateY(6px); }
.cwvm-js .chp-art.is-armed:not(.is-play) .chp-seen { opacity: 0; transform: translateY(16px) scale(0.97); }
.chp-art.is-play .chp-badge:nth-child(1) { transition-delay: 0.2s; }
.chp-art.is-play .chp-badge:nth-child(2) { transition-delay: 0.35s; }
.chp-art.is-play .chp-badge:nth-child(3) { transition-delay: 0.5s; }
.chp-art.is-play .chp-flip-before, .chp-art.is-play .chp-flip-after { transition-delay: 1s; }
.chp-art.is-play .chp-seen { transition: opacity 0.6s var(--cwvm-ease) 1.5s, transform 0.8s var(--cwvm-ease-pop) 1.5s; }
.chp-art.is-play .chp-seen .cwvm-minibars i { animation: cwvmGrowY 0.7s var(--cwvm-ease) calc(1.8s + var(--k, 0) * 60ms) backwards; }
.chp-card:nth-child(2), .chp-next-card:nth-child(2) { transition-delay: 0.08s; }
.chp-next-card:nth-child(3) { transition-delay: 0.16s; }

@media (prefers-reduced-motion: reduce) {
    .chp-badge, .chp-seen, .chp-flip-after { opacity: 1 !important; transform: none !important; }
    .chp-card:hover .chp-seal { transform: none; }
    .chp-flip-before { opacity: 0 !important; }
}

@container (max-width: 460px) {
    .chp-art { padding: 0; }
    .chp-store { margin: 0; }
    .chp-store-body { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 0.75rem; padding: 0.8rem; }
    .chp-photo { min-height: 0; }
    .chp-pname { font-size: 1.05rem; }
    .chp-sizes, .chp-stars small { display: none; }
    .chp-atc { height: 38px; font-size: 0.82rem; }
    .chp-cwv { position: relative; top: auto; right: auto; width: auto; margin-top: 0.75rem; }
    .chp-seen { display: none; }
}

@media (max-width: 640px) {
    .chp-band-plans { grid-template-columns: minmax(0, 1fr); }
    .chp-apps li { grid-template-columns: minmax(0, 1fr) auto; }
    .chp-app-price { grid-column: 1; grid-row: 2; }
    .chp-app-st { grid-column: 2; grid-row: 1 / 3; }
}
}