/* Small pieces Tailwind has no utility for, or that would be unreadable as a
 * long utility string. Everything else lives in static/src/app.css.
 *
 * Loaded after app.css, so these win where they overlap.
 */

/* Hero overlay. A pseudo-element gradient rather than a wrapper div, so the
   markup stays one element and the image can be swapped from the template. */
.hero-floor {
  background-size: cover;
  background-position: center;
  position: relative;
}
.hero-floor::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, .68));
}
.hero-floor > * { position: relative; }

/* Uniform gallery tiles regardless of source photo aspect ratio. Phone photos
   from a job site arrive in every shape; the grid should not care. */
.project-thumb {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
  border-radius: 0.5rem;
}

/* Estimator: keep the step area from jumping as fields change height between
   steps, so the Continue button does not move under the cursor mid-click. */
.estimator-step { min-height: 22rem; }