/* =====================================================================
   StraightResume — Universal Resume Scaler (WYSIWYG on every screen)
   ---------------------------------------------------------------------
   The resume always renders at true A4 width (794px) and is scaled to
   fit its container by resume-scale.js. So the preview, the gallery
   thumbnail and the downloaded PDF are the SAME page — identical on
   desktop, tablet and mobile, only the zoom differs.

   Loaded last so it cleanly overrides the older responsive rules that
   used to shrink fonts (and never actually matched the template markup).
===================================================================== */

/* ── PREVIEW PAGE FRAME ─────────────────────────────────────────── */
.preview-container {
  display: block !important;
  width: 100%;
  padding: 16px 0 !important;
  overflow: visible !important;   /* kill the old horizontal scrollbar */
}

.preview-paper {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 6px 28px rgba(0, 0, 0, .10);
  padding: 0 !important;          /* frame hugs the scaled page */
  margin: 0 auto;
  max-width: 794px !important;    /* never wider than one A4 page */
  width: 100%;
  min-height: 0 !important;
  overflow: hidden;
}
.preview-paper::before { display: none !important; }  /* old texture overlay */

/* ── THE SCALE MECHANISM ────────────────────────────────────────── */
.sr-scale-stage {
  position: relative;
  width: 100%;
  overflow: hidden;               /* clips the scaled document edges */
}
.sr-scale-doc {
  width: 794px;                   /* true A4 width @ 96dpi */
  transform-origin: top left;
  background: #fff;
  will-change: transform;
}

/* the injected template roots must fill the fixed A4 document width
   (they ship as width:100%, this just hard-locks them on screen) */
.sr-scale-doc > .ats-classic,
.sr-scale-doc > .ats-modern,
.sr-scale-doc > .ats-exec {
  width: 794px !important;
  max-width: 794px !important;
  min-height: 0;
  margin: 0 !important;
}

/* ── GALLERY THUMBNAILS (clipped mini-page) ─────────────────────── */
.template-preview {
  padding: 0 !important;
  overflow: hidden;
  position: relative;
  background: #fff !important;
  display: block !important;
}
.template-preview .sr-scale-stage {
  width: 100%;
  height: 100%;
}
/* soft fade at the bottom so the clip looks deliberate, not cut off */
.template-preview::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 56px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
  pointer-events: none;
  z-index: 2;
}
.template-badge { z-index: 3; }

/* ── SMALL-SCREEN NICETIES ──────────────────────────────────────── */
@media (max-width: 768px) {
  .preview-paper { max-width: 100% !important; }
  .preview-page  { padding: 14px !important; }
}
@media (max-width: 480px) {
  .preview-page  { padding: 8px !important; }
  .preview-paper { border-radius: 8px; }
}

/* ── GALLERY BADGE VARIANTS ─────────────────────────────────────── */
.template-badge-alt {
  background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
}
.template-badge-gold {
  background: linear-gradient(135deg, #b8860b, #d4af37) !important;
  color: #fff !important;
}