/* ============================================================
   FORMAL EVENT POSTER
   Clean, gallery-style layout. Same paper sizing system as the
   public version (--paper-w / --paper-h / --paper-unit / --k).
   Selector .poster.formal so it doesn't collide with public.
   ============================================================ */

.poster.formal {
  background: var(--weber-warm-white, #f6f1e7);
  /* Reset all public decorations */
}
.poster.formal::before,
.poster.formal::after { content: none; }

/* Border device — Weber red frame (top + bottom + left + right) */
.poster.formal .edge {
  position: absolute;
  background: var(--weber-red);
  z-index: 2;
}
.poster.formal .edge.t,
.poster.formal .edge.b {
  left: 0; right: 0;
  height: calc(var(--paper-h) * 0.025 * var(--paper-unit));
}
.poster.formal .edge.t { top: 0; }
.poster.formal .edge.b { bottom: 0; }
.poster.formal .edge.l,
.poster.formal .edge.r {
  top: 0; bottom: 0;
  width: calc(var(--paper-h) * 0.025 * var(--paper-unit));
}
.poster.formal .edge.l { left: 0; }
.poster.formal .edge.r { right: 0; }

.poster.formal .poster-inner {
  position: absolute;
  inset: calc(var(--paper-h) * 0.025 * var(--paper-unit));
  padding: calc(18 * var(--k) * var(--paper-unit))
           calc(20 * var(--k) * var(--paper-unit));
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "hero"
    "body"
    "footer";
  gap: calc(10 * var(--k) * var(--paper-unit));
  z-index: 3;
}
.poster.formal .poster-header { grid-area: header; }
.poster.formal .hero-formal   { grid-area: hero; }
.poster.formal .body-row      { grid-area: body; }
.poster.formal .poster-footer { grid-area: footer; }

/* ----- HEADER ----- */
.poster.formal .poster-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(8 * var(--k) * var(--paper-unit));
}
.poster.formal .poster-header .logo {
  height: calc(20 * var(--k) * var(--paper-unit));
  width: auto;
  display: block;
}
.poster.formal .event-meta {
  text-align: right;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1.05;
}
.poster.formal .event-meta .label {
  font-size: calc(3.2 * var(--k) * var(--paper-unit));
  color: var(--weber-red);
  font-weight: 700;
}
.poster.formal .event-meta .value {
  font-size: calc(5.5 * var(--k) * var(--paper-unit));
  color: var(--ink);
  font-weight: 800;
  margin-top: calc(1.5 * var(--k) * var(--paper-unit));
}

/* ----- HERO ----- */
.poster.formal .hero-formal {
  align-self: end;
  text-align: left;
}
.poster.formal .hero-formal .eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--weber-red);
  font-size: calc(4.2 * var(--k) * var(--paper-unit));
  margin-bottom: calc(4 * var(--k) * var(--paper-unit));
}
.poster.formal .hero-formal .display {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 0.88;
  color: var(--ink);
}
.poster.formal .hero-formal .display .lg {
  display: block;
  font-size: calc(24 * var(--k) * var(--paper-unit));
}
.poster.formal .hero-formal .display .sm {
  display: block;
  font-size: calc(16 * var(--k) * var(--paper-unit));
}
.poster.formal .hero-formal .line {
  display: block;
  height: calc(1.6 * var(--k) * var(--paper-unit));
  width: 55%;
  background: var(--weber-red);
  margin: calc(2.5 * var(--k) * var(--paper-unit)) 0;
  clip-path: polygon(
    calc(2 * var(--k) * var(--paper-unit)) 0,
    calc(100% - var(--k) * var(--paper-unit) * 2) 0,
    100% 100%, 0 100%);
}

/* ----- QR PANEL ----- */
.poster.formal .qr-panel {
  background: var(--weber-white, #fff);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: calc(14 * var(--k) * var(--paper-unit));
  padding: calc(14 * var(--k) * var(--paper-unit));
  align-items: center;
  border: calc(0.8 * var(--k) * var(--paper-unit)) solid var(--ink);
  position: relative;
  align-self: start;
}
.poster.formal .qr-panel .qr-wrap {
  position: relative;
  width: calc(120 * var(--k) * var(--paper-unit));
  height: calc(120 * var(--k) * var(--paper-unit));
  background: #fff;
}
.poster.formal .qr-panel .qr-wrap img.qr-img {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
}
.poster.formal .qr-panel .qr-wrap .kettle {
  position: absolute;
  top: 50%; left: 50%;
  width: 22%; height: 22%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 calc(0.6 * var(--k) * var(--paper-unit)) #fff;
}
.poster.formal .qr-panel .qr-wrap .kettle img {
  width: 78%; height: 78%;
  object-fit: contain;
}
.poster.formal .qr-panel .qr-wrap.empty::after {
  content: 'QR';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 900;
  color: #ddd;
  font-size: calc(40 * var(--k) * var(--paper-unit));
  background: repeating-linear-gradient(45deg, #fafafa 0 12px, #f0f0f0 12px 24px);
}

.poster.formal .qr-side {
  display: grid;
  gap: calc(5 * var(--k) * var(--paper-unit));
}
.poster.formal .qr-side .recipe-label {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--weber-red);
  font-size: calc(4 * var(--k) * var(--paper-unit));
}
.poster.formal .qr-side .recipe-name {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 0.92;
  font-size: calc(13 * var(--k) * var(--paper-unit));
  color: var(--ink);
}
.poster.formal .qr-side .steps {
  margin-top: calc(6 * var(--k) * var(--paper-unit));
  display: grid;
  gap: calc(3.5 * var(--k) * var(--paper-unit));
}
.poster.formal .qr-side .step {
  display: grid;
  grid-template-columns: calc(11 * var(--k) * var(--paper-unit)) 1fr;
  gap: calc(4 * var(--k) * var(--paper-unit));
  align-items: baseline;
}
.poster.formal .qr-side .step .n {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: calc(9 * var(--k) * var(--paper-unit));
  color: var(--weber-red);
  line-height: 1;
}
.poster.formal .qr-side .step .t {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: calc(4.4 * var(--k) * var(--paper-unit));
  line-height: 1.25;
  color: var(--ink);
}
.poster.formal .qr-side .url {
  margin-top: calc(6 * var(--k) * var(--paper-unit));
  padding-top: calc(4 * var(--k) * var(--paper-unit));
  border-top: 1px solid rgba(0,0,0,0.18);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: calc(3.4 * var(--k) * var(--paper-unit));
  color: var(--ink-soft);
  word-break: break-all;
  letter-spacing: 0.01em;
}
.poster.formal .qr-side .url b { color: var(--ink); font-weight: 700; }

/* ----- FOOTER ----- */
.poster.formal .poster-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(8 * var(--k) * var(--paper-unit));
}
.poster.formal .poster-footer .tagline {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 0.95;
  font-size: calc(8 * var(--k) * var(--paper-unit));
  max-width: 60%;
}
.poster.formal .poster-footer .tagline em {
  color: var(--weber-red);
  font-style: normal;
}
.poster.formal .poster-footer .marks {
  text-align: right;
  font-family: var(--font-body);
  font-size: calc(3 * var(--k) * var(--paper-unit));
  color: var(--ink-soft);
  line-height: 1.3;
}
.poster.formal .poster-footer .marks .badge {
  display: inline-flex;
  align-items: center;
  gap: calc(2 * var(--k) * var(--paper-unit));
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: calc(3.4 * var(--k) * var(--paper-unit));
  color: var(--ink);
  margin-bottom: calc(2 * var(--k) * var(--paper-unit));
}
.poster.formal .poster-footer .marks .kettle-tab {
  width: calc(7 * var(--k) * var(--paper-unit));
  height: calc(7 * var(--k) * var(--paper-unit));
  object-fit: contain;
}

/* ============================================================
   FORMAL — HORIZONTAL VARIANT
   Top: header (full width)
   Body: hero (left) | qr-panel (right) — hero & body row sit
         in the same grid row via grid-template-areas
   Bottom: footer (full width)
   ============================================================ */
.poster.formal[data-orientation="horizontal"] .poster-inner {
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr calc(150 * var(--k) * var(--paper-unit));
  grid-template-areas:
    "header header"
    "hero   body"
    "footer footer";
  gap: calc(14 * var(--k) * var(--paper-unit));
}
.poster.formal[data-orientation="horizontal"] .body-row {
  display: block;
  align-self: center;
}
.poster.formal[data-orientation="horizontal"] .hero-formal {
  align-self: center;
}
.poster.formal[data-orientation="horizontal"] .hero-formal .display .lg {
  font-size: calc(30 * var(--k) * var(--paper-unit));
}
.poster.formal[data-orientation="horizontal"] .hero-formal .display .sm {
  font-size: calc(20 * var(--k) * var(--paper-unit));
}
.poster.formal[data-orientation="horizontal"] .hero-formal .line {
  height: calc(2 * var(--k) * var(--paper-unit));
  width: 65%;
  margin: calc(3.5 * var(--k) * var(--paper-unit)) 0;
}
.poster.formal[data-orientation="horizontal"] .qr-panel {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  align-content: start;
  justify-items: center;
  gap: calc(8 * var(--k) * var(--paper-unit));
  padding: calc(10 * var(--k) * var(--paper-unit));
}
.poster.formal[data-orientation="horizontal"] .qr-panel .qr-wrap {
  width: calc(115 * var(--k) * var(--paper-unit));
  height: calc(115 * var(--k) * var(--paper-unit));
}
.poster.formal[data-orientation="horizontal"] .qr-side {
  text-align: center;
  width: 100%;
  gap: calc(3 * var(--k) * var(--paper-unit));
}
.poster.formal[data-orientation="horizontal"] .qr-side .recipe-label {
  font-size: calc(3.4 * var(--k) * var(--paper-unit));
}
.poster.formal[data-orientation="horizontal"] .qr-side .recipe-name {
  font-size: calc(7 * var(--k) * var(--paper-unit));
}
.poster.formal[data-orientation="horizontal"] .qr-side .steps {
  display: none;
}
.poster.formal[data-orientation="horizontal"] .qr-side .url {
  font-size: calc(2.8 * var(--k) * var(--paper-unit));
  margin-top: calc(3 * var(--k) * var(--paper-unit));
  padding-top: calc(2.5 * var(--k) * var(--paper-unit));
}
.poster.formal[data-orientation="horizontal"] .poster-footer .tagline {
  font-size: calc(9 * var(--k) * var(--paper-unit));
}