/* Richards Majestic mobile layout. Loaded only at 680px and below. */
:root {
    --header-height: calc(68px + env(safe-area-inset-top, 0px));
    --mobile-nav-height: calc(76px + env(safe-area-inset-bottom, 0px));
    --radius: 18px;
}

html { scroll-padding-top: calc(var(--header-height) + 16px); }
body { padding-bottom: var(--mobile-nav-height); background: #0c0c0b; }
body::before { display: none; }
main { min-height: calc(100svh - var(--mobile-nav-height)); }
.container { width: calc(100% - 36px); }
a, button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
a:focus-visible, button:focus-visible, select:focus-visible {
    outline: 2px solid var(--gold-light);
    outline-offset: 4px;
}

.site-header, .site-header.scrolled {
    height: var(--header-height);
    padding-top: env(safe-area-inset-top, 0px);
    background: rgba(12, 12, 11, .97);
    border-bottom: 1px solid rgba(255,255,255,.07);
    backdrop-filter: blur(18px);
}
.header-inner { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
.brand, .scrolled .brand { width: max-content; max-width: 100%; height: 54px; display: flex; gap: 9px; }
.brand-logo, .scrolled .brand-logo { height: 47px; width: 47px; object-fit: contain; filter: none; }
.mobile-brand-name { display: grid; font-size: 13px; line-height: 1.2; font-weight: 600; letter-spacing: .02em; color: #ded7cb; }
.mobile-brand-name span { color: var(--gold-light); font-family: Georgia, serif; font-size: 21px; letter-spacing: .025em; }
.login-button { order: initial; font-size: 13px; padding: 10px 15px; min-height: 44px; display: inline-flex; align-items: center; background: rgba(216,160,74,.07); border-color: rgba(216,160,74,.27); }
.nav-toggle, .primary-nav, .primary-nav.open { display: none; }

.mobile-app-nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    position: fixed;
    z-index: 1100;
    bottom: 0;
    left: 0;
    right: 0;
    min-height: var(--mobile-nav-height);
    padding: 8px max(6px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px));
    background: rgba(17, 17, 15, .97);
    backdrop-filter: blur(22px);
    border-top: 1px solid rgba(245,215,148,.16);
    box-shadow: 0 -8px 30px rgba(0,0,0,.22);
}
.mobile-app-nav a { display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 58px; min-width: 0; color: #a59f94; font-size: 12px; font-weight: 600; line-height: 1.2; border-radius: 12px; }
.mobile-nav-icon { display: grid; place-items: center; width: 46px; height: 30px; border-radius: 10px; }
.mobile-nav-icon svg { width: 22px; height: 22px; }
.mobile-app-nav a.active { color: var(--gold-light); }
.mobile-app-nav a.active .mobile-nav-icon { background: rgba(216,160,74,.14); }
.mobile-app-nav a:active { background: rgba(216,160,74,.09); }

.hero { min-height: 390px; margin: 16px 14px 0; border: 1px solid rgba(245,215,148,.17); border-radius: 24px; align-items: end; }
.hero::after, .hero-glow { display: none; }
.hero-content { width: 100%; padding: 130px 20px 22px; }
.hero-latest-media img { object-position: center; filter: saturate(.95); }
.hero-latest-shade { background: linear-gradient(180deg, rgba(5,5,4,.08) 0%, rgba(5,5,4,.22) 24%, rgba(5,5,4,.78) 48%, #080807 90%); }
.eyebrow { font-size: 12px; letter-spacing: .14em; margin-bottom: 10px; }
.hero h1 { font-size: clamp(1.85rem, 8vw, 2.5rem); line-height: 1.08; letter-spacing: -.035em; overflow-wrap: anywhere; }
.hero-latest-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 14px; font-size: 13px; color: #c1b9ad; }
.hero-actions { display: grid; grid-template-columns: 1.1fr 1fr; gap: 8px; margin-top: 20px; }
.button { min-height: 48px; border-radius: 13px; padding: 11px 16px; font-size: 14px; line-height: 1.35; text-align: center; }
.button:hover, .login-button:hover, .production-card:hover { transform: none; }
.button-gold { background: linear-gradient(125deg, #edce89, #ce9845); box-shadow: 0 5px 16px rgba(216,160,74,.10); }
.hero-actions .button { padding-inline: 8px; font-size: 13px; }
.hero-actions .button-ghost { border-color: rgba(255,255,255,.17); background: rgba(255,255,255,.04); }
.hero-copy { font-size: 16px; margin-top: 16px; }

.section { padding: 32px 0; }
.section-heading { margin-bottom: 20px; }
.section-heading h2 { font-family: inherit; font-weight: 650; font-size: 24px; line-height: 1.2; letter-spacing: -.04em; }
.section-note { margin-top: 10px; font-size: 14px; line-height: 1.55; }
.production-grid { gap: 18px; }
.production-card { background: #171613; border-color: rgba(255,255,255,.085); border-radius: 18px; box-shadow: none; min-width: 0; }
.production-card-body { padding: 16px; }
.production-card h3, .related-grid .production-card h3 { font-family: inherit; font-size: 18px; font-weight: 600; line-height: 1.4; margin-bottom: 12px; letter-spacing: -.025em; overflow-wrap: anywhere; }
.production-meta, .related-grid .production-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 8px; font-size: 13px; }
.category-badge { font-size: 12px; padding: 4px 9px; left: 12px; bottom: 12px; letter-spacing: .035em; }
.play-icon { opacity: 1; width: 40px; height: 40px; border-color: rgba(255,255,255,.45); background: rgba(0,0,0,.42); }
.play-icon::after { left: 16px; top: 12px; border-left-width: 11px; border-top-width: 7px; border-bottom-width: 7px; }
.featured-grid, .related-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(86%, 320px);
    align-items: stretch;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: #796039 #171613;
    gap: 14px;
    padding: 2px 0 14px;
}
.featured-grid .production-card, .related-grid .production-card { scroll-snap-align: start; }
.services-strip { background: transparent; border: 0; margin: 0 18px; }
.services-grid { width: 100%; gap: 10px; }
.services-grid a { border: 1px solid rgba(255,255,255,.08); border-radius: 15px; padding: 19px 18px; grid-template-columns: 30px 1fr; column-gap: 10px; background: #151410; position: relative; }
.services-grid a:last-child { border-right: 1px solid rgba(255,255,255,.08); }
.services-grid a::after { content: '\203A'; position: absolute; right: 18px; top: 20px; font-size: 25px; line-height: 1; color: var(--gold); }
.services-grid strong { font-family: inherit; font-size: 18px; font-weight: 600; padding-right: 24px; }
.services-grid small { font-size: 13px; margin-top: 5px; padding-right: 18px; }

.compact-hero { padding: 28px 0 20px; background: radial-gradient(ellipse at 100% 0%, rgba(216,160,74,.09), transparent 75%); }
.compact-hero h1 { font-size: 38px; line-height: 1.12; }
.compact-hero p:last-child { font-size: 15px; line-height: 1.6; margin-bottom: 0; }
.category-section-heading h2 { font-size: 22px; }
.watch-page { padding-top: 16px; }
.watch-player { border-radius: 16px; box-shadow: none; }
.watch-info { padding: 22px 0 18px; }
.watch-info h1 { font-family: inherit; font-weight: 650; font-size: 26px; line-height: 1.25; overflow-wrap: anywhere; }
.watch-stats { font-size: 14px; gap: 4px; margin-top: 16px; }
.tags { gap: 7px; padding-top: 18px; }
.tags span { padding: 6px 10px; font-size: 13px; overflow-wrap: anywhere; max-width: 100%; }
.production-description { font-size: 16px; line-height: 1.75; padding-top: 20px; overflow-wrap: anywhere; }
.related-section { padding-top: 32px; }

.contact-layout { gap: 24px; padding-top: 24px; }
.contact-copy h2 { font-family: inherit; font-weight: 600; font-size: 24px; line-height: 1.3; letter-spacing: -.03em; margin-bottom: 12px; }
.contact-copy p { font-size: 15px; }
.contact-note { margin-top: 16px; font-size: 14px !important; padding: 12px 14px; }
.contact-form, .auth-card, .settings-card { padding: 22px 18px; border-radius: 20px; background: #171613; box-shadow: none; min-width: 0; }
.panel-form { gap: 18px; }
.panel-form label { font-size: 14px; gap: 8px; }
.panel-form input, .panel-form textarea, .panel-form select, .copy-link-row input { font-size: 16px; border-radius: 12px; min-height: 48px; padding: 12px; scroll-margin-top: calc(var(--header-height) + 16px); scroll-margin-bottom: calc(var(--mobile-nav-height) + 24px); }
.panel-form textarea { min-height: 150px; }
.panel-form .button { width: 100%; }
.form-errors { font-size: 14px; }
.auth-section { padding: 28px 0 40px; }
.auth-card > img { width: 92px; margin: 0 auto 12px; }
.auth-card h1 { font-size: 32px; line-height: 1.15; margin-bottom: 24px; }
.form-hint, .invite-expiry { font-size: 14px; }
.form-actions { align-items: stretch; }
.form-actions .button { flex: 1 1 140px; }
.empty-state { padding: 36px 18px; border-radius: 18px; font-size: 15px; }
.empty-state h3 { font-family: inherit; font-size: 22px; line-height: 1.35; }
.empty-state img { width: 110px; }
.flash { width: calc(100% - 36px); font-size: 14px; margin-bottom: 10px; }

.admin-hero, .admin-hero-compact { padding-top: 28px; padding-bottom: 24px; }
.admin-hero h1 { font-family: inherit; font-size: 30px; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.admin-subline { font-size: 14px; }
.admin-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 22px; }
.admin-actions .button { padding: 10px; font-size: 13px; width: 100%; }
.admin-actions > .button-gold { grid-column: 1 / -1; }
.admin-section { padding-top: 28px; padding-bottom: 12px; }
.mobile-admin-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: sticky; top: var(--header-height); z-index: 30; padding-block: 10px; background: rgba(12,12,11,.97); backdrop-filter: blur(18px); }
.mobile-admin-tabs a { min-height: 44px; border: 1px solid var(--line); border-radius: 12px; display: flex; gap: 8px; align-items: center; justify-content: center; color: var(--gold-light); font-size: 14px; font-weight: 600; }
.mobile-admin-tabs span { color: var(--muted); font-size: 12px; }
.is-admin #produkcje, .is-admin #wiadomosci { scroll-margin-top: 62px; }
.sort-bar { padding: 16px; margin-bottom: 18px; border-radius: 16px; gap: 12px; background: #171613; }
.sort-kicker { font-size: 12px; }
.sort-bar-copy strong { font-size: 14px; }
.sort-form { width: 100%; min-width: 0; }
.sort-form > label { font-size: 13px; }
.sort-form select { min-height: 48px; font-size: 16px; padding-left: 12px; }
.admin-table-wrap:has([data-mobile-table]) { border: 0; border-radius: 0; overflow: visible; }
.admin-table[data-mobile-table] { display: block; min-width: 0; width: 100%; }
.admin-table[data-mobile-table] thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.admin-table[data-mobile-table] tbody { display: grid; gap: 12px; }
.admin-table[data-mobile-table] tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); padding: 16px; gap: 12px 16px; border: 1px solid rgba(255,255,255,.09); border-radius: 16px; background: #171613; }
.admin-table[data-mobile-table] td { display: block; border: 0; padding: 0; min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.admin-table[data-mobile-table] td::before { content: attr(data-label); display: block; margin-bottom: 3px; font-size: 12px; font-weight: 600; color: var(--muted); }
.admin-table[data-mobile-table] td:first-child, .admin-table[data-mobile-table] td:last-child, .admin-table[data-mobile-table] td[colspan] { grid-column: 1 / -1; }
.admin-table[data-mobile-table] td:first-child::before { display: none; }
.admin-table[data-mobile-table] td:last-child:not(:first-child) { padding-top: 10px; border-top: 1px solid rgba(255,255,255,.07); }
.admin-table[data-mobile-table] td:last-child::before { display: none; }
.admin-production { min-width: 0; align-items: start; font-weight: 600; }
.admin-production img { width: 84px; flex: 0 0 84px; margin-top: 3px; }
.admin-production a { min-width: 0; }
.text-button { min-height: 44px; padding: 10px 12px; border-radius: 10px; background: rgba(216,160,74,.06); border: 1px solid rgba(216,160,74,.13); font-size: 14px; text-align: left; }
.text-button.danger { background: rgba(255,122,114,.055); border-color: rgba(255,122,114,.13); }
.message-filter-tabs { gap: 7px; }
.message-filter-tabs a { min-height: 44px; padding: 8px 10px; font-size: 13px; }
.message-card { padding: 18px; border-radius: 17px; }
.message-card-head, .message-card-head > div { min-width: 0; max-width: 100%; }
.message-card p, .message-card-head span { overflow-wrap: anywhere; }
.message-card p { font-size: 15px; line-height: 1.7; }
.message-delivery { gap: 10px; width: 100%; }
.message-actions-inline { gap: 8px; justify-content: start; }
.discord-status, .spam-status { font-size: 12px; line-height: 1.3; white-space: normal; }
.account-grid { gap: 18px; }
.settings-card h2 { font-family: inherit; font-size: 23px; font-weight: 600; line-height: 1.25; }
.user-card { padding: 18px; }
.user-card-top > div { min-width: 0; overflow-wrap: anywhere; }
.user-meta { gap: 10px; }
.user-meta dt { font-size: 12px; }
.user-meta dd { font-size: 14px; overflow-wrap: anywhere; }
.role-badge { font-size: 12px; white-space: normal; }
.user-card-actions { align-items: stretch; }
.user-card-actions .button { font-size: 14px; }
.invite-once-section { padding-top: 24px; }
.invite-once-card { padding: 20px 18px; }
.invite-once-card h2 { font-family: inherit; font-size: 23px; line-height: 1.3; }
.invite-once-card p { font-size: 15px; }
.copy-link-row { gap: 10px; }
.audit-row { padding: 14px; font-size: 14px; }
.audit-row > div { min-width: 0; overflow-wrap: anywhere; }
.audit-row time { font-size: 12px; }

.site-footer { margin-top: 28px; background: transparent; border-color: rgba(255,255,255,.07); }
.footer-grid { min-height: 0; padding: 24px 0 30px; gap: 16px; }
.footer-brand { display: flex; justify-content: center; gap: 10px; text-align: left; }
.footer-brand img { width: 44px; height: 44px; margin: 0; }
.footer-brand strong { font-size: 18px; }
.footer-brand p { font-size: 12px; }
.footer-links { gap: 2px 16px; font-size: 13px; }
.footer-links a { min-height: 44px; display: inline-flex; align-items: center; }
.copyright { font-size: 12px; }

@media (max-width: 359px) {
    .container { width: calc(100% - 28px); }
    .header-inner { gap: 6px; }
    .mobile-brand-name { font-size: 12px; }
    .mobile-brand-name span { font-size: 19px; }
    .brand, .scrolled .brand { gap: 5px; }
    .login-button { padding-inline: 11px; }
    .hero { margin-inline: 10px; }
    .hero-content { padding-inline: 16px; }
    .mobile-nav-icon { width: 40px; }
}

@media (max-height: 700px) {
    .hero { min-height: 350px; }
    .hero-content { padding-top: 100px; }
}