/*
 * landing-filmes.css — landing de unidade com filmes (/cinemaisartetramandai).
 * Hero cinematográfico, cards "Em breve", diálogo de detalhes e seção da unidade.
 * Depende de landing-base.css.
 */

/* ── Pôster 2:3 (espaço reservado; fallback com o título fica por baixo da imagem) ── */

.lp-poster {
    position: relative;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    border-radius: var(--lp-radius);
    background: var(--lp-surface-2);
    box-shadow: 0 14px 36px rgba(0, 0, 0, .5);
}

.lp-poster img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lp-poster__fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 12%;
    background: linear-gradient(160deg, #2b2b2b, #151515);
    color: var(--lp-muted);
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    overflow-wrap: anywhere;
}

.lp-meta {
    display: flex;
    flex-wrap: wrap;
    row-gap: 2px;
    list-style: none;
    color: rgba(255, 255, 255, .88);
    font-size: .875rem;
    font-weight: 600;
}

.lp-meta li + li::before {
    content: '•';
    margin-inline: 8px;
    color: var(--lp-accent-text);
}

.lp-situacao {
    display: flex;
    flex-wrap: wrap;
    gap: 0 6px;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.4;
}

.lp-situacao__rotulo { color: var(--lp-accent-text); font-weight: 700; }
.lp-situacao--a-confirmar,
.lp-situacao--nao-confirmado { color: var(--lp-muted); }

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

.lp-hero {
    position: relative;
    background: var(--lp-bg);
}

.lp-hero__slides { display: grid; }

.lp-slide {
    position: relative;
    display: flex;
    flex-direction: column;
    grid-area: 1 / 1;
    min-width: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease, visibility 0s linear .5s;
}

.lp-slide.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity .5s ease, visibility 0s;
}

/* Mobile: backdrop no topo, com recorte que privilegia o centro-alto da cena. */
.lp-slide__media {
    position: relative;
    height: clamp(260px, 66vw, 460px);
    overflow: hidden;
    background: var(--lp-surface);
}

.lp-slide__backdrop {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 20%;
}

.lp-slide__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(var(--lp-bg-rgb), .78) 0%, rgba(var(--lp-bg-rgb), 0) 30%),
        linear-gradient(0deg, var(--lp-bg) 0%, rgba(var(--lp-bg-rgb), .62) 24%, rgba(var(--lp-bg-rgb), 0) 58%);
    pointer-events: none;
}

.lp-slide__content {
    position: relative;
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 18px 16px;
    margin-top: -64px;
}

.lp-slide__poster { grid-area: 1 / 1; }
.lp-slide__head { grid-area: 1 / 2; align-self: end; min-width: 0; }
.lp-slide__texto { grid-column: 1 / -1; }

.lp-slide__head .lp-eyebrow { margin-bottom: 8px; }

.lp-slide__titulo {
    margin-bottom: 10px;
    font-size: clamp(1.5rem, 1rem + 3.4vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.08;
    text-wrap: balance;
    overflow-wrap: break-word;
}

.lp-slide__sinopse {
    display: -webkit-box;
    max-width: 60ch;
    overflow: hidden;
    color: rgba(255, 255, 255, .88);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
}

.lp-slide__situacao { margin-top: 12px; font-size: .9375rem; }

.lp-slide .lp-acoes { margin-top: 22px; }
.lp-slide .lp-acoes .lp-btn { flex: 1 1 100%; }

.lp-hero__controles {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    margin-top: 24px;
}

.lp-seta {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease;
}

.lp-seta:hover { border-color: var(--lp-accent); background: var(--lp-accent); }

.lp-pontos { display: flex; align-items: center; }

.lp-ponto {
    position: relative;
    width: 36px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.lp-ponto::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .5);
    transform: translate(-50%, -50%);
    transition: width .25s ease, background-color .25s ease;
}

.lp-ponto:hover::before { background: #fff; }
.lp-ponto.is-active::before { width: 26px; background: var(--lp-accent); }

.lp-hero__vazio {
    padding-block: calc(var(--lp-header-h) + clamp(56px, 10vw, 120px)) clamp(48px, 8vw, 96px);
    background: radial-gradient(800px 420px at 80% 0%, rgba(var(--lp-accent-rgb), .3), rgba(var(--lp-accent-rgb), 0) 70%);
}

.lp-hero__vazio-titulo {
    max-width: 16ch;
    font-size: clamp(2rem, 1.2rem + 4vw, 4rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.05;
}

@media (min-width: 520px) {
    .lp-slide__content { grid-template-columns: 132px minmax(0, 1fr); gap: 20px; margin-top: -88px; }
    .lp-slide .lp-acoes .lp-btn { flex: 0 1 auto; }
}

/* Desktop: backdrop preenche o fundo; pôster à esquerda, informações ao lado. */
@media (min-width: 900px) {
    .lp-slide {
        justify-content: flex-end;
        min-height: clamp(620px, 90vh, 880px);
    }

    .lp-slide__media {
        position: absolute;
        inset: 0 0 0 auto;
        width: 80%;
        height: auto;
        background: var(--lp-bg);
    }

    .lp-slide__backdrop { object-position: 50% 15%; }

    .lp-slide__media::after {
        background:
            linear-gradient(90deg, var(--lp-bg) 0%, rgba(var(--lp-bg-rgb), .84) 20%, rgba(var(--lp-bg-rgb), .4) 48%, rgba(var(--lp-bg-rgb), 0) 72%),
            linear-gradient(0deg, var(--lp-bg) 0%, rgba(var(--lp-bg-rgb), .6) 18%, rgba(var(--lp-bg-rgb), 0) 46%),
            linear-gradient(180deg, rgba(var(--lp-bg-rgb), .8) 0%, rgba(var(--lp-bg-rgb), 0) 24%);
    }

    .lp-slide__content {
        grid-template-columns: clamp(220px, 21vw, 290px) minmax(0, 620px);
        gap: 20px clamp(32px, 4vw, 56px);
        margin-top: 0;
        padding-top: calc(var(--lp-header-h) + 48px);
        padding-bottom: 120px;
    }

    .lp-slide__poster { grid-area: 1 / 1 / span 2 / 2; align-self: end; }
    .lp-slide__head { grid-area: 1 / 2; }
    .lp-slide__texto { grid-area: 2 / 2; }

    .lp-slide__titulo {
        margin-bottom: 14px;
        font-size: clamp(2.5rem, 1.2rem + 3.4vw, 4.25rem);
        line-height: 1.02;
    }

    .lp-meta { font-size: 1rem; }
    .lp-slide__sinopse { font-size: 1.0625rem; }

    .lp-hero__controles {
        position: absolute;
        right: 0;
        bottom: 44px;
        left: 0;
        justify-content: flex-end;
        margin-top: 0;
        pointer-events: none;
    }

    .lp-hero__controles > * { pointer-events: auto; }
}

/* ── Em breve ────────────────────────────────────────────────────────────── */

.lp-em-breve { padding-top: clamp(48px, 6vw, 80px); }

.lp-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 16px;
    list-style: none;
}

/* Telas muito estreitas: uma coluna. */
@media (max-width: 339.98px) {
    .lp-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 700px) {
    .lp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; }
}

@media (min-width: 1024px) {
    .lp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 28px; }
}

.lp-card { display: flex; flex-direction: column; min-width: 0; }

.lp-card__poster { cursor: pointer; transition: transform .25s ease; }
.lp-card__poster:hover { transform: translateY(-4px); }

.lp-card__corpo {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 6px;
    padding-top: 14px;
}

.lp-card__titulo {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: break-word;
}

.lp-card__genero { color: var(--lp-muted); font-size: .8125rem; line-height: 1.4; }

.lp-card__acao { margin-top: auto; }
.lp-card__situacao { margin-bottom: 10px; }

@media (min-width: 700px) {
    .lp-card__titulo { font-size: 1.0625rem; }
    .lp-card__genero, .lp-card__situacao { font-size: .875rem; }
}

/* ── Diálogo de detalhes ─────────────────────────────────────────────────── */

.lp-detalhe__topo {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--lp-surface-2);
}

.lp-detalhe__backdrop {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 20%;
}

.lp-detalhe__topo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, var(--lp-surface) 0%, rgba(var(--lp-surface-rgb), .5) 30%, rgba(var(--lp-surface-rgb), 0) 65%);
}

.lp-detalhe__corpo {
    position: relative;
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 18px 16px;
    margin-top: -56px;
    padding: 0 20px 24px;
}

.lp-detalhe__poster { grid-area: 1 / 1; }
.lp-detalhe__head { grid-area: 1 / 2; align-self: end; min-width: 0; }
.lp-detalhe__texto { grid-column: 1 / -1; }

.lp-detalhe__titulo {
    margin-bottom: 8px;
    font-size: clamp(1.375rem, 1rem + 2vw, 2rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.12;
    overflow-wrap: break-word;
}

.lp-detalhe__titulo:focus { outline: none; }

.lp-detalhe__subtitulo {
    margin-bottom: 8px;
    color: var(--lp-muted);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.lp-detalhe__sinopse { color: rgba(255, 255, 255, .9); }
.lp-detalhe__sinopse--vazia { color: var(--lp-muted); }

.lp-datas { display: grid; gap: 10px; margin-top: 20px; }

.lp-datas__item {
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--lp-radius-sm);
    background: rgba(255, 255, 255, .05);
}

.lp-datas__item--local {
    border-color: rgba(var(--lp-accent-rgb), .6);
    background: rgba(var(--lp-accent-rgb), .12);
}

.lp-datas dt { color: var(--lp-muted); font-size: .75rem; font-weight: 600; line-height: 1.4; }
.lp-datas dd { margin-top: 2px; font-weight: 700; }

.lp-detalhe__nota { margin-top: 12px; color: var(--lp-muted); font-size: .8125rem; line-height: 1.5; }
.lp-detalhe .lp-acoes .lp-btn { flex: 1 1 100%; }

@media (min-width: 560px) {
    .lp-datas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 700px) {
    .lp-detalhe__topo { aspect-ratio: 16 / 7; }

    .lp-detalhe__corpo {
        grid-template-columns: 160px minmax(0, 1fr);
        gap: 20px 28px;
        margin-top: -88px;
        padding: 0 32px 32px;
    }

    .lp-detalhe__poster { grid-area: 1 / 1 / span 2 / 2; }
    .lp-detalhe__texto { grid-area: 2 / 2; }
    .lp-detalhe .lp-acoes .lp-btn { flex: 0 1 auto; }
}

.lp-tmdb {
    margin-top: 20px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--lp-radius);
    background: rgba(255, 255, 255, .05);
}

.lp-tmdb__logo { width: auto; height: 16px; margin-bottom: 12px; }

/* ── Unidade ─────────────────────────────────────────────────────────────── */

.lp-unidade__grid { display: grid; gap: 32px; }

@media (min-width: 900px) {
    .lp-unidade__grid {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
        gap: clamp(40px, 6vw, 80px);
        align-items: center;
    }
}

.lp-unidade__foto {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 16px;
    object-fit: cover;
}

/* Sem foto real cadastrada: painel neutro com a marca (não simula o espaço físico). */
.lp-unidade__painel {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 16px;
    background:
        radial-gradient(60% 60% at 50% 38%, rgba(var(--lp-accent-rgb), .26), rgba(var(--lp-accent-rgb), 0) 72%),
        var(--lp-surface);
}

.lp-unidade__painel img { width: min(38%, 170px); height: auto; }

.lp-unidade__painel span {
    padding-left: .32em;
    color: var(--lp-muted);
    font-size: .875rem;
    font-weight: 800;
    letter-spacing: .32em;
    text-transform: uppercase;
}

.lp-dados { display: grid; gap: 22px; margin-top: 28px; }

.lp-dados dt {
    display: flex;
    gap: 10px;
    align-items: center;
    color: var(--lp-muted);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.lp-dados dt .lp-icone { color: var(--lp-accent-text); }
.lp-dados dd { margin: 6px 0 0 30px; font-weight: 500; }
.lp-dados__linha { display: block; }
.lp-dados dd a { text-underline-offset: 3px; }
.lp-dados__lista { padding-left: 18px; }