/*
 * Blog Card — homepage "Latest posts" grid (.blog-home.large-columns-4)
 *
 * Canonical owner for this component. Replaces four historical patch layers
 * that previously lived in Customizer > Additional CSS:
 *   - "PL BLOG HOME — FULL REDESIGN v4" (design + layout)
 *   - "FLEX OVERFLOW FIX" (Fix 1-6, min-width:0 corrections — folded in below)
 *   - "FINAL POLISH" (padding/font-size refinements — folded in below)
 *   - "PSI FIX 5" item [5]/[5b]/[5c] (category-label contrast fix — single
 *     declaration now, no override chain needed)
 *
 * The original "STEP 1: UNDO FLICKITY" block was deliberately NOT migrated —
 * live DOM inspection (Phase 7) confirmed no Flickity instance is ever
 * present on this page, at any viewport, so that code was dead.
 *
 * Full forensic history: audit/css/blog-grid-forensics.md
 * Do not add new override files for this component — edit this file.
 */

.blog-home.large-columns-4 {
  display: flex !important;
  flex-wrap: wrap !important;
  overflow: visible !important;
  padding: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  --pl-brand:      #26bfe9;
  --pl-gold:       #c4a35a;
  --pl-dark:       #111827;
  --pl-text:       #1e2533;
  --pl-sub:        #64748b;
  --pl-radius:     10px;
  --pl-border:     rgba(196,163,90,0.18);
  --pl-border-h:   rgba(38,191,233,0.40);
  --pl-shadow:     0 2px 12px rgba(15,23,42,0.07), 0 1px 3px rgba(15,23,42,0.05);
  --pl-shadow-h:   0 10px 32px rgba(38,191,233,0.14), 0 3px 10px rgba(15,23,42,0.09);
  --pl-ease:       0.28s cubic-bezier(.4,0,.2,1);
}

.blog-home.large-columns-4 .col.post-item {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  float: none !important;
  width: 25% !important;
  flex: 0 0 25% !important;
  max-width: 25% !important;
  padding: 10px !important; /* was 12px in the original redesign, tightened by "FINAL POLISH" */
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}

.blog-home.large-columns-4 .col-inner {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-width: 0 !important; /* Fix 2: flex children need min-width:0 to avoid overflowing their container */
}

.blog-home.large-columns-4 .box-blog-post {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  background: #fff !important;
  border-radius: var(--pl-radius) !important;
  border: 1px solid var(--pl-border) !important;
  box-shadow: var(--pl-shadow) !important;
  overflow: hidden !important;
  transition: transform var(--pl-ease), box-shadow var(--pl-ease), border-color var(--pl-ease) !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
  min-width: 0 !important; /* Fix 2 */
}
.blog-home.large-columns-4 .box-blog-post:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--pl-shadow-h) !important;
  border-color: var(--pl-border-h) !important;
}
.blog-home.large-columns-4 .box-blog-post.box-push .box-text,
.blog-home.large-columns-4 .box-blog-post.box-push:hover .box-text {
  margin-top: 0 !important;
  transform: none !important;
  transition: none !important;
}

.blog-home.large-columns-4 .box-image {
  overflow: hidden !important;
  border-radius: var(--pl-radius) var(--pl-radius) 0 0 !important;
  flex-shrink: 0 !important;
  position: relative !important;
}
.blog-home.large-columns-4 .image-cover {
  padding-top: 62.5% !important; /* 16:10 */
  background: linear-gradient(135deg, #f5f0e8 0%, #ede8d8 100%) !important; /* placeholder color while loading */
}
.blog-home.large-columns-4 .image-cover img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform .5s cubic-bezier(.4,0,.2,1) !important;
}
.blog-home.large-columns-4 .box-blog-post:hover .image-cover img {
  transform: scale(1.06) !important;
}

.blog-home.large-columns-4 .box-text {
  text-align: left !important;
  padding: 15px 16px 18px !important; /* tightened by "FINAL POLISH" from 18px 20px 22px */
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important; /* Fix 2 */
}
.blog-home.large-columns-4 .blog-post-inner {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important; /* Fix 1: was overflowing its container (280px in a 211px parent) */
  width: 100% !important;
}

.blog-home.large-columns-4 .cat-label {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  background: rgba(0,95,128,0.08) !important;
  color: #005F80 !important; /* final, WCAG-AA-compliant value — was set 4 times across 3 patch layers, see override-chain.md */
  font-family: 'Be Vietnam Pro', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.9px !important;
  text-transform: uppercase !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(38,191,233,0.20) !important;
  margin-bottom: 11px !important;
  opacity: 1 !important;
  line-height: 1.5 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important; /* Fix 3 */
}

.blog-home.large-columns-4 .post-title {
  font-family: 'Be Vietnam Pro', sans-serif !important;
  font-size: 14.5px !important; /* tightened by "FINAL POLISH" from 15px */
  font-weight: 600 !important;
  line-height: 1.52 !important;
  color: var(--pl-text) !important;
  margin: 0 0 9px !important;
  text-align: left !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-width: 0 !important;    /* Fix 4 */
  width: 100% !important;
  word-break: break-word !important;
}
.blog-home.large-columns-4 .post-title a {
  color: var(--pl-text) !important;
  text-decoration: none !important;
  transition: color var(--pl-ease) !important;
  display: block !important;
  white-space: normal !important;
  word-break: break-word !important;
}
.blog-home.large-columns-4 .box-blog-post:hover .post-title a {
  color: var(--pl-brand) !important;
}

.blog-home.large-columns-4 .post-meta {
  font-family: 'Be Vietnam Pro', sans-serif !important;
  font-size: 11px !important;
  color: var(--pl-sub) !important;
  opacity: 1 !important;
  text-align: left !important;
  margin-bottom: 8px !important;
  letter-spacing: 0.2px !important;
  min-width: 0 !important;    /* Fix 6 */
  width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.blog-home.large-columns-4 .is-divider {
  background: linear-gradient(90deg, var(--pl-gold) 0%, rgba(196,163,90,0.10) 100%) !important;
  height: 1.5px !important;
  width: 32px !important;
  max-width: 32px !important;
  margin: 4px 0 11px !important;
  border: none !important;
  opacity: 1 !important;
  flex-shrink: 0 !important;
}

.blog-home.large-columns-4 .from_the_blog_excerpt {
  font-family: 'Be Vietnam Pro', sans-serif !important;
  font-size: 13px !important;
  color: var(--pl-sub) !important;
  line-height: 1.72 !important;
  text-align: left !important;
  flex: 1 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  overflow-wrap: break-word !important;
  margin-bottom: 14px !important;
  min-width: 0 !important;    /* Fix 5 */
  width: 100% !important;
  word-break: break-word !important;
}

.blog-home.large-columns-4 .blog-post-inner::after {
  content: "Xem bài viết →" !important;
  display: inline-block !important;
  font-family: 'Be Vietnam Pro', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--pl-gold) !important;
  letter-spacing: 0.5px !important;
  margin-top: auto !important;
  border-bottom: 1.5px solid rgba(196,163,90,0.35) !important;
  padding-bottom: 1px !important;
  transition: color var(--pl-ease), border-color var(--pl-ease) !important;
  width: fit-content !important;
}
.blog-home.large-columns-4 .box-blog-post:hover .blog-post-inner::after {
  color: var(--pl-brand) !important;
  border-color: rgba(38,191,233,0.40) !important;
}

.blog-home.large-columns-4,
.blog-home.large-columns-4 * {
  -webkit-backface-visibility: hidden !important;
}

/* Tablet: 2 columns */
@media (max-width: 849px) {
  .blog-home.large-columns-4 .col.post-item {
    width: 50% !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding: 8px !important;
  }
}

/* Mobile: 1 column */
@media (max-width: 549px) {
  .blog-home.large-columns-4 .col.post-item {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding: 6px 0 !important;
  }
  .blog-home.large-columns-4 .image-cover {
    padding-top: 56.25% !important; /* 16:9 on mobile */
  }
}

/* ================================================================
 * Blog Card — archive/category/search variant
 *
 * Migrated from Customizer Additional CSS "BLOG ARCHIVE IMAGE FIX"
 * (Phase 11). Scope: body.archive, body.category, body.search.
 *
 * Ownership note (see audit/js/archive-blog-layout-forensics.md):
 * on these templates, Flatsome's own Packery.js masonry library owns
 * the grid's OUTER placement — it sets position:absolute + top/left via
 * inline style on .col.post-item directly, and that is correct, legitimate
 * vendor behavior. Do NOT set `position` on .col.post-item in this section;
 * doing so would fight Packery. This section owns only the INNER content
 * presentation of each card (image ratio, text truncation, colors) — a
 * concern Packery does not touch.
 * ================================================================ */

body.archive .box-blog-post .box-image,
body.category .box-blog-post .box-image,
body.search .box-blog-post .box-image {
  width: 100% !important;
  min-width: 0 !important;
  flex-shrink: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

body.archive .box-blog-post .image-cover,
body.category .box-blog-post .image-cover,
body.search .box-blog-post .image-cover {
  width: 100% !important;
  padding-top: 56.25% !important; /* 16:9 */
  position: relative !important;
  height: 0 !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, #f5f0e8 0%, #ede8d8 100%) !important;
}

body.archive .box-blog-post .image-cover img,
body.category .box-blog-post .image-cover img,
body.search .box-blog-post .image-cover img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.45s ease !important;
}
body.archive .box-blog-post:hover .image-cover img,
body.category .box-blog-post:hover .image-cover img {
  transform: scale(1.05) !important;
}

body.archive .col.post-item,
body.category .col.post-item {
  display: flex !important;
  flex-direction: column !important;
}
body.archive .col.post-item .col-inner,
body.category .col.post-item .col-inner {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}
body.archive .box-blog-post,
body.category .box-blog-post {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 14px rgba(15,23,42,0.07) !important;
  border: 1px solid rgba(184,150,90,0.18) !important;
  transition: transform 0.28s ease, box-shadow 0.28s ease !important;
  background: #fff !important;
}
body.archive .box-blog-post:hover,
body.category .box-blog-post:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 30px rgba(38,191,233,0.13) !important;
}

body.archive .box-blog-post .box-text,
body.category .box-blog-post .box-text {
  text-align: left !important;
  padding: 15px 16px 18px !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
}
body.archive .blog-post-inner,
body.category .blog-post-inner {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  width: 100% !important;
}

body.archive .box-blog-post .post-title,
body.category .box-blog-post .post-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  min-width: 0 !important;
  width: 100% !important;
  word-break: break-word !important;
  color: #1c2233 !important;
}
body.archive .box-blog-post .post-title a,
body.category .box-blog-post .post-title a {
  color: #1c2233 !important;
  transition: color 0.22s !important;
}
body.archive .box-blog-post:hover .post-title a,
body.category .box-blog-post:hover .post-title a {
  color: #26bfe9 !important;
}

body.archive .from_the_blog_excerpt,
body.archive .post-excerpt,
body.category .from_the_blog_excerpt,
body.category .post-excerpt {
  font-size: 13.5px !important;
  color: #64748b !important;
  line-height: 1.7 !important;
  min-width: 0 !important;
  width: 100% !important;
  word-break: break-word !important;
}

body.archive .more-link,
body.category .more-link,
body.archive a.is-underline,
body.category a.is-underline {
  color: #c4a35a !important;
  font-weight: 700 !important;
  font-size: 13px !important;
}

body.archive .box-blog-post .is-divider,
body.category .box-blog-post .is-divider {
  background: linear-gradient(90deg, #c4a35a 0%, rgba(196,163,90,0.1) 100%) !important;
  height: 1.5px !important;
  width: 32px !important;
  max-width: 32px !important;
  margin: 4px 0 10px !important;
}