/*
#######################################################################
# 🐢  TPL — Home CSS
# File: /assets/css/home.css
# Version: v6.0.4  (TRTL v1.0.1)
# Role: HOME ONLY (no products/company-info styling in here)
#######################################################################
*/

.u-green{ color: var(--t-green); }
.lead{ color: var(--t-muted); max-width: 62ch; }

/* Masthead (About hero) */
.masthead{
  max-width:1200px;
  margin:36px auto 10px;
  padding:0 20px;
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:36px;
  align-items:center;
}
.masthead h1{
  font-size:clamp(28px,4.2vw,48px);
  line-height:1.15;
  margin:0 0 18px;
}
.masthead .copy{
  display:flex;
  flex-direction:column;
  gap:18px;
}

/* Hero card: subtle TRTL tint (NOT blue) */
.hero-card{
  height:360px;
  border-radius:18px;
  overflow:hidden;
  position:relative;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(26,143,61,.14) 0%, rgba(26,143,61,0) 60%),
    radial-gradient(120% 140% at 100% 100%, rgba(0,0,0,.06) 0%, rgba(0,0,0,0) 55%),
    #fff;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
}

/* make the image FIT (contain) instead of crop */
.hero-card img,
.hero-card picture{
  width:100%;
  height:100%;
  display:block;
}
.hero-card img{
  object-fit:contain;
  object-position:center;
  padding:18px; /* breathing room like Webster tiles */
  filter: drop-shadow(0 18px 24px rgba(0,0,0,.08));
}

@media (max-width:960px){
  .masthead{ grid-template-columns:1fr; gap:22px; }
  .hero-card{ height:300px; }
}

/* Stories section */
.stories{
  max-width:1200px;
  margin:52px auto;
  padding:0 20px;
}
.stories-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:18px;
  margin:0 0 16px;
}
.stories-head h2{
  font-size:clamp(20px,2.6vw,28px);
  margin:0;
  color:var(--t-green);
}
.stories-head a{
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
  font-size:12px;
}

.sb-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
@media (max-width:1024px){ .sb-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .sb-grid{grid-template-columns:1fr} }

/* allow soapbox.css to keep owning card look; just protect spacing */
#soapbox-grid .sb-card{ min-height: 340px; }