/* =========================================================
   TOKENS / GLOBAL UTILS
========================================================= */
:root{
  --gap-12: 12px;
  --gap-16: 16px;
  --shadow-soft: 0 8px 18px -10px rgba(0,0,0,.15);
  --shadow-card: 0 12px 28px rgba(0,0,0,.08);
  --text-muted: #6b7280;
  --text-dark: #1f2937;
  --brand-brown: #5d4037;
  --pill-bg: #eed7d0;
}
h2{
  font-size: 27px;
}
/* soft pill (reusable) */


/* Author meta (reusable) */
.author-meta{ display:flex; align-items:center; gap:.6rem; }
.author-meta .avatar{
  width:32px; height:32px; flex:0 0 32px; border-radius:50%;
  display:grid; place-items:center; overflow:hidden;
}
.author-meta .avatar img, .author-meta .avatar svg{ width:100%; height:100%; }
.author-meta .meta{ line-height:1.15; }
.author-meta .name{ font-weight:500; color:var(--brand-brown); font-size:12px; }
.author-meta .date{ display:block; color:#6b7280; font-size:10px; margin-top:2px; font-weight:500; }

/* Brand arrow button (reusable) */
button.brand-arrow{
  border:0; background:transparent; padding:0; box-shadow:none; outline:none;
  appearance:none; -webkit-appearance:none; line-height:0; cursor:pointer;
}
button.brand-arrow svg{ display:block; width:17px; height:17px; }

/* Blog media overlay (reusable) */
.blog-media{ position:relative; overflow:hidden; }
.blog-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.blog-media::after{
  content:""; position:absolute; inset:0; background:rgba(0,0,0,.28); pointer-events:none;
}

/* Play button (reusable) */
.play-btn{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:56px; height:56px; border:0; background:transparent;
  display:grid; place-items:center; z-index:2; cursor:pointer;
}
.play-btn svg{ width:41px; height:41px; display:block; }

/* =========================================================
   FEATURED BLOG (LEFT)
========================================================= */
.card.blog-featured{
  --outer-r: 24px; --inner-r: 18px; --pad: 16px; --img-h: 360px;
  height: 513px;
  padding: var(--pad);
  border-radius: var(--outer-r);
  background: #fff;
  box-shadow: var(--shadow-card);
  border: 0;
}
.card.blog-featured .card-img-top{
  display:block; width:100%; height:var(--img-h);
  border-radius: var(--inner-r); object-fit:cover;
}
.card.blog-featured .card-body{ padding: 12px 6px 0; }
.card.blog-featured .badge{ border-radius:999px; padding:.35rem .6rem; font-weight:600; background:#eed7d0; color:#5d4037; margin-bottom:.5rem; }
.card.blog-featured h5{ font-size:20px; line-height:1.25; margin:.25rem 0 .75rem; }
.card.blog-featured .d-flex{ gap:.5rem; color:#6b7280; font-size:.95rem; }
.card.blog-featured .d-flex i{ color:#5d4037; }

/* Featured: tablet & down */
@media (max-width: 991.98px){
  .card.blog-featured{ height:auto; }
  .card.blog-featured .card-img-top{ height:240px; }
}
/* Featured: mobile tighten */
@media (max-width: 575.98px){
  .card.blog-featured{ padding:12px; border-radius:18px; }
  .card.blog-featured .card-img-top{ height:200px; border-radius:14px; }
  .news-blogs-section h2{ font-size:20px; }
  .news-blogs-section p{ font-size:11px;}
  .card.blog-featured h5{ font-size:15px; font-weight: 600 !important; }  
}

/* right panel */
.right-panel{
  background:#f4f4f4; border-radius:16px; padding:12px; overflow:hidden;
}

/* Desktop defaults */
.right-panel .blog-list{
  --item-h: 168px; --gap: 16px;
  display:grid; row-gap:var(--gap);
  max-height:calc(2*var(--item-h) + var(--gap)); /* 2 visible */
  overflow-y:auto; padding-right:6px;
}
.right-panel .blog-item{
  background:#fff; box-shadow: var(--shadow-soft);
  margin:0 !important; overflow:visible;
}
/* Card inner grid: thumb | content */
.right-panel .blog-item .row.g-0{
  display:grid !important; grid-template-columns: 168px 1fr;
  column-gap:16px; align-items:center; margin:0;
}
.right-panel .blog-item .col-4,
.right-panel .blog-item .col-8{
  flex:initial !important; max-width:none !important; width:auto !important;
}
/* Thumb */
.right-panel .blog-item img{
  width:100%; height:120px; object-fit:cover; border-radius:12px; display:block;
}
/* Content grid (lets the arrow sit to the right of read-time) */
.right-panel .blog-item .card-body{
  position:relative; padding:0;
  display:grid; grid-template-columns: 1fr auto; grid-auto-rows:auto;
  column-gap:8px; row-gap:6px;
}
/* “Blog” pill + date */
.right-panel .blog-item .badge-soft{ margin-right:8px; }
.right-panel .blog-item .badge.bg-light.text-muted{
  position:absolute; right:0; top:0; background:transparent !important;
  border:0 !important; color:#9aa0a6 !important; font-weight:600; padding:10px;
}
/* Title + excerpt span full width */
.right-panel .blog-item .card-body > h6,
.right-panel .blog-item .card-body > p{ grid-column:1 / -1; margin-bottom:4px; }
.right-panel .blog-item h6{
  color:var(--text-dark); font-size:15px; line-height:100%; font-weight:600;
  margin:6px 0 8px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.right-panel .blog-item p{
  color:var(--text-muted); font-size:13px !important; font-weight:400; line-height:100%;
  margin:0 0 10px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
/* Read-time left, arrow right */
.right-panel .blog-item .small.text-muted{
  grid-column:1; align-self:center; display:flex; align-items:center; gap:6px;
  color:var(--text-muted) !important; font-size:10px;
}
.right-panel .blog-item .brand-arrow{
  grid-column:2; justify-self:end; align-self:center;
}
@media (min-width:992px){
  .right-panel .rp-dots{
    display:none !important;
  }
}
/* Tablet (SM–MD): make it a horizontal scroller with peek */
@media (min-width:576px) and (max-width:991.98px){
  .right-panel{ padding:12px; border-radius:12px; }
  .right-panel .blog-list{
    display:flex !important; gap:12px;
    overflow-x:auto; overflow-y:visible; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; padding-right:0;
    max-height:none !important; height:auto !important;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .right-panel .blog-list::-webkit-scrollbar{ display:none; }

  .right-panel .blog-item{
    min-width:100%; scroll-snap-align:start; border-radius:12px; padding:12px;
    box-shadow:0 2px 8px rgba(0,0,0,.12);
  }
  .right-panel .blog-item .row.g-0{
    grid-template-columns: 112px 1fr; column-gap:12px;
  }
  .right-panel .blog-item img{ height:96px; border-radius:10px; }
  .right-panel .blog-item h6{ font-size:1rem; line-height:1.25; margin:4px 0 6px; }
  .right-panel .blog-item p{ font-size:.9rem; line-height:1.35; margin:0 0 6px; }
  .right-panel .blog-item .small.text-muted{ font-size:.9rem; }
  .right-panel .brand-arrow svg{ width:16px; height:16px; }

  /* dots (add via JS) */
  .right-panel .rp-dots{
    display:flex; justify-content:center; gap:6px; margin-top:10px;
  }
  .right-panel .rp-dots .dot{
    width:9px; height:9px; border-radius:50%; background:#d4d4d4; border:none; padding:0; line-height:0;
  }
  .right-panel .rp-dots .dot.is-active{ background:#757575; }
}

/* Mobile (XS): horizontal 1-up scroller + dots */
@media (max-width:575.98px){
  .right-panel{ padding:10px; border-radius:12px; }
  .right-panel .blog-list{
    display:flex !important; gap:12px;
    overflow-x:auto; overflow-y:visible; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; padding-right:0;
    max-height:none !important; height:auto !important;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .right-panel .blog-list::-webkit-scrollbar{ display:none; }

  .right-panel .blog-item{
    min-width:100%; scroll-snap-align:start; border-radius:12px; padding:12px;
    box-shadow:0 2px 8px rgba(0,0,0,.12);
  }
  .right-panel .blog-item .row.g-0{
    grid-template-columns: 112px 1fr; column-gap:12px;
  }
  .right-panel .blog-item img{ height:96px; border-radius:10px; }
  .right-panel .blog-item h6{ font-size:13px; line-height:1.25; }
  .right-panel .blog-item p{ font-size:11px !important; line-height:1.35;}
  .right-panel .blog-item .small.text-muted{ font-size:11px; }
  .right-panel .brand-arrow svg{ width:16px; height:16px; }

  /* dots (add via JS) */
  .right-panel .rp-dots{
    display:flex; justify-content:center; gap:6px; margin-top:10px;
  }
  .right-panel .rp-dots .dot{
    width:9px; height:9px; border-radius:50%; background:#d4d4d4; border:none; padding:0; line-height:0;
  }
  .right-panel .rp-dots .dot.is-active{ background:#757575; }
}

/* =========================================================
   CARDS CAROUSEL (REUSABLE)
   - Desktop: arrows + 4/3/2 per row
   - Mobile: 2 cards only in one row (no carousel) + Load more support
========================================================= */
.cards-carousel{
  position:relative; isolation:isolate; overflow:visible;
  --g: 24px; --arrow-size:44px; --arrow-outset:18px;
}
.cards-carousel .cc-track{
  display:flex; gap:var(--g); overflow-x:auto; scroll-snap-type:x mandatory;
  padding:4px 0 12px; -webkit-overflow-scrolling:touch; overscroll-behavior-inline:contain;
  --cols:1; /* mobile default (overridden below) */
}
.cards-carousel .cc-track > *{
  flex:0 0 calc((100% - (var(--cols) - 1) * var(--g)) / var(--cols));
  box-sizing:border-box; min-width:0; margin:0 !important; scroll-snap-align:start;
}
.cc-track::-webkit-scrollbar {
  display: none;
}
/* arrows */
.cards-carousel .cc-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:var(--arrow-size); height:var(--arrow-size); border-radius:999px;
  background:#fff; border:1px solid #efefef; box-shadow:0 6px 14px rgba(0,0,0,.12);
  display:grid; place-items:center; z-index:3;
}
.cards-carousel .cc-btn.prev{ left: calc(-1 * var(--arrow-outset)); }
.cards-carousel .cc-btn.next{ right: calc(-1 * var(--arrow-outset)); }
.cards-carousel .cc-btn i{ font-size:20px; color:#212121; }
/* desktop columns */
@media (min-width:576px){  .cards-carousel .cc-track{ --cols:2; } }
@media (min-width:992px){  .cards-carousel .cc-track{ --cols:3; } }
@media (min-width:1200px){ .cards-carousel .cc-track{ --cols:4; } }
/* remove dark overlay on carousel cards if any */
.cards-carousel .blog-media::after{ content:none !important; }

/* Mobile: show 2 cards only in one row, no carousel; support load-more */
@media (max-width:575.98px){
  .cards-carousel .cc-btn{ display:none !important; }
  .cards-carousel .cc-track{
    display:grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap:16px; padding:0; overflow:clip; scroll-snap-type:none;
  }
  .cards-carousel .cc-track > *{
    flex:initial !important; width:auto !important; min-width:0 !important; margin:0 !important;
  }
  .cards-carousel .cc-track > *.is-hidden-mobile{ display:none; }

  .cards-carousel .cc-load-more{
    display:inline-flex; align-items:center; justify-content:center;
    gap:8px; padding:10px 16px; margin-top:12px;
    border:1px solid #e6e6e6; border-radius:999px; background:#fff;
    font-weight:600; font-size:14px; line-height:1; color:#333;
    box-shadow:0 2px 8px rgba(0,0,0,.06); width:100%;
  }
  .cards-carousel .cc-load-more[disabled],
  .cards-carousel .cc-load-more[hidden]{ display:none !important; }

  .blog-card h5{ font-size: 12px;}
  .blog-card p{ font-size: 9px !important;}
  .blog-card span{ font-size: 8px !important;}
  .blog-card a{ font-size: 10px !important;}
}

/* =========================================================
   LATEST VIDEOS (REUSABLE CARD STYLE)
   - Desktop: normal cards with 16:9 media
   - Mobile: fixed 168×267, 2×N grid (with optional load more)
========================================================= */
.latest-videos .blog-card{
  border-radius:20px; background:#fff; box-shadow:var(--shadow-card); overflow:hidden;
}
.latest-videos .blog-media{ aspect-ratio:16/9; }
.latest-videos .blog-body{ padding:16px; }
.latest-videos .badge-soft{ background:#eed7d0; color:#5d4037; border-radius:999px; padding:.35rem .6rem; font-weight:600; }
.latest-videos .blog-title{
  margin:.5rem 0 .75rem; font-size:16px; line-height:1.25; font-weight:600; color:#212121;
}

/* Mobile: 168×267 two-column grid */
@media (max-width:575.98px){
  .latest-videos .row.g-4{
    display:grid !important; grid-template-columns: repeat(2, 168px);
    grid-auto-rows:267px; gap:16px !important; justify-content:center; margin-bottom: 26px;
  }
  .latest-videos .row.g-4 > div{ padding:0 !important; width:168px; min-width:0; }

  .latest-videos .blog-card{
    width:168px; height:267px; border-radius:12px; overflow:hidden;
    opacity:1; transform:rotate(0deg);
    display:flex; flex-direction:column; box-shadow: var(--shadow-card);
  }
  .latest-videos .blog-media{ height:150px; aspect-ratio:auto; }
  .latest-videos .play-btn{ width:48px; height:48px; }
  .latest-videos .play-btn svg{ width:36px; height:36px; }

  .latest-videos .blog-body{ padding:10px; display:flex; flex-direction:column; gap:6px; }
  .latest-videos .badge-soft,
  .latest-videos .blog-body small.text-muted{ font-size:11px; line-height:1; }
  .latest-videos .blog-title{
    font-size:12px; line-height:1.25; margin:4px 0 2px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .latest-videos .author-meta{ gap:.5rem; margin-top:2px; }
  .latest-videos .author-meta .avatar{ width:24px; height:24px; }
  .latest-videos .author-meta .name{ font-size:11px; }
  .latest-videos .author-meta .date{ font-size:10px; }

  /* hide extra items for load more logic (if JS adds .is-hidden-mobile) */
  .latest-videos .row.g-4 > .is-hidden-mobile{ display:none !important; }

  .latest-videos .grid-load-more{
    display:inline-flex; align-items:center; justify-content:center;
    gap:8px; padding:10px 16px; margin-top:12px;
    border:1px solid #e6e6e6; border-radius:999px; background:#fff;
    font-weight:600; font-size:14px; line-height:1; color:#333;
    box-shadow:0 2px 8px rgba(0,0,0,.06); width:100%;
  }
  .latest-videos .grid-load-more[hidden],
  .latest-videos .grid-load-more[disabled]{ display:none !important; }
}