/* NC Card 

<div class="ncard">
    <div class="ncard_imgcon">
      <img class="ncard_img" src="" alt="" />
    </div>

    <div class="ncard_text">
      <b class="ncard_pretext">Read Next &rarr;</b>
      <div class="ncard_title">Is God mad at you for not going to church?</div>
    </div>

    <a class="ncard_link" href="#"></a>

</div>


*/


.ncard {
  --card-radius: var(--radius);
  --card-padding: 1em;
  --card-bcolor: #aaa;
  --card-bgcolor: #fff;
  --card-txtcolor: #000;
  --card-direction: column;
  --card-img-ratio: 16/9;
  --card-img-width: 100%;
  --card-transition: 1s;
  
  --card-bgcolor-hover: var(--card-bgcolor);
  --card-txtcolor-hover: var(--card-txtcolor);
  --card-bcolor-hover: #000;
  }
  
  .ncard { 
    display:flex;
    flex-direction: var(--card-direction);
    position:relative;
    border:solid 1px var(--card-bcolor);
    border-radius: var(--card-radius);
    background-color: var(--card-bgcolor);
    color: var(--card-txtcolor);
    transition: var(--card-transition);
    transition-property: background-color, color;
    overflow:hidden;
  }
  
  .ncard_link {
    position:absolute;
    inset:0;
    display:block;
  }
  
  .ncard_imgcon {
    aspect-ratio: var(--card-img-ratio);
    max-width: var(--card-img-width);
    min-width: var(--card-img-width);
    width: 100%;
    overflow: hidden;
    position:relative;
  }
  
  .ncard_img {
    position:absolute;
    object-fit:cover;
    inset:0;
    width: 100%;
    height: 100%;
    display:block;
    transform:scale(1);
    transition:var(--card-transition);
  }
  
  .ncard_text {
    display:flex;
    gap: 0.5rem;
    flex-grow:1;
    flex-direction:column;
    padding: var(--card-padding);
    min-width: 0; /* This is needed if you use truncated content within a flexbox */

    > :not(.ncard_title) {
      font-size: var(--txt-small)
    }
  }

  .ncard_title { 
    font-weight:bold; 
    line-height: normal;
  }

  .ncard_readmore { 
    text-decoration: underline;
  }
  
  .ncard:hover {
    background-color: var(--card-bgcolor-hover);
    color: var(--card-txtcolor-hover);
    border-color: var(--card-bcolor-hover);
  
      .ncard_img {
        transform:scale(1.1);
      }
  
  }
  
  .ncard:has( :is(.ncard_link:active, .ncard_link:focus) ) {
    border-color: var(--card-bcolor-hover);
    box-shadow: var(--shadows)
  }
  
  .ncard:has( :is(.ncard_link:active, .ncard_link:focus) ) {
    .ncard_img {
      transform:scale(1.1);
    }
  }
  
  /* NC Card box */
  
  .ncard_box {
  --box-padding: 3em 0;
  --box-text-color: #000;
  --bg-color: #fff;
  --contain-max-width: 1400px;
  }
  
  .ncard_box {
  padding: var(--box-padding);
  color: var(--box-text-color);
  background: var(--bg-color);
  }
  
  .ncard_box .ncontain {
  max-width: var(--contain-max-width);
  }
  
  .ncard_after {
  margin-top:var(--gap);
  }
  
  /* ----------------- Single Link --------------- */
  
  .ncard-singlelink .ncard_title { 
    white-space: normal; 
    line-height: normal; 
  }

  .ncard-singlelink .ncard_title strong {
    font-weight: bold; color:var(--pretext-color);
  }

  .ncard-singlelink .ncard_url {
    font-size: var(--txt-xsmall);
    display:block;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-bottom: 0;
    text-transform: uppercase;
    opacity: 0.8;
    letter-spacing: 1px;
    max-width: 100%;
    min-width: 0;
    width: 100%
  }