/* The public, guest-facing pages: theaters, showings and tickets. One bold idea, the marquee and the ticket stub;
   everything around it stays plain. Colors come from the theme tokens at the top of app.css (not MudBlazor's palette
   variables), so these rules work on both the statically rendered pages (a theater's page, its pages and posts, the
   theater list) and the interactive ones (a showing, a ticket), in both themes. */

/* --- Marquee: the theater's sign. Always night, in both themes. --- */
.marquee-header {
    position: relative;
    margin-bottom: 1.5rem;
    padding: 1.5rem 1.25rem;
    border-radius: 10px;
    background: linear-gradient(180deg, #0a0d1f 0%, #141a3d 100%);
    color: #efedf6;
    overflow: hidden;
}
/* Bulb rows along the top and bottom. The bulbs never move: an unlit bulb every 22px (the lower layer), and a lit layer
   that shows every third bulb glowing. The lit layer hops one bulb along per step (right on top, left on the bottom,
   so the light chases around the sign) by jumping between three fixed offsets, with no tween in between. Steady, with
   every third bulb lit, for prefers-reduced-motion. */
.marquee-header::before,
.marquee-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 12px;
    background:
        radial-gradient(circle, #fff4cf 0 2px, #ffd66b 3px, rgba(255, 214, 107, 0.4) 4px, transparent 6.5px) 0 50% / 66px 12px repeat-x,
        radial-gradient(circle, #5a4a2e 0 2.5px, #2c2415 3.5px, transparent 4px) 0 50% / 22px 12px repeat-x;
    animation: marquee-chase 1.2s step-end infinite;
}
.marquee-header::before { top: 6px; }
.marquee-header::after { bottom: 6px; animation-direction: reverse; }
@keyframes marquee-chase {
    0% { background-position: 0 50%, 0 50%; }
    33.34% { background-position: 22px 50%, 0 50%; }
    66.67% { background-position: 44px 50%, 0 50%; }
}
.marquee-body { display: flex; align-items: center; gap: 1.25rem; padding: 0.75rem 0.25rem; }
.marquee-logo { max-height: 5.5rem; max-width: 11rem; object-fit: contain; border-radius: 4px; }
.marquee-title {
    margin: 0;
    font-family: "Bungee", system-ui, sans-serif;
    font-size: clamp(1.6rem, 4.5vw, 2.6rem);
    line-height: 1.05;
    font-weight: 400;
    color: #ffd66b;
    text-shadow: 0 0 18px rgba(255, 214, 107, 0.35);
}
.marquee-sub { margin: 0.35rem 0 0; color: #b9b6cf; }

/* --- Ticket stub --- */
.stub {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    margin-bottom: 0.9rem;
    border: 1px solid var(--di-line);
    border-radius: 10px;
    background: var(--di-surface);
}
.stub:not(:has(.stub-poster)) { grid-template-columns: 1fr auto; }
.stub:not(:has(.stub-cut)) { grid-template-columns: auto 1fr; }
.stub:not(:has(.stub-poster)):not(:has(.stub-cut)) { grid-template-columns: 1fr; }

.stub-poster { display: flex; gap: 0.4rem; padding: 0.85rem 0 0.85rem 0.85rem; }
.stub-poster img { width: 4.5rem; height: 6.75rem; object-fit: cover; border-radius: 4px; }

.stub-main { min-width: 0; padding: 0.9rem 1.1rem; }
.stub-title { margin: 0 0 0.2rem; font-size: 1.25rem; font-weight: 700; line-height: 1.2; }
.stub-meta { margin: 0; color: var(--di-muted); }
.stub-detail { margin-top: 0.4rem; color: var(--di-muted); font-size: 0.9375rem; }
.stub-detail details { margin-top: 0.25rem; }
.stub-detail summary { cursor: pointer; color: var(--di-accent); }
.stub-detail p { margin: 0.35rem 0 0; color: var(--di-ink); white-space: pre-line; }

/* The tear-off end: a dashed perforation with a notch at each end. */
.stub-cut {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 10rem;
    padding: 0.9rem 1.25rem;
    border-left: 2px dashed color-mix(in srgb, var(--di-muted) 45%, transparent);
    text-align: center;
}
.stub-cut::before,
.stub-cut::after {
    content: "";
    position: absolute;
    left: -0.7rem;
    width: 1.4rem;
    height: 1.4rem;
    border: 1px solid var(--di-line);
    border-radius: 50%;
    background: var(--di-bg);
}
.stub-cut::before { top: -0.7rem; clip-path: inset(50% 0 0 0); }
.stub-cut::after { bottom: -0.7rem; clip-path: inset(0 0 50% 0); }

.stub-time {
    font-family: "Bungee", system-ui, sans-serif;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--di-primary);
}
.stub-note { font-size: 0.875rem; color: var(--di-muted); }

@media (max-width: 599.98px) {
    .stub, .stub:not(:has(.stub-poster)), .stub:not(:has(.stub-cut)) { grid-template-columns: auto 1fr; }
    .stub:not(:has(.stub-poster)) { grid-template-columns: 1fr; }
    .stub-cut { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; min-width: 0; border-left: 0; border-top: 2px dashed color-mix(in srgb, var(--di-muted) 45%, transparent); }
    .stub-cut::before, .stub-cut::after { top: -0.7rem; bottom: auto; }
    .stub-cut::before { left: -0.7rem; clip-path: inset(0 0 0 50%); }
    .stub-cut::after { left: auto; right: -0.7rem; clip-path: inset(0 50% 0 0); }
}

/* --- Theater cards on the list --- */
.theater-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: 1rem; margin: 0; }
.theater-card { height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.theater-card-sign {
    padding: 1rem 1rem 0.85rem;
    background: linear-gradient(180deg, #0a0d1f 0%, #141a3d 100%);
    border-bottom: 3px solid #ffd66b;
}
.theater-card-sign img { display: block; max-height: 3.25rem; max-width: 100%; object-fit: contain; margin-bottom: 0.5rem; }
.theater-card-name { margin: 0; font-family: "Bungee", system-ui, sans-serif; font-weight: 400; font-size: 1.2rem; line-height: 1.15; color: #ffd66b; }
.theater-card-name a { color: inherit; text-decoration: none; }
.theater-card-name a:hover { text-decoration: underline; }
.theater-card-body { flex: 1; padding: 0.9rem 1rem; }
.theater-card-action { padding: 0 1rem 1rem; }
.theater-card-distance { display: inline-block; margin-left: 0.4rem; font-weight: 600; color: var(--di-accent); }

/* --- Near-me search (theater list) --- */
.near-search { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.near-search-place { flex: 1 1 16rem; }
.near-search-radius { flex: 0 0 10rem; }
.near-search-place, .near-search-radius { align-self: end; }
.near-search-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-self: end; }

/* --- Weather (showing stubs, showing and ticket pages) --- */
.weather-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; margin: 0.4rem 0 0; font-size: 0.9rem; }
.weather-icon { flex: none; width: 1.25rem; height: 1.25rem; fill: var(--di-accent); }
.weather-rough .weather-icon { fill: var(--di-warning); }
.weather-warn {
    padding: 0.05rem 0.6rem; border: 1px solid var(--di-warning); border-radius: 999px;
    color: var(--di-warning); font-size: 0.8125rem; font-weight: 600;
}

/* --- Ticket (a guest's ticket page) --- */
.ticket-hero { text-align: center; }
.ticket-spot { font-family: "Bungee", system-ui, sans-serif; font-size: 2.4rem; line-height: 1; color: var(--di-primary); }

@media (prefers-reduced-motion: reduce) {
    * { scroll-behavior: auto !important; }
    .marquee-header::before, .marquee-header::after { animation: none; }
}

.stub-feature + .stub-feature { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--di-line); }
.stub-year { font-weight: 500; color: var(--di-muted); }
.stub-rating {
    display: inline-block; margin-left: 0.35rem; padding: 0 0.5rem; border: 1px solid var(--di-line-strong); border-radius: 999px;
    font-size: 0.8125rem; font-weight: 600; line-height: 1.5; vertical-align: 0.15em;
}

/* Ticket options and add-ons: the label fills the row so the price sits at the right edge. */
.tc-line { margin: 0 !important; }
.tc-line .mud-typography { width: 100%; }
.tc-label { width: 100%; }

.muted { color: var(--di-muted); }

/* --- The statically rendered public pages (PublicLayout) --- */
.public-main { padding-block: 1.5rem; }
.public-columns { row-gap: 1rem; }
.public-note { padding: 0.75rem 1rem; border: 1px solid var(--di-line-strong); border-radius: 6px; }

/* --- The theater's own menu, under its marquee (TheaterMasthead) --- */
.marquee-header:has(+ .theater-nav) { margin-bottom: 0.75rem; }
a.marquee-title-link { display: inline-block; text-decoration: none; }
a.marquee-title-link:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.theater-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--di-line);
}
.theater-nav-link {
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    color: var(--di-ink);
    font-weight: 600;
    text-decoration: none;
}
.theater-nav-link:hover { background: color-mix(in srgb, var(--di-ink) 8%, transparent); }
.theater-nav-link.active { background: var(--di-primary); color: var(--di-on-primary); }

/* --- A theater's pages and posts --- */
.theater-article { max-width: 46rem; }
.theater-article-title { margin: 0 0 0.5rem; font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 700; line-height: 1.15; }
.content-hero {
    display: block; width: 100%; height: auto; max-height: 24rem; margin-bottom: 1.25rem;
    object-fit: cover; border-radius: 10px;
}
.theater-content { font-size: 1.0625rem; line-height: 1.65; overflow-wrap: break-word; }
.theater-content::after { content: ""; display: table; clear: both; }
.theater-content > :first-child { margin-top: 0; }
.theater-content p, .theater-content ul, .theater-content ol, .theater-content blockquote { margin: 0 0 1rem; }
.theater-content h2, .theater-content h3, .theater-content h4 { margin: 1.75rem 0 0.6rem; line-height: 1.25; font-weight: 700; }
.theater-content h2 { font-size: 1.5rem; }
.theater-content h3 { font-size: 1.25rem; }
.theater-content h4 { font-size: 1.0625rem; }
.theater-content ul, .theater-content ol { padding-left: 1.5rem; }
.theater-content a { color: var(--di-primary); }
.theater-content blockquote {
    padding: 0.25rem 0 0.25rem 1rem; border-left: 4px solid var(--di-primary); color: var(--di-muted);
}
.theater-content hr { border: 0; border-top: 1px solid var(--di-line); margin: 1.5rem 0; }
.theater-content .ql-align-center { text-align: center; }
.theater-content .ql-align-right { text-align: right; }
.theater-content .ql-align-justify { text-align: justify; }
.theater-content .ql-indent-1 { padding-left: 2em; } .theater-content .ql-indent-2 { padding-left: 4em; }
.theater-content .ql-indent-3 { padding-left: 6em; } .theater-content .ql-indent-4 { padding-left: 8em; }
.theater-content .ql-indent-5, .theater-content .ql-indent-6, .theater-content .ql-indent-7, .theater-content .ql-indent-8 { padding-left: 10em; }

/* Images placed in the editor: a width (small, medium, full) and a position; left and right let the text wrap. Shared
   with the editor so what staff see while writing matches the page. */
.theater-content img, .rich-text .ql-editor img { height: auto; max-width: 100%; border-radius: 6px; }
.theater-content img.img-small, .rich-text .ql-editor img.img-small { width: 33%; }
.theater-content img.img-medium, .rich-text .ql-editor img.img-medium { width: 60%; }
.theater-content img.img-full, .rich-text .ql-editor img.img-full { width: 100%; }
.theater-content img.img-center, .rich-text .ql-editor img.img-center { display: block; margin: 0.5rem auto 1rem; }
.theater-content img.img-left, .rich-text .ql-editor img.img-left { float: left; margin: 0.25rem 1.25rem 0.75rem 0; }
.theater-content img.img-right, .rich-text .ql-editor img.img-right { float: right; margin: 0.25rem 0 0.75rem 1.25rem; }
.theater-content img.img-full, .rich-text .ql-editor img.img-full { float: none; display: block; margin: 0.5rem 0 1rem; }
@media (max-width: 600px) {
    .theater-content img.img-left, .theater-content img.img-right,
    .theater-content img.img-small, .theater-content img.img-medium { float: none; display: block; width: 100%; margin: 0.5rem 0 1rem; }
}

/* --- News & events cards --- */
.news-cards { display: grid; gap: 0.9rem; }
.news-card {
    display: grid;
    grid-template-columns: 1fr;
    border: 1px solid var(--di-line);
    border-radius: 10px;
    background: var(--di-surface);
    overflow: hidden;
}
.news-card.has-cover { grid-template-columns: 11rem 1fr; }
.news-card-cover img { display: block; width: 100%; height: 100%; min-height: 8rem; object-fit: cover; }
.news-card-body { padding: 0.9rem 1.1rem; min-width: 0; }
.news-card-title { margin: 0 0 0.2rem; font-size: 1.2rem; font-weight: 700; line-height: 1.25; }
.news-card-title a { color: inherit; text-decoration: none; }
.news-card-title a:hover { text-decoration: underline; }
.news-card-meta { margin: 0 0 0.4rem; color: var(--di-muted); font-size: 0.9375rem; }
.news-pin { color: var(--di-primary); font-weight: 600; }
.news-card-summary { margin: 0 0 0.4rem; }
.news-card-more { color: var(--di-primary); font-weight: 600; }
@media (max-width: 600px) {
    .news-card.has-cover { grid-template-columns: 1fr; }
    .news-card-cover img { max-height: 12rem; }
}