/**
 * Basic Image With Copy (BIWC)
 * - Desktop: 2-col layout (image | text stack)
 * - Mobile: Title -> Image -> Copy/Button
 */

/* ======================================
   WRAPPER
====================================== */
.basic-image-with-copy{
  padding: 80px 0;
}

.basic-image-with-copy.has-bg--white{ background:#fff; }
.basic-image-with-copy.has-bg--grey{  background:#eee; }

/* ======================================
   LAYOUT (DESKTOP)
   Use 2 rows so image can span both,
   while header + content stack neatly.
====================================== */
.basic-image-with-copy .biwc-inner{
  max-width: 90%;
  margin: 0 auto;

  display: grid;
  grid-template-columns: 1fr 1.2fr; /* image | text */
  grid-template-rows: auto 1fr;     /* header | content */
  gap: 40px;
  align-items: start;
}

/* IMAGE: spans both rows */
.basic-image-with-copy .biwc-media{
  grid-column: 1;
  grid-row: 1 / -1;

  border-radius: 26px;
  overflow: hidden;
}

.basic-image-with-copy .biwc-img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 16 / 9;
  border-radius: 26px;
}

/* HEADER sits top of text column */
.basic-image-with-copy .biwc-header{
  grid-column: 2;
  grid-row: 1;
}

.basic-image-with-copy .biwc-title{
  margin: 0 0 30px 0;
  font-weight: 900;
  color: #111;
}

/* CONTENT sits under header in text column */
.basic-image-with-copy .biwc-content{
  grid-column: 2;
  grid-row: 2;
}

.basic-image-with-copy .biwc-copy h3,
.basic-image-with-copy .biwc-copy h4{
  color: #000;
  margin: 0 0 30px;
}

.basic-image-with-copy .biwc-copy p{
  margin: 0 0 30px 0;
}

.basic-image-with-copy .biwc-copy p:last-child{
  margin-bottom: 0;
}

.basic-image-with-copy .biwc-copy ol{
  margin: 0 0 0 20px;
}

.basic-image-with-copy .biwc-copy ol li{
  font-weight: 900;
}

.basic-image-with-copy .biwc-copy ul{
  margin: 0 0 1.5em 25px;
}

.basic-image-with-copy .biwc-actions{
  margin-top: 30px;
}

.basic-image-with-copy .biwc-copy a{
  color: #52287E;
}

.basic-image-with-copy h3 span,
.basic-image-with-copy h4 span{
  color: #52287E;
}

/* Placeholder */
.basic-image-with-copy .biwc-placeholder{
  border: 1px dashed #bbb;
  border-radius: 18px;
  padding: 18px;
  background: #fafafa;
  color: #555;
}

/* ======================================
   IMAGE POSITION SWAP (DESKTOP)
====================================== */
.basic-image-with-copy.has-image--right .biwc-inner{
      grid-template-columns: 2fr 1fr; /* text | image */
}

/* when image is right, swap columns */
.basic-image-with-copy.has-image--right .biwc-media{
  grid-column: 2;
}

.basic-image-with-copy.has-image--right .biwc-header,
.basic-image-with-copy.has-image--right .biwc-content{
  grid-column: 1;
}

/* If you still want a “taller” image when it’s on the right (desktop only) */
@media (min-width: 901px){
  .basic-image-with-copy.has-image--right .biwc-img{
    min-height: 560px;
    height: 100%;
    object-fit: cover;
    aspect-ratio: auto; /* allow tall */
  }
}

/* ======================================
   RESPONSIVE (MOBILE)
   Force order: title -> image -> copy
====================================== */
@media (max-width: 900px){
  .basic-image-with-copy{
    padding: 24px 0;
  }

  .basic-image-with-copy .biwc-inner{
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: stretch;
  }

  /* Force order reliably */
  .basic-image-with-copy .biwc-header{ order: 1; }
  .basic-image-with-copy .biwc-media{  order: 2; }
  .basic-image-with-copy .biwc-content{order: 3; }

  /* Force image to be visible (guards against global/theme rules) */
  .basic-image-with-copy .biwc-media{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
  }

  .basic-image-with-copy .biwc-img{
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  .basic-image-with-copy .biwc-title{
    margin-bottom: 10px;
  }
}

@media (max-width: 768px){

  /* Slightly taller image feel on small screens */
  .basic-image-with-copy .biwc-img{
    aspect-ratio: 12 / 9;
  }
}