/* YARPP Dynamic Related Cards v1.8 */
.ydrc-related-wrapper{margin:1.5rem 0;width:100%;opacity:0;transform:translateY(20px);transition:opacity .4s ease-out,transform .4s ease-out;}
.ydrc-related-wrapper.ydrc-visible{opacity:1;transform:none;}
.ydrc-heading{font-size:1.1rem;font-weight:700;margin:0 0 .5rem 0;color:#222;background:#fcf397;border-radius:3px;padding:4px 6px;}
.ydrc-related-list{list-style:none;margin:0;padding-left:0!important;display:flex;flex-direction:column;gap:6px;}
.ydrc-related-item{background:#fff;border:1px solid #f3e7be;border-radius:10px;overflow:hidden;opacity:0;transform:translateY(10px);}
.ydrc-related-wrapper.ydrc-visible .ydrc-related-item{animation:ydrc-itemIn .45s forwards;animation-delay:calc(var(--i)*0.1s);}
@keyframes ydrc-itemIn{to{opacity:1;transform:none;}}
.ydrc-related-link{display:flex;align-items:center;gap:10px;padding:6px 10px;text-decoration:none;}
.ydrc-related-link:hover,.ydrc-related-link:focus{background:#f7f7f7;}
/* Default tall style */
.ydrc-related-link img{flex:0 0 60px;width:60px;height:80px;object-fit:cover;border-radius:6px;display:block;}
/* Square style override */
.ydrc-style-square .ydrc-related-link img{height:60px;}
/* Wide style override */
.ydrc-style-wide .ydrc-related-link img{flex:0 0 90px;width:90px;height:60px;}
.ydrc-related-title{flex:1;font-size:.95rem;font-weight:600;color:#000;line-height:1.35;}
.ydrc-arrow{flex:0 0 28px;color:#e4572e;}
.ydrc-arrow svg{width:28px;height:28px;vertical-align:middle;}
/* pulse animation */
.ydrc-arrow.ydrc-pulse svg{animation:ydrc-pulse .6s ease-out 0s 2;}
@keyframes ydrc-pulse{0%{transform:scale(1);}50%{transform:scale(1.3);}100%{transform:scale(1);}}
@media(min-width:768px){.ydrc-related-title{font-size:1.05rem;}}

/* === Auto-Advance to Next Post (v2.1.0) === */
.ydrc-aa-wrap{width:100%;}
.ydrc-aa-sentinel{width:100%;height:1px;}
.ydrc-aa-card{margin:1.5rem auto;max-width:var(--ydrc-aa-maxw,700px);border:1px solid #f3e7be;border-radius:10px;background:#fff;overflow:hidden;opacity:0;transform:translateY(12px);transition:opacity .4s ease-out,transform .4s ease-out;}
.ydrc-aa-card.ydrc-aa-visible{opacity:1;transform:none;}
.ydrc-aa-label{display:block;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#222;background:#fcf397;padding:4px 10px;}
.ydrc-aa-link{display:flex;align-items:center;gap:12px;padding:10px;text-decoration:none;}
.ydrc-aa-link:hover,.ydrc-aa-link:focus{background:#f7f7f7;}
.ydrc-aa-link img{flex:0 0 80px;width:80px;height:80px;object-fit:cover;border-radius:6px;display:block;}
.ydrc-aa-title{flex:1;font-size:1.05rem;font-weight:600;color:#000;line-height:1.35;}
.ydrc-aa-countdown{padding:6px 10px;font-size:.85rem;color:#e4572e;cursor:pointer;}
.ydrc-aa-grid{margin:1.5rem auto;max-width:var(--ydrc-aa-maxw,700px);}
.ydrc-aa-grid-heading{font-size:1.1rem;font-weight:700;margin:0 0 .5rem 0;color:#222;background:#fcf397;border-radius:3px;padding:4px 6px;}
.ydrc-aa-grid-list{list-style:none;margin:0;padding-left:0!important;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;}
.ydrc-aa-grid-item a{display:flex;flex-direction:column;text-decoration:none;border:1px solid #f3e7be;border-radius:10px;overflow:hidden;}
.ydrc-aa-grid-item img{width:100%;height:120px;object-fit:cover;display:block;}
.ydrc-aa-grid-item span{padding:6px 8px;font-size:.9rem;font-weight:600;color:#000;}
/* Respect reduced motion: keep the feature, drop the reveal animation (v2.1.2) */
@media(prefers-reduced-motion:reduce){
  .ydrc-aa-card{opacity:1;transform:none;transition:none;}
}

/* === Exit-Intent Overlay (v2.2.0) === */
.ydrc-eo-overlay{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity .25s ease;}
.ydrc-eo-overlay[hidden]{display:none;}
.ydrc-eo-overlay.ydrc-eo-open{opacity:1;}
.ydrc-eo-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.62);cursor:pointer;}
.ydrc-eo-panel{position:relative;background:#fff;border-radius:16px;max-width:720px;width:92%;max-height:90vh;overflow:auto;padding:26px 26px 22px;box-shadow:0 24px 64px rgba(0,0,0,.32);transform:translateY(14px) scale(.98);transition:transform .25s ease;}
.ydrc-eo-open .ydrc-eo-panel{transform:none;}
.ydrc-eo-close{position:absolute;top:10px;right:10px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:rgba(0,0,0,.06);color:#333;font-size:22px;line-height:1;cursor:pointer;padding:0;z-index:2;transition:background .15s ease;}
.ydrc-eo-close:hover{background:rgba(0,0,0,.14);color:#000;}
.ydrc-eo-close:focus{outline:none;}
.ydrc-eo-close:focus-visible{outline:2px solid #555;outline-offset:2px;}
.ydrc-eo-title{margin:0 0 16px;font-size:1.45rem;font-weight:800;line-height:1.25;text-align:center;color:#1a1a1a;padding:0 48px;}
.ydrc-eo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
/* Reuse the existing related-card classes, restyled into large vertical image cards */
.ydrc-eo-grid .ydrc-related-item{opacity:1;transform:none;background:#fff;border:1px solid #eee;border-radius:12px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.06);transition:transform .15s ease,box-shadow .15s ease;}
.ydrc-eo-grid .ydrc-related-item:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.14);}
.ydrc-eo-grid .ydrc-related-link{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;text-decoration:none;}
/* Image aspect ratio follows the chosen overlay ratio (class on .ydrc-eo-overlay) */
.ydrc-eo-grid .ydrc-related-link img{flex:none;width:100%;height:auto;object-fit:cover;border-radius:0;display:block;}
.ydrc-eo-r-tall   .ydrc-related-link img{aspect-ratio:3/4;}
.ydrc-eo-r-square .ydrc-related-link img{aspect-ratio:1/1;}
.ydrc-eo-r-wide   .ydrc-related-link img{aspect-ratio:3/2;}
@supports not (aspect-ratio: 1 / 1){.ydrc-eo-grid .ydrc-related-link img{height:170px;}}
/* Desktop fit is handled in JS (fitDesktop): it measures the real chrome height and sizes
   the cards so the 2x2 grid fits the viewport with NO scroll while preserving the TRUE
   aspect ratio. JS sets grid-template-columns + justify-content on desktop; mobile keeps
   the full-width 2-col layout below, untouched. */
.ydrc-eo-grid .ydrc-related-title{flex:none;padding:10px 12px 12px;font-size:1rem;font-weight:600;line-height:1.3;color:#111;}
/* Clamp titles to 2 lines on DESKTOP only (keeps the fixed-fit math predictable). Mobile
   shows full titles, wrapping naturally — its layout is intentionally left untouched. */
@media(min-width:601px){
  .ydrc-eo-grid .ydrc-related-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
}
@media(max-width:600px){
  .ydrc-eo-panel{padding:22px 14px 16px;width:95%;}
  .ydrc-eo-title{font-size:1.15rem;margin-bottom:14px;padding:0 40px;}
  .ydrc-eo-close{top:8px;right:8px;width:34px;height:34px;font-size:20px;}
  .ydrc-eo-grid{gap:10px;}
  @supports not (aspect-ratio: 1 / 1){.ydrc-eo-grid .ydrc-related-link img{height:120px;}}
  .ydrc-eo-grid .ydrc-related-title{font-size:.9rem;padding:8px 10px 10px;}
}
@media(prefers-reduced-motion:reduce){
  .ydrc-eo-overlay,.ydrc-eo-panel{transition:none;}
  .ydrc-eo-panel{transform:none;}
}