/* ════════════════════════════════════════════════════════════════════════════
   ContentV10 — "Built on Follow-Through" (About founder section)
   Light (primary-light) section: a tall forest-tinted founder photo on the LEFT
   and a copy column on the RIGHT (Archivo-black headline with a rust accent line
   over the Ramon Castillo founder story). A rotated lime "founding year" sticker
   overlaps the photo. Framework-first: utilities + semantic tokens carry
   palette/type; this file adds the asymmetric columns, the photo chrome, the
   headline ramp and the sticker. px->rem = / 18.
   Artifact: Component() bg-var(--lt-bg), px-144 pt-40 pb-80, justify-between;
   LeftContent1 w-800 | RightContent1 w-661 > RightContentBox w-640 gap-24.
   ════════════════════════════════════════════════════════════════════════════ */

.cnt.v10 {
    /* column widths as % of the 1632px content frame (1920 - 144*2) */
    --cnt-v10-media-w: 49.02%;   /* 800 / 1632 */
    --cnt-v10-copy-w: 40.5%;     /* 661 / 1632 — outer RightContent wrapper */
    --cnt-v10-copy-inner: 35.556rem;  /* 640px — RightContentBox copy block */

    position: relative;
    overflow: clip;

    .mn_wd {
        position: relative;
    }

    /* -- Row: photo | copy, pushed to the edges (artifact justify-between) ---- */
    .cnt-v10-row {
        align-items: center;
    }

    @media (min-width: 1280px) {
        .cnt-v10-row {
            justify-content: space-between;
            gap: 0;
        }

        .cnt-v10-media-col {
            flex: 0 0 var(--cnt-v10-media-w);
            width: var(--cnt-v10-media-w);
        }

        .cnt-v10-copy-col {
            flex: 0 0 var(--cnt-v10-copy-w);
            width: var(--cnt-v10-copy-w);
        }

        .cnt-v10-sticker-year {
            font-size: 3.556rem;        /* 64px — deliberate desktop display size, no ramp match */
        }
    }

    /* ─────────────────────────────────────────────────────────────────────────
       LEFT — tall photo (artifact Img: h-800, rounded-16, forest tint,
       object-cover, black border + 4px 6px black offset shadow)
       ───────────────────────────────────────────────────────────────────────── */
    .cnt-v10-media-col {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .cnt-v10-photo {
        position: relative;
        width: 100%;
        height: 44.444rem;          /* 800px */
        margin: 0;
        padding: 0.889rem;          /* 16px — the pill sits inside this inset */
        border-color: var(--text-color);   /* .bdr_a supplies 2px solid; .bx-sdw the shadow */
        border-radius: var(--bdr-rds);    /* 16px */
        background: var(--callout);  /* var(--lt-callout) tint behind the photo */
        overflow: clip;
    }

    .cnt-v10-photo img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;          /* PNGs are forced to contain globally */
        border-radius: var(--bdr-rds);
        display: block;
    }

    /* ─────────────────────────────────────────────────────────────────────────
       RIGHT — copy column (artifact RightContentBox)
       ───────────────────────────────────────────────────────────────────────── */
    .cnt-v10-copy-col {
        display: flex;
        flex-direction: column;
        align-items: flex-start;    /* 640 copy block left-aligned inside the 661 wrapper */
    }

    .cnt-v10-copy-col > * {
        width: 100%;
        max-width: var(--cnt-v10-copy-inner);
    }

    /* ─────────────────────────────────────────────────────────────────────────
       Sticker (artifact Sticker Callout) — rotated lime capsule overlapping the
       photo: a 64px Archivo-black year + a spaced two-line SUSE label.
       Artifact: left-674 top-753 within the 1920 frame, -rotate-4,
       drop-shadow-[6px_6px_0px_black], rounded-16, border var(--lt-txt).
       Position it relative to the photo's right edge so it scales with the row.
       ───────────────────────────────────────────────────────────────────────── */
    .cnt-v10-sticker {
        position: absolute;
        left: 32.4%;                /* ~ left-674 / 1632 content -> overlaps photo edge */
        bottom: 1.333rem;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        gap: 0.889rem;              /* 16px */
        padding: 1.333rem;          /* 24px */
        border: 1px solid var(--callout);  /* var(--lt-txt) */
        border-radius: var(--bdr-rds);    /* 16px */
        background: var(--accent);
        box-shadow: 0.333rem 0.333rem 0 0 var(--black);  /* 6px 6px 0 black */
        transform: rotate(-4deg);
        white-space: nowrap;
    }

    .cnt-v10-sticker-year {
        font-family: var(--fnt-t-big-ff);
        font-weight: var(--fnt-t-big-w);
        text-align: center;
        color: var(--black);
    }

    .cnt-v10-sticker-label {
        font-family: var(--fnt-m);  /* SUSE */
        line-height: 1.4;
        text-transform: uppercase;
        color: var(--black);
    }

    /* ─────────────────────────────────────────────────────────────────────────
       Responsive: stack photo above copy below 1280; step the headline down,
       and tuck the sticker into the photo's bottom-right corner. The photo sits at
       the top of the stacked layout (600px/33.333rem tall), so a top-based offset
       lands the sticker on the photo's lower edge — kept through mobile so the
       sticker stays on the image rather than dropping below the copy.
       ───────────────────────────────────────────────────────────────────────── */
    @media (max-width: 1279px) {
        .cnt-v10-media-col,
        .cnt-v10-copy-col {
            width: 100%;
        }

        .cnt-v10-photo {
            height: 33.333rem;      /* 600px */
        }

        .cnt-v10-sticker {
            left: auto;
            right: 1.333rem;
            bottom: auto;
            top: 28rem;             /* near the lower edge of the 600px photo */
        }
    }
}