/* ======================================================
   Location: /assets/css/blog.css
   Purpose: Blog archive/category/search card layout, excerpt clamp, author hover state and blog pagination styling.

   BLOG — FINAL LOOP POLISH (PREMIUM + WIDTH FIX + CLAMP FIX)

   Fixes:
   - Title + Excerpt + Meta width == Featured Image width (same left/right edges)
   - Excerpt 3-line clamp: show full third line without bottom clipping
   - Premium hover + tight grid (gap 2px)
   - Featured image radius 10px (normal + hover)
   - Meta row: LEFT author, RIGHT read-time
====================================================== */

:root{
  --hdaf-blog-radius: 0px;                 /* card radius stays zero */
  --hdaf-media-radius: 10px;              /* featured image radius */
  --hdaf-blog-title: #1e5bd7;
  --hdaf-blog-title-h: #0b3aa6;

  --hdaf-divider: rgba(0,0,0,.10);
  --hdaf-card-pad: 15px;                  /* ✅ single source padding (media + body) */
}

/* Grid */
.hdaf-blog-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:2px;
}

/* Card */
.hdaf-bcard{
  position: relative;
  z-index: 1;
  border-radius: var(--hdaf-blog-radius);
  overflow: visible;                      /* so title can sit on top */
  background: #fff;
  border: 0;
  transition: transform .35s ease, box-shadow .35s ease, z-index .01s linear;
}

.hdaf-bcard:hover{
  z-index: 50;
  transform: translateY(-6px);
  box-shadow: 0 0px 8px rgba(0,0,0,.25);
}

/* =========================
   Media (Image)
========================= */
.hdaf-bcard__media{
  display:block;
  padding: var(--hdaf-card-pad);           /* ✅ same as body padding */
  background: #fff;
}

/* Frame clips zoom */
.hdaf-bcard__frame{
  position: relative;
  display:block;
  border-radius: var(--hdaf-media-radius);
  overflow: hidden;
  background: #fff;
  border: 0;
}

/* Image / placeholder */
.hdaf-bcard__img,
.hdaf-bcard__ph{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: var(--hdaf-media-radius);
  transform: scale(1);
  transition: transform .55s ease;
}

.hdaf-bcard:hover .hdaf-bcard__img{
  transform: scale(1.06);
}

/* Overlay */
.hdaf-bcard__hover{
  position:absolute;
  inset:0;
  opacity:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.35) 100%);
  transition: opacity .25s ease;
  pointer-events:none;
}
.hdaf-bcard:hover .hdaf-bcard__hover{ opacity:1; }

/* Category pill */
.hdaf-bcard__cat{
  position:absolute;
  top: calc(var(--hdaf-card-pad) + 11px);
  left: calc(var(--hdaf-card-pad) + 11px);
  z-index: 6;
  background: rgba(255,255,255,.92);
  color:#111;
  border:0;
  font-size:12px;
  padding:7px 12px;
  border-radius:999px;
}

/* =========================
   Body (Width == Media)
   ✅ Same padding as media so edges align
========================= */
.hdaf-bcard__body{
  background:#fff;
  padding: 0 var(--hdaf-card-pad) var(--hdaf-card-pad);
  position: relative;
  z-index: 5;
  box-sizing: border-box;
}

/* Title block moves up, but stays aligned */
.hdaf-bcard__title{
  margin: -20px 0 0;                      /* 20px up */
  padding: 14px 0 0;                      /* ✅ no left/right padding (aligned by body) */
  background:#fff;
  position: relative;
  z-index: 10;
  font-size:17px;
  line-height:1.35;
  min-height: calc(1.35em * 2);
}

.hdaf-bcard__title a{
  color: var(--hdaf-blog-title);
  text-decoration:none;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.hdaf-bcard__title a:hover{
  color: var(--hdaf-blog-title-h);
  text-decoration: underline;
}

/* Excerpt + divider line under excerpt
   Full 3-line display with safe fixed visual height. */
.hdaf-bcard__excerpt{
  margin: 0;
  padding: 10px 0 14px;
  border-bottom: 1px solid var(--hdaf-divider);

  font-size:13px;
  line-height:1.65;
  color: rgba(0,0,0,.66);

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;

  /* Keeps card rhythm while giving the 3rd line enough breathing room. */
  min-height: calc((13px * 1.65 * 3) + 24px);
  max-height: none;
  box-sizing: border-box;
}


/* =========================
   Meta (Premium)
   Left: Author | Right: Read time
========================= */
.hdaf-bcard__meta{
  margin: 0;
  padding: 10px 0 0;                      /* ✅ aligned by body */
  background:#fff;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;

  font-size: 12px;
  line-height: 1;
  color: rgba(0,0,0,.60);
}

.hdaf-bcard__dot{ display:none; }          /* if any leftover */

.hdaf-bcard__author{
  font-weight: 700;
  color: rgba(0,0,0,.75);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hdaf-bcard__read{
  font-weight: 600;
  color: rgba(0,0,0,.55);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Author hover polish */
.hdaf-bcard__author:hover{
  color: #111111;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* =========================
   Responsive
========================= */
@media (max-width:1200px){
  .hdaf-blog-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px; }
}

@media (max-width:640px){
  .hdaf-blog-grid{ grid-template-columns:1fr; gap:2px; }

  .hdaf-bcard__meta{
    font-size: 11px;
    padding-top: 10px;
  }
}

/* ======================================================
   BLOG ARCHIVE HELPERS (NO INLINE STYLES)
====================================================== */
.hdaf-blog-archive--pad{
  padding: 32px 16px;
}

.hdaf-blog-head--spaced{
  margin: 0 0 22px;
}

.hdaf-blog-title--xl{
  margin: 0 0 8px;
  font-size: 28px;
  line-height: 1.2;
}

.hdaf-blog-sub--max{
  margin: 0;
  color: #666;
  max-width: 720px;
}

.hdaf-blog-pagination--mt{
  margin-top: 26px;
}

/* Blog pagination — white default, orange hover/current. */
.hdaf-blog__pagination .nav-links,
.hdaf-blog-pagination .nav-links,
.navigation.pagination .nav-links{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.hdaf-blog__pagination .page-numbers,
.hdaf-blog-pagination .page-numbers,
.navigation.pagination .page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:40px;
  height:40px;
  padding:0 12px;
  background:#ffffff;
  border:1px solid rgba(0,0,0,.14);
  border-radius:999px;
  color:#111111;
  font-weight:800;
  line-height:1;
  text-decoration:none;
  box-shadow:0 4px 14px rgba(15,23,42,.06);
  transition:background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.hdaf-blog__pagination a.page-numbers:hover,
.hdaf-blog__pagination a.page-numbers:focus,
.hdaf-blog-pagination a.page-numbers:hover,
.hdaf-blog-pagination a.page-numbers:focus,
.navigation.pagination a.page-numbers:hover,
.navigation.pagination a.page-numbers:focus,
.hdaf-blog__pagination .page-numbers.current,
.hdaf-blog-pagination .page-numbers.current,
.navigation.pagination .page-numbers.current{
  background:var(--hdaf-primary, #ff8a00);
  border-color:var(--hdaf-primary, #ff8a00);
  color:#ffffff;
  box-shadow:0 8px 18px rgba(255,138,0,.22);
}

.hdaf-blog__pagination .page-numbers.dots,
.hdaf-blog-pagination .page-numbers.dots,
.navigation.pagination .page-numbers.dots{
  background:transparent;
  border-color:transparent;
  box-shadow:none;
  color:#111111;
}

@media (max-width: 520px){
  .hdaf-blog__pagination .page-numbers,
  .hdaf-blog-pagination .page-numbers,
  .navigation.pagination .page-numbers{
    min-width:32px;
    height:32px;
    padding:0 8px;
    font-size:13px;
  }
}

.hdaf-blog-empty{
  margin: 0;
  padding: 18px 0;
}