/* ==========================================================================
   Enforso — /print page extras.

   Two pieces the shared system does not carry: the moving sheet of real
   codes, and the list of downloadable sheet variants.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Moving sheet — a printed page seen at an angle, drifting past the camera.
   The track holds the same grid twice and travels exactly half its height, so
   the loop has no seam.
   -------------------------------------------------------------------------- */

.sticker-flow {
  position: relative;
  height: 340px;
  margin: 28px 0 32px;
  overflow: hidden;
  border-radius: var(--enf-r20);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(52,211,153,0.12), transparent 65%),
    var(--enf-bg);
  border: 1px solid var(--enf-stroke);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 82%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 14%, #000 82%, transparent);
}

/* Edge to edge: the sheet reads as a surface the page is sitting on, not as
   an illustration boxed inside the column. */
.sticker-flow--bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  height: 400px;
}

.sticker-flow__plane {
  position: absolute;
  inset: -34% -12%;
  display: flex;
  justify-content: center;
  transform: rotate(-11deg);
}

/* Scaled past the viewport so the sheet always runs off both edges, whatever
   the screen width. */
.sticker-flow--bleed .sticker-flow__plane { transform: rotate(-11deg) scale(1.4); }

.sticker-flow__track {
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: enfSheetDrift 38s linear infinite;
  will-change: transform;
}

@keyframes enfSheetDrift {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

.sticker-flow__grid {
  display: grid;
  grid-template-columns: repeat(4, 112px);
  gap: 18px;
}
.sticker-flow--bleed .sticker-flow__grid { grid-template-columns: repeat(10, 118px); }

.sticker-flow__sticker {
  background: #fff;
  border: 1px dashed var(--enf-stroke-2);
  border-radius: 10px;
  padding: 8px;
  box-shadow: 0 6px 16px rgba(15,20,30,0.06);
}
.sticker-flow__sticker img { width: 100%; height: auto; display: block; }

.sticker-flow__cap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 5px;
}
.sticker-flow__cap img { width: 14px; height: 14px; }
.sticker-flow__cap span {
  font-size: 11px;
  font-weight: var(--enf-w-bold);
  letter-spacing: -0.01em;
}

@media (prefers-reduced-motion: reduce) {
  .sticker-flow__track { animation: none; }
}

@media (max-width: 720px) {
  .sticker-flow, .sticker-flow--bleed { height: 260px; }
  .sticker-flow__grid { grid-template-columns: repeat(3, 100px); gap: 14px; }
  /* On a phone the sheet has to read as a sheet, not as three giant codes. */
  .sticker-flow--bleed .sticker-flow__grid { grid-template-columns: repeat(5, 74px); gap: 12px; }
  .sticker-flow--bleed .sticker-flow__plane { transform: rotate(-11deg) scale(1.15); }
  .sticker-flow__cap span { font-size: 9px; }
  .sticker-flow__cap img { width: 11px; height: 11px; }
}

/* --------------------------------------------------------------------------
   Sheet variants
   -------------------------------------------------------------------------- */

.sheet-list { display: flex; flex-direction: column; gap: 10px; }

.sheet-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 20px;
  padding: 16px 18px;
}
.sheet-card__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.sheet-card__count { font-size: var(--enf-callout); font-weight: var(--enf-w-semibold); }

@media (max-width: 620px) {
  .sheet-card { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
  .sheet-card__meta { align-items: flex-end; }
  .sheet-card .enf-btn { grid-column: 1 / -1; width: 100%; }
}