/* ===== Public Event Page (.pe-) ===== */

/* Card wrapper */
.pe-card {
    width: 100%;
    background: var(--bg-card);
    /* Refinement: flat, editorial edge (1px hairline) instead of a drop shadow,
       with more internal padding and inter-card spacing so content breathes. */
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 1.25rem;
    box-shadow: none;
}

/* Section title */
.pe-section-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.01em;
    margin-bottom: 1rem;
}

/* Hero */
.pe-hero {
    width: 100%;
    text-align: center;
    margin-bottom: 1.5rem;
}

/* Marketing poster — sized large enough to read inner text/details.
   Portrait posters keep their aspect ratio: width-driven, no forced
   square crop. Capped by viewport so it never overflows the card.
   The poster is click-to-fullscreen (see LightboxImage) — pointer cursor
   and a subtle lift on hover signal the affordance. */
.pe-hero-img {
    display: block;
    margin: 0 auto;
    width: auto;
    max-width: min(460px, 100%);
    height: auto;
    max-height: 80vh;
    object-fit: contain;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    cursor: pointer;
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease;
}
.pe-hero-img:hover,
.pe-hero-img:focus-visible {
    transform: scale(1.01);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* On small screens, let the poster breathe within the card while
   staying readable — cap at viewport width minus card padding. */
@media (max-width: 480px) {
    .pe-hero-img {
        max-width: calc(100vw - 2.5rem);
        max-height: 70vh;
    }
}

/* Event name + tagline */
.pe-name-block {
    width: 100%;
    text-align: center;
    margin-bottom: 1.5rem;
}

.pe-name {
    font-size: 1.7rem;
    font-weight: 700;
    color: #fff;
    /* Tighter tracking reads as more editorial/intentional at display sizes. */
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.pe-tagline {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0;
}

/* Share row */
.pe-share-row {
    width: 100%;
    text-align: center;
    margin-bottom: 1rem;
}

.pe-share-copied {
    color: var(--success);
    font-size: 0.8rem;
    margin-left: 0.5rem;
}

/* Detail rows */
.pe-detail-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.pe-detail-text {
    color: var(--text-primary);
    font-size: 0.95rem;
}

.pe-detail-secondary {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Capacity dashboard grid */
.pe-capacity-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.pe-capacity-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem 0.5rem;
    background: var(--bg-secondary);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    text-align: center;
}

.pe-capacity-number {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
}

.pe-capacity-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

/* Refund items */
.pe-refund-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.pe-refund-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.pe-check {
    color: #34d399;
}

.pe-refund-text {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* Hybrid note */
.pe-hybrid-note {
    margin-top: 0.75rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1.4;
}

/* Auth bar */
.pe-auth-bar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 0.6rem 1rem;
    margin-bottom: 0.75rem;
    box-shadow: var(--shadow);
}

/* Form elements */
.pe-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* Persistent top-aligned field label */
.pe-field-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 0.125rem;
}

.pe-input {
    width: 100%;
    padding: 0.7rem 0.85rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.15s ease;
}
.pe-input:focus {
    border-color: var(--accent);
}

.pe-input--error {
    border-color: #f87171;
    animation: pe-shake 0.3s ease;
}

@keyframes pe-shake {
    0%,
    100% {
        transform: translateX(0);
    }
    20% {
        transform: translateX(-3px);
    }
    40% {
        transform: translateX(3px);
    }
    60% {
        transform: translateX(-2px);
    }
    80% {
        transform: translateX(2px);
    }
}

.pe-input--locked {
    color: var(--text-muted);
    opacity: 0.7;
    cursor: not-allowed;
}

.pe-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.pe-required {
    color: #f87171;
}

.pe-field-error {
    color: #f87171;
    font-size: 0.8rem;
}

.pe-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    cursor: pointer;
}

.pe-checkbox {
    margin-top: 0.2rem;
    accent-color: var(--accent);
}

/* Developer profile section (Issue #049) */
.pe-dev-profile-section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-top: 0.25rem;
}

.pe-dev-profile-section .pe-label {
    font-weight: 600;
    color: var(--text-primary);
}

.pe-multiselect-group {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.pe-multiselect-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.pe-multiselect-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 0.75rem;
}

.pe-multiselect-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    cursor: pointer;
}

.pe-multiselect-item span {
    white-space: nowrap;
}

.pe-submit-btn {
    width: 100%;
    padding: 0.85rem;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition:
        background 0.15s ease,
        transform 0.1s ease;
}
.pe-submit-btn:hover {
    background: var(--accent-hover);
}
.pe-submit-btn:active {
    transform: translateY(1px);
}

.pe-success-box {
    padding: 0.75rem;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-size: 0.875rem;
}

.pe-error-box {
    padding: 0.75rem;
    background: rgba(239, 68, 68, 0.1);
    border-radius: var(--radius);
    margin-bottom: 1rem;
    color: #f87171;
    font-size: 0.85rem;
}

/* Loading / error states */
.pe-loading {
    text-align: center;
    padding: 3rem 0;
}

.pe-error-title {
    font-size: 1.5rem;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

/* Footer */
.pe-footer {
    width: 100%;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

/* Misc */
.pe-back-link {
    color: var(--text-secondary);
    font-size: 0.85rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.pe-description {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
    white-space: pre-line;
    margin: 0;
}

.pe-nft-img {
    max-width: 120px;
    border-radius: var(--radius);
}

.pe-ext-link {
    color: var(--accent);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
}

/* Back link wrapper */
.pe-back-wrap {
    width: 100%;
    margin-bottom: 1rem;
}

/* Container with no gap */
.pe-container-nogap {
    gap: 0;
}

/* Text center */
.pe-text-center {
    text-align: center;
}

/* Icon wrapper with margin bottom */
.pe-icon-mb {
    margin-bottom: 1rem;
}

/* Icon wrapper with smaller margin */
.pe-icon-mb-sm {
    margin-bottom: 0.5rem;
}

/* Large success icon wrapper */
.pe-success-icon-lg {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

/* Error/action message spacing */
.pe-msg-mb-lg {
    margin-bottom: 1.5rem;
}

/* Medium bottom margin */
.pe-mb-1 {
    margin-bottom: 1rem;
}

/* Small bottom margin */
.pe-mb-075 {
    margin-bottom: 0.75rem;
}

/* Tiny bottom margin */
.pe-mb-025 {
    margin-bottom: 0.25rem;
}
.pe-mt-025 {
    margin-top: 0.25rem;
}

/* Flex row with small gap */
.pe-flex-row-gap {
    display: flex;
    gap: 0.5rem;
}

/* Flex column with medium gap */
.pe-flex-col-gap-md {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Centered button row */
.pe-btn-row-center {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

/* Success colored title */
.pe-title-success {
    color: var(--success);
    margin-bottom: 0.5rem;
}

/* Success colored text */
.pe-text-success {
    color: var(--success);
    font-weight: 600;
    font-size: 0.95rem;
}

/* Accent bold text */
.pe-text-accent-bold {
    color: var(--accent);
    font-weight: 600;
    font-size: 0.95rem;
}

/* Countdown capsule badge */
.pe-countdown-capsule {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--accent);
    font-weight: 600;
    font-size: 0.85rem;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.25);
    border-radius: 9999px;
    padding: 0.2rem 0.6rem;
    box-shadow: 0 0 8px rgba(139, 92, 246, 0.15);
}

/* Format badge row */
.pe-badge-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

/* Time indent */
.pe-time-indent {
    margin-left: 1.6rem;
    margin-bottom: 0.75rem;
}

/* Emoji icon sizing */
.pe-emoji-icon {
    font-size: 0.9rem;
}

/* Left margin indent for field errors */
.pe-field-error-indent {
    margin-left: 1.5rem;
}

/* Footer accent link */
.pe-footer-link {
    color: var(--accent);
    text-decoration: none;
}

/* ── Landing Page Layout ─────────────────────────────────────────── */

.landing-page {
    min-height: 100vh;
    width: 100%;
}

.landing-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(15, 15, 15, 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}

.landing-nav-inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 0.85rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.landing-nav-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.landing-nav-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

@media (max-width: 768px) {
    .landing-desktop-only-btn {
        display: none !important;
    }
}

/* ── Landing Brand Gradient ──────────────────────────────────────── */

.landing-brand-gradient {
    background: linear-gradient(135deg, #ff7b5c 0%, #ff5c39 40%, #ffab4d 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.landing-brand-name {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.landing-hero-brand {
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    margin-bottom: 0.75rem;
}

.landing-footer-brand-name {
    font-weight: 800;
    font-size: 1.1rem;
}

/* ── Landing Sections ────────────────────────────────────────────── */

.landing-section {
    max-width: 960px;
    margin: 0 auto;
    padding: 3rem 1.5rem 4rem;
}

.landing-section-sm {
    max-width: 960px;
    margin: 0 auto;
    padding: 1rem 1.5rem 3rem;
}

.landing-section-narrow {
    max-width: 720px;
    margin: 0 auto;
    padding: 3rem 1.5rem 4rem;
}

/* ── Landing Section Headers ─────────────────────────────────────── */

.landing-section-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.landing-section-header-sm {
    text-align: center;
    margin-bottom: 1.5rem;
}

/* ── Landing Typography ──────────────────────────────────────────── */

.landing-h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.5rem;
}

.landing-subtitle {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.landing-email-text {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

/* ── Landing Hero ────────────────────────────────────────────────── */

.landing-hero {
    max-width: 960px;
    margin: 0 auto;
    padding: 5rem 1.5rem 3rem;
    text-align: center;
}

.landing-hero-h1 {
    font-size: clamp(1.9rem, 5.2vw, 3rem);
    /* Refinement: 700 (not 800) + tight tracking reads editorial, not shouty. */
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.12;
    margin-bottom: 1.25rem;
    color: #fff;
}

.landing-hero-gradient {
    /* Calmer two-tone indigo instead of a tri-colour rainbow — restrained but
       still on-brand. */
    background: linear-gradient(135deg, #ffa184, #ff7b5c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.landing-hero-desc {
    font-size: 1.05rem;
    color: var(--text-secondary);
    max-width: 500px;
    margin: 0 auto 2.5rem;
    line-height: 1.6;
}

/* ── Landing CTAs ─────────────────────────────────────────────────── */

.landing-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

.landing-cta-link {
    padding: 0.85rem 2rem;
    font-size: 1rem;
    text-decoration: none;
}

/* ── Persona Toggle ──────────────────────────────────────────────── */

.landing-persona-toggle {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-bottom: 1.5rem;
}

.landing-persona-btn {
    padding: 0.45rem 1.25rem;
    font-size: 0.8rem;
    font-weight: 600;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.2s;
}

.landing-persona-btn:first-child {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.landing-persona-btn:last-child {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}