/* desktop/mobile */
.kdesktop { display: block; }
.kmobile { display: none; }

@media (max-width: 700px) {
    .kdesktop { display: none; }
    .kmobile { display: block; }
}


.kmobile-lsphorz {
    @media (max-width: 700px) {
        display: inline-block;
        padding: 8px 0 8px 0;
        }
}

.kmobile-lspvert {
    @media (max-width: 700px) {
        display: inline-block;
        padding: 0 10px 0 10px;
        }
}



/* ==========================================================================
   kgrid41 kgrid31 kgrid21
   ========================================================================== */

/* ==== 4-Column Grid (.kgrid41) ==== */
.kgrid41 {
  display: grid;
  gap: 15px;
  row-gap: 50px;
  grid-template-columns: 1fr; /* Mobile default: 1 column */
  padding: 20px 0;
}


/* 4 across on wide screens */
@media (min-width: 1100px) {
  .kgrid41 {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* ==== 3-Column Grid (.kgrid31) ==== */
.kgrid31 {
  display: grid;
  gap: 15px;
  row-gap: 50px;
  grid-template-columns: 1fr; /* Mobile default: 1 column */
  padding: 20px 0;
}



/* ==== 2-Column Grid (.kgrid21) ==== */
.kgrid21 {
  display: grid;
  gap: 15px;
  row-gap: 50px;
  grid-template-columns: 1fr; /* Mobile default: 1 column */
  padding: 20px 0;
}


/* 2 across on medium and wide screens */
@media (min-width: 600px) {
    .kgrid41 { grid-template-columns: repeat(2, 1fr); }    
    .kgrid31 { grid-template-columns: repeat(2, 1fr); }
    .kgrid21 { grid-template-columns: repeat(2, 1fr); }
}

/* 3 across on wide screens */
@media (min-width: 1100px) {
  .kgrid31 {
    grid-template-columns: repeat(3, 1fr);
  }
}





/*
  Generic Card Container
*/
.gcard-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    
    /* Scales the gap smoothly between 8px and 24px based on browser width */
    gap: clamp(8px, 1.5vw, 24px); 
    
    max-width: 1920px;
    margin: 0 auto;
    
    /* Scales padding from 12px on mobile up to 32px on wide desktop screens */
    padding: clamp(12px, 2.5vw, 32px);
    
    box-sizing: border-box;
}




.gcard-member {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 8px;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
}

.gcard-member a {
    color: #3b3b3b;
}

.gcard-title {
    padding: 0 0 5px 0px;
}

.gcard-image {
    width: 100%;
    aspect-ratio: 3 / 2;
}

.gcard-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gcard-content {
    padding: 10px 0 0 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
}


/* Tablet and up: 2 cards per row */
@media (min-width: 650px) {
  .gcard-container {
    gap: 24px;
    padding: 20px;
  }
  .gcard-content {
    /* padding: 24px; */
  }
  .gcard-member {
    width: calc(50% - 12px); /* 50% minus half the 24px gap */
  }
}

/* Desktop and up: 3 cards per row max */
@media (min-width: 950px) {
  .gcard-member {
    width: calc(25% - 18px); 
  }
}