/******************************** card /********************************/


.widget-header {
    margin-bottom: 8px;
    display:flex;
    align-items:center;
    gap: var(--gap-mo);
    margin:0;
    position:relative;
}
.widget-header:before{
    content:"";
    display:block;
    width:var(--gap);height:22px;
    background:#111;
    position:absolute;
    left:0;
    top:2px;
}
.widget-name{
    font-family: var(--font-secondary); 
    -webkit-font-smoothing: antialiased;
    padding-left: var(--gap); 
    margin-top: var(--gap); 
}
.landing-grid{
    min-width: 0;
    display: grid;
    margin-bottom: var(--gap); 
    margin-top: var(--gap-mox3); 
    grid-template-columns: repeat(12, minmax(0, 1fr)); 
    align-items: stretch;
    gap:0; 
    margin-top: 0;}

.landing-grid > .card-item {
    align-items: start;
    min-width: 0;
    position: relative;
    grid-template-columns: repeat(1, minmax(0, 1fr)); 
    gap: var(--gap); 
    flex-direction: column;
    grid-column: span 3;
    display: flex;
    min-height: 200px;
    flex: 1;
    justify-content: space-between;
}

.landing-grid > .card-item.card-item-hero:nth-child(n + 2)::before,
.landing-grid > .card-item.card-item-hero:nth-child(n)::after {
    content: "";
    position: absolute;
    display: block;
    z-index: 1;
    bottom: var(--gap-mo);
    width: calc( 100% - var(--gapx2));
    height: 1px;
    background: linear-gradient(90deg, #00c853, #b2ff59);
    border-radius: 3px;
    margin-left:0;
    left: var(--gap);
    filter: drop-shadow(0 0 6px #b2ff59);
}
.landing-grid > .card-item.card-item-hero:nth-child(n + 2)::before{
    top: 0;
    bottom: auto;
}

.landing-grid .card-thumbnail {
    overflow:hidden;
    border-radius: var(--radius); 
    width: 100%;
    position: relative;
    object-fit: cover;
    height:100% }

.landing-grid .card-thumbnail:hover {
    transform: translateY(-5px); 
}
.landing-grid .card-post{
    padding-top: var(--gap);
}

.landing-grid > .card-item.card-ratio-sd{
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: var(--gap);
    grid-row: auto;
    flex-direction: row;
    grid-column: span 6;
}

.landing-grid > .card-item.card-ratio-sd .card-post{
    padding-top: var(--gap-mo);
}

.landing-grid .card-category{
    position: absolute;
    font-family: var(--font-secondary); 
    -webkit-font-smoothing: antialiased;
    padding: var(--gap-mo); 
    z-index: 9;
    bottom: 0;
    background: var(--surface); 
    padding: var(--gap-mo) var(--gap); 
}

.landing-grid .card-category a{
    color: var(--hl-gray-00); 
}

.landing-grid .card-category a:hover{
    text-decoration: none;
}

.landing-grid .card-item-hero{
    border-bottom: var(--border); 
    margin-bottom: var(--gapx2);
    border: none;
    padding-bottom: 0;
}
.landing-grid .card-item-hero .card-post{
     padding-left: var(--gapx2) }

.landing-grid .card-item-hero .card-category.sub-name{
    bottom: 0;
    top: auto;
    padding: var(--gap-mo) var(--gap); 
}

.card-excerpt{
    margin-bottom: var(--gap);
}
.card-excerpt > p {
     margin-top: var(--gap); 
     overflow: hidden;
     display: -webkit-box;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     text-overflow: ellipsis;
     max-width: 96% }

.landing-grid .card-post-title {
  margin: var(--gap-mo); 
  color: var(--surface); 
  max-width: 770px;
}
.landing-grid .card-item:not(.card-item-hero) .card-post-title{
  margin: 0;
}
.landing-grid .card-category a {
    color: var(--hl-gray-00);
    text-decoration: none;
    }
.landing-grid .card-excerpt {
    margin: 6px 0 0;
    color: var(--surface);
}


@media (prefers-reduced-motion: no-preference){
    .landing-grid .card-thumbnail {
        transition: transform .25s ease;
    }
    .landing-grid .card-thumbnail-link:hover .card-thumbnail {
        transform: scale(1.02); 
    }
}







@media (min-width: 968px) 
{
    
    .landing-grid > .card-item.card-ratio-hd{
        grid-template-columns: unset;
        grid-column: unset;
    }

    .landing-grid > .card-item.card-ratio-hd:nth-child(-n + 4){
        grid-template-columns: repeat(2, minmax(200px, 1fr)); 
        margin-bottom: var(--gapx4);
        grid-column: span 6;
        padding-left: calc(var(--gap) + var(--gap-mo))}

    .landing-grid > .card-item.card-ratio-hd:nth-child(-n + 4) .card-thumbnail{
        aspect-ratio: 4/3;
    }
    .landing-grid > .card-item.card-ratio-hd:nth-child(n + 4){
        grid-template-columns: repeat(3, minmax(200px, 1fr)); 
        margin-bottom: var(--gapx4);
        grid-column: span 4;
        padding-left: calc(var(--gap) + var(--gap-mo))}

    .landing-grid > .card-item.card-item-hero:nth-child(n){
        grid-column: span 12;
        padding-bottom: var(--gap);
        margin-bottom: var(--gapx4);
        grid-template-columns: minmax(250px, 1fr);
    }

    .landing-grid > .card-item.card-item-hero .card-thumbnail{
        aspect-ratio: 16/7;
    }

    .landing-grid > .card-item.card-item-hero .card-post-title{
        font-size:var(--font-size-xxl); 
        line-height: var(--lh-snug); 
        font-weight:var(--w-medium); }

    .landing-grid > .card-item.card-item-hero:nth-child(n + 1) .card-post{
        padding-left: var(--gap);}

    .landing-grid > .card-item.card-item-hero:nth-child(n + 2){
        grid-column: span 12;
        display: grid;
        grid-template-columns: clamp(33.33%, 100%, 33.333%) minmax(0, 1fr);
        padding-right: var(--gap);
        padding-top: var(--gapx4);
        margin-top: var(--gap);
        padding-bottom: var(--gapx4);
        margin-bottom: var(--gapx4)}

    .landing-grid > .card-item.card-item-hero:nth-child(n + 2) .card-post{
        padding-left: var(--gap);
        order: 1;}

    .landing-grid > .card-item.card-item-hero:nth-child(n + 2) .card-thumbnail{
        order: 2;
        aspect-ratio: 4/3;}

    .landing-grid > .card-item.card-ratio-hd .card-post{
        padding-right: var(--gap-mo);
        padding-left: var(--gap-mo);}
        

    .landing-grid > .card-item:nth-child(n3),
    .landing-grid > .card-item:nth-child(n6){
        padding-right: var(--gap) }

    .landing-grid > .card-item.card-ratio-sd {
        grid-column: span 6;
        padding-right: var(--gap);
        grid-row: unset;
        align-items: stretch;
        display: grid;
        height: 190px;
        grid-template-columns: clamp(180px, 43.3333%, 190px) minmax(0, 1fr);}

    .landing-grid > .card-item.card-ratio-sd .card-excerpt{
        display: none;
    }
    .landing-grid > .card-item.card-ratio-sd > div{
        min-width: 0;
    }
    .landing-grid > .card-item.card-ratio-sd .card-thumbnail{
        aspect-ratio: 1/1;
    }


}

.card-meta{
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: thin;
    column-gap: var(--gap);
    margin-top: var(--gap); 
}

.card-meta::-webkit-scrollbar {
    height: 0px;
}

.card-meta::-webkit-scrollbar-thumb {
    background: #666;
    border-radius: 3px;
}

.card-meta::-webkit-scrollbar-track {
    background: transparent;
}

.card-meta > *{
    display: flex;
    align-items: center;
}


@media (max-width: 968px) {

    .landing-grid > .card-item{
        border: 0;
        margin-bottom: calc(var(--gapx2) - var(--gap-mox2));
    }

    .landing-grid > .card-item:nth-child(),
    .landing-grid > .card-item:nth-child() .card-post{
        padding-left:0; 
        padding-right: 0;}

    .landing-grid > .card-item:not(.card-item-hero) .card-category{
        top: var(--gap-mo);
        bottom: auto;
        padding: var(--gap-mo) var(--gap-mox2); 
        font-size: x-small;
        left: var(--gap-mo);
        border-radius: var(--radius);
    }
    .landing-grid > .card-item:not(.card-item-hero) .card-post{
        display: flex;
        grid-template-columns: 1fr;
        justify-content: space-between;
        flex-direction: column;
        gap: 0;
        color: #111;
        min-height: calc(100px - var(--gap-mo));
        padding-bottom: 0;
        margin-bottom: 0;;
        padding-top: 0;
    }
    
    .landing-grid > .card-item:not(.card-item-hero) .card-meta{
        margin-bottom: var(--gap-mo);
    }

    .landing-grid > .card-item::after {
        content: "";
        position: absolute;
        display: block;
        z-index: 1;
        width: calc( 100% - var(--gapx2));
        height: 1px;
        background: #cccccc;
        border-radius: 3px;
        margin-left: var(--gap);
        margin-bottom: var(--gap-invert);
        bottom: 0;
    }

    .landing-grid > .card-item:nth-child(n + 2) {
        display: grid;
        grid-template-columns: clamp(90px, 33.3333%, 100px) minmax(0, 1fr);
        gap: var(--gap); 
        padding-left: var(--gap); 
        padding-right: var(--gap); 
        grid-column: span 12;
        padding-bottom: 0; 
        align-items: end;
        border: 0;
        min-width: 0;
        min-height: 100px;
        margin-bottom: var(--gap);
    }
    
    .landing-grid > .card-item:nth-child(n + 2) .card-name {
        font-size: var(--font-size-md); 
        line-height: var(--lh-normal); 
        font-weight:var(--w-medium); 
        padding-right: var(--gap); 
        padding-top: var(--gap-mo);
        padding-bottom: var(--gap-mox2);
    }

    .landing-grid > .card-item .card-thumbnail {
        display:flex;
        gap: var(--gap);
        align-items:center;
        margin-top: var(--gap);
        color: var(--surface);
        object-fit: cover;
        transition: transform 0.3s ease;
        overflow: hidden;
        width: 100%;
        height: 100%;
        aspect-ratio:1/1;
    }
    .landing-grid > .card-item .card-thumbnail-link{
        width: 100%;
        height: 100%;
        aspect-ratio: 1/1;
        object-fit: cover; }
    .landing-grid > .card-item .card-thumbnail-link img{
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        position: relative;
    }

    .landing-grid > .card-item.card-item-hero{
        grid-template-columns: repeat(1, minmax(0, 1fr)); 
        padding-bottom: 0;
        margin-bottom: var(--gapx4);
        margin-top: 0;
        padding-top: 0;
        padding-left: 0;
        padding-right: 0;
        grid-column: span 12;
    }


    .landing-grid > .card-item.card-item-hero .card-post-title{
        font-size: var(--font-size-xxl); 
        line-height: var(--lh-snug); 
        font-weight:var(--w-regular);
        padding-top: 0;
    }

    .landing-grid > .card-item.card-item-hero .card-thumbnail{
        aspect-ratio:16/9;
        border-radius: 0;}

    .landing-grid > .card-item.card-item-hero .card-thumbnail-link{
        aspect-ratio:16/9;
    }

    .landing-grid > .card-item.card-item-hero .card-post {
        padding-left: calc(var(--gap) + var(--gap)); 
    }


    .landing-grid > .card-item.card-item-hero:nth-child( n + 2) {
        display: flex;
        flex-direction: column;
        grid-template-columns: repeat(1, minmax(0, 1fr)); 
        padding-left: 0;
        padding-right: 0;
        margin-top: var(--gapx3); 
        margin-bottom: var(--gapx3); 
    }
    .landing-grid > .card-item.card-item-hero:nth-child(n + 2)::before{
        display: none;
    }
    ing-grid > .card-item.card-item-hero:nth-child(n + 1)::before{
        display: none;
    }

    .landing-grid > .card-item.card-item-hero:nth-child( n+ 2) .card-post {
        width: 100%;
        padding-left: var(--gapx2); 
        padding-right: var(--gapx2); 
    }

    .landing-grid > .card-item:not(.card-item-hero) .card-excerpt,
    .landing-grid > .card-item:not(.card-item-hero) .card-thumbnail .meta-tags{
        display: none;
    }

    .landing-grid > .card-item:nth-child(6)::after{
        display: none;
    }

    .widget-header{
        gap: 0;
        padding: 0;
        margin: 0;
        margin-bottom:calc(var(--gap-invert) + var(--gap-invert-mox3));
    }

}




.cardfc-header,
.card-item-hero .card-post,
.homepage-features,
.archive .posts-grid,
.card-item{
    padding-left: var(--gap); 
    padding-right: var(--gap); 
}



.landing-grid .card-post .btd-feature{
  display: block;
  width: 105px;
  margin: var(--gap) var(--gap-mo); 
}
.landing-grid .card-post .btd-feature .btd-feature-body{
  column-gap: 0;
  padding: var(--gap-mo) var(--gap); 
  font-weight: 400;
  grid-template-columns: 23px 1fr;
}
.landing-grid .card-post .btd-feature .btd-feature-body .mso{
  font-size: 16px;
}

/*
.kols-card-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.kols-card.featured {
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.kols-card.featured .kols-thumbnail {
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.kols-card.featured .kols-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kols-card.featured .kols-content_post {
  padding: 20px;
}

.kols-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.kols-card {
  display: flex;
  flex-direction: row;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.kols-card .kols-thumbnail {
  width: 120px;
  min-width: 120px;
  height: 160px;
  overflow: hidden;
}

.kols-card .kols-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kols-card .kols-content_post {
  flex: 1;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}



@media (max-width: 768px) {
  .kols-card-container {
    padding: 16px;
    gap: 16px;
  }

  .kols-card.featured .kols-thumbnail {
    height: 250px;
  }

  .kols-card-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .kols-card {
    flex-direction: column;
  }

  .kols-card .kols-thumbnail {
    width: 100%;
    height: 180px;
  }
}

.kols-content_post h3 {
  margin: 0 0 12px 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}

.kols-content_post .meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #666;
  margin-bottom: 12px;
}

.kols-content_post .kols-card-description {
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  margin-bottom: 12px;
}

.kols-content_post .kols-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.kols-content_post .kols-tag {
  font-size: 12px;
  color: #0066cc;
  text-decoration: none;
}

.kols-travel-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 4px 12px;
  font-size: 12px;
  text-transform: uppercase;
  border-radius: 4px;
}


*/