/*
 * Product Landing template (page-product-landing.php).
 * Loaded only on that template via backshack_enqueue_product_landing_styles().
 * Indigo accent matches the sitewide footer CTA and css/tool-catalog.css.
 */

.product-landing-page {
    --pl-ink: #0f172a;
    --pl-body: #334155;
    --pl-muted: #64748b;
    --pl-line: #e2e8f0;
    --pl-surface: #ffffff;
    --pl-tint: #f8fafc;
    --pl-accent: #4f46e5;
    --pl-accent-dark: #4338ca;
    --pl-accent-tint: #eef2ff;

    /* Gutters carry the tint; every content section is plain white. */
    background: var(--pl-accent-tint);
    padding: 0 1.25rem 4rem;
}

.product-landing-shell {
    max-width: 68rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.product-landing-shell > section {
    background: var(--pl-surface);
    border: 1px solid var(--pl-line);
    border-radius: 1rem;
    padding: 2.25rem;
}

.pl-section-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--pl-ink);
    margin: 0 0 1.25rem;
    letter-spacing: -0.01em;
}

/* ---------- Hero ---------- */

.product-landing-shell > .pl-hero {
    padding: 3rem 2.25rem;
    margin-top: 2rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
}

/*
 * Title spans the full card; below it, copy left and action right. The title
 * deliberately sits outside the columns — inside the text column a long tool
 * name wrapped a third of the way across the card.
 *
 * minmax(0, …) on the text column stops a long unbroken word pushing the grid
 * wider than the card.
 */
@media (min-width: 62rem) {
    .product-landing-shell > .pl-hero {
        grid-template-columns: minmax(0, 1.75fr) minmax(14rem, 1fr);
        column-gap: 2.5rem;
        row-gap: 1.75rem;
    }

    .pl-hero-head {
        grid-column: 1 / -1;
    }
}

/* Centred within its own column, not pinned to the column's left edge. */
.pl-hero-aside {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

/* The aside is the CTA's own column, so it needs no separating margin. */
.pl-hero-aside .pl-hero-cta {
    margin-top: 0;
}

.pl-hero-problem {
    margin: 1.5rem 0 0;
    padding-top: 1.35rem;
    border-top: 1px solid var(--pl-line);
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--pl-muted);
    max-width: 44rem;
    text-wrap: pretty;
}

.pl-eyebrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin: 0.65rem 0 0;
}

/*
 * The tool name is the largest thing on the page. No uppercase or
 * letter-spacing: both read fine at eyebrow size and get shouty at 2rem+,
 * and the longer names ("Automated Project Tracker - Construction
 * Inspection") stop being scannable.
 */
/*
 * No text-wrap:balance here — balance splits a long title into even lines
 * well before the container edge, which is exactly the early wrap we do not
 * want. Let it run to the edge of the card and break naturally.
 */
.pl-eyebrow-name {
    /*
     * Max is 2.45rem, not 2.6rem, on purpose. The shell is capped at 68rem, so
     * the card's inner width is a constant 1016px on desktop; at 2.6rem the
     * longest title ("Automated Project Tracker - Construction Inspection")
     * needed 1033px and broke on its final word, leaving line one at 81% and
     * reading as an early wrap. At 2.45rem it fits on one line at every
     * desktop width.
     */
    font-size: clamp(1.9rem, 4.2vw, 2.45rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
    font-weight: 700;
    color: var(--pl-accent);
    margin: 0;
}

/* Marketing headline: subordinate to the tool name, italic, not bold. */
.pl-hero-headline {
    font-size: 1.18rem;
    line-height: 1.5;
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--pl-body);
    margin: 0.5rem 0 0;
}

.pl-hero-subhead {
    font-size: 1.02rem;
    line-height: 1.65;
    color: var(--pl-body);
    margin: 0;
    max-width: 42rem;
}

.pl-hero-cta {
    margin-top: 1.75rem;
}

/*
 * The CTA renderer is shared, so neutralise the band styling inside the hero.
 * text-align stays centred: the wrapper is sized by whichever child is widest
 * (usually the note, not the button), so left-aligning here left the button
 * visibly off-centre inside an otherwise centred block.
 */
.pl-hero-cta .pl-cta {
    padding: 0;
    background: none;
    border: 0;
    text-align: center;
}

.pl-hero-media {
    margin: 0;
}

.pl-hero-image {
    width: 100%;
    height: auto;
    border-radius: 0.85rem;
    display: block;
}

.pl-hero-video {
    width: 100%;
    height: auto;
    border-radius: 0.85rem;
    display: block;
    background: #0b0b12;
}

/* ---------- Demo ("See it in action") ---------- */

.pl-demo {
    padding: 2.5rem 0;
    text-align: center;
}

.pl-demo-heading {
    margin: 0 0 1.25rem;
}

.pl-demo-media {
    max-width: 960px;
    margin: 0 auto;
}

.pl-demo-video {
    width: 100%;
    height: auto;
    border-radius: 0.85rem;
    display: block;
    background: #0b0b12;
}

.pl-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
}

.pl-badge-soon {
    background: #fef3c7;
    color: #92400e;
}

/* ---------- Problem ---------- */

.pl-problem-text {
    margin: 0;
    font-size: 1.12rem;
    line-height: 1.7;
    color: var(--pl-body);
    max-width: 48rem;
    text-wrap: pretty;
}

/* ---------- Personas ---------- */

.pl-persona-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
}

.pl-persona {
    border: 1px solid var(--pl-line);
    border-radius: 0.75rem;
    padding: 1.1rem;
    background: var(--pl-tint);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.pl-persona:hover {
    border-color: #c7d2fe;
    background: var(--pl-accent-tint);
}

.pl-persona-name {
    display: block;
    font-weight: 700;
    color: var(--pl-ink);
    margin-bottom: 0.35rem;
    text-decoration: none;
    line-height: 1.35;
}

a.pl-persona-name:hover,
a.pl-persona-name:focus {
    color: var(--pl-accent-dark);
    text-decoration: underline;
}

.pl-persona-desc {
    display: block;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--pl-muted);
}

/* Persona archive cards carry an extra product-name line. */
.pl-archive-meta {
    display: block;
    margin-top: 0.6rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--pl-accent);
}

.persona-archive-page .pl-persona {
    display: flex;
    flex-direction: column;
}

.persona-archive-page .pl-persona-name {
    font-size: 1.05rem;
}

/* ---------- Features / benefits ---------- */

.pl-benefit-list {
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 1rem 1.75rem;
}

.pl-benefit {
    position: relative;
    padding-left: 1.9rem;
    font-size: 1.02rem;
    line-height: 1.6;
    color: var(--pl-body);
}

/* Tick mark drawn in CSS — no icon font, no external asset (CSP-safe). */
.pl-benefit::before {
    content: "";
    position: absolute;
    left: 0.25rem;
    top: 0.42em;
    width: 0.42rem;
    height: 0.78rem;
    border: solid var(--pl-accent);
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}

.pl-feature-block {
    border-top: 1px solid var(--pl-line);
    padding-top: 1.5rem;
}

.pl-feature-label {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pl-muted);
    margin: 0 0 0.75rem;
}

.pl-feature-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pl-feature {
    background: var(--pl-accent-tint);
    color: #3730a3;
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
    font-size: 0.88rem;
    font-weight: 500;
}

.pl-proof {
    margin: 2rem 0 0;
    padding: 1.15rem 1.4rem;
    border-left: 3px solid var(--pl-accent);
    background: var(--pl-tint);
    border-radius: 0 0.5rem 0.5rem 0;
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--pl-body);
}

/* ---------- Price (not rendered by the template; shortcode only) ---------- */

.pl-price-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--pl-ink);
    margin: 0;
}

.pl-price-label {
    font-size: 0.95rem;
    color: var(--pl-muted);
    margin: 0.3rem 0 0;
}

/* ---------- CTA ---------- */

.product-landing-shell > .pl-cta {
    text-align: center;
    padding: 2.75rem 2.25rem;
}

.pl-cta-button {
    display: inline-block;
    font-size: 1.03rem;
    font-weight: 700;
    padding: 0.9rem 2.1rem;
    border-radius: 0.6rem;
    border: 0;
    cursor: pointer;
    text-decoration: none;
    background: var(--pl-accent);
    color: #ffffff;
    transition: background-color 0.15s ease, transform 0.1s ease;
}

.pl-cta-button:hover,
.pl-cta-button:focus {
    background: var(--pl-accent-dark);
    color: #ffffff;
}

.pl-cta-button:active {
    transform: translateY(1px);
}

/*
 * One button style for every CTA state, hero and foot alike. The green
 * "Open tool" variant and the white-on-indigo inversion are both gone: the
 * inversion only existed because the foot band was indigo, and leaving it
 * behind would hand the next person to reinstate a coloured band a white
 * button on a white background.
 */

.pl-cta-button[disabled] {
    background: #e2e8f0;
    color: var(--pl-muted);
    cursor: not-allowed;
}

.pl-cta-note {
    margin: 0.9rem 0 0;
    font-size: 0.93rem;
    color: var(--pl-muted);
}

/* ---------- Editorial / fallback ---------- */

.pl-editorial {
    line-height: 1.7;
    color: var(--pl-body);
}

.pl-editorial img {
    max-width: 100%;
    height: auto;
}

.pl-editor-notice {
    margin-top: 1.5rem;
    padding: 0.9rem 1.1rem;
    border-radius: 0.5rem;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.95rem;
}

/* ---------- Responsive ---------- */

@media (max-width: 40rem) {
    .product-landing-shell > section {
        padding: 1.5rem;
    }

    .product-landing-shell > .pl-hero {
        padding: 2rem 1.5rem;
        margin-top: 1.25rem;
        gap: 1.5rem;
    }

    /*
     * Stacked, the CTA must still be full-width like every other button.
     * align-items must be overridden too: flex-start shrink-wraps the CTA
     * wrapper, so width:100% on the button resolves against the shrunken
     * wrapper rather than the column.
     */
    .pl-hero-aside {
        align-self: stretch;
        align-items: stretch;
    }

    .pl-hero-aside .pl-cta-button {
        display: block;
        width: 100%;
    }

    .pl-benefit-list {
        margin-bottom: 1.5rem;
    }

    .pl-cta-button {
        display: block;
        width: 100%;
    }
}