/* m-industries.css — phone/tablet parity with the desktop design (industries.html).
   Loaded after styles.css/pages.css. Desktop (1440) must stay unchanged: every rule below sits inside a
   max-width query or the 1240-1439 laptop band (the identity once the column is 1240).

   Hero (.ind-hero): background tiles, circuit vectors, radius and gutter are handled in
   m-shared.css. The hero text reflows at readable sizes (audit: KEEP).

   Sector rows (.ind-row): the rows stack on phones (text, then the 574:447 photo at the same
   crop and radius). The audit marks this KEEP because a 0.30 scale of the 1240px row would
   leave 5-7px text. What is scaled here is the row's vertical rhythm. Desktop uses 40px gaps
   (with a 20px title-to-description step) in a 619px text column. The phone column is 374px,
   0.6 of that, so the gaps become 24px and 12px. The row keeps the desktop's even spacing and
   2:1 title-group ratio, and it reads as one unit again instead of a loose stack in which the
   arrow floats between the text and the photo. The 80px gap between rows is the desktop value
   and stays the same (all pages keep their desktop section spacing on phones). */

/* ═══════════ laptop band (1240-1439) ═══════════ */
/* 1920px screens at 150% = 1280 CSS px. The content column is min(1240px, 100% - 48px) here, so it is
   1192-1240px wide instead of 1240. Every rule is a no-op once the column reaches 1240 (>=1288, no scrollbar;
   the band runs on to 1439 so a classic scrollbar just above 1300 is covered too). */
@media (min-width:1240px) and (max-width:1439px){
  /* rows: the 619px text column is the Figma width the descriptions were written to (03 Pharma's
     widest line is 618.9px), so it keeps it and every row wraps exactly as at 1440. The photo takes the
     shortfall at the same 574:447 crop, as on phones (566x441 at 1280, 526x410 at 1240), and the row keeps
     its 447px height so the rows sit at their 1440 positions (a cover crop at 447px cut into the photos) */
  .ind-info{flex-shrink:0}
  .ind-img{flex-shrink:1;min-width:0;height:auto;aspect-ratio:574/447}
  .ind-row{min-height:447px}
  /* hero: the right circuit is placed at 58.33% + 18px of the card; pin it to the card's right edge
     instead (741.3 = 1240 - 498.7) so both traces frame their corners as at 1440 on the narrower card */
  .ind-hero .hero-circuit-r-wrap{left:calc(100% - 498.7px)}
}

@media (max-width:760px){
  /* number -> title group -> chips -> arrow: 40px on desktop, 0.6 x 40 = 24px */
  .ind-info{gap:24px}
  .ind-info > div > [style*="margin-top:40px"]{margin-top:24px !important}
  /* title -> description: 20px on desktop, 12px here (keeps the 1:2 ratio to the 24px steps) */
  .ind-info h3{margin-bottom:12px}
  /* arrow -> photo, on the same 24px step */
  .ind-row{gap:24px}
  /* chips: desktop puts a 20px gap between its 18px labels; the 15px phone labels get 12px.
     At 390px that puts 08 Travel's four chips back on one line, so rows 02-12 all read as on
     desktop. BFSI's four chips still need about 423px and wrap at every phone width (audit: KEEP). */
  .ind-chips{gap:12px}
}