/* ==========================================================================
   Homepage — hero photo, the century sentence, the featured apartment.
   ========================================================================== */

/* The photo keeps its own 3:2 proportions on mobile rather than being cropped
   to a tall box, so both edges of the room survive on a narrow screen and the
   whole image clears the fold on a 393px viewport. */
.d-hero{background:var(--espresso)}
.d-hero img{width:100%;height:auto;display:block}

@media (min-width:900px){
  /* Desktop has the height to spare, so cap it and hold the focal point. */
  .d-hero img{height:min(62vh,560px);object-fit:cover;object-position:50% 62%}
}

/* -------------------------------------------------- supporting sentence -- */

.century{
  margin:0;text-align:center;
  font-family:var(--font-serif);font-size:clamp(19px,2.2vw,26px);
  line-height:1.45;color:var(--espresso);
}

/* The sentence and the apartment heading read as one unit, so the two stacked
   section paddings (56px bottom + 84px top = 140px of dead space) collapse
   into a single deliberate gap. */
.d-hero + .section-tight{padding:44px 0 0}
.d-hero + .section-tight + .section{padding-top:30px}

@media (max-width:720px){
  .d-hero + .section-tight{padding-top:30px}
  .d-hero + .section-tight + .section{padding-top:22px}
}

/* ---------------------------------------------------------- photo grid -- */

.d-gallery{
  display:grid;gap:12px;
  grid-template-columns:repeat(4,1fr);
}
.d-gallery button{
  display:block;padding:0;border:0;background:none;cursor:pointer;
  border-radius:var(--radius);overflow:hidden;line-height:0;
  box-shadow:var(--shadow-sm);
}
.d-gallery img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .4s ease}
.d-gallery button:hover img{transform:scale(1.05)}
.d-gallery button:focus-visible{outline:3px solid var(--espresso);outline-offset:3px}

@media (max-width:900px){.d-gallery{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.d-gallery{grid-template-columns:repeat(2,1fr);gap:9px}}

/* A second apartment shown below the first: it already sits under a full
   section's padding, so it does not need another 84px on top. */
.section--stacked{padding-top:0}