/* =========================================================================
 * Resource Center — resource cards and the editorial grid
 * (inc/resource-cards.php).
 *
 * The grid: four columns, with the featured resource of the first page
 * (.lmx-rcard--lead) taking two columns and two rows; the rest are tiles. On
 * narrow screens everything falls into one column in order, with no horizontal
 * overflow.
 *
 * Hover / focus (CSS only, no permanent animation): the card lifts, the image
 * zooms slightly, a teal line runs around the frame (an outline drawn top to
 * bottom), a soft neon glow, the arrow shifts and the action appears. With
 * prefers-reduced-motion the transitions are off (page.css).
 * ====================================================================== */

.lmx-rcard-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;grid-auto-rows:minmax(0,auto)}
.lmx-rcard-grid[hidden]{display:none}
.lmx-rcard-grid--related{grid-template-columns:repeat(3,minmax(0,1fr))}

.lmx-rcard{position:relative;min-width:0;opacity:1;transform:none;transition:opacity .38s ease,transform .38s ease}
.lmx-rcard.is-new{opacity:0;transform:translateY(12px)}
.lmx-rcard--lead{grid-column:span 2;grid-row:span 2}

.lmx-rcard__link{position:relative;display:flex;flex-direction:column;height:100%;border:1px solid var(--rc-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}
/* The teal line around the frame: drawn as the outline of a pseudo-element and revealed on hover. */
.lmx-rcard__link::before{content:'';position:absolute;inset:0;border-radius:inherit;border:1px solid transparent;background:linear-gradient(120deg,rgba(82,199,198,.9),rgba(82,199,198,0) 38%,rgba(82,199,198,0) 62%,rgba(131,218,217,.75)) border-box;-webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);mask-composite:exclude;opacity:0;transition:opacity .3s ease;pointer-events:none;z-index:2}
.lmx-rcard__link:hover,.lmx-rcard__link:focus-visible{transform:translateY(-4px);border-color:rgba(82,199,198,.45);background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));box-shadow:0 18px 44px rgba(0,0,0,.5),0 0 34px rgba(82,199,198,.16)}
.lmx-rcard__link:hover::before,.lmx-rcard__link:focus-visible::before{opacity:1}
.lmx-rcard__link:focus{outline:none}
.lmx-rcard__link:focus-visible{outline:2px solid var(--rc-accent);outline-offset:3px}

.lmx-rcard__media{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:#0b1214;border-bottom:1px solid var(--rc-line)}
.lmx-rcard__img{display:block;width:100% !important;height:100% !important;object-fit:cover;transition:transform .6s ease}
.lmx-rcard__link:hover .lmx-rcard__img,.lmx-rcard__link:focus-visible .lmx-rcard__img{transform:scale(1.045)}
.lmx-rcard__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-rcard__link:hover .lmx-rcard__glow,.lmx-rcard__link:focus-visible .lmx-rcard__glow{opacity:1}
.lmx-rcard__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-rcard__noimg svg{width:44px;height:44px}
/* The video badge on a video card */
.lmx-rcard__play{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;display:grid;place-items:center;border-radius:50%;background:rgba(5,7,8,.62);border:1px solid rgba(82,199,198,.6);color:#fff;backdrop-filter:blur(2px);transition:transform .3s ease,background .3s ease,box-shadow .3s ease}
.lmx-rcard__play svg{width:26px;height:26px;margin-left:2px}
.lmx-rcard__link:hover .lmx-rcard__play,.lmx-rcard__link:focus-visible .lmx-rcard__play{transform:scale(1.08);background:rgba(82,199,198,.92);color:var(--rc-on-accent);box-shadow:0 0 28px rgba(82,199,198,.5)}

.lmx-rcard__body{display:flex;flex-direction:column;gap:10px;flex:1 1 auto;padding:16px 18px 18px}
.lmx-rcard__meta{display:flex;align-items:center;justify-content:space-between;gap:10px}
.lmx-rcard__type{display:inline-flex;align-items:center;gap:7px;padding:4px 10px 4px 8px;border-radius:999px;background:rgba(82,199,198,.10);border:1px solid rgba(82,199,198,.28);color:#9fe3e2;font-family:var(--rc-font);font-size:11px;font-weight:600;line-height:1.2;letter-spacing:.12em;text-transform:uppercase}
.lmx-rcard__typeicon{width:14px;height:14px;flex:0 0 auto}
.lmx-rcard__gated{display:inline-flex;color:var(--rc-muted)}
.lmx-rcard__gated svg{width:15px;height:15px}
.lmx-rcard__title{margin:0 !important;font-family:var(--rc-display) !important;font-weight:400 !important;font-size:18px !important;line-height:1.28 !important;letter-spacing:-.01em;color:#fff !important;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.lmx-rcard__excerpt{font-family:var(--rc-font);font-size:15px;line-height:1.55;font-weight:300;color:var(--rc-text);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.lmx-rcard__more{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:6px;color:var(--rc-accent);opacity:.8;transition:opacity .3s ease}
.lmx-rcard__more-line{display:block;width:20px;height:1px;background:currentColor;transition:width .3s ease}
.lmx-rcard__more svg{width:18px;height:18px;transition:transform .3s ease}
.lmx-rcard__link:hover .lmx-rcard__more,.lmx-rcard__link:focus-visible .lmx-rcard__more{opacity:1}
.lmx-rcard__link:hover .lmx-rcard__more-line,.lmx-rcard__link:focus-visible .lmx-rcard__more-line{width:42px}
.lmx-rcard__link:hover .lmx-rcard__more svg,.lmx-rcard__link:focus-visible .lmx-rcard__more svg{transform:translateX(4px)}

/* --- the large card of a featured resource ---------------------------------- */
.lmx-rcard--lead .lmx-rcard__link{border-radius:22px}
.lmx-rcard--lead .lmx-rcard__media{aspect-ratio:auto;flex:1 1 auto;min-height:260px;border-bottom:0}
.lmx-rcard--lead .lmx-rcard__body{position:relative;margin-top:-104px;padding:22px 26px 26px;background:linear-gradient(180deg,rgba(5,7,8,0),rgba(5,7,8,.6) 32%,rgba(5,7,8,.94))}
.lmx-rcard--lead .lmx-rcard__title{font-size:clamp(23px,2.2vw,31px) !important;line-height:1.14 !important}
.lmx-rcard--lead .lmx-rcard__excerpt{max-width:58ch;font-size:16px}
.lmx-rcard--lead .lmx-rcard__play{width:68px;height:68px;margin:-34px 0 0 -34px}

/* --- layout by width --------------------------------------------------------- */
@media (max-width:1180px){
.lmx-rcard-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.lmx-rcard--lead{grid-column:span 3;grid-row:span 1}
.lmx-rcard--lead .lmx-rcard__media{min-height:300px}
}
@media (max-width:1024px){
.lmx-rcard-grid,.lmx-rcard-grid--related{grid-template-columns:repeat(2,minmax(0,1fr))}
.lmx-rcard--lead{grid-column:span 2}
}
@media (max-width:640px){
.lmx-rcard-grid,.lmx-rcard-grid--related{grid-template-columns:minmax(0,1fr);gap:14px}
.lmx-rcard--lead{grid-column:span 1}
.lmx-rcard--lead .lmx-rcard__media{min-height:210px}
.lmx-rcard--lead .lmx-rcard__body{margin-top:-76px;padding:18px 20px 20px}
.lmx-rcard__title{font-size:17px !important}
}
@media (prefers-reduced-motion:reduce){
.lmx-rcard.is-new{opacity:1;transform:none}
}