/*
 Theme Name:   Asclepius Child Theme
 Theme URI:    https://asclepius.ancorathemes.com/
 Description:  Asclepius Child Theme
 Author:       AncoraThemes
 Author URI:   http://ancorathemes.com
 Template:     asclepius
 Version:      1.0
 Tags:         flexible-header, custom-background, custom-colors, custom-header, custom-menu, featured-image-header, featured-images, full-width-template, microformats, post-formats, theme-options, threaded-comments, translation-ready
 Text Domain:  asclepius
*/


/* =Child-Theme customization starts here
------------------------------------------------------------ */

/* ===== LAYOUT & CARD ===== */
.lusby-cta{
  background:#F8F1ED;               /* page cream */
  padding:72px 20px;                 /* space around the card */
}

/* Make the inner container look like a banner/card */
.lusby-cta__inner{
  max-width:1240px;
  margin:0 auto;
  display:grid;
  grid-template-columns: 1fr 360px;
  align-items:center;

  background:#ffffff;
  border:1px solid rgba(16,24,40,.08);
  border-radius:16px;
  box-shadow:0 10px 30px rgba(16,24,40,.06);
  padding:56px;
  overflow:hidden;

  column-gap:4px;   /* almost no gap */
}


/* ===== TYPOGRAPHY / WRAP ===== */
.lusby-cta__copy h2{
  margin:0 0 12px;
  line-height:1.12;
  max-width:860px;                   /* wrap later so it feels closer to the photo */
}

.lusby-cta__copy p{
  margin:0 0 28px;
  max-width:820px;                   /* wider paragraph */
  line-height:1.65;                  /* touch more rhythm */
  white-space:normal;
  overflow-wrap:anywhere;
}

/* Keep your existing button classes; tiny nudge if needed */
.lusby-cta .sc_item_button{ margin-top:4px; }

/* ===== PHOTO & FADE ===== */
/* Let the photo overlap under text */
.lusby-cta__photo img{
  width:100%;
  height:auto;
  object-fit:cover;
  max-height:440px;
}
/* Make sure text sits above the fade */
.lusby-cta__copy{
  position:relative;
  z-index:1;
}
/* ===== RESPONSIVE ===== */
/* --- Mobile fix: force a clean stack --- */
@media (max-width: 700px){

  /* kill the grid so nothing sits side-by-side */
  .lusby-cta__inner {
    display: block !important;
    padding: 24px 18px;        /* match card spacing */
    column-gap: 0 !important;
    overflow: hidden;
  }

  /* text block full width */
  .lusby-cta__copy {
    width: 100% !important;
    text-align: left;
  }

  .lusby-cta__copy h2 {
    font-size: clamp(24px, 6vw, 32px);
    line-height: 1.22;
    margin: 0 0 12px;
  }

  .lusby-cta__copy p {
    font-size: 16px;
    line-height: 1.6;
    max-width: 95%;
    margin: 0 auto 18px;
  }

  /* center button under text */
  .lusby-cta .sc_item_button {
    margin: 0 auto 18px;
  }

  /* edge-to-edge photo inside card */
  .lusby-cta__photo {
    width: 100% !important;
      margin: 16px -18px -24px -18px; /* add 16px gap from button, still edge-to-edge */
  }

  .lusby-cta__photo img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0;    /* no inner rounding */
    box-shadow: none;    /* avoid double shadow */
  }
}
