/* HanAnHua V97 — larger responsive position photos + compact paired map pins. */

/* Position photos: keep the same card system, but give the photo a larger,
   readable viewport. The image itself still uses the saved CMS focal point /
   crop and scales automatically with the browser width. */
.field-grid-photo .field-card-photo > figure{
  overflow:hidden;
  background:#ece8dc;
}
.field-grid-photo .field-card-photo > figure > img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Hotel / hospitality cards (3 columns on desktop). */
.field-grid-photo:not(.industry-field-grid) .field-card-photo > figure{
  height:clamp(220px,18vw,300px) !important;
  min-height:220px !important;
  aspect-ratio:auto !important;
}

/* Industry cards (2 columns on desktop). Keep them compact enough to remain
   side-by-side, but make the visual area clearly larger than V94/V95. */
.industry-field-grid .industry-field-card > figure{
  height:clamp(235px,19vw,310px) !important;
  min-height:235px !important;
  aspect-ratio:auto !important;
}

/* Map: paired hotel/industry markers use a small diagonal separation. Labels
   sit above the pair, so the city name does not cover either marker. */
.taiwan-map-final-stage[data-active-map-filter="all"] .taiwan-map-hotspot{
  z-index:10;
}
.taiwan-map-final-stage[data-active-map-filter="all"] .map-city-shared-label{
  z-index:16;
  transform:translate(-50%,-118%);
}
.taiwan-map-final-stage .map-marker{
  position:relative;
  z-index:11;
}

@media(max-width:980px){
  .field-grid-photo:not(.industry-field-grid) .field-card-photo > figure{
    height:clamp(210px,25vw,270px) !important;
    min-height:210px !important;
  }
  .industry-field-grid .industry-field-card > figure{
    height:clamp(220px,27vw,285px) !important;
    min-height:220px !important;
  }
}

@media(max-width:820px){
  /* Cards become one column; a 4:3-ish viewing window gives enough room for
     people and equipment without making the page excessively tall. */
  .field-grid-photo .field-card-photo > figure,
  .field-grid-photo:not(.industry-field-grid) .field-card-photo > figure,
  .industry-field-grid .industry-field-card > figure{
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:4 / 3 !important;
  }
}

@media(max-width:560px){
  .field-grid-photo .field-card-photo > figure,
  .field-grid-photo:not(.industry-field-grid) .field-card-photo > figure,
  .industry-field-grid .industry-field-card > figure{
    aspect-ratio:16 / 11 !important;
  }
  .map-city-shared-label{
    transform:translate(-50%,-122%);
  }
}