.calendar-page {
  --content: 60rem;
  --breakout: 80rem;
  position: relative;
}

/* A página: a arte de fundo da seção de recursos da página inicial (a imagem pequena no celular e a grande no computador,
   como o .faq do home.css), do topo para baixo como a página de download a aplica (.downloads do download.css), sobre a cor
   da seção Próximos eventos (.event-stream), e o respiro da página de download. As linhas (o cabeçalho e a grade) ficam no
   tamanho delas: numa tela alta a página inteira estica (.page), e o espaço que sobra fica abaixo da grade em vez de afastar
   o período do título */
.calendar {
  padding-block-start: var(--spacing-14);
  padding-block-end: var(--spacing-12);
  background-color: #101010;
  background-image: var(--site-image-home-features-sm, url('/assets/images/home/gamefeatures_bg--small.jpg?v=2'));
  background-size: cover;
  background-position-y: 0;
  background-position-x: center;
  background-repeat: no-repeat;
  align-content: start;
}

@media (width >= 60rem) {
  .calendar {
    padding-block-start: var(--spacing-16);
    padding-block-end: var(--spacing-14);
    background-image: var(--site-image-home-features-lg, url('/assets/images/home/gamefeatures_bg.jpg?v=2'));
  }
}

.calendar__header {
  padding-block-end: var(--spacing-8);
  min-width: 0;

  display: grid;
  place-items: center;
  gap: var(--spacing-2);
}

.calendar__title {
  position: relative;
  color: var(--clr-text-bronze-100);
  font-family: var(--heading-font);
  font-size: 2rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2rem; /* 100% */
  letter-spacing: -0.125rem;
  text-transform: uppercase;
  text-align: center;
  min-width: 0;
  max-width: 14ch;
  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4);
}

@media (width >= 60rem) {
  .calendar__title {
    font-size: 3rem;
    line-height: 3rem; /* 120% */
  }
}

/* O período da grade (de hoje a 30 dias à frente): o texto da contagem dos cards (.event-card__countdown) */
.calendar__period {
  color: var(--clr-onSurface-01--subtle);
  font-family: var(--font-monospace);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1rem;
}

/* A grade: sete colunas, domingo a sábado, que cabem na largura do celular (minmax(0, 1fr)) */
.calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--spacing-1);
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (width >= 60rem) {
  .calendar__grid {
    gap: var(--spacing-2);
  }
}

/* O cabeçalho dos dias da semana: o título da seção Próximos eventos (.event-stream__heading); no celular, menor e só as
   três primeiras letras do nome */
.calendar__weekday {
  color: var(--clr-onSurface-02--bold);
  font-size: 0.75rem;
  font-weight: var(--heading-xs-weight);
  line-height: 1rem;
  text-transform: uppercase;
  text-align: center;
  padding-block: var(--spacing-2);
  min-width: 0;
  overflow: hidden;
}

.calendar__weekday-name {
  display: none;
}

@media (width >= 60rem) {
  .calendar__weekday {
    font-size: var(--heading-xs-size);
    line-height: var(--heading-xs-leading-tight);
  }

  .calendar__weekday-name {
    display: inline;
  }

  .calendar__weekday-short {
    display: none;
  }
}

/* Um dia: a caixa no desenho do fundo dos cards (.event-card__background: a superfície, a borda e o raio); o de hoje com a
   borda da marca, o aberto e o apontado com a superfície mais clara; os já passados apagados, sem botão */
.calendar__day {
  display: flex;
  min-width: 0;
}

.calendar__day-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-1);
  flex: 1;
  min-width: 0;
  min-height: var(--size-20);
  padding: var(--spacing-2);

  border: 1px solid var(--clr-white--5);
  border-radius: var(--radius-3);
  background: var(--clr-surface-01);
  color: var(--clr-onSurface-01--bold);
  font: inherit;
  text-align: left;
}

@media (width >= 60rem) {
  .calendar__day-box {
    min-height: var(--size-24);
    padding: var(--spacing-3);
  }
}

.calendar__day-button {
  cursor: pointer;
  transition: background 200ms ease-out, border-color 200ms ease-out;
}

.calendar__day-button:hover,
.calendar__day-button:focus-visible,
.calendar__day--open .calendar__day-box {
  background: var(--clr-base-800);
  border-color: var(--clr-base-600);
}

.calendar__day--today .calendar__day-box {
  border-color: var(--clr-onSurface-brand);
}

.calendar__day--past .calendar__day-box {
  opacity: 0.35;
}

.calendar__day-number {
  font-family: var(--font-monospace);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1rem;
}

@media (width >= 60rem) {
  .calendar__day-number {
    font-size: 1.125rem;
    line-height: 1.5rem;
  }
}

/* A quantidade de eventos: o selo do horário dos cards (.event-card__time: o fundo escuro, o raio e a fonte) na cor de
   destaque do site (a do Em andamento), o número um pouco maior que o texto e sempre menor que o número do dia; no celular
   o número e o texto em duas linhas */
.calendar__day-count {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--spacing-1);
  max-width: 100%;
  margin-block-start: auto;
  padding: var(--spacing-1);

  border-radius: var(--radius-2, 0.125rem);
  background: var(--clr-black--70);

  color: var(--clr-onSurface-brand);
  font-family: var(--font-monospace);
  font-size: 0.5625rem;
  font-weight: 700;
  line-height: 0.75rem;
  letter-spacing: 0.01875rem;
}

.calendar__day-count:empty {
  display: none;
}

.calendar__day-count-number {
  font-size: 0.6875rem;
  line-height: 0.75rem;
}

@media (width >= 60rem) {
  .calendar__day-count {
    gap: 0 var(--spacing-2);
    padding: var(--spacing-1, 0.25rem) var(--spacing-2, 0.5rem);
    font-size: 0.75rem;
    line-height: 1rem;
  }

  .calendar__day-count-number {
    font-size: 0.875rem;
    line-height: 1rem;
  }
}

/* Os eventos do dia aberto, no dialog: os cards lado a lado como na página inicial (.event-stream__list e
   .event-stream__item do home.css), a lista com a largura toda do conteúdo do dialog. A lista cria o contexto de
   empilhamento (o papel do .event-stream, z-index 2, na página inicial): sem ele o fundo de cada card (z-index -1) ficaria
   atrás do fundo do dialog */
.calendar__events {
  position: relative;
  z-index: 0;
  align-self: stretch;
  display: flex;
  gap: var(--spacing-3);
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}

.calendar__events .event-stream__item {
  display: flex;
  min-width: var(--size-31);
  flex: 1;
}

/* O texto dentro do card continua o do card: o dialog estiliza todo <p> do conteúdo (dialog.css), e a contagem é um <p>
   (os valores do .event-card__countdown de baixo) */
.calendar__events .event-card__countdown {
  margin-top: 0;
  color: var(--clr-onSurface-01--subtle);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1rem;
}

/* O evento encerrado fica no dia, apagado (a opacidade dos dias já passados) */
.calendar__events .event-card.ended {
  opacity: 0.35;
}

/* "Nenhum evento" só com a lista vazia */
.calendar__events:not(:empty) + .calendar__empty {
  display: none;
}

/* O dialog recebe o foco ao abrir (em vez do botão de fechar): sem contorno nele */
.calendar .dialog:focus {
  outline: none;
}

/* ============================================================================================================
   Os cards: o bloco inteiro do .event-card do home.css, sem adaptação (os mesmos cards da página inicial)
   ============================================================================================================ */
.event-card {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  flex: 1;

  height: var(--size-22);
  padding: var(--spacing-4, 1rem) var(--spacing-6, 1.5rem) var(--spacing-2, 0.5rem) var(--spacing-4, 1rem);
  --_border-radius: var(--radius-3, 0.25rem);
}

.event-card.active::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: linear-gradient(-90deg, rgba(13, 13, 13, .6) 30%, var(--clr-brand-shadow--25) 100%);
  z-index: -1;
  border-radius: var(--_border-radius);
}


@media (width >= 60rem) {
  .event-card {
    height: var(--size-24);
  }
}

.event-card__background {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  overflow: hidden;
  background-color: var(--clr-surface-01);
  border-radius: var(--_border-radius);
  z-index: -1;
}

.event-card__background::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: var(--event-bg);
  background-size: cover;
  background-position: center right;
  transform: scale(1.2);
  border-radius: var(--_border-radius);
  transition: transform 200ms ease-out;
}

.event-card.active .event-card__background::before,
.event-card:hover .event-card__background::before {
  transform: scale(1);
}

.event-card__background::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  border: 1px solid var(--clr-white--5);
  border-radius: var(--_border-radius);
}


.event-card__icon {
  position: absolute;
  right: var(--spacing-1);
  top: 50%;
  transform: translateY(-50%);

  width: var(--size-21);
  height: var(--size-21);

  filter: drop-shadow(0px 6px 8px rgba(0, 0, 0, .5));
}

@media (width >= 60rem) {

  .event-card__icon {
    --_scale: 1;
    --_translateY: 0;
    right: var(--spacing-4);
    top: 0;
    transform: translateY(var(--_translateY)) scale(var(--_scale));
    transform-origin: bottom center;
    transition: transform 200ms ease-out;

  }

  @media (hover: hover) {
    .event-card.active .event-card__icon,
    .event-card:hover .event-card__icon {
      --_scale: 1.2;
      --_translateY: -8px;
    }
  }
}

.event-card__time {
  display: flex;
  flex-grow: 0;
  padding: var(--spacing-1, 0.25rem) var(--spacing-2, 0.5rem);
  gap: var(--spacing-2, 0.5rem);
  margin-bottom: auto;

  border-radius: var(--radius-2, 0.125rem);
  background: var(--clr-black--70);

  color: var(--clr-onSurface-01);
  font-family: var(--font-monospace);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1rem; /* 133.333% */
  letter-spacing: 0.01875rem;
  transition: color 400ms ease-in-out, background 400ms ease-in-out;
}

.event-card.active .event-card__time,
.event-card:hover .event-card__time {
  background: var(--clr-surface-contrast);
  color: var(--clr-onSurface-contrast);
}

.event-card__heading {
  color: var(--clr-onSurface-01--bold);
  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.2rem;
  text-transform: uppercase;
  transition: color 300ms ease-out;
  max-width: 14ch;
}

.event-card.active .event-card__heading,
.event-card:hover .event-card__heading {
  color: var(--clr-onSurface-01--strong);
}

.event-card__countdown {
  color: var(--clr-onSurface-01--subtle);
  font-family: var(--font-monospace);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1rem; /* 133.333% */
  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4);
  transition: color 300ms ease-out;
}

.event-card:hover .event-card__countdown {
  color: var(--clr-onSurface-brand);
}

.event-card.active .event-card__countdown {
  display: none;
}

.event-card__live {
  color: var(--clr-onSurface-brand);
  font-size: 0.6875rem;
  font-weight: 800;
  line-height: 1rem; /* 145.455% */
  position: relative;
  text-transform: uppercase;
}

.event-card__live::before {
  content: '';
  display: inline-block;
  width: var(--size-4, 0.5rem);
  height: var(--size-4, 0.5rem);
  background: var(--clr-onSurface-brand--subtle);
  border: 2px solid var(--clr-forAccent-brand--subtle);
  border-radius: 50%;
  margin-right: var(--spacing-1);
}

.event-card:not(.active) .event-card__live {
  display: none;
}


.event-card__link {
  position: absolute;
  width: 100%;
  height: 100%;
}