/* ==========================================================
   V32 — Photo scale + desktop composition correction
   Goal: photos support the content instead of dominating it.
   Hero photography is intentionally NOT affected.
   ========================================================== */

/* ---------- HOME ---------- */
@media (min-width: 1081px){
  /* Primary service cards */
  body.home-page .service-card .photo,
  .service-card .photo{
    height:245px !important;
    aspect-ratio:auto !important;
  }
  .service-card .photo img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }

  /* Soil / Grading / Tree Planting row */
  .secondary-grid{
    align-items:stretch !important;
  }
  .secondary-card{
    display:flex !important;
    flex-direction:column !important;
    height:100% !important;
  }
  .secondary-card > img{
    width:100% !important;
    height:255px !important;
    max-height:255px !important;
    aspect-ratio:auto !important;
    object-fit:cover !important;
    object-position:center !important;
    flex:0 0 255px !important;
  }
  .secondary-card .body{
    flex:1 1 auto !important;
  }

  /* Home project mosaic */
  .project-visual{
    grid-template-columns:1.25fr .75fr !important;
    grid-template-rows:190px 190px !important;
    gap:10px !important;
    max-height:390px !important;
  }
  .project-visual figure{
    min-height:0 !important;
    max-height:390px !important;
  }
  .project-visual figure:first-child{
    grid-row:1 / 3 !important;
  }

  /* Home team photo */
  .team-image{
    height:360px !important;
    max-height:360px !important;
  }
}

/* ---------- SERVICE DETAIL PAGES ---------- */
/* Pavers / retaining walls large project mosaic */
@media (min-width: 1081px){
  .project-layout{
    grid-template-columns:1.12fr .88fr !important;
    gap:16px !important;
    align-items:stretch !important;
  }
  .project-layout .project-large{
    height:420px !important;
    min-height:0 !important;
    max-height:420px !important;
  }
  .project-layout .project-stack{
    height:420px !important;
    min-height:0 !important;
    max-height:420px !important;
    grid-template-rows:1fr 1fr !important;
    gap:14px !important;
  }
  .project-layout .project-stack figure{
    min-height:0 !important;
    height:auto !important;
    max-height:none !important;
  }
  .project-layout img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }

  /* Three service-use cards */
  .use-grid{
    align-items:stretch !important;
  }
  .use-card{
    height:100% !important;
    display:flex !important;
    flex-direction:column !important;
  }
  .use-card > img{
    height:250px !important;
    max-height:250px !important;
    aspect-ratio:auto !important;
    object-fit:cover !important;
    flex:0 0 250px !important;
  }
  .use-card .body{
    flex:1 1 auto !important;
  }

  /* Single "real project" image */
  .real-image{
    height:350px !important;
    min-height:0 !important;
    max-height:350px !important;
  }
  .real-image img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }

  /* Patios / grading / soil / tree 3-photo mosaic */
  .image-stack{
    grid-template-columns:1.08fr .92fr !important;
    grid-template-rows:185px 185px !important;
    gap:10px !important;
    max-height:380px !important;
  }
  .image-stack figure{
    min-height:0 !important;
    max-height:380px !important;
  }
  .image-stack figure:first-child{
    grid-row:1 / 3 !important;
  }
  .image-stack img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }
}

/* ---------- OVERVIEW / CITY / RESOURCE CARDS ---------- */
@media (min-width: 1081px){
  .grid > .card > img,
  .services-grid > .card > img{
    height:230px !important;
    max-height:230px !important;
    flex-basis:230px !important;
    object-fit:cover !important;
  }
  .hub-grid > .hub-card > img{
    height:225px !important;
    max-height:225px !important;
    flex-basis:225px !important;
    object-fit:cover !important;
  }
  .grid-3 > .card > img{
    height:245px !important;
    max-height:245px !important;
    flex-basis:245px !important;
    object-fit:cover !important;
  }

  /* Generic split-page content photography */
  .split .photo img,
  .intro-grid .photo img,
  .photo > img{
    height:340px !important;
    max-height:340px !important;
    object-fit:cover !important;
  }
}

/* ---------- TABLET ---------- */
@media (min-width: 761px) and (max-width: 1080px){
  .secondary-card > img,
  .grid > .card > img,
  .services-grid > .card > img,
  .hub-grid > .hub-card > img,
  .grid-3 > .card > img,
  .use-card > img{
    height:220px !important;
    max-height:220px !important;
    aspect-ratio:auto !important;
    object-fit:cover !important;
  }

  .project-layout{
    grid-template-columns:1fr !important;
  }
  .project-layout .project-large{
    height:350px !important;
    min-height:0 !important;
  }
  .project-layout .project-stack{
    height:auto !important;
    grid-template-columns:1fr 1fr !important;
    grid-template-rows:none !important;
  }
  .project-layout .project-stack figure{
    height:220px !important;
    min-height:0 !important;
  }

  .image-stack{
    grid-template-columns:1fr 1fr !important;
    grid-template-rows:230px 230px !important;
    max-height:none !important;
  }
  .image-stack figure:first-child{
    grid-row:auto !important;
    grid-column:1 / -1 !important;
  }

  .real-image,
  .team-image{
    height:320px !important;
    max-height:320px !important;
  }

  .photo > img{
    height:300px !important;
    max-height:300px !important;
    object-fit:cover !important;
  }
}

/* ---------- MOBILE ---------- */
@media (max-width: 760px){
  .secondary-card > img,
  .grid > .card > img,
  .services-grid > .card > img,
  .hub-grid > .hub-card > img,
  .grid-3 > .card > img,
  .use-card > img{
    width:100% !important;
    height:215px !important;
    max-height:215px !important;
    aspect-ratio:auto !important;
    object-fit:cover !important;
  }

  .project-visual{
    grid-template-columns:1fr !important;
    grid-template-rows:none !important;
    max-height:none !important;
  }
  .project-visual figure,
  .project-visual figure:first-child{
    height:220px !important;
    max-height:220px !important;
    grid-row:auto !important;
  }

  .project-layout{
    grid-template-columns:1fr !important;
  }
  .project-layout .project-large{
    height:260px !important;
    min-height:0 !important;
  }
  .project-layout .project-stack{
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:none !important;
    height:auto !important;
  }
  .project-layout .project-stack figure{
    height:210px !important;
    min-height:0 !important;
  }

  .image-stack{
    grid-template-columns:1fr !important;
    grid-template-rows:none !important;
    max-height:none !important;
  }
  .image-stack figure,
  .image-stack figure:first-child{
    height:210px !important;
    min-height:0 !important;
    grid-row:auto !important;
    grid-column:auto !important;
  }

  .real-image,
  .team-image{
    height:270px !important;
    max-height:270px !important;
  }

  .photo > img{
    height:260px !important;
    max-height:260px !important;
    object-fit:cover !important;
  }
}