/* Um grid, três áreas. O mesmo seletor gruda no topo da página no celular e
   no topo da coluna de conteúdo no desktop — uma implementação, dois
   comportamentos, sem duplicar markup. */

.shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    'rail'
    'selector'
    'content';
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-bottom: var(--space-8);
}

.rail {
  grid-area: rail;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding-top: calc(env(safe-area-inset-top, 0px) + var(--space-7));
  padding-bottom: var(--space-6);
}

.selector {
  grid-area: selector;
  position: sticky;
  top: 0;
  z-index: 20;
}

.content {
  grid-area: content;
  padding-top: var(--space-6);
}

/* ── Tablet: identidade e contagem lado a lado ──────────────────────────── */
@media (min-width: 40rem) {
  .rail {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    align-items: end;
    gap: var(--space-6) var(--space-7);
  }
}

/* ── Desktop: duas colunas, rail fixo à esquerda ────────────────────────── */
@media (min-width: 64rem) {
  .shell {
    grid-template-columns: var(--rail-width) minmax(0, 1fr);
    grid-template-areas:
      'rail selector'
      'rail content';
    column-gap: clamp(2.5rem, 1rem + 4vw, 5.5rem);
  }

  /* Altura exata da tela e nada de overflow: a coluna cabe, não rola.
     Uma barra de rolagem própria aqui dentro competia com a da página e
     deixava a contagem regressiva parecendo um painel espremido. */
  .rail {
    position: sticky;
    top: 0;
    align-self: start;
    display: flex;
    flex-direction: column;
    height: 100svh;
    gap: clamp(1rem, 2.4vh, 2rem);
    padding-top: clamp(1.5rem, 5vh, 4rem);
    padding-bottom: clamp(1rem, 3vh, 2rem);
    padding-right: var(--space-4);
    /* O filete vertical separa a coluna fixa do conteúdo sem virar borda de
       caixa — é régua de página, não moldura. */
    border-right: 1px solid var(--rule);
  }

  /* Na coluna fixa a tipografia responde à ALTURA da janela, não à largura:
     quem manda aqui é o espaço vertical disponível, e é ele que decide se
     sobra lugar para o cartaz. Sem isto, num monitor 1080p a 100% de zoom a
     identidade e a contagem comiam a coluna inteira.

     Prefixadas com .rail porque o components.css é carregado depois: no empate
     de especificidade quem vem por último vence, e as regras originais
     ganhariam. */
  .rail .wordmark {
    font-size: clamp(2.25rem, 7vh, 4.5rem);
  }

  .rail .rail__title {
    font-size: clamp(1.35rem, 4.2vh, 2.75rem);
  }

  .rail .countdown__value {
    font-size: clamp(1.5rem, 4.4vh, 3.25rem);
  }

  .rail .countdown__unit {
    padding-block: clamp(0.4rem, 1.2vh, 0.75rem) clamp(0.3rem, 0.8vh, 0.5rem);
  }

  .poster picture {
    display: flex;
    flex: 1;
    min-height: 0;
  }

  .poster img {
    flex: 1;
    min-height: 0;
    width: 100%;
    object-fit: contain;
    object-position: left top;
  }

  .content {
    padding-top: var(--space-5);
    padding-bottom: var(--space-8);
  }

  .content__lead {
    max-width: var(--measure);
  }
}

/* Janela baixa (janela restaurada pequena, notebook antigo): a coluna
   desiste de ficar fixa e volta a rolar junto com a página — melhor do que
   cortar conteúdo para caber. */
@media (min-width: 64rem) and (max-height: 30rem) {
  .rail {
    position: static;
    height: auto;
  }
}