/*
 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: force a clean stack + reset theme layout weirdness --- */
@media (max-width: 700px){

  /* use grid but collapse to 1 column (more reliable than display:block) */
  .lusby-cta .lusby-cta__inner{
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: start !important;
    gap: 16px !important;

    /* consistent padding */
    padding: 24px 18px !important;
    overflow: hidden !important;
  }

  /* ensure copy is full width and not constrained by desktop max-width logic */
  .lusby-cta .lusby-cta__copy{
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    position: relative !important;
    z-index: 1 !important;
    text-align: left !important;
  }

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

  /* this is a big part of the “too narrow” look on mobile */
  .lusby-cta .lusby-cta__copy p{
    max-width: none !important;
    margin: 0 0 18px !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
  }

  .lusby-cta .sc_item_button{
    margin: 0 0 0 !important;
  }

  /* reset any theme positioning/floats and ensure it spans full width */
  .lusby-cta .lusby-cta__photo{
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    position: static !important;
    order: 2 !important; /* harmless for grid; helpful if theme swaps to flex */
    z-index: 0 !important;

    /* edge-to-edge inside the card */
    margin: 0 -18px -24px !important;
  }

  .lusby-cta .lusby-cta__photo img{
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: cover !important;

    border-radius: 0 !important;
    box-shadow: none !important;

  
  /* if the “gradient” is actually a pseudo-element from old code/theme */
  .lusby-cta .lusby-cta__photo::before,
  .lusby-cta .lusby-cta__photo::after{
    content: none !important;
    display: none !important;
  }
}