/* ============================================================================
   RELATED POSTS — IN-CONTENT BOXES  ·  Plugin stylesheet
   ----------------------------------------------------------------------------
   4 design options, all namespaced under .rpb so nothing collides with a theme.
   Each box is a single <a> element. Pick a variant by adding a modifier class:
       .rpb--classic   Refined Classic   (cream card, red link)
       .rpb--band      Warm Editorial Band
       .rpb--cta       Bold Terracotta CTA
       .rpb--note      Further Reading note (hairline rules)

   THEME IT: override the custom properties on .rpb (or a wrapper) to recolour.
   FONTS:    body text inherits the theme font. The serif variants (band, note)
             fall back to Georgia; load a webfont and set --rpb-serif to match.

   EXTRA OVERRIDE CLASSES:
      Classic: .rpb-classic, .rpb-classic__eyebrow, .rpb-classic__row,
               .rpb-classic__title, .rpb-classic__arrow,
               .rpb-classic__border, .rpb-classic__accent-bar
      Band:    .rpb-band, .rpb-band__eyebrow, .rpb-band__title,
               .rpb-band__cta, .rpb-band__arrow,
               .rpb-band__quote, .rpb-band__eyebrow-line
      CTA:     .rpb-cta, .rpb-cta__eyebrow, .rpb-cta__title,
               .rpb-cta__button, .rpb-cta__arrow, .rpb-cta__texture
      Note:    .rpb-note, .rpb-note__eyebrow, .rpb-note__title,
               .rpb-note__arrow, .rpb-note__border, .rpb-note__eyebrow-line

   PSEUDO-ELEMENT TARGETS:
      .rpb-classic__accent-bar              left accent bar
      .rpb-band__quote::before              decorative quote mark
      .rpb-band__eyebrow-line::before       eyebrow line
      .rpb-cta__texture                     dot texture
      .rpb-note__eyebrow-line::before,
      .rpb-note__eyebrow-line::after        eyebrow side lines
   ============================================================================ */

.rpb{
  /* ---- theming tokens (override these) ---- */
  --rpb-accent:      #C0392B;
  --rpb-accent-deep: #9C2B20;
  --rpb-accent-soft: #E9B7AF;
  --rpb-accent-tint: #FBEDE9;
  --rpb-ink:         #29241F;
  --rpb-cream:       #FBF6EF;
  --rpb-line:        #E6DCCE;
  --rpb-line-2:      #D8CCBA;
  --rpb-serif:       Georgia, "Times New Roman", serif;
  --rpb-eyebrow-font-family: inherit;
  --rpb-eyebrow-font-size: 11px;
  --rpb-eyebrow-font-size-mobile: var(--rpb-eyebrow-font-size);
  --rpb-eyebrow-font-weight: 700;
  --rpb-eyebrow-font-style: normal;
  --rpb-eyebrow-transform: uppercase;
  --rpb-title-font-family: inherit;
  --rpb-title-font-size: 22px;
  --rpb-title-font-size-mobile: var(--rpb-title-font-size);
  --rpb-title-font-weight: 700;
  --rpb-title-font-style: normal;

  /* ---- base ---- */
  display:block; box-sizing:border-box;
  margin:1.8em 0;
  opacity:var(--rpb-box-opacity, 1);
  text-decoration:none;
  font-family:inherit; -webkit-font-smoothing:antialiased;
}
.rpb *{ box-sizing:border-box; }
.rpb:focus-visible{ outline:2px solid var(--rpb-accent); outline-offset:3px; }
.rpb__eyebrow{
  font-family:var(--rpb-eyebrow-font-family);
  font-size:var(--rpb-eyebrow-font-size);
  font-weight:var(--rpb-eyebrow-font-weight);
  font-style:var(--rpb-eyebrow-font-style);
  text-transform:var(--rpb-eyebrow-transform);
}
.rpb__title{
  font-family:var(--rpb-title-font-family);
  font-size:var(--rpb-title-font-size);
  font-weight:var(--rpb-title-font-weight);
  font-style:var(--rpb-title-font-style);
}

/* Arrow — drawn in CSS so the plugin only has to output an empty span.
   Markup:  <span class="rpb__arrow" aria-hidden="true"></span>            */
.rpb__arrow{
  display:inline-block; width:1.05em; height:1.05em; flex:0 0 auto;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}

/* ===========================================================================
   1 · REFINED CLASSIC
   <a class="rpb rpb--classic" href="URL">
     <span class="rpb__eyebrow">Keep reading</span>
     <span class="rpb__row">
       <span class="rpb__title">TITLE</span>
       <span class="rpb__arrow" aria-hidden="true"></span>
     </span>
   </a>
   =========================================================================== */
.rpb-classic{
  position:relative; overflow:hidden;
  background:var(--rpb-cream); border:1px solid var(--rpb-line);
  border-radius:12px; padding:20px 24px 20px 26px;
  transition:box-shadow .25s, transform .25s, border-color .25s;
}
.rpb-classic__border{ border-color:currentColor; }
.rpb-classic__accent-bar{
  position:absolute; left:0; top:0; bottom:0; width:5px;
  color:var(--rpb-accent-deep); background:currentColor; pointer-events:none;
}
.rpb-classic__eyebrow{
  display:block; margin-bottom:6px;
  letter-spacing:.16em;
  color:var(--rpb-accent);
}
.rpb-classic__row{ display:flex; align-items:center; gap:9px; }
.rpb-classic__title{
  line-height:1.32; letter-spacing:-.01em;
  color:var(--rpb-ink);
  background-image:linear-gradient(var(--rpb-accent-deep), var(--rpb-accent-deep));
  background-size:100% 1.5px; background-repeat:no-repeat; background-position:0 100%;
  padding-bottom:2px;
  transition:background-size .35s cubic-bezier(.2,.7,.3,1);
}
.rpb-classic__arrow{ color:var(--rpb-accent-deep); }
.rpb-classic:hover{
  box-shadow:0 6px 18px -8px rgba(41,36,31,.22); transform:translateY(-2px);
  border-color:var(--rpb-line-2);
}
.rpb-classic:hover .rpb-classic__title{ background-size:100% 2.5px; }
.rpb-classic:hover .rpb-classic__arrow{ transform:translateX(4px); }

/* ===========================================================================
   2 · WARM EDITORIAL BAND
   <a class="rpb rpb--band" href="URL">
     <span class="rpb__eyebrow">Keep reading</span>
     <span class="rpb__title">TITLE</span>
     <span class="rpb__cta"><span class="rpb__arrow" aria-hidden="true"></span></span>
   </a>
   =========================================================================== */
.rpb-band{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, var(--rpb-accent-tint) 0%, var(--rpb-cream) 100%);
  border:0; border-radius:18px; padding:30px 34px;
  transition:box-shadow .3s, transform .3s;
}
.rpb-band__quote{
  position:absolute; right:18px; top:-18px;
  color:#E7C2AC; opacity:.5; pointer-events:none;
}
.rpb-band__quote::before{
  content:"\201D"; font-family:var(--rpb-serif); font-size:160px; line-height:1;
  color:currentColor;
}
.rpb-band__eyebrow{
  display:flex; align-items:center; gap:9px; margin-bottom:12px;
  letter-spacing:.18em;
  color:var(--rpb-accent);
}
.rpb-band__eyebrow-line{ color:var(--rpb-accent); }
.rpb-band__eyebrow-line::before{ content:""; width:22px; height:2px; background:currentColor; }
.rpb-band__title{
  display:block; position:relative; z-index:1; max-width:24ch;
  line-height:1.2; letter-spacing:-.01em; color:var(--rpb-ink);
}
.rpb-band__cta{
  display:flex; width:fit-content; align-items:center; gap:9px; margin-top:16px;
  font-size:14px; font-weight:700; color:var(--rpb-accent-deep);
}
.rpb-band__cta::before{ content:"Read the full post"; }
.rpb-band:hover{ box-shadow:0 6px 18px -8px rgba(41,36,31,.22); transform:translateY(-2px); }
.rpb-band:hover .rpb-band__arrow{ transform:translateX(5px); }

/* ===========================================================================
   3 · BOLD TERRACOTTA CTA
   <a class="rpb rpb--cta" href="URL">
     <span class="rpb__eyebrow">Don't miss</span>
     <span class="rpb__title">TITLE</span>
     <span class="rpb__btn"><span class="rpb__arrow" aria-hidden="true"></span></span>
   </a>
   =========================================================================== */
.rpb-cta{
  position:relative; overflow:hidden; color:#fff;
  border-radius:18px; padding:28px 30px;
  background:
    radial-gradient(120% 130% at 90% -20%, rgba(255,255,255,.18) 0%, transparent 55%),
    linear-gradient(155deg, var(--rpb-accent) 0%, var(--rpb-accent-deep) 100%);
  box-shadow:0 6px 18px -8px rgba(41,36,31,.22);
  transition:box-shadow .3s, transform .3s;
}
.rpb-cta__texture{                       /* subtle dot texture */
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  color:rgba(255,255,255,.10);
  background-image:radial-gradient(circle at 1px 1px, currentColor 1px, transparent 0);
  background-size:14px 14px;
}
.rpb-cta__eyebrow{
  display:block; position:relative; margin-bottom:9px;
  letter-spacing:.18em;
  color:var(--rpb-cta-eyebrow-color, #F6CFC6);
}
.rpb-cta__title{
  display:block; position:relative; max-width:22ch; margin-bottom:18px;
  line-height:1.24; letter-spacing:-.01em; color:var(--rpb-ink);
}
.rpb-cta__button{
  position:relative; display:inline-flex; align-items:center; gap:9px;
  background:#fff; color:var(--rpb-accent-deep);
  font-size:14px; font-weight:700; padding:11px 18px; border-radius:999px;
  transition:transform .25s, box-shadow .25s;
}
.rpb-cta__button::before{ content:"Read the full post"; }
.rpb-cta:hover{ transform:translateY(-3px); box-shadow:0 22px 48px -22px rgba(41,36,31,.4); }
.rpb-cta:hover .rpb-cta__button{ box-shadow:0 6px 16px rgba(0,0,0,.18); }
.rpb-cta:hover .rpb-cta__arrow{ transform:translateX(4px); }

/* ===========================================================================
   4 · FURTHER READING NOTE
   <a class="rpb rpb--note" href="URL">
     <span class="rpb__eyebrow">Further reading</span>
     <span class="rpb__title">TITLE <span class="rpb__arrow" aria-hidden="true"></span></span>
   </a>
   =========================================================================== */
.rpb-note{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:9px;
  padding:24px 22px; background:transparent;
  border-top:1px solid var(--rpb-line-2); border-bottom:1px solid var(--rpb-line-2);
  transition:background .25s;
}
.rpb-note__border{ border-color:currentColor; }
.rpb-note__eyebrow-line{ color:var(--rpb-accent-soft); }
.rpb-note__eyebrow{
  display:inline-block;
  letter-spacing:.2em;
  color:var(--rpb-accent);
  padding-left:39px; padding-right:39px;
  background:
    linear-gradient(currentColor, currentColor) left center/26px 1px no-repeat,
    linear-gradient(currentColor, currentColor) right center/26px 1px no-repeat;
}
.rpb-note__title{
  display:block; max-width:30ch; text-wrap:balance;
  line-height:1.22; letter-spacing:-.01em;
  color:var(--rpb-ink);
  background-image:linear-gradient(var(--rpb-accent), var(--rpb-accent));
  background-size:0% 1.5px; background-repeat:no-repeat; background-position:50% 100%;
  padding-bottom:3px;
  transition:background-size .4s cubic-bezier(.2,.7,.3,1), color .25s;
}
.rpb-note__arrow{ color:var(--rpb-accent); margin-left:9px; vertical-align:-0.14em; }
.rpb-note:hover{ background:var(--rpb-accent-tint); }
.rpb-note:hover .rpb-note__title{ background-size:100% 1.5px; }
.rpb-note:hover .rpb-note__arrow{ transform:translateX(4px); }

/* ===========================================================================
   Responsive + accessibility
   =========================================================================== */
@media (max-width:600px){
  .rpb-classic{ padding:18px 20px; }
  .rpb-classic__arrow{ display:none; }   /* arrow hidden on mobile (Option 1) */
  .rpb-band{ padding:24px 22px; }
  .rpb-band__quote{ top:-12px; }
  .rpb-band__quote::before{ font-size:120px; }
  .rpb-cta{ padding:24px 22px; }
  .rpb__eyebrow{ font-size:var(--rpb-eyebrow-font-size-mobile); }
  .rpb__title{ font-size:var(--rpb-title-font-size-mobile); }
}
@media (prefers-reduced-motion: reduce){
  .rpb, .rpb *{ transition:none !important; }
}