/* File: myflask/static/css/home.css */

/* Give the hero container a full viewport height minus nav, if desired. */


.hero-container {
  /* === PATCH 2025-12-17: better mobile viewport + a touch more bottom padding START === */
  min-height: 100vh;
  min-height: 100svh; /* better on mobile address-bar layouts */
  background: linear-gradient(135deg, #f9f9f9 25%, #ffffff 100%);

  /* Tiny extra bottom padding + iOS safe-area */
  padding: 2rem 1rem calc(2.5rem + env(safe-area-inset-bottom)) 1rem;
  /* === PATCH 2025-12-17 END === */
}

/* === PATCH 2025-12-17: responsive hero image + CTA START === */
.hero-container .hero-img {
  width: min(600px, 92vw);
  height: auto;
}

.hero-container .hero-cta {
  min-width: min(220px, 85vw);
}
/* === PATCH 2025-12-17 END === */

  .hero-container h1 {
    color: #333; /* override as you like */
  }
  
  /* Example: add a slight drop-shadow to the image */
  .hero-container img {
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    border-radius: 6px;
  }