/* Link container */ a[aria-label]{display:block;padding:0;color:inherit;text-decoration:none;margin-top:25px} /* Fixed card + subtle lift effect */ .wrapper{ position:relative;height:420px;background:#fff;border:1px solid #e5e7eb;border-radius:18px; box-shadow:0 8px 24px rgba(0,0,0,.08);overflow:hidden; transition:transform .18s ease,box-shadow .18s ease;will-change:transform,box-shadow; } .preview-image{ position:absolute;top:0;left:0;right:0;height:240px;background-size:cover;background-position:center; background-repeat:no-repeat;image-rendering:-webkit-optimize-contrast; } /* Lift on hover/focus */ a[aria-label]:hover .wrapper, a[aria-label]:focus-within .wrapper{transform:translateY(-4px);box-shadow:0 14px 30px rgba(0,0,0,.14)} @media (prefers-reduced-motion:reduce){ .wrapper{transition:box-shadow .18s ease} a[aria-label]:hover .wrapper, a[aria-label]:focus-within .wrapper{transform:none} } /* Bottom panel: grid layout (never cuts) */ .preview-box{ position:absolute;left:0;right:0;bottom:0; min-height:176px !important; height:auto !important; display:grid;grid-template-rows:auto auto 1fr auto;row-gap:6px; padding:14px 24px 12px !important;box-sizing:border-box;background:#fff; border-top:1px solid #eef2f7;border-bottom-left-radius:18px;border-bottom-right-radius:18px;overflow:hidden;z-index:1; } /* Compact pill (from HTML) */ .preview-pill{ display:inline-flex;align-items:center;justify-self:start;white-space:nowrap; font-weight:600;font-size:11px;line-height:1;color:#1591c7;background:#c6eeff; padding:4px 8px;border-radius:999px;margin:0; } /* Title (2 lines with ellipsis) */ .preview-label{ margin:2px 0 0;font-weight:400!important;font-size:20px;line-height:1.25;color:#0f172a!important; display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis; min-height:calc(2 * 1.25em); /* asegura 2 líneas */ } /* Content (2 lines with ellipsis) */ .preview-content{ font-weight:400!important;color:#6b7280!important;font-size:14.5px;line-height:1.55; display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis; min-height:calc(2 * 1.55em); /* asegura 2 líneas */ overflow-wrap:anywhere;word-break:break-word; } /* Read More as text (no arrow) */ .preview-read-more{ background:transparent;border:0;box-shadow:none;height:auto;padding:0;border-radius:0; display:inline-block;cursor:pointer;font-size:14px;font-weight:400!important;line-height:1;color:#1591c7; text-transform:none;align-self:end;justify-self:start;margin-top:auto; } .preview-read-more i{display:none!important} /* Hover: only Title & Read More semibold (smoothed) */ .preview-label, .preview-read-more{font-synthesis-weight:none;text-rendering:optimizeLegibility;transition:letter-spacing .15s ease} a[aria-label]:hover .preview-label, a[aria-label]:hover .preview-read-more{font-weight:600!important;letter-spacing:-.01em} /* Keep colors unchanged on hover */ a[aria-label]:hover .preview-label, a[aria-label]:hover .preview-content{color:inherit!important} /* Breakpoints */ @media (max-width:992px){.wrapper{height:380px}.preview-image{height:220px}} @media (max-width:768px){.wrapper{height:340px}.preview-image{height:200px}} @media (max-width:576px){.wrapper{height:300px}.preview-image{height:180px}}