/* ePeper front styles */
.epeper-filters-inline {
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom:12px;
  flex-wrap: wrap;
}
.epeper-filters-inline .epeper-date-side,
.epeper-filters-inline .epeper-city-side {
  display:flex;
  align-items:center;
  gap:8px;
}

.epeper-filter-wrap, .epeper-date-filter { margin-bottom:12px; display:flex; gap:8px; align-items:center; } /* for separate shortcodes */
.epeper-gallery-grid { display:grid; grid-template-columns: 1fr; gap:24px; }
.epeper-item { background:transparent; }
.epeper-title { margin:0 0 6px 0; font-size:1.05rem; }
.epeper-date-display { font-size:0.9rem; color:#555; margin-bottom:6px; }

.epeper-wrap { display:grid; grid-template-columns: 25% 75%; gap: var(--epeper-gap, 10px); align-items:start; }
.epeper-thumbs { display:flex; flex-direction:column; gap:8px; max-height:420px; overflow-y:auto; padding-right:6px; }
.epeper-thumbs img { width:var(--epeper-thumb-w,150px); height:var(--epeper-thumb-h,150px); object-fit:cover; border-radius:var(--epeper-radius,8px); cursor:pointer; box-shadow:var(--epeper-thumb-shadow,0 4px 10px rgba(0,0,0,0.15)); transition:transform .15s; }
.epeper-thumbs img:hover { transform:scale(1.02); }
.epeper-thumbs img.is-active { outline:3px solid var(--epeper-btn-color,#e11d48); }

.epeper-main { position:relative; background:var(--epeper-bg,#fff); border-radius:var(--epeper-radius,8px); padding:10px; box-shadow:var(--epeper-main-shadow,0 8px 20px rgba(0,0,0,0.25)); }
.epeper-main img.epeper-main-img { max-width: var(--epeper-main-max-w, 100%); max-height: var(--epeper-main-max-h, 720px); width:100%; height:auto; display:block; border-radius:calc(var(--epeper-radius,8px) - 2px); background:#fff; image-rendering:auto; }
.epeper-main .epeper-tools { margin-top:8px; display:flex; gap:8px; }
.epeper-main .epeper-crop-btn { padding:8px 12px; border-radius:8px; border:1px solid #e5e7eb; cursor:pointer; background:#fafafa; }

.epeper-btn { display:inline-block; color:#fff; text-decoration:none; padding:10px 14px; border-radius:999px; font-weight:600; margin-top:10px; }
.epeper-arrow { position:absolute; top:50%; transform:translateY(-50%); background:transparent; border:none; font-size:28px; line-height:1; color:var(--epeper-btn-color,#e11d48); cursor:pointer; padding:6px; }
.epeper-prev { left:8px; }
.epeper-next { right:8px; }

.epeper-pagination { margin-top:16px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.epeper-page-link a, .epeper-page-link span { padding:6px 10px; text-decoration:none; border-radius:6px; border:1px solid #e5e7eb; }
.epeper-page-link .current { background:var(--epeper-btn-color,#e11d48); color:#fff; border-color:transparent; }

/* crop overlay */
.epeper-crop-overlay {
  position:absolute;
  inset:10px 10px 56px 10px; /* leave space for buttons under image */
  cursor:crosshair;
  display:none;
}
.epeper-crop-rect {
  position:absolute;
  border:2px dashed #111;
  background:rgba(0,0,0,.05);
}

@media (max-width:720px) {
  .epeper-wrap { grid-template-columns: 1fr; }
  .epeper-thumbs { flex-direction:row; overflow-x:auto; max-height:none; }
  .epeper-thumbs img { width:var(--epeper-thumb-w,120px); height:var(--epeper-thumb-h,120px); object-fit:cover; flex:0 0 auto; }
}