/* ============================================================
   VirtualTees Blog
   File: /assets/css/blog.css
   Scope: blog pages only (vt-blog-* classes)
   Accent: #0ea5a4
   ============================================================ */

:root{
  --blog-accent: #0ea5a4;
  --blog-text: #111827;
  --blog-muted: rgba(17,24,39,0.70);
  --blog-border: rgba(17,24,39,0.12);
  --blog-bg: #ffffff;
  --blog-card: #ffffff;
  --blog-shadow: 0 16px 55px rgba(0,0,0,0.10);
  --blog-radius: 18px;

  /* Was 980px — bump ~30px wider */
  --blog-max: 1010px;

  /* Body image clamp */
  --blog-body-img-max: 300px;
}

/* ============================================================
   Sticky footer (blog only)
   ============================================================ */
html, body{ height: 100%; }

body{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.vt-blog-page{
  flex: 1;
  background: var(--blog-bg);
  padding: 28px 0 42px;
}

@media (min-width: 860px){
  .vt-blog-page{ padding: 42px 0 60px; }
}

/* ============================================================
   Wrap + HEADER CLEARANCE
   IMPORTANT: apply directly (no body class required)
   ============================================================ */

.vt-blog-wrap{
  width: min(var(--blog-max), calc(100% - 32px));
  margin: 0 auto;

  /* Push content below the gateway header (absolute/fixed) */
  padding-top: calc(var(--header-h, 84px) + 0px);
}

@media (max-width: 859px){
  .vt-blog-wrap{
    padding-top: calc(var(--header-h, 72px) + 0);
  }
}
.vt-blog-page .vt-blog-wrap{ padding-top: calc(var(--header-h, 72px) + 0px) !important; }

/* ============================================================
   Top row (title + search)
   ============================================================ */

.vt-blog-top{
  display: grid;
  gap: 14px;
  margin-bottom: 16px;
}

@media (min-width: 860px){
  .vt-blog-top{
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 18px;
    margin-bottom: 18px;
  }
}

.vt-blog-title{
  margin: 0 0 6px;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 900;
  color: var(--blog-text);
}

@media (min-width: 860px){
  .vt-blog-title{ font-size: 40px; }
}

.vt-blog-sub{
  margin: 0;
  color: var(--blog-muted);
  font-weight: 900;
  line-height: 1.55;
  max-width: 70ch;
}

/* Search */
.vt-blog-search{
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
}

@media (min-width: 860px){
  .vt-blog-search{ justify-content: flex-end; }
}

.vt-blog-search__input{
  width: min(420px, 100%);
  height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--blog-border);
  outline: none;
  font-weight: 600;
  color: var(--blog-text);
  background: #fff;
}

.vt-blog-search__input:focus{
  border-color: rgba(14,165,164,0.55);
  box-shadow: 0 0 0 4px rgba(14,165,164,0.16);
}

.vt-blog-search__btn{
  height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(14,165,164,0.35);
  background: rgba(14,165,164,0.12);
  color: #055b5a;
  font-weight: 900;
  cursor: pointer;
}

.vt-blog-search__btn:hover{
  background: rgba(14,165,164,0.18);
}

/* ============================================================
   Category chips row
   - swipeable on mobile
   - scrollbar hidden
   - extra right padding so last chip never clips
   ============================================================ */

.vt-blog-cats{
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;

  padding: 6px 54px 10px 2px; /* increased right padding */
  margin: 6px 0 18px;

  scrollbar-width: none;    /* Firefox */
  -ms-overflow-style: none; /* IE/old Edge */
}

.vt-blog-cats::-webkit-scrollbar{ height: 0; }

.vt-blog-cat{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;

  padding: 9px 12px;
  border-radius: 999px;

  border: 1px solid var(--blog-border);
  background: #fff;
  color: rgba(17,24,39,0.86);

  text-decoration: none;
  font-weight: 800;
  font-size: 13px;
}

.vt-blog-cat:hover{
  border-color: rgba(14,165,164,0.45);
  box-shadow: 0 0 0 4px rgba(14,165,164,0.10);
}

.vt-blog-cat.is-active{
  border-color: rgba(14,165,164,0.70);
  background: rgba(14,165,164,0.12);
  color: #055b5a;
}

/* Blog category pills: wrap on desktop, scroll on mobile */
.vt-blog-cats{
  display:flex;
  flex-wrap:wrap;
  overflow:visible;
  gap:10px;
}

/* Mobile: keep the nice horizontal scroll */
@media (max-width: 900px){
  .vt-blog-cats{
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none; /* Firefox */
  }
  .vt-blog-cats::-webkit-scrollbar{ display:none; } /* Chrome/Safari */
}


/* ============================================================
   List + Cards
   ============================================================ */

.vt-blog-list{
  display: grid;
  gap: 14px;
  margin-top: 10px;
}

@media (min-width: 860px){
  .vt-blog-list{ gap: 18px; }
}

.vt-blog-card{
  display: grid;
  grid-template-columns: 1fr;
  background: var(--blog-card);
  border: 1px solid var(--blog-border);
  border-radius: var(--blog-radius);
  box-shadow: var(--blog-shadow);
  overflow: hidden;
}

@media (min-width: 860px){
  .vt-blog-card{ grid-template-columns: 320px 1fr; }
}

.vt-blog-card__img{
  display: block;
  text-decoration: none;
  background: #f3f4f6;
}

.vt-blog-card__img img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  aspect-ratio: 16 / 9;
}

@media (min-width: 860px){
  .vt-blog-card__img img{
    aspect-ratio: auto;
    min-height: 100%;
  }
}

.vt-blog-card__body{
  padding: 14px 14px 16px;
}

@media (min-width: 860px){
  .vt-blog-card__body{ padding: 18px 18px 20px; }
}

.vt-blog-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.vt-blog-date{
  color: rgba(17,24,39,0.62);
  font-weight: 700;
  font-size: 12px;
}

.vt-blog-chip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(14,165,164,0.45);
  background: rgba(14,165,164,0.10);
  color: #055b5a;
  text-decoration: none;
  font-weight: 900;
  font-size: 12px;
}

.vt-blog-chip:hover{
  background: rgba(14,165,164,0.16);
}

.vt-blog-h2{
  margin: 0 0 8px;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

@media (min-width: 860px){
  .vt-blog-h2{ font-size: 22px; }
}

.vt-blog-h2 a{
  color: var(--blog-text);
  text-decoration: none;
}

.vt-blog-h2 a:hover{ text-decoration: underline; }

.vt-blog-excerpt{
  margin: 0 0 12px;
  color: var(--blog-muted);
  font-weight: 600;
  line-height: 1.6;
}

.vt-blog-readmore{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--blog-accent);
  font-weight: 900;
  text-decoration: none;
}

.vt-blog-readmore:hover{ text-decoration: underline; }

/* Empty state */
.vt-blog-empty{
  border: 1px solid var(--blog-border);
  border-radius: var(--blog-radius);
  padding: 16px;
  background: #fff;
}

/* ============================================================
   Pagination
   ============================================================ */

.vt-blog-pager{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding-top: 10px;
}

.vt-blog-pager__left{ justify-self: start; }
.vt-blog-pager__right{ justify-self: end; }

.vt-blog-pager__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--blog-border);
  background: #fff;
  color: rgba(17,24,39,0.90);
  text-decoration: none;
  font-weight: 900;
}

.vt-blog-pager__btn:hover{
  border-color: rgba(14,165,164,0.45);
  box-shadow: 0 0 0 4px rgba(14,165,164,0.10);
}

.vt-blog-pager__nums{
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

.vt-blog-pager__num{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid var(--blog-border);
  background: #fff;
  color: rgba(17,24,39,0.90);
  text-decoration: none;
  font-weight: 900;
  font-size: 13px;
}

.vt-blog-pager__num:hover{
  border-color: rgba(14,165,164,0.45);
  box-shadow: 0 0 0 4px rgba(14,165,164,0.10);
}

.vt-blog-pager__num.is-active{
  border-color: rgba(14,165,164,0.70);
  background: rgba(14,165,164,0.12);
  color: #055b5a;
}

/* ============================================================
   Link sanity
   ============================================================ */
.vt-blog-page a{ text-underline-offset: 2px; }

/* ============================================================
   Blog post body typography
   ============================================================ */

.vt-blog-article__body{
  color: var(--blog-text);
  line-height: 1.75;
  font-weight: 500;
  max-width: 82ch;
}

.vt-blog-article__body p{ margin: 0 0 14px; }
.vt-blog-article__body h2{ margin: 22px 0 10px; font-size: 22px; }
.vt-blog-article__body h3{ margin: 18px 0 8px; font-size: 18px; }
.vt-blog-article__body ul,
.vt-blog-article__body ol{ margin: 0 0 14px 20px; }
.vt-blog-article__body a{ color: var(--blog-accent); font-weight: 800; }
.vt-blog-article__body a:hover{ text-decoration: underline; }

/* ============================================================
   Images
   - Featured images: stay responsive/full-width
   - Body images inside vt-blog-article__body: clamp and left align
   ============================================================ */

/* Featured images / any "hero" images should remain responsive */
.vt-blog-card__img img{
  max-width: 100%;
  width: 100%;
  height: 100%;
}

/* Clamp ONLY body images (prevents shrinking featured images) */
.vt-blog-article__body img{
  max-width: min(var(--blog-body-img-max), 100%) !important;
  width: auto !important;
  height: auto !important;
  display: block;
  margin: 18px 0 !important; /* left aligned */
}

/* Mobile: body images nearly full width with side margin */
@media (max-width: 680px){
  .vt-blog-article__body img{
    max-width: calc(100% - 24px) !important; /* small side margins */
    width: calc(100% - 24px) !important;
    margin: 18px 12px !important; /* 12px each side */
  }
}

/* If TinyMCE inserts explicit width/height attributes, still keep layout sane */
.vt-blog-article__body img[width]{
  width: auto !important;
}