/* =============================================================
   workshop.css — editorial variant
   -------------------------------------------------------------
   Depends on primitives from global.css. Overwrites old
   workshop.css wholesale. Page-specific styles only.
   ============================================================= */

/* Kill stock container padding; edi sections handle their own spacing */
body.edi { padding: 0; }
body.edi .container { max-width: none; padding: 0; }

/* Hide the default <header><h1> block from workshop.html;
   the editorial hero below replaces it. */
body.edi > .container > header > h1,
body.edi > .container > header > .mission-statement { display: none; }

/* Keep the .container wrapping the page but un-style it */
body.edi .main-content {
    display: block;
    max-width: none;
    margin: 0;
    padding: 0;
    gap: 0;
}
body.edi .offerings { display: block; gap: 0; }

/* =============================================================
   HERO (workshop)
   ============================================================= */
.workshop-hero {
    padding: 8rem 0 10rem;
    border-bottom: 1px solid var(--color-rule);
    background: var(--color-paper);
}
.workshop-hero .edi-wrap {
    display: grid; grid-template-columns: 1.4fr 1fr; gap: 8rem; align-items: end;
}
.workshop-hero .eyebrow { display: block; margin-bottom: 3.2rem; }
.workshop-hero .edi-h1 { margin-bottom: 3.6rem; }
.workshop-hero .lede {
    font-size: 1.85rem; line-height: 1.55; color: var(--color-ink-2); max-width: 52ch;
}
.workshop-hero .lede + .lede { margin-top: 1.8rem; }
.workshop-hero .hero-side {
    border-left: 1px solid var(--color-rule-strong);
    padding-left: 4rem;
    display: flex; flex-direction: column; gap: 2.4rem;
}
.workshop-hero .hero-side dt {
    font-family: var(--font-mono); font-size: 1.1rem; letter-spacing: 0.14em;
    color: var(--color-ink-3); text-transform: uppercase; margin-bottom: 0.6rem;
}
.workshop-hero .hero-side dd { font-size: 1.6rem; color: var(--color-ink); font-weight: 500; }
@media (max-width: 980px) {
    .workshop-hero .edi-wrap { grid-template-columns: 1fr; gap: 4.8rem; }
    .workshop-hero .hero-side { border-left: 0; padding-left: 0; border-top: 1px solid var(--color-rule-strong); padding-top: 3.2rem; }
}

/* =============================================================
   SCORECARD CTA STRIP
   ============================================================= */
/* Moved BELOW the generic .offering block so higher-specificity scorecard
   rules come after. See "SCORECARD CTA STRIP — overrides" at the end. */

/* =============================================================
   OFFERING (generic editorial section)
   gutter + max-width live on .offering itself so all inner
   content shares one consistent left edge.
   ============================================================= */
body.edi .offering {
    padding: 5.6rem var(--edi-gutter);
    max-width: calc(var(--edi-max) + 2 * var(--edi-gutter));
    margin-left: auto; margin-right: auto;
    border: 0; border-bottom: 1px solid var(--color-rule);
    background: transparent;
    border-radius: 0;
    box-sizing: border-box;
    transform: none !important; box-shadow: none !important;
}
body.edi .offering:hover { transform: none; box-shadow: none; }

body.edi .offering h2 {
    font-family: var(--font-serif); font-weight: 400;
    font-size: clamp(3.6rem, 5vw, 6.4rem);
    line-height: 1.02; letter-spacing: -0.02em;
    color: var(--color-ink); margin: 0 0 3.2rem;
    text-align: left;
}
body.edi .offering h3 {
    font-family: var(--font-serif); font-weight: 400;
    font-size: 2.8rem; letter-spacing: -0.015em;
    line-height: 1.15; color: var(--color-ink);
    margin-top: 3.2rem; margin-bottom: 1.6rem;
}
body.edi .offering p {
    font-size: 1.6rem; line-height: 1.6; color: var(--color-ink-2);
    max-width: 72ch;
    margin-right: auto; /* stay left-aligned within the offering column */
}
body.edi .offering ul {
    font-size: 1.5rem; line-height: 1.6; color: var(--color-ink-2);
    max-width: 72ch;
    margin: 2rem auto 2rem 0;
    list-style: none; padding: 0;
}
body.edi .offering ul li {
    padding: 1.4rem 0 1.4rem 3.2rem;
    border-bottom: 1px solid var(--color-rule);
    position: relative;
}
body.edi .offering ul li::before {
    content: "\2192"; position: absolute; left: 0; top: 1.4rem;
    color: var(--color-accent); font-family: var(--font-mono);
}
body.edi .offering ul li:last-child { border-bottom: 0; }
body.edi .offering ul li strong { color: var(--color-ink); font-weight: 600; }

body.edi .offering a:not(.cta-btn) {
    color: var(--color-ink);
    border-bottom: 1px solid var(--color-rule-strong);
    transition: color .2s ease, border-color .2s ease;
}
body.edi .offering a:not(.cta-btn):hover {
    color: var(--color-accent); border-color: var(--color-accent); text-decoration: none;
}

body.edi .offering .cta-btn {
    display: inline-flex; align-items: center; gap: 1rem;
    margin-top: 2.4rem;
    padding: 1.4rem 2.2rem;
    font-family: var(--font-sans); font-size: 1.4rem; font-weight: 600;
    background: var(--color-ink); color: var(--color-paper);
    border-radius: var(--radius-sharp);
    transition: background .2s ease;
}
body.edi .offering .cta-btn:hover {
    background: var(--color-accent); text-decoration: none;
}

/* =============================================================
   FORMAT CARDS (pricing row)
   ============================================================= */
body.edi .format-cards {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
    border-top: 1px solid var(--color-rule-strong);
    border-bottom: 1px solid var(--color-rule-strong);
    margin: 3.2rem 0;
}
body.edi .format-card {
    background: transparent;
    border: 0;
    border-right: 1px solid var(--color-rule);
    border-radius: 0;
    padding: 3.2rem 2.8rem;
    transition: background .2s ease;
    box-shadow: none;
    display: flex; flex-direction: column; gap: 1.2rem;
}
body.edi .format-card:hover {
    background: var(--color-paper-2); transform: none; box-shadow: none;
}
body.edi .format-card:last-child { border-right: 0; }
body.edi .format-card h3 {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 1.2rem; margin: 0 0 1rem;
    font-family: var(--font-serif); font-size: 2.6rem; font-weight: 400;
    letter-spacing: -0.015em; line-height: 1.1;
}
body.edi .format-card p {
    font-size: 1.4rem; color: var(--color-ink-2); line-height: 1.55; margin: 0;
}
body.edi .format-price {
    font-family: var(--font-mono);
    font-size: 1.2rem; letter-spacing: 0.08em; font-weight: 500;
    background: transparent; color: var(--color-accent);
    padding: 0; border-radius: 0; margin: 0;
    white-space: nowrap; text-transform: uppercase;
}
@media (max-width: 1024px) {
    body.edi .format-cards { grid-template-columns: repeat(2, 1fr); }
    body.edi .format-card {
        border-right: 1px solid var(--color-rule);
        border-bottom: 1px solid var(--color-rule);
    }
    body.edi .format-card:nth-child(2n) { border-right: 0; }
    body.edi .format-card:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 640px) {
    body.edi .format-cards { grid-template-columns: 1fr; }
    body.edi .format-card {
        border-right: 0;
        border-bottom: 1px solid var(--color-rule);
    }
    body.edi .format-card:last-child { border-bottom: 0; }
}

/* =============================================================
   PROOF / CALLOUT
   ============================================================= */
body.edi .offering.proof-section,
body.edi .offering.stelligent-callout {
    background: var(--color-paper-2);
    border-left: 0;
}

body.edi .proof-quote { margin: 0; padding: 0; border: 0; }
body.edi .proof-quote p {
    font-family: var(--font-serif); font-weight: 400;
    font-size: clamp(2.4rem, 3vw, 3.6rem);
    line-height: 1.15; letter-spacing: -0.015em;
    color: var(--color-ink); font-style: normal;
    max-width: 72ch; margin-bottom: 2rem;
}
body.edi .proof-quote p::before {
    content: "\201C"; color: var(--color-accent);
    font-size: 1em; line-height: 0; vertical-align: -0.2em; margin-right: 0.05em;
}
body.edi .proof-quote cite {
    font-family: var(--font-mono); font-size: 1.2rem;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--color-ink-3); font-style: normal;
}
body.edi .proof-stat { font-size: 1.4rem; color: var(--color-ink-3); }

/* =============================================================
   BOOKING STRIP (permanent sticky bar)
   ============================================================= */
body.edi .booking-strip {
    position: sticky; bottom: 0; z-index: 40;
    background: var(--color-ink); color: var(--color-paper);
    padding: 1.6rem 0;
    border-top: 1px solid var(--color-rule-strong);
}
body.edi .booking-strip-inner {
    max-width: var(--edi-max); margin: 0 auto;
    padding: 0 var(--edi-gutter);
    display: flex; align-items: center; justify-content: space-between; gap: 2.4rem;
    font-family: var(--font-sans); font-size: 1.4rem;
}
body.edi .booking-strip-inner .label {
    font-family: var(--font-mono); font-size: 1.1rem;
    letter-spacing: 0.14em; text-transform: uppercase; color: #8A8274;
}
body.edi .booking-strip-inner .cta {
    display: inline-flex; align-items: center; gap: 1rem;
    background: var(--color-accent); color: var(--color-paper);
    padding: 1rem 1.8rem; border-radius: var(--radius-sharp);
    font-weight: 600; font-size: 1.3rem;
}
body.edi .booking-strip-inner .cta:hover { background: var(--color-paper); color: var(--color-ink); text-decoration: none; }

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 820px) {
    .workshop-hero { padding: 5.6rem 0 6.4rem; }
    body.edi .offering { padding: 4.8rem var(--edi-gutter); }
    body.edi .offering h2 { font-size: 3.2rem; }
    body.edi .offering h3 { font-size: 2.2rem; }
}

/* =============================================================
   SCORECARD CTA STRIP — overrides
   Placed LAST so specific rules beat the generic .offering
   rules above (which share specificity but would otherwise win
   via source order).
   ============================================================= */
body.edi .offering.scorecard-cta-card {
    background: var(--color-ink);
    color: var(--color-paper);
    padding: 6rem 0;
    max-width: none;
    margin: 0;
    text-align: left;
    border: 0;
    border-radius: 0;
}
body.edi .offering.scorecard-cta-card:hover { transform: none; box-shadow: none; }
body.edi .offering.scorecard-cta-card > .edi-wrap {
    max-width: var(--edi-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--edi-gutter);
    padding-right: var(--edi-gutter);
}
body.edi .offering.scorecard-cta-card h2 {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(3.2rem, 4.4vw, 5.2rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--color-paper);
    margin: 0 0 2rem;
    padding: 0;
    text-align: left;
}
body.edi .offering.scorecard-cta-card p {
    font-size: 1.7rem;
    line-height: 1.6;
    color: #EAE3D5;
    max-width: 60ch;
    margin: 0 0 3.2rem;
}
body.edi .offering.scorecard-cta-card .cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    margin: 0;
    padding: 1.4rem 2.2rem;
    font-family: var(--font-sans);
    font-size: 1.4rem;
    font-weight: 600;
    background: var(--color-accent);
    color: var(--color-paper);
    border: 0;
    border-radius: var(--radius-sharp);
    transition: background .2s ease;
}
body.edi .offering.scorecard-cta-card .cta-btn:hover {
    background: var(--color-paper);
    color: var(--color-ink);
    text-decoration: none;
}