/**
 * @file Logic Path (v6)
 * - Connectors: drawn (stroke-dashoffset) in the flow direction, thick line +
 *   a NORMAL triangular arrowhead that appears once the line finishes drawing.
 * - Anchored to the TEXT area (eyebrow+heading+body, NOT the picture), with
 *   adaptive rules per relative position; clamped so an arrow never leaves box.
 * - Elements float in ALONG the flow direction (--lp-dx/--lp-dy), not up.
 * - Breakpoints: 3 cols desktop / 2 tablet / 1 mobile.
 * - Normal gap headline<->body; tight gap pill<->headline.
 * - Reveal strictly in DOM order, scroll-driven; nothing shown on load.
 */

.logic-path {
    position: relative; box-sizing: border-box; width: 100%;
    padding: clamp(1.75rem,4vw,3.5rem) clamp(1.5rem,4vw,3rem);
    background: var(--color-surface-base,#fff);
    border: 1px solid color-mix(in srgb, var(--color-primary) 14%, var(--color-border,#e5e7eb));
    border-radius: var(--radius-xl,1.5rem);
    box-shadow: var(--card-shadow-base, var(--shadow-soft));
    font-family: var(--font-family-base, inherit); overflow: hidden;
}
.logic-path__svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; }

.logic-path__list {
    --lp-cols:3; list-style:none; margin:0; padding:0;
    display:grid; grid-template-columns:repeat(var(--lp-cols),1fr);
    align-items:center; gap:5rem 5rem; position:relative; z-index:1;
}
@media (max-width:1023px){ .logic-path__list{ --lp-cols:2; } }
@media (max-width:639px){ .logic-path__list{ --lp-cols:1; gap:4.5rem 0; } }

.logic-path__item { margin:0 !important; padding:0; min-width:0; display:flex; flex-direction:column; align-items:center; }
.logic-path__thought { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; padding:0; }
/* normal gap between the text lines … */
.logic-path__thought > * + * { margin-top:0.9rem; }
/* … but a tight gap right under the eyebrow pill. */
.logic-path__thought .eyebrow + .logic-path__heading { margin-top:0.1rem; }

.logic-path__heading { margin:0; font-family:var(--font-family-heading,inherit); font-size:1.3rem; font-weight:700; line-height:1.2; color:var(--color-ink,var(--color-text,#1f2937)); }
.logic-path__body { margin:0; font-size:0.975rem; line-height:1.6; color:var(--color-text-secondary,#6b7280); max-width:40ch; }
.logic-path__body p { margin:0 0 0.6rem; } .logic-path__body p:last-child{ margin-bottom:0; }

.logic-path__media { margin-top:1rem; width:100%; max-width:300px; aspect-ratio:16/10; overflow:hidden; border-radius:var(--radius-md,0.5rem); background:var(--color-primary-pale,#f0fdfa); }
.logic-path__media img { display:block; width:100%; height:100%; object-fit:cover; }

.logic-path__relationship {
    margin-top:0.9rem; padding:0.35rem 0.95rem;
    background:var(--color-surface-base,#fff); color:var(--color-primary-deep,#0d9488);
    border:1px solid color-mix(in srgb, var(--color-primary) 26%, transparent);
    border-radius:var(--radius-full,9999px);
    font-family:var(--font-family-heading,inherit); font-size:0.8125rem; font-weight:600; font-style:italic;
    letter-spacing:0.02em; line-height:1.2; white-space:nowrap; box-shadow:0 1px 3px rgba(0,0,0,.06);
}

.logic-path__item--takeaway { align-items:stretch; }
.logic-path__item--takeaway .logic-path__thought { padding:2.25rem 2rem; background:color-mix(in srgb, var(--color-primary) 8%, var(--color-surface-base,#fff)); border-radius:var(--radius-lg,1rem); }
.logic-path__item--takeaway .logic-path__heading { font-size:1.7rem; }
.logic-path__item--takeaway .logic-path__body { max-width:62ch; font-size:1.05rem; }

/* Connectors — butt cap so the shaft ends flat and is fully hidden by the
   (much wider) arrowhead; never a line poking past the head. */
.logic-path__flow { fill:none; stroke:var(--color-primary-strong, var(--color-primary,#14b8a6)); stroke-width:7; stroke-linecap:butt; stroke-linejoin:round; }
.logic-path__arrowhead { fill:var(--color-primary-strong, var(--color-primary,#14b8a6)); }

@media (scripting: enabled) {
    /* Reveal ORDER (per step): incoming arrow DRAWS first (.65s) → head snaps
       on at draw-end → THEN the element fades in (--lp-el-delay 0.8s). */
    .logic-path__thought { opacity:0; transform:translate(var(--lp-dx,-42px), var(--lp-dy,0px));
        transition:opacity .5s cubic-bezier(.22,.61,.36,1) var(--lp-el-delay,0s), transform .5s cubic-bezier(.22,.61,.36,1) var(--lp-el-delay,0s); will-change:opacity,transform; }
    .logic-path__thought.is-revealed { opacity:1; transform:translate(0,0); }
    .logic-path__thought .logic-path__media { opacity:0; transition:opacity .5s ease calc(var(--lp-el-delay,0s) + .1s); }
    .logic-path__thought.is-revealed .logic-path__media { opacity:1; }
    .logic-path__relationship { position:absolute; z-index:5; top:0; left:0; margin:0; transform:translate(-50%,-50%); pointer-events:none; opacity:0; transition:opacity .4s ease calc(var(--lp-el-delay,0s) + .05s); }
    .logic-path__relationship.is-shown { opacity:1; }

    /* line draws itself; the head SNAPS on exactly as the line arrives (no fade)
       so shaft + head read as ONE continuous arrow, not two elements. */
    .logic-path__flow { transition:stroke-dashoffset .6s cubic-bezier(.45,0,.25,1); }
    .logic-path__arrowhead { opacity:0; transition:opacity 0s linear .48s; }
    .logic-path__arrow.is-shown .logic-path__arrowhead { opacity:1; }

    /* Flash guard: during every (re)build all transitions are OFF so the state
       is set instantly with no draw/fade on page entry or on resize. */
    .logic-path--init .logic-path__thought,
    .logic-path--init .logic-path__thought .logic-path__media,
    .logic-path--init .logic-path__flow,
    .logic-path--init .logic-path__arrowhead,
    .logic-path--init .logic-path__relationship { transition:none !important; }
}
@media (prefers-reduced-motion: reduce) {
    .logic-path__thought, .logic-path__thought .logic-path__media, .logic-path__arrowhead { opacity:1 !important; transform:none !important; transition:none !important; }
    .logic-path__flow { transition:none !important; }
    .logic-path__relationship { opacity:1 !important; transition:none !important; }
}
@media print {
    .logic-path__thought, .logic-path__thought .logic-path__media, .logic-path__arrowhead { opacity:1 !important; }
    .logic-path__svg { display:none; }
    .logic-path__relationship { position:static; transform:none; margin-top:.6rem; }
}