/* ========================================
   Motion
   ======================================== */
@keyframes riseIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-copy > * {
  opacity: 0;
  animation: riseIn 0.62s ease forwards;
}

.hero-copy > :nth-child(1) {
  animation-delay: 0.05s;
}

.hero-copy > :nth-child(2) {
  animation-delay: 0.1s;
}

.hero-copy > :nth-child(3) {
  animation-delay: 0.16s;
}

.hero-copy > :nth-child(4) {
  animation-delay: 0.22s;
}

.hero-copy > :nth-child(5) {
  animation-delay: 0.28s;
}

.hero-panel {
  opacity: 0;
  animation: riseIn 0.72s 0.18s ease forwards;
}

/* ========================================
   Responsive
   ======================================== */
@media (max-width: 1120px) {
  .hero-shell {
    grid-template-columns: 1fr;
  }

  .hero-panel {
    max-width: 760px;
  }

  .hero-panel-feature {
    grid-template-columns: 1fr;
  }

  .hero-panel-feature-media {
    min-height: 156px;
    aspect-ratio: auto;
  }

  .featured-card {
    grid-template-columns: 1fr;
  }

  .featured-media {
    border-bottom: 0;
  }

  .featured-media::after {
    top: auto;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #3558c9 0%, #4d74d9 52%, #76cbed 100%);
  }

  .featured-image {
    min-height: 244px;
    padding: 24px 20px 14px;
  }

  .featured-image::before {
    inset: 48px 16px 16px;
  }

  .featured-content {
    padding: 22px 24px 20px;
  }

  .articles-grid-server {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .newsletter-shell {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 34px 32px;
  }

  .newsletter-form {
    margin: 0;
    max-width: 420px;
  }

  .newsletter-points {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .blog-page .nav-links {
    display: none !important;
  }

  .blog-page .nav-mobile-toggle {
    display: block;
  }

  .blog-page .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
    padding: 30px 28px;
  }

  .blog-page .footer-bottom {
    justify-content: space-between;
    text-align: left;
  }

  .blog-page .back-to-top {
    position: static;
    transform: none;
  }

  .blog-page .back-to-top:hover {
    transform: translateY(-2px);
  }
}

@media (max-width: 760px) {
  .blog-page .nav-container,
  .blog-hero,
  .category-section,
  .featured-section,
  .articles-section,
  .newsletter-section,
  .blog-page .footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  .hero-search.search-wrapper {
    width: 100%;
    border-radius: 16px;
    display: grid;
    grid-template-columns: auto 1fr;
    row-gap: 8px;
    align-items: center;
  }

  .search-btn {
    grid-column: 1 / -1;
    width: 100%;
  }

  .featured-content {
    padding: 22px 20px;
  }

  .featured-section .section-intro,
  .articles-section .section-intro {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .featured-section .section-intro .section-kicker,
  .articles-section .section-intro .section-kicker,
  .featured-section .section-intro .section-heading,
  .articles-section .section-intro .section-heading {
    grid-column: 1;
    text-align: left;
  }

  .articles-grid-server {
    grid-template-columns: 1fr;
  }

  .hero-panel {
    padding: 16px;
  }

  .hero-panel-feature {
    grid-template-columns: 1fr;
  }

  .hero-panel-feature-media {
    min-height: 130px;
  }

  .pagination {
    justify-content: stretch;
    gap: 8px;
  }

  .page-btn {
    flex: 1;
  }

  .blog-page .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 26px 22px;
  }

  .blog-page .footer-cta-link {
    align-self: flex-start;
  }

  .blog-page .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    text-align: left;
  }

  .newsletter-shell {
    padding: 24px 18px;
    gap: 20px;
    border-radius: 20px;
  }

  .newsletter-form {
    max-width: 100%;
    padding: 20px 16px;
  }

  .newsletter-input-row {
    grid-template-columns: 1fr;
  }

  .newsletter-btn {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .hero-links {
    flex-direction: column;
  }

  .hero-cta {
    width: 100%;
  }

  .featured-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .hero-copy > *,
  .hero-panel {
    opacity: 1;
  }
}