/*
 * File: responsive.css
 * Responsibility: Approved tablet, mobile, and wide-desktop adaptations.
 */

/* Tablet: 48rem to below 64rem */
@media (48rem <= width < 64rem) {
  .hero {
    grid-template-columns: minmax(0, 34fr) minmax(0, 66fr);
    gap: var(--space-8);
    padding-block: var(--space-10);
  }

  .hero__headline {
    font-size: var(--font-size-3xl);
  }

  .hero__actions {
    flex-wrap: wrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__action-primary,
  .hero__action-secondary {
    transition: none;
  }
}

/* Mobile: below 48rem */
@media (width < 48rem) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
    min-height: auto;
    padding-block: var(--space-8);
  }

  .hero__portrait {
    justify-content: flex-start;
  }

  .hero__portrait-image {
    width: calc(100% - var(--space-16));
  }

  .hero__headline {
    font-size: var(--font-size-3xl);
  }

  .hero__actions {
    width: 100%;
  }

  .hero__action-primary,
  .hero__action-secondary {
    padding-inline: var(--space-2);
  }

  body > footer {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-2);
    padding-block: var(--space-4);
  }
}