/* ─────────────────────────────────────────────────────────────────────────
   B GREEN Campaign sections — the /kampagne design re-packaged as editable
   PageBuilder content types. Everything is namespaced under .bgc (each content
   type root carries `class="bgc bgc-ct-<type>"`), so it never leaks onto the
   rest of the site. Mirrors Era_BgreenFrontend::css/campaign.css but adapted
   for per-section content types (page-level padding removed; each section gets
   its own default vertical padding, like the frontpage .bgs sections).
   ───────────────────────────────────────────────────────────────────────── */
.bgc {
    --bgc-accent: #566644;
    --bgc-green-700: #4d5a3a;
    --bgc-ink-heading: #24291d;
    --bgc-ink-body: #45483d;
    --bgc-ink-soft: #6f7365;
    --bgc-ink-faint: #9aa08c;
    --bgc-hairline: #e4e3d8;
    --bgc-sand: #efeee6;
    --bgc-paper: #faf9f4;
    --bgc-serif: 'Playfair Display', Georgia, serif;
    --bgc-section-pad: clamp(48px, 4.5vw, 80px);
    color: var(--bgc-ink-body);
}
.bgc *, .bgc *::before, .bgc *::after { box-sizing: border-box; }
.bgc a { color: inherit; text-decoration: none; }
.bgc img { max-width: 100%; display: block; }
/* placeholder images (client has not uploaded yet) render with no src — hide the
   broken-image icon everywhere so the sand placeholder box shows cleanly */
.bgc img[src=""], .bgc img:not([src]) { display: none; }

/* Default per-section vertical padding so the client never has to set it in
   PageBuilder. Full-bleed bands (quote, CTA) keep it too — it becomes the
   paper gap around the coloured band. */
.page-cms .bgc { padding-top: var(--bgc-section-pad); padding-bottom: var(--bgc-section-pad); }

/* Campaign page: the breadcrumbs bar was showing on white while the sections
   below sit on the paper page colour — a visible seam. Paint the whole page
   area (body + main wrapper + the breadcrumbs bar) the same paper so it is
   seamless. Scoped to the campaign page via the body.campaign-pb class. */
body.campaign-pb { background: #FCFBF8; }
body.campaign-pb #maincontent,
body.campaign-pb .breadcrumbs { background: #FCFBF8; }

/* Shared type + buttons */
.bgc .bgc-display { font-family: var(--bgc-serif); font-weight: 500; font-size: clamp(38px, 5.2vw, 66px); line-height: 1.03; color: var(--bgc-ink-heading); margin: 0; }
.bgc .bgc-h1 { font-family: var(--bgc-serif); font-weight: 500; font-size: clamp(28px, 3vw, 46px); line-height: 1.1; color: var(--bgc-ink-heading); margin: 0; }
.bgc .bgc-lead { font-size: 18px; line-height: 1.65; color: var(--bgc-ink-body); }
.bgc p { margin: 0; }
.bgc .bgc-btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 28px; background: var(--bgc-accent); color: #fff; font-size: 14px; font-weight: 600; letter-spacing: .02em; border: 1px solid var(--bgc-accent); transition: background .2s, color .2s, border-color .2s; }
.bgc .bgc-btn:hover { background: var(--bgc-green-700); border-color: var(--bgc-green-700); color: #fff; }
.bgc .bgc-btn-light { background: #fff; color: var(--bgc-ink-heading); border-color: #fff; }
.bgc .bgc-btn-light:hover { background: var(--bgc-sand); color: var(--bgc-ink-heading); border-color: var(--bgc-sand); }
.bgc .bgc-link-arrow { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--bgc-accent); }
.bgc .bgc-link-arrow::after { content: "\2192"; transition: transform .2s; }
.bgc .bgc-link-arrow:hover::after { transform: translateX(4px); }

/* Placeholder media boxes (client drops images later) */
.bgc .bgc-ph { position: relative; overflow: hidden; background: var(--bgc-sand); }
.bgc .bgc-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.bgc .bgc-ph img[src=""], .bgc .bgc-ph img:not([src]) { display: none; }

/* Hero */
.bgc .bgc-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 88px); align-items: center; }
.bgc .bgc-hero-copy { display: flex; flex-direction: column; gap: 22px; }
.bgc .bgc-hero-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 6px; }
.bgc .bgc-hero-media { aspect-ratio: 4 / 5; }

/* Intro */
.bgc .bgc-intro { text-align: center; max-width: 920px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 22px; }

/* Lookbook masonry */
.bgc .bgc-lookbook { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 234px; gap: 18px; }
.bgc .bgc-lb { position: relative; overflow: hidden; background: var(--bgc-sand); }
.bgc .bgc-lb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.bgc .bgc-lb:hover img { transform: scale(1.04); }
.bgc .bgc-lb.a { grid-column: span 7; grid-row: span 2; }
.bgc .bgc-lb.b { grid-column: span 5; grid-row: span 1; }
.bgc .bgc-lb.c { grid-column: span 5; grid-row: span 1; }
.bgc .bgc-lb.d { grid-column: span 12; grid-row: span 1; }
.bgc .bgc-lb-tag { position: absolute; left: 22px; bottom: 20px; z-index: 2; color: #fff; font-family: var(--bgc-serif); font-size: 23px; text-shadow: 0 1px 16px rgba(0,0,0,.55); }
.bgc .bgc-lb-tag:empty { display: none; }

/* Story split + facts */
.bgc .bgc-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(48px, 5vw, 110px); align-items: center; }
.bgc .bgc-split-media { aspect-ratio: 4 / 5; }
.bgc .bgc-split-copy { display: flex; flex-direction: column; gap: 22px; max-width: 50ch; }
.bgc .bgc-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 32px; margin-top: 12px; }
.bgc .bgc-fact { display: flex; flex-direction: column; gap: 6px; }
.bgc .bgc-fact .bgc-fk { font-family: var(--bgc-serif); font-size: 30px; color: var(--bgc-accent); }
.bgc .bgc-fact .bgc-fv { font-size: 13px; letter-spacing: .04em; color: var(--bgc-ink-soft); }

/* Palette */
.bgc .bgc-head-center { text-align: center; max-width: 720px; margin: 0 auto 32px; }
.bgc .bgc-palette { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--bgc-hairline); }
.bgc .bgc-swatch { aspect-ratio: 3 / 4; display: flex; align-items: flex-end; padding: 22px; color: #fff; }
.bgc .bgc-swatch span { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.bgc .bgc-sw-salvie { background: #7C8669; }
.bgc .bgc-sw-ler { background: #A6754F; }
.bgc .bgc-sw-graa { background: #6E6A60; }
.bgc .bgc-sw-mos { background: #425034; }

/* Quote band (full-bleed) */
.bgc .bgc-quote { width: 100vw; margin-left: calc(50% - 50vw); background: var(--bgc-green-700); }
.bgc .bgc-quote-inner { max-width: 1000px; margin: 0 auto; padding: clamp(64px, 8vw, 128px) 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 26px; }
.bgc .bgc-quote blockquote { margin: 0; font-family: var(--bgc-serif); font-style: normal; font-size: clamp(26px, 2.8vw, 44px); line-height: 1.34; color: #fdfdfb; }
.bgc .bgc-quote .bgc-cite { font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: rgba(252,251,248,.7); }

/* Product rail */
.bgc .bgc-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; }
.bgc .bgc-product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.bgc .bgc-product { display: flex; flex-direction: column; }
.bgc .bgc-pc-media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--bgc-sand); display: flex; align-items: center; justify-content: center; }
.bgc .bgc-pc-media img { max-width: 82%; max-height: 82%; object-fit: contain; }
.bgc .bgc-pc-label { position: absolute; left: 14px; top: 14px; z-index: 2; background: var(--bgc-green-700); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: 6px 12px; }
.bgc .bgc-pc-label:empty { display: none; }
.bgc .bgc-pc-body { display: flex; flex-direction: column; gap: 4px; padding-top: 16px; }
.bgc .bgc-pc-name { font-family: var(--bgc-serif); font-size: 18px; color: var(--bgc-ink-heading); }
.bgc .bgc-pc-note { font-size: 12.5px; color: var(--bgc-ink-soft); }

/* Styling tips */
.bgc .bgc-tips { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(32px, 3.5vw, 64px); }
.bgc .bgc-tip { display: flex; flex-direction: column; gap: 14px; }
.bgc .bgc-tip .bgc-rule { width: 38px; height: 2px; background: var(--bgc-accent); }
.bgc .bgc-tip .bgc-num { font-family: var(--bgc-serif); font-size: 18px; color: var(--bgc-accent); }
.bgc .bgc-tip h3 { font-family: var(--bgc-serif); font-size: 23px; color: var(--bgc-ink-heading); margin: 0; }
.bgc .bgc-tip p { font-size: 15px; line-height: 1.6; color: var(--bgc-ink-body); margin: 0; }

/* Split CTA (full-bleed) */
.bgc .bgc-cta { width: 100vw; margin-left: calc(50% - 50vw); display: grid; grid-template-columns: 1fr 1fr; min-height: 520px; }
.bgc .bgc-cta-media { position: relative; overflow: hidden; background: var(--bgc-sand); }
.bgc .bgc-cta-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bgc .bgc-cta-body { background: var(--bgc-green-700); color: #fdfdfb; display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: clamp(48px, 5vw, 96px); }
.bgc .bgc-cta-body h2 { font-family: var(--bgc-serif); font-weight: 500; color: #fff; font-size: clamp(30px, 2.8vw, 46px); margin: 0; }
.bgc .bgc-cta-body p { color: rgba(252,251,248,.85); max-width: 42ch; }

/* full-bleed bands: the root section padding becomes the outer paper gap; the
   band itself keeps its own internal padding. Remove side container padding. */
.page-cms .bgc-ct-quote, .page-cms .bgc-ct-cta { padding-left: 0; padding-right: 0; }

@media (max-width: 1000px) {
    .bgc .bgc-hero, .bgc .bgc-split { grid-template-columns: 1fr; }
    .bgc .bgc-hero-media, .bgc .bgc-split-media { aspect-ratio: 16 / 10; }
    .bgc .bgc-lb.a { grid-column: span 12; grid-row: span 2; }
    .bgc .bgc-lb.b, .bgc .bgc-lb.c { grid-column: span 6; grid-row: span 1; }
    .bgc .bgc-product-grid { grid-template-columns: 1fr 1fr; }
    .bgc .bgc-tips { grid-template-columns: 1fr; gap: 36px; }
    .bgc .bgc-palette { grid-template-columns: 1fr 1fr; }
    .bgc .bgc-cta { grid-template-columns: 1fr; }
    .bgc .bgc-cta-media { min-height: 320px; }
}
@media (max-width: 640px) {
    /* section heading + "see all" link stack (link below heading, not beside it) */
    .bgc .bgc-head-row { flex-direction: column; align-items: flex-start; gap: 14px; }
}
@media (max-width: 560px) {
    .bgc .bgc-product-grid, .bgc .bgc-palette { grid-template-columns: 1fr; }
    /* lookbook masonry -> single-column stack on phones (12-col grid was cramped) */
    .bgc .bgc-lookbook { grid-template-columns: 1fr; grid-auto-rows: 220px; }
    .bgc .bgc-lb.a, .bgc .bgc-lb.b, .bgc .bgc-lb.c, .bgc .bgc-lb.d { grid-column: 1 / -1; grid-row: auto; }
    /* facts + hero/split media stack too */
    .bgc .bgc-facts { grid-template-columns: 1fr; }
    .bgc .bgc-hero-media, .bgc .bgc-split-media { aspect-ratio: 4 / 3; }
    .bgc .bgc-quote-inner { padding-left: 20px; padding-right: 20px; }
    .bgc .bgc-cta-body { padding: 40px 22px; }
}