/* ═══════════════════════════════════════════════════════════════════════════
   B GREEN Design blocks (Tier A) — opt-in, self-contained content bands.

   EVERY selector is namespaced under .bgd, and every colour/spacing token is a
   LOCAL variable defined on .bgd. Loading this site-wide is safe: it only ever
   styles elements that carry the new .bgd / .bgd-* classes, so existing pages
   render exactly as before. Playfair Display is already loaded by the theme.

   Usage: wrap a block in <div class="bgd bgd-<name>"> … </div> (done for you in
   the CMS blocks created by CreateDesignBlocks.php). Image slots use
   .bgd-imgph as a neutral placeholder until a real <img> is dropped in.
   TODO(client-asset): swap placeholder image slots for real photography.
   ═══════════════════════════════════════════════════════════════════════════ */
.bgd {
    --bgd-accent: #566644;
    --bgd-green-50: #f2f4ec;
    --bgd-green-100: #e7ecdc;
    --bgd-green-700: #4d5a3a;
    --bgd-green-800: #3c4630;
    --bgd-ink-heading: #24291d;
    --bgd-ink-body: #45483d;
    --bgd-ink-soft: #6f7365;
    --bgd-ink-faint: #9aa08c;
    --bgd-hairline: #e4e3d8;
    --bgd-sand: #efeee6;
    --bgd-paper-warm: #faf9f4;
    --bgd-serif: 'Playfair Display', Georgia, serif;

    color: var(--bgd-ink-body);
    box-sizing: border-box;
}
.bgd *, .bgd *::before, .bgd *::after { box-sizing: border-box; }
.bgd a { color: inherit; text-decoration: none; }
.bgd img { display: block; max-width: 100%; }

/* Shared primitives (scoped) */
.bgd-container { max-width: 1280px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.bgd-section { padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(48px, 7vw, 96px); }
.bgd-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--bgd-ink-faint); }
.bgd-h2 { font-family: var(--bgd-serif); font-weight: 500; font-size: clamp(28px, 3.6vw, 42px); line-height: 1.1; color: var(--bgd-ink-heading); }
.bgd-lead { font-size: 18px; line-height: 1.65; color: var(--bgd-ink-body); }
/* NB: prefixed with .bgd so they beat `.bgd a { color: inherit }` specificity. */
.bgd .bgd-btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 26px; background: var(--bgd-accent); color: #fff; font-size: 14px; font-weight: 600; border: 1px solid var(--bgd-accent); transition: background .2s, border-color .2s, color .2s; }
.bgd .bgd-btn:hover { background: var(--bgd-green-800); border-color: var(--bgd-green-800); color: #fff; }
.bgd .bgd-btn-light { background: #fff; color: var(--bgd-ink-heading); border-color: var(--bgd-hairline); }
.bgd .bgd-btn-light:hover { background: var(--bgd-sand); color: var(--bgd-ink-heading); border-color: var(--bgd-hairline); }
.bgd .bgd-link-arrow { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--bgd-accent); }
.bgd .bgd-link-arrow::after { content: "→"; transition: transform .2s; }
.bgd .bgd-link-arrow:hover::after { transform: translateX(4px); }
.bgd-imgph { position: relative; background: var(--bgd-sand); overflow: hidden; border: 1px solid var(--bgd-hairline); }
.bgd-imgph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.bgd-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 40px; }
.bgd-head.center { text-align: center; align-items: center; max-width: 720px; margin-left: auto; margin-right: auto; }

/* ── Newsletter band ──────────────────────────────────────────────────────── */
.bgd-newsletter { background: var(--bgd-green-700); color: #fff; }
.bgd-newsletter .bgd-nl-inner { max-width: 860px; margin: 0 auto; padding: clamp(48px,7vw,96px) 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.bgd-newsletter .bgd-eyebrow { color: rgba(255,255,255,.7); }
.bgd-newsletter .bgd-h2 { color: #fff; }
.bgd-newsletter .bgd-lead { color: rgba(255,255,255,.85); }
.bgd-newsletter .bgd-nl-form { display: flex; gap: 10px; width: 100%; max-width: 480px; margin-top: 6px; }
.bgd-newsletter .bgd-nl-form input { flex: 1; padding: 13px 16px; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); color: #fff; }
.bgd-newsletter .bgd-nl-form input::placeholder { color: rgba(255,255,255,.6); }
.bgd-newsletter .bgd-nl-form .bgd-btn { background: #fff; color: var(--bgd-green-800); border-color: #fff; }
@media (max-width: 560px) { .bgd-newsletter .bgd-nl-form { flex-direction: column; } }

/* ── Stats / facts strip ──────────────────────────────────────────────────── */
.bgd-stats { border-top: 1px solid var(--bgd-hairline); border-bottom: 1px solid var(--bgd-hairline); }
.bgd-stats .bgd-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.bgd-stats .bgd-stat { padding: clamp(28px,4vw,48px) 28px; border-left: 1px solid var(--bgd-hairline); text-align: center; }
.bgd-stats .bgd-stat:first-child { border-left: none; }
.bgd-stats .bgd-num { font-family: var(--bgd-serif); font-size: clamp(34px,4vw,48px); color: var(--bgd-accent); line-height: 1; }
.bgd-stats .bgd-lbl { margin-top: 8px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--bgd-ink-soft); }
@media (max-width: 800px) { .bgd-stats .bgd-stats-grid { grid-template-columns: 1fr 1fr; } .bgd-stats .bgd-stat:nth-child(3) { border-left: none; } }
@media (max-width: 460px) { .bgd-stats .bgd-stats-grid { grid-template-columns: 1fr; } .bgd-stats .bgd-stat { border-left: none; border-top: 1px solid var(--bgd-hairline); } .bgd-stats .bgd-stat:first-child { border-top: none; } }

/* ── Manifest / quote band ────────────────────────────────────────────────── */
.bgd-manifest { text-align: center; }
.bgd-manifest .bgd-m-inner { max-width: 900px; margin: 0 auto; padding: clamp(56px,8vw,120px) 24px; }
.bgd-manifest .bgd-m-line { font-family: var(--bgd-serif); font-size: clamp(26px,3.6vw,44px); line-height: 1.3; color: var(--bgd-ink-heading); }
.bgd-quote { background: var(--bgd-green-700); color: #fff; text-align: center; }
.bgd-quote .bgd-q-inner { max-width: 820px; margin: 0 auto; padding: clamp(56px,8vw,110px) 24px; }
.bgd-quote blockquote { font-family: var(--bgd-serif); font-style: normal; color: #fff; font-size: clamp(24px,3.2vw,38px); line-height: 1.35; margin: 0; }
.bgd-quote .bgd-q-cite { margin-top: 20px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.7); }

/* ── Marquee trust band ───────────────────────────────────────────────────── */
.bgd-marquee { overflow: hidden; border-top: 1px solid var(--bgd-hairline); border-bottom: 1px solid var(--bgd-hairline); padding: 18px 0; }
.bgd-marquee .bgd-mq-track { display: flex; gap: 40px; width: max-content; animation: bgd-mq 30s linear infinite; }
.bgd-marquee .bgd-mq-seg { display: inline-flex; align-items: center; gap: 40px; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--bgd-ink-soft); white-space: nowrap; }
.bgd-marquee .bgd-mq-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--bgd-accent); display: inline-block; }
@keyframes bgd-mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .bgd-marquee .bgd-mq-track { animation: none; } }

/* ── Image strips: Instagram + Mosaic ─────────────────────────────────────── */
.bgd-instagram .bgd-ig-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.bgd-instagram .bgd-ig-grid .bgd-imgph { aspect-ratio: 1 / 1; }
@media (max-width: 900px) { .bgd-instagram .bgd-ig-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .bgd-instagram .bgd-ig-grid { grid-template-columns: 1fr 1fr; } }

.bgd-mosaic .bgd-mo-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 180px; gap: 12px; }
.bgd-mosaic .bgd-imgph { width: 100%; height: 100%; }
.bgd-mosaic .bgd-mo-grid .tall { grid-row: span 2; }
.bgd-mosaic .bgd-mo-grid .wide { grid-column: span 2; }
.bgd-mosaic .bgd-mo-cap { margin-top: 14px; font-size: 13px; color: var(--bgd-ink-soft); }
@media (max-width: 800px) { .bgd-mosaic .bgd-mo-grid { grid-template-columns: 1fr 1fr; } }

/* ── Catalog CTA + Split CTA ──────────────────────────────────────────────── */
.bgd-catalog-cta { background: var(--bgd-sand); }
.bgd-catalog-cta .bgd-cc-inner { max-width: 900px; margin: 0 auto; padding: clamp(48px,7vw,96px) 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }

.bgd-split-cta .bgd-sc-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.bgd-split-cta .bgd-imgph { min-height: 360px; }
.bgd-split-cta .bgd-sc-body { background: var(--bgd-green-50); padding: clamp(40px,5vw,80px); display: flex; flex-direction: column; justify-content: center; gap: 16px; }
@media (max-width: 800px) { .bgd-split-cta .bgd-sc-grid { grid-template-columns: 1fr; } }

/* ── Colour swatches ──────────────────────────────────────────────────────── */
.bgd-swatches .bgd-sw-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.bgd-swatches .bgd-swatch { display: flex; flex-direction: column; gap: 10px; }
.bgd-swatches .bgd-swatch .chip { aspect-ratio: 3 / 4; border: 1px solid rgba(0,0,0,.10); }
.bgd-swatches .bgd-swatch .name { font-family: var(--bgd-serif); font-size: 18px; color: var(--bgd-ink-heading); }
.bgd-swatches .bgd-swatch .desc { font-size: 12.5px; color: var(--bgd-ink-soft); }
@media (max-width: 900px) { .bgd-swatches .bgd-sw-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .bgd-swatches .bgd-sw-grid { grid-template-columns: 1fr 1fr; } }

/* ── Styling tips 3-col ───────────────────────────────────────────────────── */
.bgd-tips .bgd-tips-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.bgd-tips .bgd-tip { display: flex; flex-direction: column; gap: 12px; }
.bgd-tips .bgd-tip .lt-num { font-family: var(--bgd-serif); font-size: 34px; color: var(--bgd-accent); }
.bgd-tips .bgd-tip .lt-rule { width: 40px; height: 1px; background: var(--bgd-hairline); }
.bgd-tips .bgd-tip h3 { font-family: var(--bgd-serif); font-size: 21px; color: var(--bgd-ink-heading); }
@media (max-width: 800px) { .bgd-tips .bgd-tips-grid { grid-template-columns: 1fr; } }

/* ── Lookbook masonry ─────────────────────────────────────────────────────── */
/* 6-col grid that tiles cleanly: a(4)+b(2)=6 · c(3)+d(3)=6 · e(3)+f(3)=6 */
.bgd-lookbook .bgd-lb-grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 150px; gap: 12px; grid-auto-flow: dense; }
.bgd-lookbook .bgd-lb { position: relative; overflow: hidden; background: var(--bgd-sand); border: 1px solid var(--bgd-hairline); }
.bgd-lookbook .bgd-lb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bgd-lookbook .bgd-lb.a { grid-column: span 4; grid-row: span 3; }
.bgd-lookbook .bgd-lb.b { grid-column: span 2; grid-row: span 3; }
.bgd-lookbook .bgd-lb.c { grid-column: span 3; grid-row: span 2; }
.bgd-lookbook .bgd-lb.d { grid-column: span 3; grid-row: span 2; }
.bgd-lookbook .bgd-lb.e { grid-column: span 3; grid-row: span 2; }
.bgd-lookbook .bgd-lb.f { grid-column: span 3; grid-row: span 2; }
.bgd-lookbook .bgd-lb-tag { position: absolute; left: 14px; bottom: 12px; z-index: 2; color: #fff; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
@media (max-width: 800px) { .bgd-lookbook .bgd-lb-grid { grid-template-columns: 1fr 1fr; } .bgd-lookbook .bgd-lb { grid-column: span 1 !important; grid-row: span 2 !important; } }

/* ── Card grid (news / inspiration / series) ──────────────────────────────── */
.bgd-cards .bgd-cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 28px; }
.bgd-cards .bgd-card { display: flex; flex-direction: column; }
.bgd-cards .bgd-card .bgd-imgph { aspect-ratio: 4 / 3; }
.bgd-cards .bgd-card:hover .bgd-imgph img { transform: scale(1.04); }
.bgd-cards .bgd-card .bgd-imgph img { transition: transform .6s cubic-bezier(.16,1,.3,1); }
.bgd-cards .bgd-card .bgd-c-meta { margin-top: 14px; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--bgd-ink-soft); }
.bgd-cards .bgd-card .bgd-c-title { margin-top: 8px; font-family: var(--bgd-serif); font-size: 22px; color: var(--bgd-ink-heading); transition: color .2s; }
.bgd-cards .bgd-card:hover .bgd-c-title { color: var(--bgd-accent); }
.bgd-cards .bgd-card .bgd-c-excerpt { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--bgd-ink-body); }
@media (max-width: 900px) { .bgd-cards .bgd-cards-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .bgd-cards .bgd-cards-grid { grid-template-columns: 1fr; } }

/* ── Article typography block (news / inspiration post bodies) ────────────── */
.bgd-article { max-width: 760px; margin: 0 auto; }
.bgd-article .bgd-a-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 32px; }
.bgd-article .bgd-a-meta { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--bgd-ink-soft); }
.bgd-article h1 { font-family: var(--bgd-serif); font-weight: 500; font-size: clamp(32px,4.5vw,52px); line-height: 1.08; color: var(--bgd-ink-heading); }
.bgd-article .bgd-a-body { font-size: 17px; line-height: 1.8; color: var(--bgd-ink-body); display: flex; flex-direction: column; gap: 22px; }
.bgd-article .bgd-a-body h2 { font-family: var(--bgd-serif); font-size: 28px; color: var(--bgd-ink-heading); margin-top: 12px; }
.bgd-article .bgd-a-body .bgd-pull { font-family: var(--bgd-serif); font-size: clamp(22px,2.6vw,30px); line-height: 1.4; color: var(--bgd-accent); border-left: 2px solid var(--bgd-accent); padding-left: 24px; }
.bgd-article .bgd-a-figure .bgd-imgph { aspect-ratio: 16 / 10; }
.bgd-article .bgd-a-cap { margin-top: 10px; font-size: 13px; color: var(--bgd-ink-soft); }
.bgd-article .bgd-share { display: flex; gap: 8px; margin-top: 8px; }
.bgd-article .bgd-share a { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--bgd-hairline); color: var(--bgd-green-700); transition: border-color .2s, color .2s, background .2s; }
.bgd-article .bgd-share a:hover { border-color: var(--bgd-accent); color: #fff; background: var(--bgd-accent); }