/*
 * KlikErotiek — herbruikbaar tekstkader "Nachtatelier"
 *
 * Gebruik:
 * Voeg "kr-copy-frame" toe bij Extra class name
 * van een WPBakery Text Block.
 */

.wpb_text_column.kr-copy-frame {
  --kr-frame-ink: #f3e9de;
  --kr-frame-muted: #d2c1b3;
  --kr-frame-gold: #c6a15b;
  --kr-frame-magenta: #ff00c8;
  margin: 14px 0 34px;
}

.wpb_text_column.kr-copy-frame > .wpb_wrapper {
  position: relative;
  box-sizing: border-box;
  isolation: isolate;
  padding: clamp(38px,4.5vw,64px) clamp(34px,5vw,74px);
  color: var(--kr-frame-ink);

  /* Koffietinten 25% lichter; rechts natuurlijk sterker transparant */
  background:
    radial-gradient(
      ellipse at 14% 16%,
      rgba(198,161,91,.17) 0,
      rgba(198,161,91,.06) 24%,
      transparent 48%
    ),
    linear-gradient(
      90deg,
      rgba(14,9,12,.74) 0,
      rgba(25,12,19,.71) 52%,
      rgba(46,20,34,.54) 68%,
      rgba(28,14,21,.27) 83%,
      transparent 100%
    );

  filter: drop-shadow(0 22px 28px rgba(0,0,0,.28));
}

/*
 * Los, handgemaakt lijnbeeld linksboven:
 * champagnegoud, KlikErotiek-magenta en een zachte ivoorveeg.
 */
.wpb_text_column.kr-copy-frame > .wpb_wrapper::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -12px;
  left: -2%;
  width: min(360px,58%);
  height: 96px;
  opacity: .90;
  transform: rotate(-1.2deg);
  background:
    linear-gradient(90deg, rgba(255,0,200,.78), rgba(255,0,200,.78))
      0 31px / 58px 2px no-repeat,
    linear-gradient(90deg, rgba(17,10,13,.96), rgba(17,10,13,.96))
      52px 27px / 118px 1px no-repeat,
    linear-gradient(90deg, rgba(198,161,91,.96), rgba(198,161,91,.96))
      160px 22px / 176px 1px no-repeat,
    linear-gradient(rgba(198,161,91,.84), rgba(198,161,91,.84))
      72px 28px / 1px 58px no-repeat,
    linear-gradient(
      138deg,
      transparent 27%,
      rgba(244,227,199,.14) 28% 43%,
      transparent 44% 55%,
      rgba(255,0,200,.07) 56% 69%,
      transparent 70%
    ) 88px 0 / 104px 92px no-repeat;
  pointer-events: none;
}

/* Kleiner, onrustiger tegengewicht rechtsonder */
.wpb_text_column.kr-copy-frame > .wpb_wrapper::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -1%;
  bottom: -9px;
  width: min(230px,42%);
  height: 72px;
  opacity: .72;
  transform: rotate(1.4deg);
  background:
    linear-gradient(270deg, rgba(198,161,91,.82), rgba(198,161,91,.82))
      0 42px / 150px 1px no-repeat,
    linear-gradient(270deg, rgba(255,0,200,.58), rgba(255,0,200,.58))
      118px 48px / 54px 2px no-repeat,
    linear-gradient(
      42deg,
      transparent 32%,
      rgba(255,0,200,.08) 33% 54%,
      transparent 55%
    ) 88px 5px / 92px 62px no-repeat;
  pointer-events: none;
}

.wpb_text_column.kr-copy-frame h1,
.wpb_text_column.kr-copy-frame h2,
.wpb_text_column.kr-copy-frame h3 {
  margin-top: 0;
  color: var(--kr-frame-ink);
  font-family: "Bebas Neue", Impact, sans-serif;
  line-height: 1.06;
  letter-spacing: .025em;
}

.wpb_text_column.kr-copy-frame p,
.wpb_text_column.kr-copy-frame li {
  color: var(--kr-frame-muted);
  font-size: clamp(17px,1.15vw,20px);
  line-height: 1.82;
  letter-spacing: .006em;
  text-shadow: 0 1px 1px rgba(0,0,0,.20);
}

.wpb_text_column.kr-copy-frame p {
  margin-top: 0;
}

.wpb_text_column.kr-copy-frame p + p {
  margin-top: 1.25em;
}

/* Redactioneel begin zonder extra HTML */
.wpb_text_column.kr-copy-frame--dropcap p:first-child::first-letter {
  float: left;
  margin: .05em .12em 0 0;
  color: var(--kr-frame-gold);
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 2.45em;
  line-height: .78;
  text-shadow: 2px 1px 0 rgba(255,0,200,.20);
}

.wpb_text_column.kr-copy-frame p:last-child,
.wpb_text_column.kr-copy-frame ul:last-child,
.wpb_text_column.kr-copy-frame ol:last-child {
  margin-bottom: 0 !important;
}

.wpb_text_column.kr-copy-frame strong {
  color: var(--kr-frame-gold);
  font-weight: 600;
}

.wpb_text_column.kr-copy-frame a {
  color: var(--kr-frame-gold);
  text-decoration-line: underline;
  text-decoration-color: rgba(255,0,200,.62);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.wpb_text_column.kr-copy-frame a:hover {
  color: var(--kr-frame-magenta);
}

@media (max-width: 767px) {
  .wpb_text_column.kr-copy-frame {
    margin-bottom: 26px;
  }

  .wpb_text_column.kr-copy-frame > .wpb_wrapper {
    padding: 36px 24px 32px;
  }

  .wpb_text_column.kr-copy-frame > .wpb_wrapper::before {
    top: -7px;
    left: -3%;
    width: 76%;
    transform: scale(.78) rotate(-1.2deg);
    transform-origin: left top;
  }

  .wpb_text_column.kr-copy-frame > .wpb_wrapper::after {
    right: -5%;
    width: 54%;
    transform: scale(.8) rotate(1.4deg);
    transform-origin: right bottom;
  }

  .wpb_text_column.kr-copy-frame p,
  .wpb_text_column.kr-copy-frame li {
    font-size: 16px;
    line-height: 1.72;
  }
}


/* Tweede herbruikbare variant: Wild Coffee */
.wpb_text_column.kr-copy-frame--wild > .wpb_wrapper {
  /* Cappuccino: warme melk, karamel en zachte mokka; rechts transparant */
  background:
    radial-gradient(
      ellipse at 84% 18%,
      rgba(226,199,169,.24) 0,
      rgba(194,145,105,.12) 28%,
      transparent 51%
    ),
    linear-gradient(
      90deg,
      rgba(105,72,59,.70) 0,
      rgba(151,105,79,.64) 52%,
      rgba(201,170,145,.45) 69%,
      rgba(112,68,76,.20) 84%,
      transparent 100%
    );
  filter: drop-shadow(10px 22px 30px rgba(0,0,0,.28));
}

/* Het lijnbeeld verhuist naar rechts en wordt iets rauwer */
.wpb_text_column.kr-copy-frame--wild > .wpb_wrapper::before {
  top: -15px;
  right: -3%;
  left: auto;
  width: min(390px,62%);
  height: 104px;
  opacity: .92;
  transform: rotate(1.8deg);
  background:
    linear-gradient(270deg, rgba(255,0,200,.74), rgba(255,0,200,.74))
      0 34px / 74px 2px no-repeat,
    linear-gradient(270deg, rgba(20,10,8,.96), rgba(20,10,8,.96))
      66px 29px / 132px 1px no-repeat,
    linear-gradient(270deg, rgba(213,167,91,.96), rgba(213,167,91,.96))
      190px 23px / 180px 1px no-repeat,
    linear-gradient(rgba(255,0,200,.56), rgba(255,0,200,.56))
      calc(100% - 88px) 30px / 1px 62px no-repeat,
    linear-gradient(
      42deg,
      transparent 25%,
      rgba(237,205,164,.13) 26% 43%,
      transparent 44% 54%,
      rgba(255,0,200,.08) 55% 72%,
      transparent 73%
    ) calc(100% - 196px) 0 / 118px 98px no-repeat;
}

/* Tegenaccent staat bij deze variant linksonder */
.wpb_text_column.kr-copy-frame--wild > .wpb_wrapper::after {
  right: auto;
  left: -2%;
  bottom: -12px;
  width: min(250px,45%);
  height: 78px;
  opacity: .80;
  transform: rotate(-2deg);
  background:
    linear-gradient(90deg, rgba(213,167,91,.86), rgba(213,167,91,.86))
      0 44px / 166px 1px no-repeat,
    linear-gradient(90deg, rgba(255,0,200,.62), rgba(255,0,200,.62))
      132px 51px / 64px 2px no-repeat,
    linear-gradient(
      136deg,
      transparent 30%,
      rgba(255,0,200,.10) 31% 55%,
      transparent 56%
    ) 18px 5px / 104px 66px no-repeat;
}

.wpb_text_column.kr-copy-frame--wild.kr-copy-frame--dropcap
p:first-child::first-letter {
  color: #d5a75b;
  text-shadow:
    2px 1px 0 rgba(255,0,200,.28),
    -1px 0 0 rgba(255,235,201,.12);
}

@media (max-width: 767px) {
  .wpb_text_column.kr-copy-frame--wild > .wpb_wrapper::before {
    right: -8%;
    left: auto;
    width: 80%;
    transform: scale(.76) rotate(1.8deg);
    transform-origin: right top;
  }

  .wpb_text_column.kr-copy-frame--wild > .wpb_wrapper::after {
    left: -7%;
    right: auto;
    width: 58%;
    transform: scale(.78) rotate(-2deg);
    transform-origin: left bottom;
  }
}