/**
 *
 * Destaque principal da capa.
 * handler: pp-hero
 * deps: pp-layout
 * version: 1.0.0
 *
 * @package theme-highlights
 *
 */

.hero {
  display: grid;
  gap: var(--space-5);
}

.hero__featured {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  min-height: 320px;
  background: #121212;
}

.hero__media {
  position: absolute;
  inset: 0;
}

.hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgb(0 0 0 / 0.2) 0%,
    rgb(0 0 0 / 0.42) 45%,
    rgb(0 0 0 / 0.72) 100%
  );
}

.hero__content {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: end;
  gap: var(--space-4);
  min-height: 320px;
  padding: var(--space-5);
  color: var(--color-white);
}

.hero__title {
  margin: 0;
  max-width: 360px;
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: var(--line-tight);
}

.hero__subtitle {
  margin: 0;
  max-width: 400px;
  font-size: var(--text-md);
  font-weight: 700;
}

.hero__list {
  display: grid;
  gap: var(--space-4);
}

.hero__item {
  min-width: 0;
}

.hero__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
  color: var(--color-text);
  font-size: var(--text-md);
  line-height: 1.45;
}

.hero__icon {
  display: inline-flex;
  width: 15px;
  height: 17px;
  margin-top: 3px;
  color: var(--color-accent);
  flex-shrink: 0;
}

.hero__icon .icon-arrow-right-curved {
  width: 15px;
  height: 17px;
  stroke: currentColor;
}

.hero__icon .icon-arrow-right-curved path {
  stroke: currentColor;
}

/**
 * Variação sem foto.
 *
 * A peça com foto tem altura mínima para dar área à imagem, e no desktop um recuo
 * superior grande que empurra o texto para a base dela. Sem imagem não há o que
 * preencher: a altura passa a acompanhar o conteúdo e o recuo volta ao normal.
 *
 * O fundo escuro existe para dar contraste ao texto sobre a foto. Sem foto ele perde
 * a razão de ser, e a peça passa ao painel claro — o mesmo cinza de superfície do
 * design — com o texto na cor padrão.
 */
.hero--no-image .hero__featured,
.hero--no-image .hero__content {
  min-height: 0;
}

.hero--no-image .hero__featured {
  background: var(--color-surface-muted);
}

.hero--no-image .hero__content {
  color: var(--color-text);
}

/**
 * Sobre a foto, título e linha de apoio são limitados em largura para não invadirem
 * a imagem. Sem foto não há o que preservar, e os dois ocupam a peça inteira.
 * As duas classes vencem os limites por largura de tela sem precisar repetir regra
 * dentro de cada media query.
 */
.hero--no-image .hero__title,
.hero--no-image .hero__subtitle {
  max-width: none;
}

/**
 * Alinhamento do destaque principal (só a posição zero usa estes modificadores).
 *
 * Com foto, o que se move é o bloco de texto dentro da peça — o texto em si continua
 * alinhado à esquerda, porque sobre a imagem ele se lê melhor com uma margem única.
 * Ao centro é a exceção: bloco e texto centralizam juntos.
 *
 * Sem foto não existe bloco a posicionar: título e linha de apoio ocupam toda a
 * largura, então o alinhamento é do próprio texto.
 *
 * "À esquerda" é o estado padrão e não precisa de regra.
 */
.hero--align-center .hero__content {
  justify-items: center;
  text-align: center;
}

.hero--align-right .hero__content {
  justify-items: end;
}

.hero--no-image.hero--align-right .hero__content {
  text-align: right;
}

@media (min-width: 1280px) {
  .hero--no-image .hero__content {
    padding: var(--space-6);
  }
}

@media (min-width: 768px) {
  .hero {
    gap: var(--space-6);
  }

  .hero__featured,
  .hero__content {
    min-height: 425px;
  }

  .hero__content {
    padding: var(--space-6);
    gap: var(--space-5);
  }

  .hero__title {
    max-width: 480px;
    font-size: calc(var(--text-lg) * 3);
  }

  .hero__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-5);
    row-gap: var(--space-5);
  }
}

@media (min-width: 1280px) {
  .hero__content {
    padding: 105px 54px 58px;
    gap: var(--space-6);
  }

  .hero__title {
    max-width: 650px;
    font-size: calc(var(--text-lg) * 4);
  }

  .hero__subtitle {
    max-width: 650px;
    font-size: var(--text-lg);
  }

  /**
   * A posição zero aceita até 6 correlatas. Em vez de fixar o número de colunas, as
   * colunas são criadas conforme a quantidade de itens: 5 correlatas rendem 5 colunas
   * (o layout das telas de referência), 6 rendem 6, e nenhuma quebra para uma segunda
   * linha incompleta. É preciso zerar o grid-template-columns porque a regra de 768px
   * continua valendo a partir daqui.
   */
  .hero__list {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }

  .hero__link {
    gap: var(--space-2);
    font-size: 17px;
    line-height: 1.45;
  }
}