.csgw-wrap{width:100%}
.csgw-header{width:100%}
.csgw-eyebrow{font-size:13px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;margin-bottom:8px}
.csgw-heading{margin:0 0 12px;font-size:46px;line-height:1.1}
.csgw-description{font-size:16px;line-height:1.6}
.csgw-grid{display:grid;width:100%}

.csgw-card{
  position:relative;
  display:block;
  min-width:0;
  overflow:hidden;
  background-size:cover;
  background-repeat:no-repeat;
  text-decoration:none!important;
  color:inherit;
  isolation:isolate;
  container-type:inline-size;
}
.csgw-card:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none}
.csgw-card:after{content:"";position:absolute;inset:0;background-image:inherit;background-size:cover;background-position:inherit;transition:transform .5s ease;z-index:-1}
.csgw-card.csgw-zoom:hover:after{transform:scale(1.06)}
.csgw-hover-overlay{position:absolute;inset:0;opacity:0;background-color:#DAA14C;transition:opacity .35s ease;z-index:2;pointer-events:none}

.csgw-content{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-width:0;
  z-index:3;
}
.csgw-title{
  position:relative;
  z-index:2;
  max-width:100%;
  margin:0;
  font-size:clamp(20px,8cqw,28px);
  line-height:1.12;
  overflow-wrap:anywhere;
  transition:transform .35s ease,opacity .35s ease;
}
.csgw-hover-panel{
  position:absolute;
  inset:12px 12px 72px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:center;
  width:auto;
  max-width:100%;
  min-width:0;
  text-align:center;
  opacity:0;
  overflow:hidden;
  transform:translateY(12px);
  transition:opacity .35s ease,transform .35s ease;
}
.csgw-hover-text{
  width:100%;
  max-width:34ch;
  margin:0 0 clamp(10px,4cqw,18px);
  font-size:clamp(12px,5.2cqw,18px);
  line-height:1.35;
  overflow-wrap:anywhere;
  word-break:normal;
  hyphens:auto;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:8;
  overflow:hidden;
}
.csgw-button-wrap{display:flex;width:100%;justify-content:center}
.csgw-button{
  display:inline-flex;
  align-items:stretch;
  justify-content:center;
  flex:0 0 auto;
  max-width:100%;
  gap:clamp(5px,2cqw,10px);
  border:1px solid;
  padding:clamp(7px,3cqw,10px) clamp(10px,5cqw,18px);
  font-size:clamp(11px,4.2cqw,16px);
  line-height:1.1;
  white-space:normal;
  text-align:center;
  transition:all .25s ease;
}
.csgw-card:hover .csgw-hover-overlay,.csgw-card:focus-within .csgw-hover-overlay{opacity:1}
.csgw-card:hover .csgw-hover-panel,.csgw-card:focus-within .csgw-hover-panel{opacity:1;transform:translateY(0)}
.csgw-card:hover .csgw-title,.csgw-card:focus-within .csgw-title{transform:translateY(-2px)}

/* Narrow desktop cards (4–6 columns): compact hover content automatically. */
@container (max-width:280px){
  .csgw-hover-panel{inset:10px 10px 62px}
  .csgw-hover-text{font-size:clamp(11px,5.5cqw,15px);line-height:1.28;-webkit-line-clamp:7}
  .csgw-button{font-size:clamp(10px,4.5cqw,13px);padding:7px 10px}
  .csgw-title{font-size:clamp(18px,8cqw,24px)}
}
@container (max-width:220px){
  .csgw-hover-panel{inset:8px 8px 54px}
  .csgw-hover-text{font-size:12px;line-height:1.22;margin-bottom:8px;-webkit-line-clamp:6}
  .csgw-button{font-size:10px;padding:6px 8px;gap:4px}
  .csgw-title{font-size:18px}
}

@media(max-width:767px){
  .csgw-heading{font-size:34px}
  .csgw-title{font-size:clamp(22px,8cqw,28px)}
  .csgw-hover-panel{inset:14px 14px 70px}
  .csgw-hover-text{font-size:clamp(13px,4.5cqw,17px);-webkit-line-clamp:8}
}

/* Touch devices do not have reliable hover: reveal content on keyboard focus/tap focus. */
@media(hover:none){
  .csgw-card:focus .csgw-hover-overlay,
  .csgw-card:focus .csgw-hover-panel{opacity:1}
  .csgw-card:focus .csgw-hover-panel{transform:translateY(0)}
}