/* =========================================================================
 * Blog & Labs — post cards and grids (inc/post-cards.php).
 *
 * An editorial, asymmetric grid: the first card (lead) takes two columns and
 * two rows, the rest are tiles; on narrow screens everything falls into one
 * column in order. Dark surfaces, teal lines, light CSS movement on
 * hover/focus only (lift, image scale, glow, the line next to the arrow
 * growing); the line under the lead card “breathes” with a slow CSS
 * animation and no JavaScript. With reduced motion everything is static
 * (page.css).
 * ====================================================================== */

.lmx-pc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.lmx-pc-grid[hidden]{display:none}
.lmx-pc-grid--editorial{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(228px,auto);grid-auto-flow:dense}
.lmx-pc-grid--editorial .lmx-pc--lead{grid-column:span 2;grid-row:span 2}
.lmx-pc-grid--editorial[data-count="3"] .lmx-pc--tile,.lmx-pc-grid--editorial[data-count="2"] .lmx-pc--tile{grid-column:span 2}
.lmx-pc-grid--rows{grid-template-columns:minmax(0,1fr);gap:14px}

.lmx-pc{position:relative;min-width:0;opacity:1;transform:none;transition:opacity .38s ease,transform .38s ease}
.lmx-pc.is-new{opacity:0;transform:translateY(12px)}
.lmx-pc__link{position:relative;display:flex;flex-direction:column;height:100%;border:1px solid var(--bl-line);border-radius:18px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));color:#fff !important;text-decoration:none !important;box-shadow:0 1px 0 rgba(255,255,255,.03) inset;transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease,background .28s ease}
.lmx-pc__link::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--bl-accent),transparent 70%);transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.lmx-pc__link:hover,.lmx-pc__link:focus-visible{transform:translateY(-4px);border-color:rgba(82,199,198,.6);background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));box-shadow:0 0 0 1px rgba(82,199,198,.3),0 18px 44px rgba(0,0,0,.5),0 0 30px rgba(82,199,198,.14)}
.lmx-pc__link:hover::after,.lmx-pc__link:focus-visible::after{transform:scaleX(1)}
.lmx-pc__link:focus{outline:none}
.lmx-pc__link:focus-visible{outline:2px solid var(--bl-accent);outline-offset:3px}

/* The frame shows the WHOLE image (object-fit: contain): blog covers have the
   headline baked in, and the previous cover cropped the first words. The
   frame is 16/9 — exactly the proportion of a third of all covers, which fill
   it with no bars. For the rest the bars are filled by a blurred copy of the
   same file (--pc-bg is set by inc/post-cards.php), not by a flat plate. The
   hover movement was moved from the image to that backdrop — otherwise the
   scale would crop the picture again. */
.lmx-pc__media{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#0b1214;border-bottom:1px solid var(--bl-line)}
.lmx-pc__media::before{content:'';position:absolute;inset:0;z-index:0;background-image:var(--pc-bg,none);background-size:cover;background-position:center;filter:blur(26px) saturate(.75) brightness(.45);transform:scale(1.12);transition:transform .6s ease;pointer-events:none}
.lmx-pc__img{position:relative;z-index:1;display:block;width:100% !important;height:100% !important;object-fit:contain;transition:filter .45s ease}
.lmx-pc__link:hover .lmx-pc__media::before,.lmx-pc__link:focus-visible .lmx-pc__media::before{transform:scale(1.2)}
.lmx-pc__link:hover .lmx-pc__img,.lmx-pc__link:focus-visible .lmx-pc__img{filter:brightness(1.06)}
.lmx-pc__glow{position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 100%,rgba(82,199,198,.22),transparent 70%);opacity:0;transition:opacity .35s ease;pointer-events:none}
.lmx-pc__link:hover .lmx-pc__glow,.lmx-pc__link:focus-visible .lmx-pc__glow{opacity:1}
.lmx-pc__noimg{display:grid;place-items:center;width:100%;height:100%;color:rgba(131,218,217,.45);background:radial-gradient(60% 60% at 50% 40%,rgba(82,199,198,.12),transparent 70%)}
.lmx-pc__noimg svg{width:48px;height:48px}

.lmx-pc__body{display:flex;flex-direction:column;gap:10px;flex:1 1 auto;padding:18px 20px 20px}
.lmx-pc__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-family:var(--bl-font);font-size:12px;letter-spacing:.06em;color:var(--bl-muted)}
.lmx-pc__type{display:inline-block;padding:4px 9px;border-radius:999px;background:rgba(82,199,198,.10);border:1px solid rgba(82,199,198,.28);color:#9fe3e2;font-size:11px;font-weight:600;line-height:1.2;letter-spacing:.14em;text-transform:uppercase}
.lmx-pc--labs .lmx-pc__type{background:rgba(131,218,217,.16);border-color:rgba(131,218,217,.45);color:#c7f2f1}
.lmx-pc__date{font-variant-numeric:tabular-nums}
.lmx-pc__title{margin:0 !important;font-family:var(--bl-display) !important;font-weight:400 !important;font-size:19px !important;line-height:1.25 !important;letter-spacing:-.01em;color:#fff !important;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.lmx-pc__excerpt{font-family:var(--bl-font);font-size:15px;line-height:1.55;font-weight:300;color:var(--bl-text);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.lmx-pc__more{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:8px;color:var(--bl-accent)}
.lmx-pc__more-line{display:block;width:22px;height:1px;background:currentColor;transition:width .3s ease}
.lmx-pc__more svg{width:18px;height:18px;transition:transform .3s ease}
.lmx-pc__link:hover .lmx-pc__more-line,.lmx-pc__link:focus-visible .lmx-pc__more-line{width:44px}
.lmx-pc__link:hover .lmx-pc__more svg,.lmx-pc__link:focus-visible .lmx-pc__more svg{transform:translateX(4px)}

/* --- lead card ---------------------------------------------------------------- */
.lmx-pc--lead .lmx-pc__link{border-radius:22px}
.lmx-pc--lead .lmx-pc__media{aspect-ratio:auto;flex:1 1 auto;min-height:260px;border-bottom:0}
.lmx-pc--lead .lmx-pc__body{position:relative;padding:22px 26px 26px;background:linear-gradient(180deg,rgba(5,7,8,0),rgba(5,7,8,.55) 30%,rgba(5,7,8,.92));margin-top:-96px}
.lmx-pc--lead .lmx-pc__body::before{content:'';position:absolute;left:26px;top:0;width:56px;height:2px;background:linear-gradient(90deg,var(--bl-accent),transparent);animation:lmx-pc-breathe 4.5s ease-in-out infinite}
@keyframes lmx-pc-breathe{0%,100%{width:56px;opacity:.85}50%{width:96px;opacity:1}}
.lmx-pc--lead .lmx-pc__title{font-size:clamp(24px,2.4vw,34px) !important;line-height:1.12 !important;-webkit-line-clamp:3}
.lmx-pc--lead .lmx-pc__excerpt{max-width:60ch;font-size:16px}

/* --- row (list) ---------------------------------------------------------------- */
.lmx-pc--row .lmx-pc__link{flex-direction:row;align-items:stretch}
.lmx-pc--row .lmx-pc__media{flex:0 0 240px;aspect-ratio:auto;border-bottom:0;border-right:1px solid var(--bl-line)}
.lmx-pc--row .lmx-pc__body{padding:18px 22px}

/* --- layout by width ----------------------------------------------------------- */
@media (max-width:1180px){
.lmx-pc-grid--editorial{grid-template-columns:repeat(3,minmax(0,1fr))}
.lmx-pc-grid--editorial .lmx-pc--lead{grid-column:span 3;grid-row:span 1}
.lmx-pc-grid--editorial .lmx-pc--lead .lmx-pc__media{min-height:320px}
}
@media (max-width:1024px){
.lmx-pc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.lmx-pc-grid--editorial{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto}
.lmx-pc-grid--editorial .lmx-pc--lead{grid-column:span 2}
}
@media (max-width:640px){
.lmx-pc-grid,.lmx-pc-grid--editorial{grid-template-columns:minmax(0,1fr);gap:14px}
.lmx-pc-grid--editorial .lmx-pc--lead,.lmx-pc-grid--editorial[data-count="3"] .lmx-pc--tile,.lmx-pc-grid--editorial[data-count="2"] .lmx-pc--tile{grid-column:span 1}
.lmx-pc--lead .lmx-pc__media{min-height:220px}
.lmx-pc--lead .lmx-pc__body{margin-top:-72px;padding:18px 20px 22px}
.lmx-pc--row .lmx-pc__link{flex-direction:column}
.lmx-pc--row .lmx-pc__media{flex:0 0 auto;aspect-ratio:16/10;border-right:0;border-bottom:1px solid var(--bl-line)}
}
@media (prefers-reduced-motion:reduce){
.lmx-pc--lead .lmx-pc__body::before{animation:none}
.lmx-pc.is-new{opacity:1;transform:none}
.lmx-pc__media::before{transition:none}
.lmx-pc__link:hover .lmx-pc__media::before,.lmx-pc__link:focus-visible .lmx-pc__media::before{transform:scale(1.12)}
}