/* ===== Base ===== */
:root{
  --brand:#1a237e; --accent:#16a34a; --text:#0b0f19; --bg:#ffffff; --muted:#5b6072;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans";
  color:var(--text); background:var(--bg); line-height:1.6;
}
.container{ max-width:1200px; margin:0 auto; padding:16px; }
h1{ margin:0 0 6px; color:var(--brand) }
.card{ background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:12px; }
.muted{ color:var(--muted); border-top:1px solid #e5e7eb; margin-top:32px }

/* ===== Grid (1/2/3 columns) ===== */
#grid .grid{ display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width:640px){  #grid .grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ #grid .grid{ grid-template-columns:repeat(3,1fr); } }

/* ===== Cards (images +20% height) ===== */
#grid .card h3{ font-size:16px; margin:6px 0 2px; }
#grid .card p { font-size:14px; margin:0 0 6px; color:#334155; }
#grid .card img{
  display:block; width:100%; height:276px;  /* mobile */
  object-fit:cover; border-radius:8px;
}
@media (min-width:640px){  #grid .card img{ height:331px; } }  /* tablet */
@media (min-width:1024px){ #grid .card img{ height:386px; } }  /* desktop */
#grid .card img{
  display:block; width:100%; object-fit:cover; border-radius:8px;
  height:276px;
}
@media (min-width:640px){  #grid .card img{ height:331px; } }
@media (min-width:1024px){ #grid .card img{ height:386px; } }

/* ===== Hero ===== */
.hero {
  padding: 16px;
  border-radius: 16px;
  margin-bottom: 18px;
}
#hero {
  padding: 0;
}

#hero .hero {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  border-radius: 0;
  background: none;
  height: auto;
  overflow: visible;
}

#hero .hero picture {
  display: block;
  width: 100%;
}

#hero .hero img.hero-image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* FINAL hero override – ensure full image is visible */
#hero,
#hero .hero,
#hero .hero picture,
#hero .hero img.hero-image {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  display: block;
  width: 100%;
  max-width: 100%;
}