/* Home: blog (patterns/home-blog.php). The newest post as a big card beside a numbered list of the next ones, topic
   links, the following posts as masonry cards, an e-mail sign-up row. Covers are digotech/post-cover, restyled here to
   the home look: tinted dotted panel with the category icon large in the middle, no title card. */
.hm-blog{
  --hm-blog-col:300px;
  --hm-blog-cover-h:150px;
  --hm-blog-feat-h:240px;
  --hm-blog-icon:76px;
  --hm-blog-icon-stroke:1.15;
  --hm-blog-ring:2px;
  --hm-blog-hairline:1px;
  --hm-blog-lift-shadow:0 16px 36px var(--shadow);
  --hm-blog-feat-shadow:0 20px 44px var(--shadow);
  --hm-blog-pill-shadow:0 1px 3px var(--shadow);
  --hm-blog-pill-pad:3px;
  --hm-blog-pill-h:32px;
  --hm-blog-pill-r:6px;
  --hm-blog-focus:0 0 0 3px var(--accent-tint);
  --hm-blog-track:.1em;
  --hm-blog-track-head:.14em;
  --hm-blog-track-title:-0.015em;
  --hm-blog-z-link:1;
  --dg-cover-h:var(--hm-blog-cover-h);
  border-top:1px solid var(--rule)
}
.hm-blog .page > *,.hm-blog :is(.hm-blog__top,.hm-blog__side,.hm-blog__bar,.hm-blog__news,.hm-blog__news-copy,.hm-blog__feat-body) > *{margin:0}
.hm-blog .page > .sec-head{margin-bottom:var(--gap-head)}
.hm-blog :is(.hm-blog__feat-list,.hm-blog__side-list,.hm-blog__grid){list-style:none;margin:0;padding:0}
.hm-blog :is(.hm-blog__feat-list,.hm-blog__side-list,.hm-blog__grid) > li{margin:0;min-width:0}

/* shared: category with a dot in its colour (the colour of the cover set by digotech/post-cover), date, title link */
.hm-blog :is(.hm-blog__card,.hm-blog__feat){--cc:var(--p1)}
.hm-blog :is(.hm-blog__card,.hm-blog__feat):has(.dg-cover--p2){--cc:var(--p2)}
.hm-blog :is(.hm-blog__card,.hm-blog__feat):has(.dg-cover--p3){--cc:var(--p3)}
.hm-blog :is(.hm-blog__card,.hm-blog__feat):has(.dg-cover--p4){--cc:var(--p4)}
.hm-blog__meta{gap:var(--s-1) var(--s-3);font:500 var(--t-2xs)/1 var(--font-mono);letter-spacing:var(--hm-blog-track);text-transform:uppercase;color:var(--ink-3)}
.hm-blog__meta > *{margin:0}
.hm-blog__cat{position:relative;z-index:var(--hm-blog-z-link)}
.hm-blog__cat a{display:inline-flex;align-items:center;gap:var(--s-2);color:var(--ink-3);text-decoration:none}
.hm-blog__cat a::before{content:"";width:var(--s-2);height:var(--s-2);border-radius:50%;background:var(--cc)}
.hm-blog__cat a:hover{color:var(--accent)}
/* the title link stretches over its whole card / row */
.hm-blog :is(.hm-blog__title,.hm-blog__feat-title,.hm-blog__side-title) a{color:inherit;text-decoration:none;transition:color var(--dur) var(--ease-press)}
.hm-blog :is(.hm-blog__title,.hm-blog__feat-title,.hm-blog__side-title) a::after{content:"";position:absolute;inset:0}
.hm-blog :is(.hm-blog__title,.hm-blog__feat-title,.hm-blog__side-title) a:focus-visible{outline:none}
.hm-blog__excerpt{color:var(--ink-2);font-size:var(--t-s)}
.hm-blog__excerpt p{margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hm-blog__excerpt .wp-block-post-excerpt__more-text{display:none}

/* top: big card (7) beside the list (5) */
.hm-blog .page > .hm-blog__top{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--gap-grid);margin-bottom:var(--gap-grid)}
.hm-blog__feat-q,.hm-blog__feat-list,.hm-blog__feat-list > li{display:grid}
.hm-blog__feat{position:relative;overflow:hidden;display:grid;grid-template-rows:auto 1fr;border:1px solid var(--rule);border-radius:var(--r-card);background:var(--paper);transition:transform var(--dur-m) var(--ease-out),box-shadow var(--dur-m) var(--ease-out),border-color var(--dur) var(--ease-press)}
.hm-blog__feat > *{margin:0}
.hm-blog__feat:hover{transform:translateY(calc(var(--s-1) * -1));box-shadow:var(--hm-blog-feat-shadow)}
.hm-blog__feat:has(.hm-blog__feat-title a:focus-visible),.hm-blog__card:has(.hm-blog__title a:focus-visible){outline:var(--hm-blog-ring) solid var(--accent-fill);outline-offset:var(--hm-blog-ring)}
.hm-blog .hm-blog__feat > .dg-cover{min-height:var(--hm-blog-feat-h);border-bottom:1px solid var(--rule);border-radius:0}
.hm-blog__feat-body{display:grid;align-content:start;gap:var(--gap-stack);padding:var(--gap-card)}
.hm-blog__feat-title{font-size:var(--t-2xl)}
.hm-blog__feat .hm-blog__excerpt{font-size:var(--t-m)}
.hm-blog__feat:hover .hm-blog__feat-title a,.hm-blog__card:hover .hm-blog__title a{color:var(--accent)}

/* the list beside it: numbered rows (CSS counter) */
.hm-blog__side{display:grid;grid-template-rows:auto minmax(0,1fr);border:1px solid var(--rule);border-radius:var(--r-card);background:var(--paper)}
.hm-blog .hm-blog__side-h{padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--rule);font:500 var(--t-xs)/1 var(--font-mono);letter-spacing:var(--hm-blog-track-head);text-transform:uppercase;color:var(--ink-2)}
.hm-blog__side-q,.hm-blog__side-list{display:grid}
.hm-blog__side-list{counter-reset:hm-blog-n}
.hm-blog__side-list > li{position:relative;display:grid;align-content:center;grid-template-columns:auto minmax(0,1fr);gap:0 var(--s-4);padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--rule);counter-increment:hm-blog-n;transition:background-color var(--dur) var(--ease-press)}
.hm-blog__side-list > li:last-child{border-bottom:0}
.hm-blog__side-list > li:last-child:hover{border-radius:0 0 var(--r-card) var(--r-card)}
.hm-blog__side-list > li::before{content:counter(hm-blog-n, decimal-leading-zero);grid-row:span 2;font:500 var(--t-s)/1.4 var(--font-mono);color:var(--ink-3)}
.hm-blog__side-list > li > *{grid-column:2;margin:0}
.hm-blog__side-list > li:hover{background:var(--paper-2)}
.hm-blog__side-list > li:hover .hm-blog__side-title a{color:var(--accent)}
.hm-blog .hm-blog__side-title{font:600 var(--t-m)/1.35 var(--font-body);letter-spacing:0}
.hm-blog__side-meta{display:flex;flex-wrap:wrap;gap:0 var(--s-1);font-size:var(--t-xs);line-height:1.5;color:var(--ink-3)}
.hm-blog__side-meta > *{margin:0}
.hm-blog__side-cat{position:relative;z-index:var(--hm-blog-z-link)}
.hm-blog__side-cat::after{content:"·";margin-left:var(--s-1)} /* separator between category and date */
.hm-blog__side-cat a{display:inline-block;padding-block:calc((var(--s-5) - 1lh) / 2);margin-block:calc((1lh - var(--s-5)) / 2);color:inherit;text-decoration:none} /* a 24px tall target for fingers, the line keeps its height */
.hm-blog__side-cat a:hover{color:var(--accent)}

/* bar: topic pills (block digotech/term-filter, live) + all posts */
.hm-blog .page > .hm-blog__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-4);margin-bottom:var(--s-5)}

/* cards: masonry columns 300px+ wide (3 on a desktop page, 1 on a phone) */
.hm-blog .hm-blog__grid{display:block;columns:3 var(--hm-blog-col);column-gap:var(--gap-grid)}
.hm-blog .hm-blog__grid > li{display:grid;break-inside:avoid;margin-bottom:var(--gap-grid)}
.hm-blog__card{position:relative;overflow:hidden;display:grid;align-content:start;gap:var(--gap-stack);padding:var(--gap-card);border:1px solid var(--rule);border-radius:var(--r-card);background:var(--paper);transition:transform var(--dur-m) var(--ease-out),border-color var(--dur) var(--ease-press),box-shadow var(--dur-m) var(--ease-out)}
.hm-blog__card > *{margin:0;min-width:0}
.hm-blog__card:hover{transform:translateY(calc(var(--s-1) * -1));box-shadow:var(--hm-blog-lift-shadow)}
.hm-blog__title{font-size:var(--t-l);letter-spacing:var(--hm-blog-track-title)}

/* drawn cover (no featured image) */
.hm-blog .dg-cover:not(.dg-cover--image){padding:var(--s-4);background-color:color-mix(in oklch, var(--cc) 18%, var(--paper));background-image:radial-gradient(circle, color-mix(in srgb, var(--cc) 35%, transparent) 1px, transparent 1px);transition:background-color var(--dur-m) var(--ease-out)}
.hm-blog .dg-cover__card{display:none}
.hm-blog .dg-cover__icon{position:static;width:var(--hm-blog-icon);height:var(--hm-blog-icon);opacity:1;transition:transform var(--dur-morph) var(--ease-out)}
.hm-blog .dg-cover__icon [stroke]{vector-effect:non-scaling-stroke;stroke-width:var(--hm-blog-icon-stroke)}
.hm-blog :is(.hm-blog__card,.hm-blog__feat):hover .dg-cover:not(.dg-cover--image){background-color:color-mix(in oklch, var(--cc) 26%, var(--paper))}
.hm-blog :is(.hm-blog__card,.hm-blog__feat):hover > .dg-cover .dg-cover__icon{transform:translateY(calc(var(--s-1) * -1.5)) rotate(-6deg) scale(1.06)}

.hm-blog__empty{padding:var(--gap-card);border:1px dashed var(--rule);border-radius:var(--r-card);color:var(--ink-2);text-align:center}

/* e-mail sign-up row: copy beside the kit form "nhan-bai" (one e-mail field + button on one line) */
.hm-blog .hm-blog__news{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-6);align-items:center;margin-top:var(--s-7);padding:var(--gap-card);border:1px solid var(--rule);border-radius:var(--r-card);background:var(--paper-2)}
.hm-blog__news h3{font-size:var(--t-xl)}
.hm-blog .hm-blog__news-copy p{margin-top:var(--s-2);font-size:var(--t-s);color:var(--ink-2)}
.hm-blog form.hm-blog__form{flex-wrap:nowrap;align-items:flex-start;gap:var(--s-2)}
.hm-blog form.hm-blog__form > *{flex:none;margin:0}
.hm-blog form.hm-blog__form > .dn-kit-form__field{position:relative;flex:1 1 auto;min-width:0;gap:var(--s-1)}
.hm-blog form.hm-blog__form > .dn-kit-form__status{flex:1 1 100%}
.hm-blog form.hm-blog__form > .dn-kit-form__status:empty{display:none}
/* the label stays for screen readers; the placeholder shows the expected input */
.hm-blog form.hm-blog__form .dn-kit-form__field > label{position:absolute;width:var(--hm-blog-hairline);height:var(--hm-blog-hairline);overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hm-blog form.hm-blog__form .dn-kit-form__field::before{content:"";position:absolute;left:var(--s-3);top:calc((var(--ctl) - var(--icon-s)) / 2);width:var(--icon-s);height:var(--icon-s);background:var(--ink-3);pointer-events:none;-webkit-mask:url(../../../icons/mail.svg?ver=82f4d804) center / contain no-repeat;mask:url(../../../icons/mail.svg?ver=82f4d804) center / contain no-repeat}
.hm-blog form.hm-blog__form .dn-kit-form__field > input{height:var(--ctl);padding:0 var(--s-3) 0 calc(var(--s-3) + var(--icon-s) + var(--s-2));border:1px solid var(--rule);border-radius:var(--r);background:var(--card);color:var(--ink);font:400 var(--t-m)/1 var(--font-body)}
.hm-blog form.hm-blog__form .dn-kit-form__field > input:focus{outline:none;border-color:var(--accent-fill);box-shadow:var(--hm-blog-focus)}
.hm-blog form.hm-blog__form .dn-kit-form__field > [aria-invalid]{border-color:var(--p4)}
.hm-blog form.hm-blog__form .dn-kit-form__error{font-size:var(--t-xs);color:var(--p4)}
.hm-blog form.hm-blog__form .dn-kit-form__error:empty{display:none}
.hm-blog form.hm-blog__form .dn-kit-form__actions button::before{content:"";flex:none;width:var(--icon-s);height:var(--icon-s);background:currentColor;-webkit-mask:url(../../../icons/mail.svg?ver=82f4d804) center / contain no-repeat;mask:url(../../../icons/mail.svg?ver=82f4d804) center / contain no-repeat}

@media (max-width: 991px){
  .hm-blog .page > .hm-blog__top,.hm-blog .hm-blog__news{grid-template-columns:minmax(0,1fr);gap:var(--gap-col)}
}
@media (max-width: 767px){
  .hm-blog form.hm-blog__form{flex-direction:column;align-items:stretch}
  .hm-blog form.hm-blog__form .dn-kit-form__actions button{width:100%}
}

@media (prefers-reduced-motion: reduce){
  .hm-blog__card,.hm-blog__feat,.hm-blog .dg-cover:not(.dg-cover--image),.hm-blog .dg-cover__icon{transition:none}
  .hm-blog__card:hover,.hm-blog__feat:hover,.hm-blog :is(.hm-blog__card,.hm-blog__feat):hover > .dg-cover .dg-cover__icon{transform:none}
}