/* ==========================================================================
   Singularity Hypertech — INDUSTRY DETAIL responsive
   ========================================================================== */

@media (max-width: 1439px) {
  .industry-page .container {
    padding: 0 64px;
  }
  .id-challenges-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
    gap: 56px;
  }
  .id-mosaic {
    grid-template-rows: 254px 272px;
  }
  .id-mosaic-card {
    font-size: 30px;
  }
  .id-offering {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 48px;
    padding-left: 0;
  }
}

@media (max-width: 1080px) {
  .id-hero {
    min-height: 500px;
    padding: 160px 0 70px;
  }
  .id-intro,
  .id-challenges,
  .id-offerings {
    padding: 80px 0;
  }
  .id-intro-grid {
    grid-template-columns: 210px minmax(0, 1fr);
  }
  .id-intro-mark {
    width: 170px;
  }
  .id-intro-copy p {
    font-size: 26px;
  }
  /* the mosaic drops under the list rather than squeezing the copy, so there
     is nothing left to pin against */
  .id-challenges-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .id-mosaic {
    position: static;
  }
  .id-mosaic {
    grid-template-rows: 300px 260px;
  }
  .id-challenge {
    padding: 26px 0;
  }
  .id-challenge h3 {
    font-size: 21px;
  }
  .id-offerings-head {
    margin-bottom: 56px;
  }
  .id-offering {
    padding: 56px 0;
    gap: 40px;
    /* the artwork column is fluid here, so the fixed 1440 height no longer
       applies — let the tallest content set it and keep every card equal */
    min-height: 470px;
  }
  .id-offering h3 {
    font-size: 31px;
  }
  .id-offering h3 {
    font-size: 26px;
  }
}

@media (max-width: 860px) {
  .industry-page .container {
    padding: 0 32px;
  }
  .id-hero {
    min-height: 420px;
    padding: 130px 0 60px;
  }
  .id-intro-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .id-intro-copy p {
    font-size: 20px;
  }
  .id-mosaic {
    grid-template-rows: 260px 200px;
  }
  /* photo above the copy, one column — rows are no longer the same height, so
     stacking them would leave stepped edges; fall back to a plain list */
  .id-offering {
    position: static;
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 44px 0;
  }
  .id-offering-rows {
    padding-bottom: 0;
  }
  .id-offering h3 {
    font-size: 22px;
  }
  .id-mosaic-card {
    font-size: 24px;
  }
}

@media (max-width: 560px) {
  .industry-page .container {
    padding: 0 20px;
  }
  .id-intro-mark {
    width: 150px;
  }
  .id-intro-copy p {
    font-size: 18px;
  }
  .id-hero-actions .btn,
  .id-intro-copy .btn,
  .id-offering .btn {
    width: 100%;
  }
  /* the mosaic stacks: wide photo, violet card, second photo */
  .id-mosaic {
    grid-template-columns: 1fr;
    grid-template-rows: 220px 160px 220px;
  }
  .id-mosaic-wide {
    grid-column: auto;
  }
  .id-mosaic-card {
    font-size: 22px;
    padding: 20px;
  }
  .id-challenge {
    gap: 14px;
    padding: 22px 0;
  }
  .id-challenge h3 {
    font-size: 19px;
  }
  .id-offering-img {
    border-radius: 18px;
  }
}