/*
 * paywall_v2.css — styles for the redesigned in-article paywall blocks.
 *
 * Two block variants share the same visual frame (.paywall-v2-card):
 *   1. Subscribe — anonymous OR logged-in without subscription. Renders
 *      a $1-promo strip when welcome_offer_state.available is true,
 *      otherwise a plain CTA to /pricing/.
 *   2. News-pack open — user has remaining credits in a news_pack
 *      subscription. Big balance number + "Open" button.
 *
 * Visual language inherited from pricing_v2 / gift_v2:
 *   - Brand blue        #245494 — primary CTA, locked-content lock
 *   - Emerald accent    #059669 — "you have access" pack-unlock state
 *   - Card border       #e7eaf1
 *   - Soft shadow       0 4px 24px rgba(17,24,39,0.06)
 *
 * Loaded via direct <link> from the article controller (or via
 * news_content_paid.tpl.php). Doesn't pollute the global stylesheet —
 * scoped under .paywall-v2.
 */

.paywall-v2 {
    margin: 24px 0 32px;
}

.paywall-v2-card {
    max-width: 560px;
    margin: 0 auto;
    padding: 32px 28px 28px;
    background: #ffffff;
    border: 1px solid #e7eaf1;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(17, 24, 39, 0.06);
    text-align: center;
}

/* ---------- Lock icon ---------- */

.paywall-v2-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: #E8EEF6;
    color: #245494;
}
.paywall-v2-icon svg {
    width: 32px;
    height: 32px;
}

/* News-pack open state uses an emerald variant — visual cue that this
   is the "good news, you have access" branch, not the locked-out one. */
.paywall-v2-icon--unlock {
    background: #D1FAE5;
    color: #059669;
}

/* ---------- Title / body ---------- */

.paywall-v2-title {
    margin: 0 0 10px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    color: #111827;
}

.paywall-v2-body {
    margin: 0 0 20px;
    font-size: 15px;
    line-height: 1.55;
    color: #4b5563;
}

/* ---------- Welcome-offer strip (Subscribe block, only when active) ---------- */

/* Compact pill stack: label / amount / rollover / deadline. The whole
   block sits between body copy and the CTA so the eye flows
   title → description → offer → button. */
.paywall-v2-offer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin: 0 0 20px;
    padding: 14px 18px;
    background: #f0f7ff;
    border: 1px solid #c2d6ee;
    border-radius: 10px;
}

.paywall-v2-offer-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #245494;
}

.paywall-v2-offer-amount {
    font-size: 18px;
    line-height: 1.2;
    color: #111827;
}
.paywall-v2-offer-amount strong {
    font-size: 26px;
    font-weight: 800;
    color: #245494;
}

/* Struck-through "was" price — same was/now idiom as .pricing-v2-price-old
   on the Monthly card. We deliberately AVOID `text-decoration: line-through`
   in favour of a hand-drawn SVG curve laid over the digits via ::after.
   Two reasons (same as on the pricing card):
     1. text-decoration breaks across inline boundaries — for "$10" the line
        would visually disjoint between the $ symbol and the digits.
     2. A single curved stroke across the whole block reads as a deliberate
        "crossed out" gesture rather than mechanical underline. The SVG path
        is a gentle quadratic bezier (M 1 7 Q 50 2 99 5) — looks hand-drawn,
        draws the eye without shouting.
   Brand red #C8101A matches the Trend logo accent — the strikethrough
   becomes a brand cue, not just a generic "discount" line. */
.paywall-v2-offer-was {
    position: relative;
    display: inline-block;
    font-size: 17px;
    font-weight: 500;
    color: #9ca3af;
    margin-right: 8px;
}
.paywall-v2-offer-was::after {
    content: '';
    position: absolute;
    /* Extend slightly past the text edges so the stroke enters/exits the
       digits rather than starting flush — same 5px overshoot as on
       .pricing-v2-price-old. */
    left: -4px;
    right: -4px;
    top: 50%;
    height: 10px;
    transform: translateY(-50%);
    pointer-events: none;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'><path d='M 1 7 Q 50 2 99 5' stroke='%23C8101A' stroke-width='1.8' stroke-linecap='round' fill='none'/></svg>") center/100% 100% no-repeat;
}

.paywall-v2-offer-rollover {
    font-size: 13px;
    color: #6b7280;
}

.paywall-v2-offer-deadline {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 2px;
}

/* ---------- News-pack balance (open block) ---------- */

.paywall-v2-balance {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin: 0 0 16px;
}

.paywall-v2-balance-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #6b7280;
}

.paywall-v2-balance-num {
    font-size: 36px;
    font-weight: 800;
    line-height: 1;
    color: #059669;
}

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

.paywall-v2-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 28px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    background: #245494;
    color: #ffffff;
    border: 1px solid #245494;
    border-radius: 10px;
    text-decoration: none;
    cursor: pointer;
    transition: background 120ms, border-color 120ms;
}
.paywall-v2-cta:hover {
    background: #1d447a;
    border-color: #1d447a;
}
.paywall-v2-cta:focus-visible {
    outline: 2px solid #245494;
    outline-offset: 2px;
}

/* News-pack open variant — emerald, matches the unlock-state icon. */
.paywall-v2-cta--open {
    background: #059669;
    border-color: #059669;
}
.paywall-v2-cta--open:hover {
    background: #047857;
    border-color: #047857;
}

/* ---------- Sign-in line (anonymous visitors only) ---------- */

.paywall-v2-signin {
    margin: 16px 0 0;
    font-size: 13px;
    color: #6b7280;
}
.paywall-v2-signin a {
    color: #245494;
    font-weight: 600;
    text-decoration: none;
    margin-left: 4px;
}
.paywall-v2-signin a:hover {
    text-decoration: underline;
}

/* ---------- Mobile ---------- */

@media (max-width: 600px) {
    .paywall-v2 { margin: 18px 0 24px; }
    .paywall-v2-card {
        padding: 24px 18px 20px;
        border-radius: 12px;
    }
    .paywall-v2-icon {
        width: 56px;
        height: 56px;
        margin-bottom: 12px;
    }
    .paywall-v2-icon svg { width: 28px; height: 28px; }
    .paywall-v2-title { font-size: 19px; }
    .paywall-v2-body { font-size: 14px; }
    .paywall-v2-offer-amount strong { font-size: 22px; }
    .paywall-v2-balance-num { font-size: 32px; }
    .paywall-v2-cta { height: 44px; padding: 0 22px; font-size: 14px; }
}

/* ==========================================================================
 * Paywall Variant A — Bold Hero + Value Props (test-only, ?pw=2)
 *
 * Class prefix: .paywall-a-* — kept separate from .paywall-v2-* so the
 * test variant doesn't accidentally inherit or override default styles.
 * Visual identity: prominent eyebrow pill, large headline (28px), benefit
 * checklist, distinct welcome-offer card with strikethrough anchor, and
 * a full-width gradient CTA. Reads as "selling" rather than "informing".
 * ========================================================================== */

.paywall-a {
    margin: 32px 0 40px;
}

.paywall-a-card {
    /* 720px max — wider than the original 580px so the centered layout
       has room to breathe, but still capped so it never exceeds typical
       article column widths. Width auto-shrinks below 720px naturally
       because the parent .paywall-a has no width constraint. */
    max-width: 720px;
    margin: 0 auto;
    padding: 40px 40px 32px;
    background: linear-gradient(180deg, #ffffff 0%, #fafbfd 100%);
    border: 1px solid #e3e8f0;
    border-radius: 16px;
    box-shadow: 0 8px 32px -8px rgba(17, 24, 39, 0.10);
    text-align: center;
}

/* Lock icon stacks ABOVE the headline (column flex), both centered.
   The earlier "icon-on-the-left" row was tight and read as a function
   bar; stacking + centering shifts the visual weight to the headline
   and gives the centered card an unmistakable focal point. */
.paywall-a-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin: 0 0 18px;
}
.paywall-a-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    color: #C8101A;
    background: rgba(200, 16, 26, 0.10);
    border-radius: 50%;
}
.paywall-a-icon svg {
    width: 22px;
    height: 22px;
}

.paywall-a-headline {
    margin: 0;
    min-width: 0;
    font-size: 26px;
    line-height: 1.22;
    font-weight: 800;
    letter-spacing: -0.015em;
    color: #0F1826;
}

/* Lead paragraph — single explanatory sentence right under the head
   row, replaces the old "What's included" + 4-benefit list. Mirrors
   the promo popup V2 body wording so the funnel reads consistently:
   one offer headline, one explanation, one price, one CTA.

   max-width caps the measure inside the wider 720px card so the line
   doesn't sprawl across the full width and lose readability. balance
   keeps the two-line wrap visually even. */
.paywall-a-lead {
    max-width: 520px;
    margin: 0 auto 24px;
    font-size: 16.5px;
    line-height: 1.55;
    color: #374151;
    font-weight: 500;
    text-wrap: balance;
}

/* "What's included:" header above the benefits list — mirrors the
   .pricing-v2-features-title treatment on /pricing/ for visual
   continuity. Small uppercase letter-spaced label, no bold weight. */
.paywall-a-features-title {
    margin: 0 0 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #9ca3af;
}

/* Benefits grid — 2 columns auto-fits to 1 on narrow viewports.
   minmax(180px, 1fr) is the breakpoint that decides: if column would
   shrink below 180 px, the layout collapses to a single column. On a
   typical card (max 580 - 72 px padding = 508 px content) two columns
   easily fit; on phones below ~440 px the auto-fit drops to one
   column gracefully without us writing a media query. */
.paywall-a-benefits {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px 24px;
}
.paywall-a-benefits li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14.5px;
    line-height: 1.5;
    color: #1f2937;
    min-width: 0;
}
.paywall-a-check {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    padding: 3px;
    color: #ffffff;
    background: #059669;
    border-radius: 50%;
}

/* Welcome-offer card — was/now anchor with prominent intro price.
   Background tint reuses the brand-blue family from pricing_v2 so the
   block reads as "this is the deal" — distinct from the surrounding
   white card body. */
.paywall-a-offer {
    /* Cap to 460px and auto-center so the offer card stays a focused
       focal point inside the wider 720px paywall card instead of
       stretching across the full width. */
    max-width: 460px;
    margin: 0 auto 22px;
    padding: 16px 18px 18px;
    background: linear-gradient(135deg, rgba(36, 84, 148, 0.06) 0%, rgba(36, 84, 148, 0.10) 100%);
    border: 1px solid rgba(36, 84, 148, 0.18);
    border-radius: 12px;
    text-align: center;
}
.paywall-a-offer-label {
    display: block;
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #245494;
}
.paywall-a-offer-amount {
    display: block;
    font-size: 18px;
    line-height: 1.1;
    color: #0F1826;
}
/* Strikethrough "was" price — mirrors the .pricing-v2-price-old recipe
   on /pricing/ so the welcome-offer discount reads the same way across
   the funnel. The cross-out is a single SVG stroke drawn via ::after,
   NOT CSS text-decoration: line-through. text-decoration on a flex/
   inline element with currency symbol + digits draws as one ruler-
   straight line whose hit area depends on font metrics; a hand-drawn
   curved SVG path looks intentional and matches /pricing/ visually. */
.paywall-a-offer-was {
    position: relative;
    display: inline-block;
    margin-right: 8px;
    font-size: 16px;
    font-weight: 600;
    color: #9ca3af;
}
.paywall-a-offer-was::after {
    content: '';
    position: absolute;
    /* Extend ~5px past each edge so the stroke visually enters and
       exits the text rather than ending flush with the digits. */
    left: -5px;
    right: -5px;
    top: 50%;
    height: 10px;
    transform: translateY(-50%);
    pointer-events: none;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'><path d='M 1 7 Q 50 2 99 5' stroke='%23C8101A' stroke-width='1.8' stroke-linecap='round' fill='none'/></svg>") center/100% 100% no-repeat;
}
.paywall-a-offer-amount strong {
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0F1826;
}
.paywall-a-offer-period {
    margin-left: 4px;
    font-size: 14px;
    font-weight: 500;
    color: #4b5563;
}
.paywall-a-offer-rollover {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: #6b7280;
}

/* No-offer state pricing line — when there's no welcome promo active
   we still surface the regular price + "Cancel anytime" so the
   reader has pricing context above the CTA. Same visual weight as
   the offer-rollover line so the two states feel coherent. */
.paywall-a-pricing-line {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.5;
    color: #4b5563;
    text-align: center;
}

/* Primary CTA — brand-red gradient. Generous height (56px) and
   weighted font for unmistakable primary-action affordance. Capped
   to the same 460px column as the offer card so it visually pairs
   with the offer above it inside the wider 720px paywall card. */
.paywall-a-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 460px;
    height: 56px;
    margin: 0 auto 14px;
    padding: 0 24px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #ffffff !important;
    background: linear-gradient(135deg, #E11924 0%, #C8101A 100%);
    border: 0;
    border-radius: 10px;
    text-decoration: none;
    box-shadow: 0 10px 24px -8px rgba(200, 16, 26, 0.55),
                inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.15s ease;
}
.paywall-a-cta:hover,
.paywall-a-cta:focus-visible {
    background: linear-gradient(135deg, #C8101A 0%, #A50D15 100%);
    box-shadow: 0 14px 30px -8px rgba(200, 16, 26, 0.65),
                inset 0 1px 0 rgba(255, 255, 255, 0.22);
    outline: none;
    transform: translateY(-1px);
}
.paywall-a-cta:active {
    transform: translateY(1px);
}
.paywall-a-cta-arrow {
    width: 18px;
    height: 18px;
    transition: transform 0.15s ease;
}
.paywall-a-cta:hover .paywall-a-cta-arrow {
    transform: translateX(3px);
}

.paywall-a-signin {
    margin: 8px 0 0;
    padding-top: 16px;
    border-top: 1px solid #e7eaf1;
    font-size: 14px;
    color: #6b7280;
    text-align: center;
}
.paywall-a-signin a {
    margin-left: 4px;
    color: #245494;
    font-weight: 600;
    text-decoration: none;
}
.paywall-a-signin a:hover {
    text-decoration: underline;
}

@media (max-width: 600px) {
    .paywall-a-card {
        padding: 28px 22px 24px;
    }
    .paywall-a-head { gap: 12px; margin-bottom: 18px; }
    .paywall-a-icon { width: 38px; height: 38px; }
    .paywall-a-icon svg { width: 18px; height: 18px; }
    .paywall-a-headline { font-size: 20px; }
    .paywall-a-lead { font-size: 15px; margin-bottom: 18px; }
    .paywall-a-benefits li { font-size: 14px; }
    .paywall-a-offer-amount strong { font-size: 30px; }
    .paywall-a-cta { height: 52px; font-size: 15.5px; }
}