/* ==========================================================================
   Home page only.

   Shared blocks (.band, .hero*, .section-*, .task-*, .steps / .step*, .chip*,
   .card*, .btn*) and every colour variable stay in style.css; this file adds
   homepage spacing plus two local variants:
     .home-task-grid  four task cards, 2 x 2 until a full row fits
     .home-steps      the process steps, readable in two columns
   The shared inquiry module is owned elsewhere and is not styled here.
   ========================================================================== */

/* --- Hero -----------------------------------------------------------------
   The media column is always there: the real featured image when one exists,
   otherwise the blank placeholder frame, so the first screen looks the same
   before and after the photo is uploaded. .hero-inner--media brings the
   two-column layout of style.css back, and it collapses below 900px. */
.hero--home .hero-inner { grid-template-columns: minmax(0, 1fr); }
.hero--home .hero-inner--media { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.hero--home .hero-copy { min-width: 0; }
.hero--home .hero-title { max-width: 30ch; }

/* Supply scope lines: two columns once there is room for them. */
.hero--home .hero-points { max-width: 62ch; }

@media (max-width: 900px) {
	.hero--home .hero-inner--media { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 720px) {
	.hero--home .hero-points {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 1.5rem;
	}
}

/* --- Bands ----------------------------------------------------------------
   The first band sits directly under the hero, which already carries its own
   bottom border, so it needs a little more air than a mid-page band. */
.hero + .band { padding-top: 3rem; }

/* --- Procurement task cards ----------------------------------------------
   Four cards: 2 x 2 while a row of four would be too narrow, one column on
   phones. Everything else comes from .task-grid / .task-card in style.css. */
.home-task-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 1100px) {
	.home-task-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
	.home-task-grid { grid-template-columns: minmax(0, 1fr); }
}

/* --- Process steps --------------------------------------------------------
   Two columns keep the step text at a comfortable line length; the accent
   border of .step stays as defined in style.css. */
@media (min-width: 900px) {
	.home-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 2.5rem;
	}
}