/* ====== Desktop layout: hero hero photo / contact about photo ====== */
.home-layout{
  margin-top: 0;
  display: grid;
  grid-template-columns: 0.62fr 1.55fr 1.25fr; /* photo column wider */
  grid-template-rows: auto 1fr;
  gap: 16px;
  align-items: stretch;
  grid-template-areas:
    "hero   hero   photo"
    "contact about  photo";
}

.hero-home{ grid-area: hero; }
.photo-card{ grid-area: photo; }
.contact-card{ grid-area: contact; height: 100%; }
.about-card{ grid-area: about; height: 100%; }

/* Hero tuning */
.hero-home{
  padding: 22px 22px;
}
.hero-home h1{
  font-size: 2.25rem;
  line-height: 1.12;
  margin: 0 0 10px;
}
.hero-home .sub{
  font-size: 1.08rem;
  line-height: 1.4;
  margin: 0;
  color: var(--muted);
}

/* Photo card: spans both rows, image fits inside */
.photo-card{
  padding: 10px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden; /* safety */
}

.photo-card img{
  display: block;
  width: 100%;       /* IMPORTANT: fit inside the box */
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--border);
}

/* Contact: spread sections more (Email / Address / Office) */
.contact-card{
  display: flex;
  flex-direction: column;
}

.contact-card .contact-grid{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 26px;
}

.contact-card .row{
  display: block;
  padding: 0;
}

.contact-card .label{
  margin: 0 0 6px;
}

/* About: stretch spacing between paragraphs more */
.about-card{
  display: flex;
  flex-direction: column;
}

.about-card .about-body{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
}

.about-card p{
  margin: 0;
}

/* ====== Mobile ====== */
@media (max-width: 900px){
  .home-layout{
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "photo"
      "hero"
      "about"
      "contact";
  }

  .photo-card img{
    width: 78%;
    max-width: 330px;
  }
}