/* ==============================================
   Foundry Labs Responsive Overhaul — WU-6 Stories
   Stories listing + single detail responsive patches
   ============================================== */

@media (max-width: 768px) {
  /* S-08: Single story break tile needs mobile padding */
  .story-detail .story-break-tile {
    padding: 24px;
  }
}

@media (max-width: 480px) {
  /* S-01: Stories hero padding too large at ≤480px */
  .stories-hero {
    padding-top: calc(var(--nav-height) + var(--space-6));
    padding-bottom: var(--space-6);
  }

  /* S-03: Logo parade collapses to 1 column at ≤480px */
  main#main-content .stories-hero ~ .logo-parade-section .logo-parade-grid {
    grid-template-columns: 1fr;
  }

  /* S-04: CTA band section needs mobile typography tuning */
  main#main-content .stories-hero ~ .cta-section,
  main.story-detail .cta-section {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  main#main-content .stories-hero ~ .cta-section .cta-strip h3,
  main.story-detail .cta-section .cta-strip h3 {
    font-size: clamp(24px, 7vw, 30px);
  }

  main#main-content .stories-hero ~ .cta-section .cta-strip p,
  main.story-detail .cta-section .cta-strip p {
    font-size: var(--text-base);
  }

  /* S-05: Single story header padding and title size too large */
  .story-detail .story-header {
    padding-top: calc(var(--nav-height) + var(--space-5));
    padding-bottom: var(--space-6);
  }

  /* S-05 cont: .story-detail .story-title font-size is governed by the
     ≤640 clamp at style.css `.story-detail .story-title { clamp(32px, 8vw, 48px); }`
     which matches the design HTML's mobile clamp. A tighter cap here
     undercut the design — removed. */

  /* S-06: Single story breadcrumb wraps awkwardly */
  .story-detail .story-breadcrumb {
    flex-wrap: wrap;
    gap: 4px;
  }

  /* S-07: Single story blockquote left padding crowds at ≤480px */
  .story-detail .story-body blockquote p,
  .story-detail .story-body .pullquote p,
  .story-detail .story-body figure.wp-block-quote p,
  .story-detail .story-body blockquote cite,
  .story-detail .story-body figure.wp-block-quote cite,
  .story-detail .story-body .pullquote-author {
    padding-left: 12px;
  }

  /* S-09: Constrain story content embeds on small screens */
  .story-detail .story-body iframe,
  .story-detail .story-body embed,
  .story-detail .story-body video {
    display: block;
    max-width: 100%;
    height: auto;
  }
}

@media (max-width: 360px) {
  /* S-02: Feed card meta date and tag can collide at ≤360px */
  .feed-section .story-card-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .feed-section .story-card-date {
    margin-left: 0;
  }
}