/* ==========================================================================
   /products (app/Views/pages/products.php). Values from "Products.dc.html".
   ========================================================================== */

/* ---------- Hero ---------- */
.prod-blob-2 { right: 140px; bottom: -60px; width: 120px; height: 120px; }
.prod-eyebrow { font-weight: 700; font-size: 16px; }
.prod-h1 {
    font-family: var(--f-display); font-weight: 800;
    font-size: clamp(44px, 6.5vw, 88px); line-height: .95; letter-spacing: -0.03em;
    max-width: 1000px; text-wrap: balance;
}
.prod-lede { max-width: 660px; }

.prod-next { padding-top: 24px; }

/* ---------- Big product panel ---------- */
.prod-panel {
    border-radius: var(--r-hero); padding: clamp(28px, 5vw, 56px);
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
    gap: 40px; align-items: center;
}
.prod-panel__text { display: flex; flex-direction: column; gap: 16px; }
.prod-panel__name {
    font-family: var(--f-display); font-weight: 800;
    font-size: clamp(40px, 5vw, 64px); line-height: 1; letter-spacing: -0.025em;
}
.prod-panel__desc { font-size: 18px; line-height: 1.6; max-width: 760px; text-wrap: pretty; }

/* Status badge: pink for live, yellow for free, cream otherwise (and on cards). */
.prod-badge {
    align-self: flex-start; background: var(--c-cream); color: var(--c-ink);
    padding: 5px 14px; border-radius: var(--r-pill); font-weight: 700; font-size: 13px;
    border: 2px solid var(--c-ink);
}
.prod-badge--live { background: var(--c-pink-text); color: var(--c-white); }
.prod-badge--free { background: var(--c-yellow); }

.prod-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.prod-list li { display: flex; gap: 10px; font-size: 16px; line-height: 1.45; font-weight: 500; }
.prod-list__dot { flex: none; width: 12px; height: 12px; margin-top: 5px; border-radius: 4px 4px 4px 1px; background: var(--c-ink); }

.prod-actions .btn + .prod-secondary { margin-left: 12px; }
.prod-secondary { font-weight: 700; text-decoration: underline; }

/* Screenshot: the dashed placeholder frame, or a real image at its own ratio. */
.prod-shot {
    width: 100%; aspect-ratio: 16 / 10; border-radius: 48px 48px 48px 10px;
    overflow: hidden; background: var(--c-cream); border: 3px solid var(--c-ink);
}
.prod-shot-img {
    width: 100%; height: auto; display: block;
    border-radius: 32px 32px 32px 8px; border: 3px solid var(--c-ink);
}

/* ---------- Small product cards ---------- */
.prod-cards {
    display: grid; gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, max(260px, calc(33.3% - 22px))), 1fr));
}
.prod-card {
    border-radius: 40px 40px 40px 10px; padding: 32px;
    display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 24px;
}
.prod-card__art { display: block; }
.prod-card__name { font-family: var(--f-display); font-weight: 800; font-size: 36px; line-height: 1; }
.prod-card__desc { font-size: 17px; line-height: 1.55; }
.prod-card__link { align-self: flex-start; }

/* ---------- Closing call to action ---------- */
.prod-cta { position: relative; }
.prod-cta__panel {
    background: var(--c-yellow); border-radius: 48px 48px 48px 0; padding: clamp(36px, 6vw, 72px);
    display: flex; flex-direction: column; gap: 20px; align-items: flex-start;
    position: relative; overflow: hidden;
}
.prod-cta__panel > :not(.blob) { position: relative; }
.prod-cta__blob { right: -60px; bottom: -80px; width: 220px; height: 220px; }
.prod-cta__title {
    font-family: var(--f-display); font-weight: 800;
    font-size: clamp(36px, 5vw, 64px); line-height: 1; letter-spacing: -0.025em; max-width: 820px;
}
.prod-cta__text { font-size: 20px; line-height: 1.55; max-width: 600px; }
.prod-cta__tail {
    position: absolute; left: var(--gutter); bottom: -30px; width: 60px; height: 32px;
    overflow: hidden; background: var(--c-yellow); clip-path: polygon(0 0, 100% 0, 0 100%);
}