/*
  Ads + Rails layout (LEFT RAIL ONLY)
  ----------------------------------
  Goal:
  - Keep left rail beside the page content on desktop/laptop.
  - Never overlap the topnav or user menu.
  - On narrow screens, rail stacks above content and mobile-sticky slot handles monetization.
*/

/* Basic ad card */
.cf-ad{ margin-top:14px; padding:10px; border-radius:16px; background:rgba(255,255,255,.03); border:1px solid rgba(148,163,184,.12); }
.cf-ad--banner{ padding:10px; }
.cf-ad-img{ width:100%; height:auto; display:block; border-radius:12px; }
.cf-ad--click{ padding:10px 12px; }
.cf-ad-text{ display:block; font-size:13px; color:rgba(226,232,240,.9); text-decoration:none; }
.cf-ad-text:hover{ text-decoration:underline; }

/* Sticky mobile ad slot */
.cf-ad-sticky{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:9999;
  display:none;
  padding:8px;
  backdrop-filter:blur(10px);
  background:rgba(10,14,24,.65);
  border-top:1px solid rgba(148,163,184,.18);
}
@media (max-width: 820px){ .cf-ad-sticky{ display:block; } }


/* =========================================================
   Page grid: left rail + main
   (base.html renders .cf-page-shell > .cf-page-grid)
   ========================================================= */
:root{
  --cf-rail-col: 300px;          /* left rail column width */
  --cf-rail-inner: 300px;        /* creative width (ex: 300x250) */
  --cf-center-max: 1320px;       /* main max width */
  --cf-gap: 18px;
  --cf-rail-top: 96px;           /* below topnav */
}

/* Main wrapper already exists; ensure it doesn't clip */
.cf-page-shell{ overflow-x: clip; }

.cf-page-grid{
  width: 100%;
  display: grid;
  grid-template-columns: var(--cf-rail-col) minmax(0, var(--cf-center-max));
  gap: var(--cf-gap);
  justify-content: center;
  align-items: start;
  padding: 0 var(--cf-gap);
}

/* Left rail */
.cf-rail{
  width: var(--cf-rail-col);
  position: sticky;
  top: var(--cf-rail-top);
  z-index: 6; /* below dropdown (20000), above bg */
}

.cf-rail-inner{
  width: var(--cf-rail-inner);
  display: grid;
  gap: 12px;
}

/* Keep ad creatives contained */
.cf-rail-inner iframe{ max-width:100% !important; }
.cf-rail-inner img{ max-width:100% !important; height:auto; }


/* Responsive tuning */
@media (max-width: 1600px){
  :root{ --cf-center-max: 1120px; --cf-rail-col: 280px; }
}
@media (max-width: 1440px){
  :root{ --cf-center-max: 1040px; --cf-rail-col: 260px; }
  .cf-rail-inner{ transform: scale(.92); transform-origin: top left; }
}
@media (max-width: 1366px){
  :root{ --cf-center-max: 980px; --cf-rail-col: 240px; }
  .cf-rail-inner{ transform: scale(.88); transform-origin: top left; }
}

/* Narrow desktop/tablet: stack rail above content */
@media (max-width: 1100px){
  .cf-page-grid{ grid-template-columns: 1fr; max-width: 980px; }
  .cf-rail{ position: static; width: 100%; }
  .cf-rail-inner{ width: 100%; transform: none; }
}

/* Mobile: keep padding smaller */
@media (max-width: 640px){
  .cf-page-shell{ padding: 12px 12px 0; }
}


/* === PATCH: topnav safe-area for new page grid === */
:root{
  --cf-topnav-safe: calc(var(--ff-topnav-h) + 28px); /* header height + breathing room */
}
.cf-page-grid{
  padding-top: var(--cf-topnav-safe) !important;
}
.cf-rail-left, .cf-rail-right{
  top: var(--cf-topnav-safe) !important;
  height: calc(100vh - var(--cf-topnav-safe)) !important;
}



/* Sticky ad click fix (mobile) */
@media (max-width: 820px){
  .cf-ad-sticky{ backdrop-filter:none; background:rgba(10,14,24,.88); }
  .cf-ad-sticky, .cf-ad-sticky *{ pointer-events:auto !important; }
}
/* Rail ad click fix */
@media (max-width: 1100px){
  #cfLeftRail, #cfLeftRail *{ pointer-events:auto !important; }
}