/* Posters UI kit — shared rules */
@import url('../../colors_and_type.css');

* { box-sizing: border-box; }
html, body { margin:0; padding:0; background: var(--cn-graphite); color: var(--cn-ink); font-family: var(--font-body); }

.kit-wrap { max-width: 1280px; margin: 0 auto; padding: 32px; }
.kit-h { font-family: var(--font-display); text-transform: uppercase; color: #fff; font-size: 28px; letter-spacing: .04em; line-height: 1; margin: 0 0 18px; }
.kit-row { display: grid; gap: 22px; margin-bottom: 36px; }

/* ---- POSTER FRAMES ---- */
.poster {
  position: relative;
  overflow: hidden;
  background: #000;
  color: #fff;
  font-family: var(--font-display);
  text-transform: uppercase;
  /* Container query for sizing children proportional to poster width.
     We use `--w` so children compute font-size via calc(var(--w) * factor)
     without inheriting a giant root font-size. */
  container-type: inline-size;
  --w: 100cqw; /* @kind other */
}
.poster .photo {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05) brightness(0.96);
}
.poster .top, .poster .bot {
  position:absolute;
  left: calc(var(--w) * 0.05);
  right: calc(var(--w) * 0.05);
  background: color-mix(in srgb, var(--accent) 80%, transparent);
  padding: calc(var(--w) * 0.035) calc(var(--w) * 0.045);
  z-index: 2;
  display: flex; flex-direction: column; justify-content: center;
  text-align: center;
  gap: calc(var(--w) * 0.012);
}
.poster .top { top: calc(var(--w) * 0.05); }
.poster .bot { bottom: calc(var(--w) * 0.05); }

.poster .name {
  font-size: calc(var(--w) * 0.13);
  line-height: .8;
  margin-bottom: -0.04em; /* Bebas caps sit high — pull the date up */
  letter-spacing: 0;
  display: block;
  white-space: nowrap;
  hyphens: none;
}
.poster .meta {
  font-family: var(--font-body);
  font-size: calc(var(--w) * 0.038);
  letter-spacing: .08em;
  line-height: 1;
  margin-top: calc(var(--w) * 0.006);
  display: flex; flex-direction: column;
  gap: calc(var(--w) * 0.008);
}
.poster .meta .meta-date {
  font-weight: 600;
}
.poster .meta .meta-detail {
  font-weight: 400;
  opacity: .9;
}

/* Shorter formats — name a touch smaller, but still big. */
.poster.insta .name, .poster.efrog .name, .poster.fbcover .name { font-size: calc(var(--w) * 0.1); }
.poster.event .name { font-size: calc(var(--w) * 0.08); }
.poster .meta .pipe { opacity:.65; padding: 0 .35em; }

/* size-relative em via parent font-size = poster width */
.poster.a4   { width: 100%; aspect-ratio: 1 / 1.414; }

/* ---- A4 alternative: TWO stacked bars at the TOP ----
   Reference: hand-set Tanner Wareham poster.
   Bars are narrower than full poster width, inset from the top, with a
   small gap between name-band and date-band. No QR. */
.poster.a4-top-stacked .top-stack {
  position: absolute;
  top: calc(var(--w) * 0.055);
  left: calc(var(--w) * 0.09);
  right: calc(var(--w) * 0.09);
  display: flex; flex-direction: column;
  gap: calc(var(--w) * 0.014);
  z-index: 2;
}
.poster.a4-top-stacked .top-stack-name {
  background: color-mix(in srgb, var(--accent) 80%, transparent);
  color: #fff;
  padding: calc(var(--w) * 0.035) calc(var(--w) * 0.05);
  text-align: center;
}
.poster.a4-top-stacked .top-stack-name .name {
  font-family: var(--font-display);
  line-height: 0.95;
  letter-spacing: 0;
  text-transform: uppercase;
  display: flex; flex-direction: column;
  gap: calc(var(--w) * 0.008);
}
.poster.a4-top-stacked .top-stack-name .name-line {
  /* Each line is auto-sized via FitLine to fill the band width.
     The font-size set inline by FitLine wins over any value here. */
  display: block;
  white-space: nowrap;
}
.poster.a4-top-stacked .top-stack-date {
  background: color-mix(in srgb, var(--accent) 80%, transparent);
  color: #fff;
  padding: calc(var(--w) * 0.022) calc(var(--w) * 0.04);
  text-align: center;
}
.poster.a4-top-stacked .top-stack-date .date {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* QR sticker */
.qr-sticker {
  position:absolute; z-index: 3;
  width: 22%; aspect-ratio: 1/1;
  background: #fff; padding: 1.5%;
  box-shadow: 2px 4px 0 rgba(0,0,0,.18);
  transform: rotate(-3deg);
}
.qr-sticker.tr { top: 4%; right: 4%; transform: rotate(4deg); }
.qr-sticker.br { bottom: 23%; right: 4%; transform: rotate(5deg); }
.qr-sticker .qr {
  width:100%; height:100%; position:relative;
  background: #fff;
}
.qr-sticker .frog {
  position:absolute;
  inset: 34% 34%;
  width: 32%; height: 32%;
  object-fit: contain;
  background: #fff;
  padding: 8%;
  border-radius: 50%;
  /* white halo so the frog never sits on QR cells */
  box-shadow: 0 0 0 4px #fff;
}

/* Aspect variants */
.poster.event   { aspect-ratio: 1.91 / 1; }
.poster.insta   { aspect-ratio: 1 / 1; }
.poster.hoch    { aspect-ratio: 4 / 5; }
.poster.hd      { aspect-ratio: 16 / 9; }
.poster.fhd     { aspect-ratio: 9 / 16; }   /* FullHD Hochkant 1080×1920 (Stories/Reels) */
.poster.efrog   { aspect-ratio: 1 / 1; }   /* Eventfrog 1200×1200 */
.poster.fbcover { aspect-ratio: 1.91 / 1; }   /* Facebook/Eventfrog event cover */

/* Concert tile (interactive nav) */
.tile {
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), filter var(--dur-fast);
}
.tile:hover { transform: translateY(-2px); }
.tile.is-active { outline: 3px solid var(--cn-paper); outline-offset: 4px; }

.kit-toolbar {
  display:flex; gap:8px; flex-wrap:wrap; margin-bottom: 22px;
}

/* ---- Facebook / Eventfrog event cover (1.91:1) ----
   Reference: Stubekonzert event covers — full-bleed B&W photo,
   single small accent band with artist name only, near bottom centered.
   No date, no detail, no QR. */
.poster.fbcover { background: #000; }
.poster.fbcover .photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 20%;
  filter: grayscale(1) contrast(1.05) brightness(0.95);
}
.fbcover-veil { display: none; }
.fbcover-center {
  position: absolute;
  left: 0; right: 0;
  bottom: 12%;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}
.fbcover-name {
  /* fit-band marker so FitLine measures THIS as the band width */
  background: color-mix(in srgb, var(--accent) 80%, transparent);
  color: #fff;
  font-family: var(--font-display);
  text-transform: uppercase;
  width: 33%;
  padding: calc(var(--w) * 0.018) calc(var(--w) * 0.022);
  text-align: center;
}
.fbcover-name .name {
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}
.kit-btn {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: 14px; letter-spacing:.04em;
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.4);
  padding: 8px 14px; cursor:pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.kit-btn:hover { background: rgba(255,255,255,.1); }
.kit-btn.is-on { background: var(--accent, var(--cn-violet)); border-color: var(--accent, var(--cn-violet)); color:#fff; }