/* ========================================================================== 
   NASHORN Aktuelles responsive migration pilot
   Desktop rules remain owned by aktuelles.css. This file only adapts content
   through the canonical responsive viewport families.
   ========================================================================== */

/* Compact Desktop Master keeps the approved three-column desktop composition. */
@media (min-width: 768px) and (max-width: 1199.98px) and (orientation: landscape) and (min-height: 601px),
       (min-width: 1024px) and (max-width: 1199.98px) and (orientation: portrait) {
  .archive-page .archive-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .archive-page .archive-card--feature {
    grid-column: span 2;
  }

}

/* Shared responsive visual grammar; layout transformations remain below. */
@media (min-width: 768px) and (max-width: 1199.98px) and (orientation: landscape) and (min-height: 601px),
       (min-width: 1024px) and (max-width: 1199.98px) and (orientation: portrait),
       (max-width: 767.98px),
       (min-width: 768px) and (max-width: 1023.98px) and (orientation: portrait),
       (min-width: 768px) and (max-width: 1199.98px) and (orientation: landscape) and (max-height: 600px) {
  .archive-page .archive-intro {
    padding-top: calc(var(--header-h) + clamp(24px, 3.5vw, 40px));
    padding-bottom: var(--site-section-space);
  }

  .archive-page .archive-intro h1 {
    max-width: 13ch;
  }

  .archive-page .archive-intro > .container > p:last-child {
    max-width: 58ch;
    margin-top: var(--site-title-copy-gap);
    color: var(--text-soft);
    font-size: var(--site-lead-size);
    line-height: var(--site-lead-line-height);
  }

  .archive-page .archive-list {
    padding-block: var(--site-section-space);
  }

  .archive-page .archive-grid {
    gap: var(--site-card-gap);
  }

  .archive-page .archive-card {
    height: 100%;
  }

  .archive-page .archive-card__body,
  .archive-page .news-card__body {
    padding: var(--site-card-padding);
  }

  .archive-page .archive-card__date {
    font-size: var(--site-meta-size);
    line-height: var(--site-meta-line-height);
    letter-spacing: var(--site-meta-letter-spacing);
  }

  .archive-page .archive-card__title {
    max-width: 26ch;
    margin-block: 12px 10px;
    font-size: var(--site-card-title-size);
    font-weight: var(--site-card-title-weight);
    line-height: var(--site-card-title-line-height);
    letter-spacing: var(--site-card-title-letter-spacing);
  }

  .archive-page .archive-card--feature .archive-card__title {
    max-width: 22ch;
    font-size: var(--site-card-feature-title-size);
    font-weight: var(--site-card-feature-title-weight);
    line-height: var(--site-card-feature-title-line-height);
    letter-spacing: var(--site-card-feature-title-letter-spacing);
  }

  .archive-page .archive-card__excerpt {
    margin-bottom: var(--site-card-copy-action-gap);
    font-size: var(--site-card-copy-size);
    line-height: var(--site-card-copy-line-height);
  }

  .archive-page .archive-card--feature .archive-card__excerpt {
    font-size: var(--site-card-feature-copy-size);
    line-height: var(--site-card-feature-copy-line-height);
  }

  .archive-page .archive-card__link {
    gap: var(--site-action-gap);
    padding-block: 0;
    font-size: var(--site-action-size);
    font-weight: 500;
    line-height: var(--site-action-line-height);
    letter-spacing: var(--site-action-letter-spacing);
  }

  .archive-page .archive-card__link .icon {
    width: var(--site-action-icon-size);
    height: var(--site-action-icon-size);
  }

  .archive-page .archive-card__media,
  .archive-page .archive-card--feature .archive-card__media {
    overflow: hidden;
    background: #e7ecef;
  }
}

/* Small Tablet Portrait: dominant feature followed by a balanced 2 x 2 archive. */
@media (min-width: 768px) and (max-width: 1023.98px) and (orientation: portrait) {
  .archive-page .archive-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .archive-page .archive-card--feature {
    grid-column: 1 / -1;
  }

  .archive-page .archive-card--feature .archive-card__media {
    aspect-ratio: 16 / 9;
  }

  .archive-page .archive-card__media {
    aspect-ratio: 4 / 3;
  }

  .archive-page .archive-card:not(.archive-card--feature) .archive-card__body {
    padding: var(--site-card-compact-padding);
  }
}

/* Mobile Portrait: one uninterrupted editorial reading flow. */
@media (max-width: 767.98px) and (orientation: portrait) {
  .archive-page .archive-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .archive-page .archive-card--feature {
    grid-column: auto;
  }

  .archive-page .archive-card__media,
  .archive-page .archive-card--feature .archive-card__media {
    aspect-ratio: 4 / 3;
  }
}

/* Phone landscape retains a calm two-column Touch Master. */
@media (max-width: 767.98px) and (orientation: landscape) {
  .archive-page .archive-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .archive-page .archive-card--feature {
    grid-column: 1 / -1;
  }

  .archive-page .archive-card--feature .archive-card__media {
    aspect-ratio: 16 / 9;
  }

  .archive-page .archive-card__media {
    aspect-ratio: 4 / 3;
  }
}

/* Tablet/mobile landscape mirrors the approved compact Homepage news grid. */
@media (min-width: 768px) and (max-width: 1199.98px) and (orientation: landscape) and (max-height: 600px) {
  .archive-page .archive-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .archive-page .archive-card--feature {
    grid-column: span 2;
  }

  .archive-page .archive-card--feature .archive-card__media {
    aspect-ratio: 16 / 9;
  }

  .archive-page .archive-card__media {
    aspect-ratio: 4 / 3;
  }

}

/* Low-height landscape keeps the intro close to the compact shell. */
@media (max-width: 1199.98px) and (orientation: landscape) and (max-height: 600px) {
  .archive-page .archive-intro {
    padding-top: calc(var(--header-h) + var(--site-card-gap));
  }
}

@media (prefers-reduced-motion: reduce) {
  .archive-page .archive-card,
  .archive-page .archive-card img,
  .archive-page .archive-card__link .icon {
    transition: none;
  }
}