/* ═══════════════════════════════════════════════════════════════
   Layout-11  "Jornal de Amanhã"
   Prefix: lp11-

   Conceito: A tipografia é a protagonista absoluta.
   O evento vira manchete principal de um jornal editorial.
   Sem hero com imagem — o conteúdo começa na primeira dobra.

   Pilares visuais:
   ├─ Masthead de jornal: dateline + título em caixa alta + nav preta
   ├─ Capa (front page): grid 2 colunas com regras editoriais
   ├─ Manchete (headline XL) + lead com dropcap vermelho
   ├─ Info box "Ficha do Evento" estilo infográfico de jornal
   ├─ Classified ad vermelha: CTA de inscrição
   ├─ Programação: grid editorial 3 colunas com artigo em destaque
   └─ Rodapé: faixa preta com borda vermelha superior
   ═══════════════════════════════════════════════════════════════ */

/* ── Reset + Body ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

.lp11-body {
    background: #fafaf8;
    color: #111;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 16px;
    line-height: 1.65;
    margin: 0; padding: 0;
    -webkit-font-smoothing: antialiased;
}

/* ── Masthead (cabeçalho de jornal) ───────────────────────────── */
.lp11-masthead {
    background: #fafaf8;
    border-top: 4px solid #c0392b;
}

/* Dateline bar — linha de meta do evento */
.lp11-dateline {
    border-bottom: 1px solid #ccc;
    overflow: hidden;
    max-height: 34px;
    transition: max-height .35s ease;
}
.lp11-masthead.is-compact .lp11-dateline { max-height: 0; }

.lp11-dateline-inner {
    max-width: 1080px; margin: 0 auto; padding: 7px 24px;
    display: flex; justify-content: space-between;
    align-items: center; gap: 12px;
    font-family: system-ui, -apple-system, sans-serif;
    font-size: .68rem; color: #777;
}
.lp11-dl-edition {
    font-weight: 900; text-transform: uppercase;
    letter-spacing: .1em; color: #111;
}
.lp11-dl-item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Título principal (nome do evento como masthead de jornal) */
.lp11-title-wrap {
    text-align: center; padding: 12px 24px 10px;
    overflow: hidden;
    max-height: 92px;
    transition: max-height .35s ease, padding .35s ease;
}
.lp11-masthead.is-compact .lp11-title-wrap {
    max-height: 0; padding-top: 0; padding-bottom: 0;
}
.lp11-masthead-h1 {
    margin: 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(1.4rem, 3vw, 2.7rem);
    font-weight: 900; line-height: 1;
    text-transform: uppercase; letter-spacing: -.01em; color: #111;
}
.lp11-masthead-sub {
    margin: 5px 0 0;
    font-family: system-ui, sans-serif;
    font-size: .64rem; color: #aaa;
    text-transform: uppercase; letter-spacing: .14em;
}

/* Barra de seções (nav preta estilo jornal) */
.lp11-nav-bar { background: #111; position: sticky; top: 0; z-index: 200; }
.lp11-nav-inner {
    max-width: 1080px; margin: 0 auto; padding: 0 24px;
    display: flex; align-items: stretch;
}
.lp11-nav-links { display: flex; align-items: stretch; flex: 1; }
.lp11-nav-back {
    display: flex; align-items: center; gap: 5px;
    padding: 9px 14px;
    font-family: system-ui, sans-serif;
    font-size: .64rem; color: rgba(255,255,255,.4);
    text-decoration: none;
    border-right: 1px solid rgba(255,255,255,.08);
    transition: color .15s; white-space: nowrap; flex-shrink: 0;
}
.lp11-nav-back:hover { color: rgba(255,255,255,.8); }
.lp11-nav-link {
    display: flex; align-items: center;
    padding: 9px 16px;
    font-family: system-ui, sans-serif;
    font-size: .64rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .12em;
    color: rgba(255,255,255,.65); text-decoration: none;
    white-space: nowrap;
    border-right: 1px solid rgba(255,255,255,.07);
    transition: background .15s, color .15s;
}
.lp11-nav-link:hover  { background: rgba(255,255,255,.1); color: #fff; }
.lp11-nav-link.active { background: #c0392b; color: #fff; }
.lp11-nav-user { margin-left: auto; display: flex; align-items: center; }

/* Hamburger mobile */
.lp11-hamburger {
    display: none; flex-direction: column;
    justify-content: center; gap: 5px;
    width: 38px; height: 38px; background: none;
    border: none; cursor: pointer; padding: 8px; flex-shrink: 0;
}
.lp11-hamburger span {
    display: block; height: 2px;
    background: rgba(255,255,255,.8); border-radius: 2px;
    transition: transform .2s, opacity .2s;
}
.lp11-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.lp11-hamburger.is-open span:nth-child(2) { opacity: 0; }
.lp11-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── User dropdown ────────────────────────────────────────────── */
.lp11-user-drop { position: relative; }
.lp11-user-btn {
    display: flex; align-items: center; gap: 7px;
    background: none; border: none; padding: 6px 14px;
    cursor: pointer; color: rgba(255,255,255,.7);
    font-family: system-ui, sans-serif;
    font-size: .68rem; font-weight: 600; transition: color .15s;
}
.lp11-user-btn:hover { color: #fff; }
.lp11-user-av {
    width: 26px; height: 26px; background: #c0392b; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .62rem; font-weight: 700; color: #fff;
    overflow: hidden; flex-shrink: 0;
}
.lp11-user-menu {
    position: absolute; top: calc(100% + 4px); right: 0;
    min-width: 180px; background: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 6px 20px rgba(0,0,0,.12);
    z-index: 300; display: none;
}
.lp11-user-menu.show { display: block; }
.lp11-user-menu a, .lp11-user-menu button {
    display: block; width: 100%; padding: 9px 14px;
    font-family: system-ui, sans-serif;
    font-size: .78rem; color: #111; text-decoration: none;
    background: none; border: none; border-bottom: 1px solid #f0f0f0;
    text-align: left; cursor: pointer; transition: background .1s;
}
.lp11-user-menu a:last-child,
.lp11-user-menu button:last-child { border-bottom: none; }
.lp11-user-menu a:hover, .lp11-user-menu button:hover { background: #f5f5f5; }

/* Login button */
.lp11-login-btn {
    display: flex; align-items: center; gap: 6px;
    padding: 0 16px; background: #c0392b; color: #fff;
    border: none; cursor: pointer;
    font-family: system-ui, sans-serif;
    font-size: .64rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .12em;
    text-decoration: none; transition: background .15s;
    white-space: nowrap; align-self: stretch;
}
.lp11-login-btn:hover { background: #a93226; color: #fff; }

/* ── Container e seções ───────────────────────────────────────── */
.lp11-container {
    max-width: 1080px; margin: 0 auto; padding: 0 24px;
}

/* Blocos de Informação + Comissão Científica — alinhar/justificar com as seções do layout */
#blocos-informacao, #comissao-cientifica { padding: 0; }
#blocos-informacao .container, #comissao-cientifica .container { max-width: 1080px; width: 100%; margin: 0 auto; padding: 48px 24px; }
.lp11-page {
    padding-bottom: 0;
    min-height: calc(100vh - 160px);
}
.lp11-section {
    padding: 32px 0 42px;
    border-bottom: 3px solid #111;
}
.lp11-section:last-of-type { border-bottom: none; }
#sobre.lp11-section { border-bottom: none; }

/* Cabeçalho de seção (rubrica editorial) */
.lp11-section-head {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 26px;
}
.lp11-section-rule  { flex: 1; height: 2px; background: #111; }
.lp11-section-label {
    font-family: system-ui, sans-serif;
    font-size: .68rem; font-weight: 900;
    text-transform: uppercase; letter-spacing: .22em;
    color: #111; white-space: nowrap; padding: 0 2px;
}

/* ── CAPA: Front page grid ────────────────────────────────────── */
.lp11-front-grid {
    display: grid;
    grid-template-columns: 1fr 264px;
    gap: 0;
}
.lp11-front-lead {
    padding-right: 28px;
    border-right: 1px solid #ccc;
}
.lp11-front-side { padding-left: 24px; }

/* Foto de jornal (banner do evento) */
.lp11-jfoto { margin: 0 0 18px; }
.lp11-jfoto img {
    display: block; width: 100%; height: auto;
    border: 1px solid #d4d4d4;
    filter: grayscale(12%) contrast(1.04);
}
.lp11-jfoto-cap {
    font-family: system-ui, sans-serif;
    font-size: .64rem; color: #999; font-style: italic;
    border-top: 1px solid #ccc; padding: 4px 0 0; margin-top: 3px;
}

/* Rubric label */
.lp11-rubric {
    font-family: system-ui, sans-serif;
    font-size: .58rem; font-weight: 900;
    text-transform: uppercase; letter-spacing: .18em;
    color: #c0392b; margin: 0 0 8px;
}

/* Manchete principal (headline XL) */
.lp11-headline-xl {
    font-family: Georgia, serif;
    font-size: clamp(1.4rem, 2.4vw, 2.2rem);
    font-weight: 900; line-height: 1.1;
    letter-spacing: -.02em; color: #111;
    margin: 0 0 14px;
    padding-bottom: 14px; border-bottom: 1px solid #ccc;
}

/* Lead text com dropcap vermelho */
.lp11-lead-text {
    font-size: .95rem; line-height: 1.78; color: #222; margin: 0;
}
.lp11-lead-text.dropcap::first-letter {
    float: left;
    font-size: 3.5em; line-height: .82;
    font-weight: 900; color: #c0392b;
    margin: 4px 8px 0 0;
    font-family: Georgia, serif;
}

/* ── Info box "Ficha do Evento" ───────────────────────────────── */
.lp11-info-box {
    border: 2px solid #111; margin-bottom: 18px; background: #fff;
}
.lp11-info-box-head {
    background: #111; color: #fafaf8;
    font-family: system-ui, sans-serif;
    font-size: .58rem; font-weight: 900;
    text-transform: uppercase; letter-spacing: .18em;
    padding: 6px 12px;
}
.lp11-info-dl {
    margin: 0; padding: 12px 14px;
    display: grid; grid-template-columns: auto 1fr; gap: 7px 12px;
}
.lp11-info-dl dt {
    font-family: system-ui, sans-serif;
    font-size: .62rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em;
    color: #999; white-space: nowrap; align-self: start; padding-top: 1px;
}
.lp11-info-dl dd { margin: 0; font-size: .82rem; color: #111; line-height: 1.4; }

/* Status badge */
.lp11-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: system-ui, sans-serif;
    font-size: .58rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .12em;
    padding: 2px 7px; border: 1.5px solid currentColor;
}
.lp11-badge.aberto    { color: #16a34a; }
.lp11-badge.futuro    { color: #2563eb; }
.lp11-badge.andamento { color: #d97706; }
.lp11-badge.encerrado { color: #999; }

/* ── Classified ad (CTA de inscrição) ────────────────────────── */
.lp11-classified { border: 2px solid #c0392b; background: #fff; }
.lp11-classified-head {
    background: #c0392b; color: #fff;
    font-family: system-ui, sans-serif;
    font-size: .58rem; font-weight: 900;
    text-transform: uppercase; letter-spacing: .22em;
    padding: 6px 12px; text-align: center;
}
.lp11-classified-body { padding: 14px; }
.lp11-classified-title {
    font-family: Georgia, serif;
    font-size: 1rem; font-weight: 900; line-height: 1.2;
    color: #111; margin: 0 0 8px;
}
.lp11-classified-text {
    font-size: .78rem; color: #555; line-height: 1.55; margin: 0;
}
.lp11-classified-cta {
    display: block; width: 100%; margin-top: 12px; padding: 10px 0;
    background: #c0392b; color: #fff; border: none; cursor: pointer;
    font-family: system-ui, sans-serif;
    font-size: .74rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .14em;
    text-align: center; transition: background .15s;
}
.lp11-classified-cta:hover { background: #a93226; }
.lp11-classified-cta:disabled { background: #ddd; color: #aaa; cursor: not-allowed; }
.lp11-classified-alert {
    margin: 8px 14px 0;
    font-family: system-ui, sans-serif; font-size: .74rem;
}
.lp11-classified-counter {
    padding: 8px 14px;
    font-family: system-ui, sans-serif;
    font-size: .64rem; color: #bbb;
    border-top: 1px solid #f5d5d2; text-align: center;
}

/* Countdown no classified */
.lp11-countdown {
    display: none; flex-direction: column; align-items: center;
    padding: 10px 14px 2px; border-top: 1px solid #f5d5d2;
}
.lp11-countdown.visible { display: flex; }
.lp11-cnt-label {
    font-family: system-ui, sans-serif;
    font-size: .58rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .12em;
    color: #bbb; margin: 0 0 7px;
}
.lp11-cnt-row { display: flex; gap: 6px; align-items: baseline; }
.lp11-cnt-unit { text-align: center; }
.lp11-cnt-num {
    display: block; font-family: system-ui, sans-serif;
    font-size: 1.3rem; font-weight: 900; line-height: 1; color: #111;
}
.lp11-cnt-lbl {
    font-size: .54rem; color: #bbb;
    text-transform: uppercase; letter-spacing: .08em;
}
.lp11-cnt-sep { font-size: 1rem; font-weight: 900; color: #ddd; padding: 0 1px; }

/* ── PROGRAMAÇÃO: editorial grid ──────────────────────────────── */
.lp11-day-block { margin-bottom: 38px; }

/* Cabeçalho do dia */
.lp11-day-head {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 20px;
}
.lp11-day-badge {
    background: #111; color: #fafaf8;
    font-family: system-ui, sans-serif;
    font-size: .6rem; font-weight: 900;
    text-transform: uppercase; letter-spacing: .14em;
    padding: 5px 12px; white-space: nowrap; flex-shrink: 0;
}
.lp11-day-rule { flex: 1; height: 1px; background: #bbb; }

/* Grid editorial */
.lp11-editorial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 0;
    row-gap: 0;
}

/* Artigo normal */
.lp11-act-article {
    background: #fafaf8;
    padding: 16px 20px 20px;
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
}
.lp11-act-article:nth-child(3n),
.lp11-act-article:last-child {
    border-right: none;
}

/* Artigo em destaque — primeira atividade do dia com 2+ atividades */
.lp11-act-article.lp11-featured {
    grid-column: 1 / -1;
    background: #fafaf8;
    padding: 18px 0 20px;
    border-bottom: 1px solid #ccc;
}
.lp11-featured-cols {
    display: grid; grid-template-columns: 1fr 2fr;
    column-gap: 0;
    border-top: 3px solid #c0392b; padding-top: 14px; margin-top: 10px;
}
.lp11-featured-meta { padding-right: 24px; }
.lp11-featured-body {
    border-left: 1px solid #ccc; padding-left: 24px;
}

/* Headline da atividade em destaque */
.lp11-act-headline-xl {
    font-family: Georgia, serif;
    font-size: 1.35rem; font-weight: 900; line-height: 1.15;
    color: #111; margin: 0 0 4px;
}

/* Headline do artigo normal */
.lp11-act-headline {
    font-family: Georgia, serif;
    font-size: .9rem; font-weight: 700; line-height: 1.28;
    color: #111; margin: 0 0 7px;
}

/* Tipo de atividade (rubric do artigo) */
.lp11-act-rubric {
    font-family: system-ui, sans-serif;
    font-size: .56rem; font-weight: 900;
    text-transform: uppercase; letter-spacing: .16em;
    color: #c0392b; margin: 0 0 5px;
}

/* Dateline e byline */
.lp11-act-dateline {
    font-family: system-ui, sans-serif;
    font-size: .66rem; color: #888;
    display: flex; gap: 5px; flex-wrap: wrap; align-items: center;
    margin: 0 0 5px;
}
.lp11-act-dateline .lp11-sep { color: #d0d0d0; }
.lp11-act-byline {
    font-family: system-ui, sans-serif;
    font-size: .66rem; font-style: italic; color: #777;
    margin: 0 0 8px;
}

/* Preview (descrição truncada) */
.lp11-act-preview {
    font-size: .78rem; color: #555; line-height: 1.6;
    margin: 0 0 10px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.lp11-featured-body .lp11-act-preview { -webkit-line-clamp: 5; font-size: .83rem; }

/* Vagas + botão de inscrição */
.lp11-act-foot {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding-top: 8px; border-top: 1px solid #eee; margin-top: 4px;
}
.lp11-vagas {
    font-family: system-ui, sans-serif; font-size: .64rem; color: #bbb;
}
.lp11-vagas.sem { color: #c0392b; font-weight: 700; }
.lp11-act-inscr-btn {
    font-family: system-ui, sans-serif;
    font-size: .62rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .1em;
    color: #c0392b; background: none;
    border: 1.5px solid #c0392b; padding: 3px 9px;
    cursor: pointer; transition: background .15s, color .15s;
}
.lp11-act-inscr-btn:hover { background: #c0392b; color: #fff; }

/* Empty state */
.lp11-prog-empty {
    font-family: system-ui, sans-serif;
    font-size: .88rem; color: #bbb; text-align: center;
    padding: 40px 0; font-style: italic;
    border: 1px dashed #ddd;
}

/* ── Footer jornal ────────────────────────────────────────────── */
.lp11-footer {
    background: #111;
    border-top: 4px solid #c0392b;
    padding: 14px 24px;
    font-family: system-ui, sans-serif;
    font-size: .66rem; color: rgba(255,255,255,.38);
    text-align: center; line-height: 1.9;
}
.lp11-footer a { color: rgba(255,255,255,.38); text-decoration: none; transition: color .15s; }
.lp11-footer a:hover { color: rgba(255,255,255,.75); }
.lp11-footer-sep { margin: 0 8px; }

/* ── Scroll margin para o header fixo ────────────────────────── */
.lp11-section { scroll-margin-top: 42px; }
#inscricao    { scroll-margin-top: 42px; }

/* ═══════════════════ RESPONSIVE ═══════════════════════════════ */
@media (max-width: 900px) {
    .lp11-front-grid { grid-template-columns: 1fr; }
    .lp11-front-lead {
        padding-right: 0; border-right: none;
        border-bottom: 1px solid #ccc; padding-bottom: 24px; margin-bottom: 24px;
    }
    .lp11-front-side { padding-left: 0; }

    .lp11-editorial-grid { grid-template-columns: repeat(2, 1fr); }
    .lp11-act-article:nth-child(3n) { border-right: 1px solid #ccc; }
    .lp11-act-article:nth-child(2n),
    .lp11-act-article:last-child { border-right: none; }
    .lp11-act-article.lp11-featured .lp11-featured-cols {
        grid-template-columns: 1fr; gap: 0;
    }
    .lp11-featured-body { border-left: none; padding-left: 0; border-top: 1px solid #ccc; padding-top: 12px; margin-top: 12px; }
}

@media (max-width: 640px) {
    .lp11-masthead-h1 { font-size: 1.18rem; letter-spacing: 0; }
    .lp11-dl-item:not(.lp11-dl-edition) { display: none; }

    .lp11-nav-links {
        display: none; flex-direction: column; position: absolute;
        top: 100%; left: 0; right: 0; background: #111; z-index: 100;
    }
    .lp11-nav-links.is-open { display: flex; }
    .lp11-nav-links .lp11-nav-link {
        border-right: none; border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .lp11-hamburger { display: flex; }
    .lp11-nav-user  { display: none; }

    .lp11-editorial-grid { grid-template-columns: 1fr; column-gap: 0; }
    .lp11-act-article { border-right: none; border-bottom: 1px solid #ddd; }
    .lp11-act-article.lp11-featured .lp11-featured-cols {
        grid-template-columns: 1fr; gap: 0;
    }
    .lp11-featured-body { border-left: none; padding-left: 0; border-top: 1px solid #ccc; padding-top: 12px; margin-top: 12px; }
    .lp11-featured-meta { padding-right: 0; }

    .lp11-section { padding: 22px 0 30px; }
    .lp11-container { padding: 0 16px; }
}

/* ── Submissões no estilo editorial (tema "Jornal de Amanhã") ──────
   Sobrepõe o estilo autocontido (evsub-*) com a linguagem do 11: separador
   preto de seção, container alinhado, título-manchete serif, cards quadrados
   com faixa preta e CTA "classificado" vermelho. #submissoes vence o <style>
   do partial. */
#submissoes.evsub-section {
    padding: 32px 0 42px;
    border-bottom: 3px solid #111;
    scroll-margin-top: 42px;
}
#submissoes .evsub-wrap { max-width: 1080px; padding: 0 24px; }

#submissoes .evsub-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.7rem; font-weight: 900; color: #111;
    letter-spacing: -.01em;
}
#submissoes .evsub-title i { color: #c0392b; }

#submissoes .evsub-card {
    border: 2px solid #111; border-radius: 0;
    background: #fff; box-shadow: none;
}
#submissoes .evsub-head {
    background: #111; color: #fff; border-bottom: none;
}
#submissoes .evsub-card-title { font-family: Georgia, serif; color: #fff; }

#submissoes .evsub-desc { color: #555; }
#submissoes .evsub-info { color: #111; }
#submissoes .evsub-info li span { color: #777; }
#submissoes .evsub-i-av { color: #777; }
#submissoes .evsub-tpls-lbl { color: #777; }
#submissoes .evsub-tpls a { color: #c0392b; }

/* Botão = anúncio classificado vermelho */
#submissoes .evsub-btn {
    background: #c0392b; color: #fff; border-radius: 0;
    font-family: system-ui, sans-serif; font-weight: 700;
    text-transform: uppercase; letter-spacing: .12em; font-size: .82rem;
}
#submissoes .evsub-btn:hover { background: #a93226; color: #fff; }
#submissoes .evsub-btn--off,
#submissoes .evsub-btn:disabled {
    background: #ddd; color: #aaa; border-radius: 0;
}

@media (max-width: 900px) {
    #submissoes.evsub-section { padding: 22px 0 30px; }
    #submissoes .evsub-wrap { padding: 0 16px; }
}