/* =========================
   Three-card grid module
   ========================= */

/* container */
.da-three-cards-module {
  width:100%;
  box-sizing:border-box;
  padding: 20px 16px;
}

/* inner grid */
.da-three-cards-module .da-three-cards-inner {
  --container-max: 1200px; /* adjust if needed or set via module field */
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.7fr;
  grid-template-rows: auto auto;
  gap: 18px;
  align-items: stretch;
  box-sizing: border-box;
}

/* card base */
.da-card {
  min-height: 160px;
  display: flex;
  align-items: stretch;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  color: inherit;
  box-sizing: border-box;
}

/* left card spans two rows */
.da-card--left {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  display: flex;
  position: relative;   /* needed for absolute image */
  overflow: hidden;
  color: #fff;
  background: #174fe0; /* fallback color - replace with module bg if you use inline styles */
}

/* right cards */
.da-card--top { grid-column: 2 / 3; grid-row: 1 / 2; }
.da-card--bottom { grid-column: 2 / 3; grid-row: 2 / 3; }

/* link wrapper */
.da-card-link { display:flex; width:100%; height:100%; color:inherit; text-decoration:none; }

/* content area */
.da-card-content {
  padding: 28px 22px 0px !important;
  display:flex;
  flex-direction:column;
  justify-content: flex-start;
  gap:12px;
  box-sizing:border-box;
  flex:1 1 auto;
  z-index: 2; /* keep content above absolute image */
}

/* heading & subtext */
.da-card-heading {
  margin:0;
  font-size:40px;
  line-height:1.05;
  font-weight:700;
  color: #fff;
}
.da-card-subtext {
  margin:0;
  font-size:16px;
  line-height:1.5;
  color: #fff;
  opacity:0.95;
}

/* small description above list (if used) */
.da-card-points-heading {
  font-size:15px;
  font-weight:600;
  margin-top:6px;
  margin-bottom:12px;
  color:inherit;
  opacity:0.95;
}

/* image box: default in-flow */
.da-card-image {
  flex: 0 0 40%;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding: 12px 12px 0px !important;
  box-sizing:border-box;
}

/* left card specific: will be switched to absolute via rules below */
.da-card--left .da-card-image {
  /* fallback if absolute gets disabled on small screens */
  align-items:flex-end;
  justify-content:flex-end;
  padding: 20px;
}

/* image inside wrapper */
.da-card-image img {
  max-width:100%;
  height:auto;
  display:block;
  object-fit:contain;
}

/* -------------------------
   IMAGE / LAYOUT ADJUSTMENTS
   (left image absolute + right image cover)
   ------------------------- */

/* make sure cards are positioned to allow absolute image inside left card */
.da-card { position: relative; }

/* LEFT card: make image larger and positioned bottom-right without taking layout space */
.da-card--left {
  position: relative;
  overflow: hidden;
}

/* turn the image wrapper into an absolutely positioned element for left card */
.da-card--left .da-card-image {
  position: absolute;
  right: 20px;           /* distance from right edge of card - adjust if needed */
  bottom: 0px;          /* distance from bottom edge */
  width: 65%;            /* large visual size for left image (44-52% tweakable) */
  height: auto;
  display: block;
  padding: 0;
  align-items: flex-end;
  justify-content: flex-end;
  pointer-events: none;  /* prevents blocking card link clicks */
  box-sizing: border-box;
}

/* make the image fill the absolute box and keep aspect */
.da-card--left .da-card-image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;   /* change to cover if you want it cropped */
  pointer-events: none;
}

/* ensure content area doesn't get hidden behind left absolute image:
   add responsive right padding so text flows safely */
.da-card--left .da-card-content {
  z-index: 3;
  padding-right: clamp(28px, 10%, 40%); /* responsive safe zone */
}

/* RIGHT cards: in-flow image column that fills vertically and crops with cover */
.da-card--top .da-card-image,
.da-card--bottom .da-card-image,
.da-card--right .da-card-image {
  position: relative;
  flex: 0 0 36%;         /* width for right images (adjust 30-40%) */
  align-items: center;
  justify-content: center;
  padding: 12px;
  box-sizing: border-box;
  height: auto;
}

/* right-card images should cover the available area */
.da-card--top .da-card-image img,
.da-card--bottom .da-card-image img,
.da-card--right .da-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 6px;
}

/* -------------------------
   RESPONSIVE: mobile stack & revert absolute
   ------------------------- */
@media (max-width: 900px) {
  .da-three-cards-module { padding: 16px; }

  /* stack grid into single column */
  .da-three-cards-inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }

  /* cards full width stacked */
  .da-card--left, .da-card--top, .da-card--bottom {
    grid-column: 1 / -1;
    grid-row: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  /* image wrappers become normal in-flow small thumbnails */
  .da-card-image {
    position: relative !important;
    flex: 0 0 110px !important;
    padding: 12px 12px 0px !important;
    width: auto !important;
  }
  .da-card-image img {
    width: 100% !important;
    height: 180px !important;
    object-fit: contain !important;
  }

  /* left card content spacing */
  .da-card--left .da-card-content {
    padding-right: 18px !important;
  }

  /* reduce paddings and font sizes for small screens */
  .da-card-content { padding: 18px; }
  .da-card-heading { font-size:20px; }
  .da-card-subtext { font-size:14px; }

/* Optional: ensure left-card image sits to the right on mobile */
.da-card-image {
  order: 0;
  align-items: flex-end;
  justify-content: flex-end;
  width: 55% !important;     /* image width on mobile (adjust 50–60%) */
  margin-left: auto;         /* pushes image to right edge */
  padding: 0 !important;     /* remove padding */
}

.da-card--left .da-card-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
}


/* small visual tweak for gap between cards */
.da-card { box-sizing: border-box; }

/* utility: if you need explicit light text class */
.da-card--light-text { color: #fff; }