/*
 * Ponte transitória da Home: styles.css e responsive.css continuam sem layer
 * e, portanto, vencem regras em @layer pages. Este arquivo é carregado depois
 * deles, limita os overrides à .app-home e será removido somente na Etapa 9.
 */
#home.app-home {
  min-inline-size: 0;
}

#home.app-home .app-home__workspace {
  display: grid;
  gap: var(--space-6);
  inline-size: min(100%, 90rem);
  min-block-size: auto;
  margin-inline: auto;
  padding: var(--space-6) var(--layout-content-gutter);
}

#home.app-home .app-home__hero {
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  min-block-size: auto;
  padding: var(--space-6);
  border: var(--control-border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-subtle);
  box-shadow: var(--shadow-lg);
}

#home.app-home .app-home__hero-copy,
#home.app-home .app-home__access-copy {
  display: grid;
  align-content: center;
  gap: var(--space-4);
  inline-size: auto;
  max-inline-size: none;
  min-inline-size: 0;
}

#home.app-home .app-home__eyebrow,
#home.app-home .app-home__title,
#home.app-home .app-home__description,
#home.app-home .app-home__session-message,
#home.app-home .app-home__benefit-card p {
  margin: 0;
}

#home.app-home .app-home__title {
  max-inline-size: 13ch;
}

#home.app-home .app-home__description,
#home.app-home .app-home__session-message {
  max-inline-size: 42rem;
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

#home.app-home .app-home__hero-actions,
#home.app-home .app-home__access-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0;
}

#home.app-home .ds-button.app-home__action {
  flex: 1 1 14rem;
  min-block-size: var(--control-height-md);
  padding: var(--space-2) var(--space-3);
  border: var(--control-border-width) solid transparent;
  border-radius: var(--radius-sm);
  font: inherit;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  text-align: center;
  text-decoration: none;
}

#home.app-home .ds-button--primary {
  color: var(--color-background-deep);
  background: var(--color-primary);
}

#home.app-home .ds-button--secondary {
  color: var(--color-text-primary);
  border-color: var(--color-border);
  background: var(--color-surface-subtle);
}

#home.app-home .ds-button--primary:hover {
  color: var(--color-background-deep);
  background: var(--color-primary-hover);
}

#home.app-home .ds-button--secondary:hover {
  border-color: var(--color-primary);
  color: var(--color-text-primary);
  background: var(--color-surface);
}

#home.app-home .ds-button:focus-visible {
  outline: var(--control-focus-width) solid var(--color-primary);
  outline-offset: var(--space-1);
}

#home.app-home .app-home__visual {
  display: block;
  min-block-size: clamp(17rem, 36vw, 31rem);
  overflow: hidden;
  border: var(--control-border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--color-background-deep) 12%, transparent), color-mix(in srgb, var(--color-background-deep) 36%, transparent)),
    url("/static/assets/layout-v2/home-cube.png") center / cover no-repeat;
  box-shadow: none;
  mix-blend-mode: normal;
}

#home.app-home .app-home__access {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#home.app-home .app-home__access-card {
  display: grid;
  align-content: space-between;
  grid-template-columns: minmax(0, 1fr);
  place-items: stretch;
  gap: var(--space-4);
  min-block-size: 0;
  padding: var(--space-4);
  border: var(--control-border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: none;
}

#home.app-home .app-home__access-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  inline-size: 100%;
}

#home.app-home .app-home__access-card .home-access-copy,
#home.app-home .app-home__access-card .home-access-buttons {
  display: flex;
}

#home.app-home .app-home__access-card .home-access-copy {
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-1);
  min-inline-size: 0;
}

#home.app-home .app-home__access-card .home-access-buttons {
  flex-wrap: wrap;
}

#home.app-home .app-home__access-card .home-access-icon {
  flex: 0 0 auto;
  inline-size: var(--control-height-md);
  block-size: var(--control-height-md);
  background-size: contain;
}

#home.app-home .app-home__config-error,
#home.app-home .app-home__permission-message {
  align-self: start;
}

#home.app-home .app-home__benefits {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#home.app-home .app-home__benefit-card {
  display: grid;
  align-content: start;
  gap: var(--space-4);
  min-block-size: 0;
  padding: var(--space-4);
  border: var(--control-border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  text-align: start;
}

#home.app-home .app-home__benefit-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

#home.app-home .app-home__benefit-card .benefit-icon {
  flex: 0 0 auto;
  inline-size: var(--control-height-md);
  block-size: var(--control-height-md);
  margin: 0;
  background-size: contain;
}

#home.app-home .app-home__benefit-card h3,
#home.app-home .app-home__benefit-card p {
  margin: 0;
  text-align: start;
  text-transform: none;
}

#home.app-home .app-home__benefit-card p {
  color: var(--color-text-secondary);
  line-height: var(--line-height-normal);
}

#home.app-home .app-home__visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (min-width: 34rem) {
  #home.app-home .app-home__benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  #home.app-home .app-home__hero {
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.9fr);
  }

  #home.app-home .app-home__access {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.8fr);
    align-items: stretch;
  }

  #home.app-home .app-home__permission-message {
    grid-column: 1 / -1;
  }

  #home.app-home .app-home__benefits {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 33.99rem) {
  #home.app-home .app-home__workspace {
    padding-block: var(--space-4);
  }

  #home.app-home .ds-button.app-home__action {
    flex-basis: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  #home.app-home .ds-button.app-home__action {
    transition: none;
  }
}