/* Main page (version 3, chosen by the owner on 2026-10-14): film, IX edition price list, the partner, a quiet closing image.
   Purchase details (age rule, groups) live on the ticket page — owner feedback 2026-10-12. */

/* Hero topline and the evening: the edition, quietly. */
.topline-divider{margin:0 8px;color:var(--apricot)}
.edition-mark{margin-bottom:18px;color:var(--orange)}

/* Hero after the owner's mockup (2026-10-12): navy stage on the left, warm light on the right, "IX" opening the title
   on one left edge with the other lines, a gradient "Taneczne.", the date in its own column, a glowing ticket button.
   The film is shown sharp here (no blur), as the owner asked for better picture quality. */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.final .stage-atmosphere:after{background:
  radial-gradient(ellipse 50% 66% at 100% 0%,#f0954a66,transparent 72%),
  radial-gradient(ellipse 46% 42% at 96% 100%,#e8843f4d,transparent 72%),
  linear-gradient(90deg,#0a1628eb 0%,#0d1d35c7 30%,#11233d75 58%,#2a1f2042 100%),
  linear-gradient(180deg,#0a1628a6 0%,transparent 26%,transparent 66%,#0a1628cc 100%)}
/* Wide hero boxes cut the film top and bottom; dancers stand on the floor, so keep the lower part. */
.final .stage-atmosphere .hero-poster,.final .stage-atmosphere>.hero-film{filter:saturate(.92);object-position:50% 66%}
.final .hero-stage .nav-ticket{border-color:#f2a05f8c}
.final .hero-stage .nav-ticket:hover{background:#f2a05f1f;border-color:#f8c08a}
.final .stage-topline>p:before{width:30px;background:linear-gradient(90deg,#f2a05f,#f8c08a)}
.final .topline-divider{display:inline-block;width:5px;height:5px;margin:0 14px 0 12px;border-radius:50%;background:var(--apricot);font-size:0;vertical-align:middle}
.final .stage-composition h1>span:nth-child(n){padding-left:0}
.final .title-edition{font-style:italic;letter-spacing:-.01em;padding-right:.08em;margin-right:-.08em;
  background:linear-gradient(115deg,#fbd0a2 0%,#f2a05f 55%,#e7843d 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.final .stage-composition h1>em{width:fit-content;padding:0 .14em 0 0;margin-right:-.14em;
  background:linear-gradient(110deg,#fbcf9f 0%,#f4a964 42%,#ea8a43 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.final .stage-date{align-self:center;padding:8px 0 10px 40px;border-left:1px solid #f3dcc64d;text-align:left}
.final .stage-date time{align-items:flex-start}
.final .stage-year{justify-content:flex-start;gap:20px;width:auto;letter-spacing:3px}
.final .stage-year i{color:#f3dcc6}
.final .stage-hour{position:relative;margin-top:24px;padding-top:24px}
.final .stage-hour:before{content:'';position:absolute;top:0;left:0;width:96px;height:1px;background:#f3dcc666}
.final .stage-venue{padding-left:45px;border-left:1px solid #d5e6f34d}
.final .stage-cta{border:0;background:linear-gradient(100deg,#f9c08a 0%,#f2a05f 52%,#eb8c47 100%);color:#16233a;box-shadow:0 18px 48px -18px #f2a05fb8,inset 0 0 0 1px #ffd7b033}
.final .stage-cta:hover{background:linear-gradient(100deg,#ffd2a8 0%,#f6b077 52%,#f09a58 100%);box-shadow:0 22px 58px -16px #f2a05fd9,inset 0 0 0 1px #ffe1c24d}
@media(forced-colors:active){.final .title-edition,.final .stage-composition h1>em{background:none;color:CanvasText}}

/* Before sales open (owner, 2026-10-16): app.mjs sets html.sales-closed from /api/event and the buy buttons say
   when sales start; the tickets section keeps only when and where with the stage light — no prices, no payment card. */
.sales-closed #cennik,.sales-closed .site-header nav>a[href='#cennik']{display:none}
.sales-closed .ticket-layout{grid-template-columns:1fr}

/* Price list in the ticket card: three prices, nothing more. */
.price-card .price-list{list-style:none;margin:20px 0 22px;padding:0;border-top:1px solid var(--line)}
.price-list li{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:14px 0;border-bottom:1px solid var(--line)}
.price-name{font-size:15px;font-weight:600;line-height:1.35}
.price-name small{display:block;margin-top:3px;font-size:12px;font-weight:400;color:var(--muted)}
.price-value{flex:none;font:400 34px/1 var(--serif);letter-spacing:-1px;white-space:nowrap}
.price-value small{font:13px var(--sans);letter-spacing:0;color:var(--muted);margin-left:2px}
.price-list li:first-child .price-value{font-size:40px}

/* Invitation (owner, 2026-10-16): two photos of the company on stage take turns, slowly. One frame for both
   (the curtain call keeps everyone in it); the group photo loses only dark stage above and below. */
.final .invitation-swap{aspect-ratio:1671/1078;overflow:hidden}
.final .invitation-swap>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.final .invitation-swap>.invitation-alt{opacity:0;animation:invitation-swap 20s ease-in-out 4s infinite}
@keyframes invitation-swap{0%,37.5%{opacity:0}50%,87.5%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.final .invitation-swap>.invitation-alt{animation:none}}

/* Partner of the event: the logo stays on a light surface, unchanged. */
.partner{display:flex;align-items:center;gap:18px;width:max-content;max-width:100%;margin-top:30px;padding-top:20px;border-top:1px solid var(--line)}
.partner-label{font-size:11px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted)}
.partner img{width:150px;height:auto}
.partner:hover img{opacity:.85}

/* Footer: the hall seen from the stage, fading into the closing line; the partner beside the contact. */
.final .site-footer{overflow:hidden}
.final .footer-top{position:relative;isolation:isolate}
.footer-seats{position:absolute;z-index:-1;right:-56px;top:-54px;width:46%;height:calc(100% + 54px);object-fit:cover;object-position:50% 70%;opacity:.34;mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 55%),linear-gradient(180deg,#000 55%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 55%),linear-gradient(180deg,#000 55%,transparent);mask-composite:intersect}
.footer-credits{display:flex;align-items:center;gap:36px}
.footer-organizer,.footer-partner{display:flex;align-items:center;gap:12px;font-size:11px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted)}
.footer-organizer img{width:76px;height:auto}
.footer-partner img{width:112px;height:auto}
.footer-organizer:hover img,.footer-partner:hover img{opacity:.85}
/* Contact: e-mail and phone; the seller's details and the documents close the page (Tpay checks them). */
.final .footer-contact>a>span{margin-left:20px}
.final .footer-contact small a{color:inherit}
.final .footer-contact small a[href^="tel:"]{white-space:nowrap}
.final .legal-pending a{text-decoration:underline;text-underline-offset:3px}
.final .footer-contact small a:hover,.final .legal-pending a:hover{color:var(--ink)}

@media(max-width:1100px){
  .final .footer-bottom{flex-wrap:wrap;row-gap:18px}
}
@media(min-width:761px) and (max-width:1100px){.final .footer-year{text-align:left}}
@media(max-width:760px){
  /* Phones: the price list and tickets matter more than the description. */
  .final .site-header nav>a[href='#wieczor']{display:none}
  .final .stage-atmosphere:after{background:radial-gradient(ellipse 80% 40% at 100% 0%,#f0954a47,transparent 70%),radial-gradient(ellipse 70% 30% at 100% 100%,#e8843f38,transparent 70%),linear-gradient(180deg,#0a1628c9 0%,#0f22398a 45%,#0a1628d9 100%)}
  .final .stage-atmosphere .hero-poster,.final .stage-atmosphere>.hero-film{object-position:50% 50%}
  .final .stage-date{padding:0;border:0}
  .final .stage-date time{align-items:center}
  .final .stage-hour{margin-top:0;padding-top:0}
  .final .stage-hour:before{display:none}
  .final .stage-venue{padding-left:0;border:0}
  .price-value{font-size:30px}
  .price-list li:first-child .price-value{font-size:34px}
  .price-name{font-size:14px}
  .partner{gap:14px}
  .partner img{width:128px}
  .footer-seats{right:-16px;top:-54px;width:70%;opacity:.3}
  .final .footer-bottom{align-items:flex-start}
  .footer-credits{order:3;width:100%;flex-wrap:wrap;gap:16px 28px}
  .footer-organizer>span,.footer-partner>span{flex:none;width:104px}
}