/*
 * The "revelação" — the mounted print.
 *
 * The one component the brand is remembered by, and the most reused element in
 * the app: the guest feed, the cover, "suas fotos", the organizer's grid, the
 * QR card, the empty album page. Every photo is a print resting on the page —
 * never a flat tile.
 *
 * Anatomy:
 *
 *   figure.print
 *     div.print__well         the photographic paper's window
 *       img.print__photo
 *       span.print__badge     optional marker (pending, yours, …)
 *     div.print__foot         the bottom margin, taller than the sides
 *       figcaption.print__caption   the name, in Fraunces italic — the handwriting
 *       div.print__actions          the slot for whatever this screen can do
 *
 * Everything is driven by custom properties so a caller changes size, shape or
 * tilt without a second copy of the component existing anywhere.
 */

.print {
  --print-tilt: 0deg;

  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--print);
  padding: var(--print-margin);

  /* A crisp 1px edge so the white paper reads against the cream page. */
  border: 1px solid var(--ink-edge);
  border-radius: var(--radius-print);
  box-shadow: var(--shadow-print);

  rotate: var(--print-tilt);
  transition:
    box-shadow var(--duration) var(--ease),
    translate var(--duration) var(--ease),
    rotate var(--duration-slow) var(--ease);
}

/* Without a caption the foot would vanish, and a print with even margins all
   round stops looking like a mounted photograph. Keep the bottom heavier. */
.print--bare {
  padding-bottom: calc(var(--print-margin) * 2.2);
}

/* ---- The window -------------------------------------------------------- */

.print__well {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-photo);

  /* Warm placeholder while the photo loads, so the print never flashes white
     against the paper. */
  background-color: var(--paper-shade);

  /* Unset by default: the print takes the photo's own proportions, which is
     what gives the feed its varied heights. Callers pass e.g. "4 / 5". */
  aspect-ratio: var(--print-aspect, auto);
}

.print__photo {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* The link wraps the photo only — actions in the foot stay independently
   clickable, and the caption stays a label rather than part of the target. */
.print__link {
  display: block;
  text-decoration: none;
  border-radius: var(--radius-photo);
}

.print__link:focus-visible {
  outline-offset: 2px;
}

/* ---- The bottom margin ------------------------------------------------- */

.print__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding-block: var(--print-foot) var(--space-1);
  padding-inline: var(--space-1);
  min-inline-size: 0;
}

.print__caption {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-caption);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  color: var(--soft-ink);
  text-align: center;
  min-inline-size: 0;
  overflow-wrap: break-word;
}

.print__actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: none;
}

/* With actions the foot becomes a line written across the margin: the name on
   the left the way you'd sign it, the action on the right. */
.print__foot--with-actions {
  justify-content: space-between;
  padding-inline: var(--space-2);
}

.print__foot--with-actions .print__caption {
  text-align: start;
}

/* An action sitting on the print's own margin: quiet until touched. */
.print__action {
  display: inline-grid;
  place-items: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border-radius: var(--radius-chip);
  color: var(--soft-ink);
  transition:
    color var(--duration) var(--ease),
    background-color var(--duration) var(--ease);
}

.print__action:hover {
  color: var(--ink);
  background: var(--ink-wash);
}

.print__action svg {
  inline-size: 1.0625rem;
  block-size: 1.0625rem;
}

/* ---- A marker on the photo itself -------------------------------------- *
 * For the states that are coming: awaiting approval, this one is yours.      */

.print__badge {
  position: absolute;
  inset-block-start: var(--space-2);
  inset-inline-end: var(--space-2);
  padding: 0.2rem var(--space-2);
  background: color-mix(in srgb, var(--print) 92%, transparent);
  border-radius: var(--radius-chip);
  box-shadow: var(--shadow-surface);
  font-family: var(--font-ui);
  font-size: var(--text-fine);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--soft-ink);
}

.print__badge--gold {
  color: var(--gold);
}

/* ---- Sizes ------------------------------------------------------------- *
 * The margin scales with the print, but it never disappears — on mobile it
 * gets narrower, never absent.                                              */

.print--sm {
  --print-margin: 5px;
  --print-foot: var(--space-2);
  --radius-print: 5px;
}

.print--sm .print__caption {
  font-size: var(--text-fine);
}

/* .print--md is the default and needs no declarations. */

.print--lg {
  --print-margin: 10px;
  --print-foot: var(--space-5);
  --radius-print: 7px;
}

.print--lg .print__caption {
  font-size: var(--text-body-lg);
}

@media (max-width: 30rem) {
  .print--lg {
    --print-margin: 8px;
    --print-foot: var(--space-4);
  }
}

/* ---- Behaviour --------------------------------------------------------- *
 * A print you can open lifts very slightly off the page. If it was placed at
 * an angle it straightens as you reach for it.                               */

.print--interactive:hover,
.print--interactive:focus-within {
  box-shadow: var(--shadow-print-lift);
  translate: 0 -2px;
  rotate: 0deg;
}

/* ---- The blank album page ---------------------------------------------- *
 * "Ainda não tem fotos aqui." An empty mount rather than an error state.     */

.print--empty {
  background: color-mix(in srgb, var(--print) 60%, transparent);
  box-shadow: none;
}

.print--empty .print__well {
  display: grid;
  place-items: center;
  min-block-size: 12rem;
  background: transparent;
  border: 1px dashed var(--rule);
  color: var(--soft-ink);
}

/* ---- A deliberate angle ------------------------------------------------ *
 * The brief rules out tilted, scattered photos, so nothing tilts by default.
 * This exists for the single, intentional object — the QR card on the table,
 * a decorative stack on the landing page — and is opt-in per print.          */

.print--tilt-left  { --print-tilt: -1.25deg; }
.print--tilt-right { --print-tilt: 1.25deg; }

/* A small stack of prints, as on the login and landing screens. */
.print-stack {
  position: relative;
  display: grid;
}

.print-stack > * {
  grid-area: 1 / 1;
}