/* template.css */
/* ***** Explore Belgrade Lakes ***** */

.explore-wrp {
  padding: 6rem 0 8.75rem;
  position: relative;
}

.explore-wrp h2 {
  margin: 0 0 2.5rem;
  font-weight: 700;
  font-size: 3rem;
  line-height: 3.75rem;
  letter-spacing: -0.03em;
  color: #000000;
}

.explore-block {
  background: #ffffff;
  border: 0.0625rem solid #ebebeb;
  box-shadow: 0 0.5rem 0.9375rem rgba(0, 0, 0, 0.08);
  border-radius: 0.75rem;
  margin: 0 0 1.875rem;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  /* height removed so cards expand vertically as needed */
}

/* ─────────────────────────────────────────────────────────────────────────────
   1) Constrain <figure> to a fixed 11.125rem × 11.5625rem box
   2) Apply the same top‐corner border‐radius here (0.75rem)
   3) Hide any overflowing parts of the image
   ───────────────────────────────────────────────────────────────────────────── */
.explore-img {
  width: 50%;
  position: relative;
  padding: 1.5rem 1.5rem 0;
  background: #ecf1f8;
  display: flex;                /* center the figure inside */
  justify-content: center;
  align-items: center;
}

.explore-img figure {
  width: 11.125rem;    /* 178px ÷ 16 */
  height: 11.5625rem;  /* 185px ÷ 16 */
  margin: 0;
  overflow: hidden;    /* crop anything outside this box */
  border-radius: 0.75rem 0.75rem 0 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   4) Force the <img> to fill the 11.125rem × 11.5625rem <figure> box,
      cropping proportionally (object-fit: cover)
   ───────────────────────────────────────────────────────────────────────────── */
.explore-img figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;  /* scale & crop so the image fills exactly */
  display: block;
}

/* ─────────────────────────────────────────────────────────────────────────────
   5) .explore-data sits to the right of the image. Ensure it can shrink
      so long titles wrap instead of overflowing.
   ───────────────────────────────────────────────────────────────────────────── */
.explore-data {
  padding: 1.5rem;
  width: 50%;
  min-width: 0;
}

.explore-data h3 {
  margin: 0 0 1rem;
  font-weight: 500;
  font-size: 1.25rem;     /* 20px ÷ 16 */
  line-height: 1.625rem;  /* 26px ÷ 16 */
  letter-spacing: -0.02em;
  color: #000000;

  word-break: normal;        
  overflow-wrap: break-word; 
  hyphens: auto;             
}

.explore-data .btn-readmore {
  margin: 0;
}

.explore-all {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;         /* 16px ÷ 16 */
  font-weight: 600;
  color: #72b6af;
  text-transform: uppercase;
  line-height: 1.5rem;     /* 24px ÷ 16 */
  margin: 2.125rem auto 0; /* 34px ÷ 16 */
  width: fit-content;
}

.explore-all i {
  margin: 0 0 0 0.3125rem; /* 5px ÷ 16 */
}

.explore-all span {
  text-decoration: underline;
}

.explore-all:hover {
  color: #151e1b;
}

.donate-shap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.donate-shap img {
  width: 100%;
}

/* ***** End Explore Belgrade Lakes ***** */