/*
 * A theme's cover (Undangan Digital Part 5; Part 8b's "Tema" tab draws the same piece with the customer's own
 * words). Its own small file so the editor's Tema page and the product page load exactly the same rules without
 * the rest of the product page's stylesheet (css/page/invitation.css). Scoped under body.aa like every page file.
 * Since decision UD-32 every theme is a zip: a cover is the picture of its look (`.pic`), or — a zip that came
 * without one — the plain card, a mini invitation cover in the shop's own colours and type, light and dark alike.
 */

/* ---------- The plain card: a mini invitation cover drawn in HTML (component/invitation/theme_cover.html) ---------- */

/* Portrait, like the phone; the shop's own tokens, so the card follows the shop's light and dark modes. */
.aa .iv-cover {
  --paper: var(--surface);
  --ink: var(--on-surface);
  --accent: var(--primary);
  --deep: var(--primary-container);
  --on-deep: var(--on-primary-container);
  --soft: var(--surface-container);
  --line: var(--outline-variant);
  display: flex;
  flex-direction: column;
  inline-size: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
}

/* The deep panel with the names. */
.aa .iv-cover-top {
  flex: 1 1 62%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 8px;
  border-radius: 0;
  background-color: var(--deep);
  color: var(--on-deep);
  text-align: center;
}

/* The small heading ("Pernikahan") in the accent colour. */
.aa .iv-cover .kick {
  font-size: 9px;
  line-height: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* The names, as large as the panel allows, a little bold: the shop's face has no script to draw them in. */
.aa .iv-cover .script {
  font-size: 22px;
  line-height: 26px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* Under the panel: the alternate paper, a rule in the accent and the cover's button. */
.aa .iv-cover-low {
  flex: 1 1 38%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 0;
  background: var(--soft);
}

/* The short line between the panel and the button, in the accent colour. */
.aa .iv-cover .rule {
  inline-size: 36px;
  block-size: 1px;
  background: var(--accent);
}

/* The cover's button as a pill in the accent; it is only drawn, never pressed. */
.aa .iv-cover .cta {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--paper);
  font-size: 9px;
  line-height: 12px;
  font-weight: 600;
}

/* ---------- The customer's own words (the editor's Tema tab) ---------- */

/* The event's day under the names, small and spaced like an invitation's cover. */
.aa .iv-cover .when {
  font-size: 8px;
  line-height: 10px;
  letter-spacing: 0.2em;
}

/* The names of the customer's own cover are theirs and may be long: they wrap rather than run past the card. */
.aa .iv-cover.own .script {
  font-size: 18px;
  line-height: 22px;
}

/* ---------- The picture of a theme's look (Part 21b; the shop's own since decision UD-27) ---------- */

/* The picture is the cover: it fills the portrait box, framed by the shop's own line. */
.aa .iv-cover.pic {
  background: var(--surface-container);
}

/* `border-radius: 0` because BeerCSS rounds every image to its corners; the cover's own corners clip it. */
.aa .iv-cover-pic {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  border-radius: 0;
}