/* ------------------------------------------------------------------
   Miro projects page — back link and a list of email rows.
   The rows reuse the homepage promo card (.promos / .promo) from
   home.css; this file only adds the page header and the sketched
   image wells used until real email screenshots are ready.
------------------------------------------------------------------- */

.hub {
  max-width: 820px;
  margin: 72px auto 0;
}

/* ---------- header ---------- */

.hub__back {
  display: inline-block;
  margin-bottom: 56px;
  font-family: var(--inter);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-faint);
  text-decoration: none;
}

.hub__back:hover { color: var(--ink-soft); }

/* ---------- sketched image well ----------
   Same 411 x 311 box as the homepage thumbnails. Swap the .sketch for
   an <img> of each email when screenshots are ready. */

.promo-media--sketch {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  aspect-ratio: 411 / 311;
  padding-top: 40px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--card-bg);
}

.sketch {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 64%;
  /* 4px taller than the well and tucked under its bottom edge, so the
     hover lift doesn't open a gap. */
  height: calc(100% + 4px);
  margin-bottom: -4px;
  padding: 22px;
  border-radius: 12px 12px 0 0;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease;
}

.promo-media--sketch:hover .sketch { transform: translateY(-4px); }

.sketch span {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: #e6e6e6;
}

.sketch span:nth-child(1) { width: 30%; height: 10px; background: var(--card-accent); }
.sketch span:nth-child(2) { width: 88%; height: 12px; background: #2a2a2a; }
.sketch span:nth-child(4) { width: 78%; }
.sketch span:nth-child(5) { height: 48px; background: #f1f1f1; }
.sketch span:nth-child(6) { width: 44%; height: 24px; background: var(--card-accent); }

.hub__disclaimer {
  margin: 80px 0 0;
  font-size: 13px;
  color: var(--ink-faint);
}

/* ---------- breakpoints ---------- */

@media (max-width: 680px) {
  .hub { margin-top: 40px; }
  .hub__back { margin-bottom: 40px; }
  .hub__disclaimer { margin-top: 56px; }
}

/* Real email crop in place of the sketch. */
.promo-media--sketch img.sketch--img {
  display: block;
  width: 64%;
  height: calc(100% + 4px);
  aspect-ratio: auto;
  padding: 0;
  border-radius: 12px 12px 0 0;
  background: #ffffff;
  object-fit: cover;
  object-position: top;
}

/* Live HTML email in place of the sketch; the inline script on the
   page scales the iframe down to the well's width. */
.sketch--email {
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  /* No rubber-band bounce; the email's own grey shows at any edge. */
  overscroll-behavior: none;
  background: #f3f4f8;
  scrollbar-width: none;
}

.sketch--email::-webkit-scrollbar { display: none; }

.sketch__sizer {
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
}

.sketch--email iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 680px;
  height: 1400px;
  border: 0;
  transform-origin: 0 0;
  pointer-events: none;
}

/* Full-length screenshot in place of a live email; the well scrolls it. */
.promo-media .sketch__shot {
  display: block;
  flex-shrink: 0;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  border-radius: 0;
  background: none;
}