/* ============================================================================
   HYDRO2050 - PAGE 02, INDUSTRIES
   ----------------------------------------------------------------------------
   Measured from Paper artboards "Page 02, Industries 1440" and
   "Page 02, Industries 375". Every number below traces to one of those two.
   ========================================================================== */

/* ===== OPENING ===========================================================
   Artboard: paddingTop 104, paddingInline 64, column gap 28. The headline is
   capped at 820 and the deck at 680, both measured. The hero photograph sits
   in a child that adds its own 32 on top of the 28 flex gap, so the real
   distance from the deck to the photograph is 60. */

.p02-open { padding-top: var(--rhythm-open); }
.p02-open__eyebrow { margin-bottom: 28px; }
.p02-open__title { max-width: 820px; margin-bottom: 28px; }
.p02-open__deck  { max-width: 680px; }

/* Height follows the viewport rather than sitting at a measured 420: at 1440
   the clamp resolves to the artboard's own figure, and below it the band
   shallows with the page instead of holding a 420px slab at 900. */
.p02-open__photo {
  margin-top: var(--rhythm-row-end);
  height: clamp(240px, 29.17vw, 420px);
}
.p02-open__photo img { width: 100%; height: 100%; object-fit: cover; }

/* ===== THE FOUR ==========================================================
   Two rows of two 640 columns inside 1312 with a 32 gap: 640 x 2 + 32 = 1312.
   Row gap 72. Section padding 104 / 112. Expressed as minmax(0, 1fr) rather
   than a literal 640 so the pair does not overflow between 900 and 1440. */

.p02-four { padding-top: var(--rhythm-open); padding-bottom: var(--rhythm-section); }

.p02-four__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 32px;
  row-gap: 72px;
}

/* The 2px top border is the category colour, the same four the case study
   cards are filed under: turquoise agriculture, azure dams, --brand-mid
   wastewater, navy drinking water. It is a category indicator, not a divider,
   and it carries no text, so the turquoise is doing a job it can do. */
.industry {
  border-top: 2px solid var(--cat, var(--rule));
  padding-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

/* 34 / 42 at -0.02em. The band role is 34 / 46, so this size is set here
   rather than reusing --text-band and quietly changing its leading. */
.industry__title {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 42px;
  letter-spacing: -0.02em;
  font-weight: var(--wt-medium);
  color: var(--brand-navy);
  max-width: 600px;
}
.industry__body {
  font-size: 18px;
  line-height: 30px;
  color: var(--ink);
  max-width: 600px;
}

/* Paper draws the desktop link as 16 / 26 Montserrat 600 in --brand-blue-cta
   with no rule under it, and the 375 artboard draws the same link WITH the
   turquoise rule. The rule is kept at both widths: a link with no underline
   and no icon inside a block of body copy has nothing but colour marking it,
   and --brand-blue-cta on white is 6.16:1, so the colour survives the rule. */
.industry .link-rule {
  font-size: 16px;
  line-height: 26px;
  color: var(--brand-blue-cta);   /* 6.16:1 on page */
}
/* The turquoise rule stays turquoise on hover. components.css's own
   .link-rule:hover sends the border to --azure-hover, which on this page
   turned the brand accent into a second, slightly different blue underneath a
   label that had gone a third blue: #084F8C text over a #00638B rule, neither
   of them the turquoise the design draws. Only the label moves, and the rule
   is the constant that marks the link in both states. */
.industry .link-rule:hover {
  color: var(--brand-blue-cta-h);          /* 8.38:1 on page */
  border-color: var(--brand-turq);
}

/* ===== MOBILE ============================================================
   Artboard "Page 02, Industries 375": opening 32 / 20 / 28 at gap 14, hero
   190 edge to edge, rows at gap 34 starting 48 below the photograph, closing
   band 56 below the last row. */

@media (max-width: 899px) {
  .p02-open { padding-top: 32px; }
  .p02-open__eyebrow { margin-bottom: 14px; }
  .p02-open__title { margin-bottom: 14px; }
  /* Edge to edge with the height capped, never inset, and no radius: the
     radius Paper draws on the left corners belongs to the desktop bleed. */
  .p02-open__photo { margin-top: 28px; height: 190px; }

  .p02-four { padding-top: 48px; padding-bottom: 0; }
  .p02-four__grid { grid-template-columns: minmax(0, 1fr); row-gap: 34px; }

  .industry { padding-top: 16px; gap: 10px; }
  .industry__title {
    font-size: 22px;
    line-height: 28px;
  }
  .industry__body { font-size: 17px; line-height: 26px; }
  .industry .link-rule { font-size: 17px; line-height: 22px; }

  /* The closing band sits 56 below the last row. .p02-four's own bottom
     padding is zero at this width so the 56 is not doubled. */
  .p02-four + .band { margin-top: 56px; }
}