/*
  Postal Grátis — page styles (SD-031)

  Business Context: layout for the free client-side postcard generator. Reuses
  the shared tokens + base input/button styles from main.css; this file only
  adds the generator-specific composition (hero, live canvas, action row, paid
  CTA) and the print rules that isolate the card for "Imprimir".

  100% presentational — no behaviour. @see apps/web/postal-gratis/index.html
*/

.postal-main {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-5) var(--space-16);
}

.postal-hero {
  text-align: center;
  margin-bottom: var(--space-8);
}

.postal-title {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-xl);
  line-height: var(--leading-snug, 1.15);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-top: var(--space-4);
}

.postal-subtitle {
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--ink-soft);
  margin-top: var(--space-3);
  text-wrap: balance;
}

/* Live card ---------------------------------------------------------------- */

/* container-type lets the inline message field size itself in `cqw` (1cqw = 1%
   of the card width = 14.8 canvas px), so the overlaid handwriting tracks the
   canvas geometry exactly at every screen size. */
.postal-canvas-frame {
  position: relative;
  container-type: inline-size;
  margin: var(--space-6) 0 var(--space-8);
}

#postal-canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 148 / 105;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  background-color: var(--paper-soft);
}

/* Inline message — written directly on the postcard --------------------------
   A transparent textarea laid over the card's ruled correspondence lines (right
   half). Geometry mirrors drawPostcard(): text column mx→mR (57.5%→94.2% width),
   first rule ~49% height, 92px line pitch. The canvas draws no message on screen;
   this field IS the visible handwriting until export bakes it into the pixels. */
.postal-inline-msg {
  position: absolute;
  left: 57.5cqw;
  width: 36.7cqw;
  top: 31cqw;
  height: 26cqw;
  min-height: 0; /* override the base textarea's 92px floor */
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  caret-color: var(--accent);
  font-family: var(--font-handwritten);
  font-size: 4.6cqw;
  line-height: 6.22cqw;
  resize: none;
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
}
.postal-inline-msg::placeholder {
  color: var(--ink-mute);
  opacity: 0.7;
  font-style: normal;
}
/* Focus reads as "writing on the card", not a form field: a faint tint over the
   correspondence area plus a soft accent ring for keyboard users. */
.postal-inline-msg:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.32);
  border-radius: 6px;
  box-shadow: 0 0 0 1.5px rgba(126, 46, 46, 0.22);
}
.postal-inline-msg:focus-visible {
  box-shadow: 0 0 0 2px rgba(126, 46, 46, 0.4);
}

/* Character counter tucked into the card's lower-right, below the ruled lines. */
.postal-counter {
  position: absolute;
  right: 6cqw;
  bottom: 9.5%;
  font-family: var(--font-mono);
  font-size: 2.2cqw;
  letter-spacing: 0.03em;
  color: var(--ink-mute);
  pointer-events: none;
}

/* Action row --------------------------------------------------------------- */

.postal-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

/* Per-network link sharing — secondary to the image-first "Partilhar" above. */
.postal-share-links {
  text-align: center;
  margin-bottom: var(--space-10);
}
.postal-share-links__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  margin-bottom: var(--space-3);
}
.postal-share-links__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}
.postal-share-link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: var(--space-2) var(--space-4);
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  cursor: pointer;
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}
.postal-share-link:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.postal-share-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Descarregar + Imprimir sit side by side beneath the primary Partilhar. */
.postal-actions-secondary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.postal-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--space-2) var(--space-3);
  background-color: transparent;
  color: var(--accent);
  border: 1.5px solid var(--accent);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.postal-action:hover {
  background-color: rgba(126, 46, 46, 0.08);
}
.postal-action:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Partilhar — the primary, one-tap action: land, tap, share sheet (S046). */
.postal-action--primary {
  width: 100%;
  min-height: 56px;
  background-color: var(--accent);
  color: #fff;
  border-color: var(--accent);
  font-weight: var(--weight-semibold, 600);
  font-size: var(--text-base, 1rem);
}
.postal-action--primary:hover {
  background-color: #6a2626;
}

/* Paid CTA ----------------------------------------------------------------- */

.postal-cta {
  text-align: center;
  border-top: 1px solid var(--border-soft);
  padding-top: var(--space-8);
}

.postal-cta .btn-primary {
  text-decoration: none;
}

.postal-cta-note {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.03em;
  color: var(--ink-mute);
}

/* Print: isolate the card, hide everything else ---------------------------- */

@media print {
  body {
    background: #fff;
  }
  .page-header,
  .postal-hero,
  .postal-inline-msg,
  .postal-counter,
  .postal-actions,
  .postal-share-links,
  .postal-cta,
  footer {
    display: none !important;
  }
  .postal-main {
    padding: 0;
  }
  #postal-canvas {
    border: none;
    box-shadow: none;
  }
}