/* ===== VS-pages design v2 (Sep 10 2026) - strain-system card language =====
   Scoped by .bmwo-vs2 wrapper added to rewritten pages only. Unrewritten
   VS pages keep v1 styling (bmw-vs-pages.css base rules).
   Design tokens inherited from bmw-custom.css :root vars. */

/* --- Page-level: cap line length (design rec #1) --- */
.bmwo-vs2 {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}

/* --- All cards: inherit strain-system white card language --- */
.bmwo-vs2 .bmwo-card {
    background: #fff;
    border: 1px solid var(--bmw-line, #dfe7dc);
    border-radius: 12px;
    padding: 18px;
    margin: 0 0 14px;
}

/* --- Section label: same as bmw-strain-sec (11px uppercase + green dash) --- */
.bmwo-vs2 .bmwo-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--bmw-ink, #101820);
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.bmwo-vs2 .bmwo-label::before {
    content: '';
    width: 18px;
    height: 3px;
    background: var(--bmw-green, #63b723);
    border-radius: 2px;
    flex: 0 0 auto;
}

/* --- Quick answer card (replaces green left-border callout) --- */
.bmwo-vs2 .bmwo-answer {
    background: #fff;
    border: 1px solid var(--bmw-line, #dfe7dc);
    border-radius: 12px;
    padding: 18px;
    margin: 0 0 14px;
}
.bmwo-vs2 .bmwo-answer .bmwo-label { margin-bottom: 8px; }
.bmwo-vs2 .bmwo-answer p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--bmw-ink, #101820);
    margin: 0;
}
.bmwo-vs2 .bmwo-answer .bmwo-lead {
    font-size: 15px;
    line-height: 1.6;
    color: var(--bmw-muted, #5a6560);
    margin: 0 0 10px;
}

/* --- Facts/comparison table (strain facts-table pattern) --- */
.bmwo-vs2 .bmwo-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.bmwo-vs2 .bmwo-table th {
    color: var(--bmw-muted, #5a6560);
    text-align: left;
    font-weight: 400;
    padding: 8px;
    width: 34%;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.bmwo-vs2 .bmwo-table th:not(:first-child),
.bmwo-vs2 .bmwo-table td:not(:first-child) { text-align: center; }
.bmwo-vs2 .bmwo-table td {
    padding: 8px;
    border-bottom: 1px solid var(--bmw-line, #dfe7dc);
    font-weight: 600;
    color: var(--bmw-ink, #101820);
    font-size: 13.5px;
}
.bmwo-vs2 .bmwo-table tr:last-child td { border-bottom: none; }
.bmwo-vs2 .bmwo-table td:first-child { font-weight: 400; color: var(--bmw-muted, #5a6560); }

/* --- Gord card with avatar (hub gord-chip pattern) --- */
.bmwo-vs2 .bmwo-gord-byline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 0;
    font-size: 12px;
    color: var(--bmw-muted, #5a6560);
}
.bmwo-vs2 .bmwo-gord-byline img {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 26px;
}
.bmwo-vs2 .bmwo-gord-byline strong { color: var(--bmw-ink, #101820); }
.bmwo-vs2 .bmwo-gord p {
    font-size: 14.5px;
    line-height: 1.65;
    color: #3a3a3a;
    margin: 0 0 10px;
}
.bmwo-vs2 .bmwo-gord p:last-of-type { margin-bottom: 0; }

/* --- Verdict: dark hero-lite band (rec-engine band language) --- */
.bmwo-vs2 .bmwo-verdict {
    background: var(--bmw-ink, #101820);
    border-radius: 12px;
    color: #b9c4bb;
    padding: 18px;
    margin: 0 0 14px;
    position: relative;
    overflow: hidden;
}
.bmwo-vs2 .bmwo-verdict::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(99,183,35,.25), transparent 70%);
}
.bmwo-vs2 .bmwo-verdict > * { position: relative; z-index: 2; }
.bmwo-vs2 .bmwo-verdict .bmwo-label { color: #fff; margin-bottom: 10px; font-size: 13px; letter-spacing: 1.2px; }
.bmwo-vs2 .bmwo-verdict p {
    font-size: 14.5px;
    line-height: 1.65;
    margin: 0 0 10px;
    color: #d7ded9;
}
.bmwo-vs2 .bmwo-verdict p:last-child { margin-bottom: 0; }
.bmwo-vs2 .bmwo-verdict b, .bmwo-vs2 .bmwo-verdict strong { color: #8fd44f; }

/* --- Library: art-card grid (hub-card pattern reuse) --- */
.bmwo-vs2 .bmwo-library { padding: 0; overflow: hidden; }
.bmwo-vs2 .bmwo-library-band {
    background: var(--bmw-ink, #101820);
    color: #b9c4bb;
    font-size: 12.5px;
    padding: 10px 16px;
}
.bmwo-vs2 .bmwo-library-band b { color: #8fd44f; font-size: 13px; }
.bmwo-vs2 .bmwo-library-inner { padding: 14px 16px 4px; }
.bmwo-vs2 .bmwo-library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}
.bmwo-vs2 .bmwo-library-card {
    background: #fff;
    border: 1px solid var(--bmw-line, #dfe7dc);
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    display: flex;
    flex-direction: column;
}
.bmwo-vs2 .bmwo-library-card:hover { box-shadow: 0 3px 10px rgba(16,24,32,.12); }
.bmwo-vs2 .bmwo-library-card img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    display: block;
}
.bmwo-vs2 .bmwo-library-card span {
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--bmw-ink, #101820);
}
.bmwo-vs2 .bmwo-library-foot {
    text-align: center;
    padding: 0 16px 14px;
}
.bmwo-vs2 .bmwo-library-foot a {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--bmw-green-dark, #4c9217);
    text-decoration: none;
    border-bottom: 1px solid var(--bmw-green, #63b723);
    padding-bottom: 1px;
}
.bmwo-vs2 .bmwo-library-foot a:hover { color: var(--bmw-ink, #101820); }

/* --- FAQ inside v2: match strain-faq inner rhythm --- */
.bmwo-vs2 .bmwo-faq { padding: 18px; }
.bmwo-vs2 .bmwo-faq .schema-faq-section {
    border-bottom: 1px solid var(--bmw-line, #dfe7dc);
    padding: 10px 0;
}
.bmwo-vs2 .bmwo-faq .schema-faq-section:last-child { border-bottom: none; padding-bottom: 0; }
.bmwo-vs2 .bmwo-faq .schema-faq-question {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--bmw-ink, #101820);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 0;
}
.bmwo-vs2 .bmwo-faq .schema-faq-answer {
    font-size: 14px;
    line-height: 1.6;
    color: var(--bmw-muted, #5a6560);
    margin: 0;
}

/* --- Prose between cards --- */
.bmwo-vs2 p {
    font-size: 15px;
    line-height: 1.65;
    color: #333;
    margin: 0 0 14px;
}

/* --- Mobile --- */
@media (max-width: 600px) {
    .bmwo-vs2 .bmwo-card, .bmwo-vs2 .bmwo-answer,
    .bmwo-vs2 .bmwo-verdict { padding: 14px; margin-bottom: 12px; }
    .bmwo-vs2 .bmwo-library-grid { grid-template-columns: repeat(2, 1fr); }
}


/* ===== V1 styles (kept for unrewritten VS pages until they get the v2
   wrapper; do not delete - alberta-cannabis + future rewrites depend) ===== */
.bmwo-vs-faq {
    margin: 2.5rem 0;
    padding: 1.75rem 2rem;
    background: #fafafa;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
}
.bmwo-vs-faq h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 1.25rem;
    border-bottom: none;
}
.bmwo-vs-faq .schema-faq-section {
    padding: 0.9rem 0;
    border-bottom: 1px solid #e8e8e8;
}
.bmwo-vs-faq .schema-faq-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.bmwo-vs-faq .schema-faq-question {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 0;
}
.bmwo-vs-faq .schema-faq-answer {
    font-size: 14.5px;
    line-height: 1.6;
    color: #444;
    margin: 0;
}
.bmwo-vs-answer {
    margin: 2rem 0 2.25rem;
    padding: 1.5rem 1.75rem;
    background: #f4f9f4;
    border: 1px solid #dcead9;
    border-radius: 10px;
}
.bmwo-vs-answer h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 0.6rem;
    border-bottom: none;
}
.bmwo-vs-answer p {
    font-size: 15.5px;
    line-height: 1.65;
    color: #333;
    margin: 0 0 0.75rem;
}
.bmwo-vs-answer p:last-child { margin-bottom: 0; }
.bmwo-vs-gord {
    margin: 2.5rem 0;
    padding: 1.75rem 2rem;
    background: #fafafa;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
}
.bmwo-vs-gord h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 0.9rem;
    border-bottom: none;
}
.bmwo-vs-gord p {
    font-size: 15px;
    line-height: 1.65;
    color: #3a3a3a;
}
.bmwo-vs-gord p:last-child {
    font-size: 13.5px;
    color: #777;
    margin-bottom: 0;
}
@media (max-width: 600px) {
    .bmwo-vs-faq, .bmwo-vs-gord { padding: 1.25rem 1rem; margin: 1.75rem 0; }
    .bmwo-vs-answer { padding: 1.15rem 1rem; margin: 1.5rem 0; }
}

/* V1 pages (unrewritten): center content blocks to match hero width */
.bmwo-vs-answer, .bmwo-vs-gord, .bmwo-vs-faq {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}

/* ===== VS hero (v2): dark band, strain-system language.
   Only pages whose section id was renamed to Online-vs-hero. ===== */
section#Online-vs-hero {
    background: var(--bmw-ink, #101820);
    border-radius: 12px;
    max-width: 860px;
    margin: 0 auto 14px;
    position: relative;
    overflow: hidden;
    padding: 0;
}
/* Smart spacing under the sitewide trust bar: clamped so it scales
   between mobile (16px) and desktop (32px) without a breakpoint jump. */
section#Online-vs-hero {
    margin-top: clamp(16px, 3vw, 32px) !important;
}
section#Online-vs-hero::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(99,183,35,.28), transparent 70%);
}
section#Online-vs-hero .wp-block-group__inner-container {
    position: relative;
    z-index: 2;
    padding: 28px 24px 26px;
}
section#Online-vs-hero h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 26px;
    font-weight: 800;
    color: #fff;
    text-align: left;
    letter-spacing: -0.3px;
    line-height: 1.2;
    margin: 0;
    padding: 0;
}
section#Online-vs-hero .bmwo-vs-hero-sub {
    color: #b9c4bb;
    font-size: 13px;
    margin: 6px 0 0;
    position: relative;
    z-index: 2;
}
section#Online-vs-hero .bmwo-vs-hero-sub b { color: #8fd44f; }

@media (max-width: 600px) {
    section#Online-vs-hero .wp-block-group__inner-container { padding: 20px 16px 18px; }
    section#Online-vs-hero h1 { font-size: 22px; }
}