/* ============================================================
   VELLINORE — "Innerer Kreis" newsletter section
   7 switchable layouts + size + background, via body[data-circle*].
   Copy is editable through the Tweaks panel (text injection).
   Base 2-column styling lives in mobile-fixes.css (.circle);
   this layer adds the variants and overrides.
   ============================================================ */

.circle{ position:relative; overflow:hidden; }
.circle-media{ display:none; position:absolute; inset:0; z-index:0; }
.circle-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.circle .wrap{ position:relative; z-index:2; }

/* ============================================================
   SIZE — vertical rhythm + headline scale
   ============================================================ */
body[data-circle-size="compact"] .circle{ padding:clamp(48px,6vw,76px) 0; }
body[data-circle-size="normal"]  .circle{ padding:clamp(80px,10vw,130px) 0; }
body[data-circle-size="large"]   .circle{ padding:clamp(112px,14vw,196px) 0; }
body[data-circle-size="compact"] .circle .lede h2{ font-size:clamp(26px,3vw,40px); }
body[data-circle-size="large"]   .circle .lede h2{ font-size:clamp(38px,4.8vw,70px); }

/* ============================================================
   BACKGROUND — section fill (+ text adaptation for espresso)
   ============================================================ */
body[data-circle-bg="cream"]    .circle{ background:var(--cream); }
body[data-circle-bg="cream2"]   .circle{ background:var(--cream-2); }
body[data-circle-bg="white"]    .circle{ background:#FFFFFF; }
body[data-circle-bg="greige"]   .circle{ background:#E7E2D8; }
body[data-circle-bg="espresso"] .circle{ background:var(--espresso); }
body[data-circle-bg="espresso"] .circle .lede .e{ color:var(--champagne); }
body[data-circle-bg="espresso"] .circle .lede h2,
body[data-circle-bg="espresso"] .circle .lede p,
body[data-circle-bg="espresso"] .circle .fine{ color:#F6EFE0; }
body[data-circle-bg="espresso"] .circle .join form{ border-color:rgba(246,239,224,.4); }
body[data-circle-bg="espresso"] .circle .join input[type="email"]{ background:rgba(246,239,224,.06); color:#F6EFE0; }
body[data-circle-bg="espresso"] .circle .join input[type="email"]::placeholder{ color:rgba(246,239,224,.55); }
body[data-circle-bg="espresso"] .circle .perks span{ color:var(--champagne); border-color:rgba(212,180,131,.5); }

/* ============================================================
   LAYOUT 1 · SPLIT  (default — lede left, form right)
   (base 2-col already in mobile-fixes.css; nothing extra)
   ============================================================ */

/* ============================================================
   LAYOUT 2 · IMAGE  (full-bleed photo band, centered white text)
   ============================================================ */
body[data-circle="image"] .circle{ background:var(--espresso); }
body[data-circle="image"] .circle-media{ display:block; }
body[data-circle="image"] .circle-media::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(34,28,18,.5),rgba(34,28,18,.66)); }
body[data-circle="image"] .circle .wrap{ grid-template-columns:1fr; max-width:680px; margin:0 auto; text-align:center; gap:30px; }
body[data-circle="image"] .circle .lede{ align-items:center; }
body[data-circle="image"] .circle .lede .e{ color:var(--champagne); }
body[data-circle="image"] .circle .lede h2,
body[data-circle="image"] .circle .lede p{ color:#F6EFE0; }
body[data-circle="image"] .circle .lede p{ margin:0 auto; }
body[data-circle="image"] .circle .join{ align-items:center; max-width:440px; margin:0 auto; width:100%; }
body[data-circle="image"] .circle .join form{ width:100%; border-color:rgba(246,239,224,.5); }
body[data-circle="image"] .circle .join input[type="email"]{ background:rgba(246,239,224,.1); color:#F6EFE0; }
body[data-circle="image"] .circle .join input[type="email"]::placeholder{ color:rgba(246,239,224,.6); }
body[data-circle="image"] .circle .fine{ color:rgba(246,239,224,.75); }
body[data-circle="image"] .circle .perks{ justify-content:center; }
body[data-circle="image"] .circle .perks span{ color:var(--champagne); border-color:rgba(212,180,131,.55); }

/* ============================================================
   LAYOUT 3 · BOXED  (bordered invitation card, centered)
   ============================================================ */
body[data-circle="boxed"] .circle .wrap{ grid-template-columns:1fr; max-width:620px; margin:0 auto;
  text-align:center; gap:26px; border:1px solid var(--line-dark); background:var(--cream);
  padding:clamp(40px,5vw,72px) clamp(28px,4vw,60px); }
body[data-circle="boxed"] .circle .lede{ align-items:center; }
body[data-circle="boxed"] .circle .lede p{ margin:0 auto; }
body[data-circle="boxed"] .circle .join{ align-items:center; max-width:400px; margin:0 auto; width:100%; }
body[data-circle="boxed"] .circle .join form{ width:100%; }
body[data-circle="boxed"] .circle .perks{ justify-content:center; }

/* ============================================================
   LAYOUT 4 · IMAGESPLIT  (photo half | form half)
   ============================================================ */
body[data-circle="imagesplit"] .circle{ padding:0; }
body[data-circle="imagesplit"] .circle .wrap{ grid-template-columns:1fr 1fr; gap:0; max-width:none; padding:0; align-items:stretch; }
body[data-circle="imagesplit"] .circle-media{ display:block; position:relative; min-height:clamp(380px,46vw,560px); }
body[data-circle="imagesplit"] .circle .lede{ display:none; }
body[data-circle="imagesplit"] .circle .join{ justify-content:center; padding:clamp(44px,6vw,96px) clamp(32px,5vw,90px); background:var(--cream-2); }
body[data-circle="imagesplit"] .circle .join::before{ content:'Der innere Kreis'; font-family:var(--sans); font-size:11px;
  letter-spacing:.26em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:14px; }
body[data-circle="imagesplit"] .circle .join::after{ content:'Sehen, bevor andere sehen.'; font-family:var(--serif);
  font-weight:500; font-size:clamp(28px,3vw,44px); line-height:1.04; color:var(--ink); margin-bottom:22px; order:-1; }
body[data-circle="imagesplit"] .circle .join form{ width:100%; max-width:420px; }
@media (max-width:760px){
  body[data-circle="imagesplit"] .circle .wrap{ grid-template-columns:1fr; }
  body[data-circle="imagesplit"] .circle-media{ min-height:300px; }
}

/* ============================================================
   LAYOUT 5 · MINIMAL  (centered, inline underline field)
   ============================================================ */
body[data-circle="minimal"] .circle{ background:var(--cream); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
body[data-circle="minimal"] .circle .wrap{ grid-template-columns:1fr; max-width:640px; margin:0 auto; text-align:center; gap:22px; }
body[data-circle="minimal"] .circle .lede{ align-items:center; gap:14px; }
body[data-circle="minimal"] .circle .lede p{ display:none; }
body[data-circle="minimal"] .circle .lede h2{ font-size:clamp(32px,4vw,58px); }
body[data-circle="minimal"] .circle .join{ align-items:center; width:100%; gap:10px; }
body[data-circle="minimal"] .circle .join form{ border:0; border-bottom:1px solid var(--line-dark); max-width:380px; width:100%; background:transparent; }
body[data-circle="minimal"] .circle .join input[type="email"]{ background:transparent; text-align:center; padding:10px 8px; }
body[data-circle="minimal"] .circle .join button{ background:transparent; color:var(--gold-deep); padding:0 14px; letter-spacing:.16em; }
body[data-circle="minimal"] .circle .join button:hover{ background:transparent; color:var(--ink); }
body[data-circle="minimal"] .circle .perks{ display:none; }

/* ============================================================
   LAYOUT 6 · DARK  (espresso panel, champagne text — 2 col)
   ============================================================ */
body[data-circle="dark"] .circle{ background:var(--espresso); border-top:1px solid rgba(246,239,224,.1); }
body[data-circle="dark"] .circle .lede .e{ color:var(--champagne); }
body[data-circle="dark"] .circle .lede h2,
body[data-circle="dark"] .circle .lede p{ color:#F6EFE0; }
body[data-circle="dark"] .circle .join form{ border-color:rgba(246,239,224,.42); }
body[data-circle="dark"] .circle .join input[type="email"]{ background:rgba(246,239,224,.07); color:#F6EFE0; }
body[data-circle="dark"] .circle .join input[type="email"]::placeholder{ color:rgba(246,239,224,.55); }
body[data-circle="dark"] .circle .join button{ background:var(--champagne); color:var(--espresso); }
body[data-circle="dark"] .circle .join button:hover{ background:#F6EFE0; }
body[data-circle="dark"] .circle .fine{ color:rgba(246,239,224,.66); }
body[data-circle="dark"] .circle .perks span{ color:var(--champagne); border-color:rgba(212,180,131,.5); }

/* ============================================================
   LAYOUT 7 · OVERSIZED  (giant serif statement, form beneath)
   ============================================================ */
body[data-circle="oversized"] .circle .wrap{ grid-template-columns:1fr; max-width:1000px; margin:0 auto; text-align:center; gap:34px; }
body[data-circle="oversized"] .circle .lede{ align-items:center; gap:10px; }
body[data-circle="oversized"] .circle .lede h2{ font-size:clamp(44px,8vw,130px); line-height:.96; letter-spacing:-.01em; }
body[data-circle="oversized"] .circle .lede p{ max-width:50ch; margin:0 auto; }
body[data-circle="oversized"] .circle .join{ flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center; gap:14px; }
body[data-circle="oversized"] .circle .join form{ max-width:420px; width:100%; }
body[data-circle="oversized"] .circle .fine,
body[data-circle="oversized"] .circle .perks{ flex-basis:100%; justify-content:center; text-align:center; }

@media (max-width:820px){
  body[data-circle="dark"] .circle .wrap,
  body[data-circle="split"] .circle .wrap{ grid-template-columns:1fr; }
}

/* ============================================================
   FOOTER-INTEGRATED NEWSLETTER BAND
   The "Innerer Kreis" now lives at the top of the footer.
   Force espresso-cohesive colours regardless of the chosen
   layout, hide the media image, and keep padding tight so the
   newsletter + footer read as ONE region.
   ============================================================ */
.site-footer .circle{ background:transparent !important; overflow:visible;
  padding:clamp(40px,5vw,72px) 0 clamp(36px,4vw,56px); border-top:0;
  border-bottom:1px solid var(--line-dark); margin-bottom:30px; }
.site-footer .circle-media{ display:none !important; }
.site-footer .circle .wrap{ padding:0; }
.site-footer .circle .lede .e{ color:var(--champagne); }
.site-footer .circle .lede h2,
.site-footer .circle .lede p{ color:#F6EFE0; }
.site-footer .circle .fine{ color:#A99B81; }
.site-footer .circle .join form{ border:1px solid rgba(246,239,224,.4); }
.site-footer .circle .join input[type="email"]{ background:rgba(246,239,224,.06); color:#F6EFE0; }
.site-footer .circle .join input[type="email"]::placeholder{ color:rgba(246,239,224,.5); }
.site-footer .circle .join button{ background:var(--champagne); color:var(--espresso); }
.site-footer .circle .join button:hover{ background:#F6EFE0; }
.site-footer .circle .perks span{ color:var(--champagne); border-color:rgba(212,180,131,.45); }
/* minimal layout: underline field on dark */
.site-footer[data-circle] .circle{ }
body[data-circle="minimal"] .site-footer .circle .join form{ border:0; border-bottom:1px solid rgba(246,239,224,.4); }
body[data-circle="minimal"] .site-footer .circle .join button{ background:transparent; color:var(--champagne); }
/* footer "minimal" tweak now hides the whole newsletter band */
body[data-footer="minimal"] .site-footer .circle{ display:none; }