/* =========================================================================
 * MXDR Service — block 6, Related Resources.
 *
 * Three cards on a dark background: the cover, the resource type in teal, the
 * title and an arrow. For now the cards are placeholders from ACF; the data
 * source will change while the markup and the styles stay.
 * ====================================================================== */

.lmx-rr-inner{position:relative;width:100%;min-height:100vh;background:#000 !important;font-family:var(--lmx-ms-font,'Hanken Grotesk',Helvetica,Arial,sans-serif);padding:0 var(--lmx-section-padding-x);box-sizing:border-box;--ms-scale:1;--rr-accent:#52C7C6}
.lmx-rr-inner *{box-sizing:border-box}
.lmx-rr-inner::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,rgba(82,199,198,0),rgba(82,199,198,.6) 30%,rgba(82,199,198,.6) 70%,rgba(82,199,198,0))}

/* --- header ----------------------------------------------------------------- */
.lmx-rr-head{position:relative;text-align:center;padding-top:max(24px,calc(56px * var(--ms-scale,1)))}
.lmx-rr-eyebrow{display:block;font-size:max(10px,calc(13px * var(--ms-scale,1)));font-weight:700;letter-spacing:.34em;text-transform:uppercase;color:var(--rr-accent)}
.lmx-rr-title{margin:max(8px,calc(18px * var(--ms-scale,1))) 0 0 !important;font-family:var(--lmx-ms-display,'Outfit','Poppins',sans-serif) !important;font-weight:300 !important;font-size:max(30px,calc(62px * var(--ms-scale,1))) !important;line-height:1.08 !important;letter-spacing:-.02em;color:#d5d9dc !important}

/* --- cards ------------------------------------------------------------------- */
.lmx-rr-grid{list-style:none;margin:max(22px,calc(56px * var(--ms-scale,1))) auto 0;padding:0;max-width:1380px;display:grid;grid-template-columns:repeat(var(--rr-n,3),minmax(0,1fr));gap:max(14px,calc(28px * var(--ms-scale,1)))}
.lmx-rr-grid[data-count="1"]{--rr-n:1;max-width:460px}
.lmx-rr-grid[data-count="2"]{--rr-n:2;max-width:920px}
.lmx-rr-card{margin:0}
.lmx-rr-link{display:flex;flex-direction:column;height:100%;background:#0a0c0e;border:1px solid rgba(255,255,255,.14);padding:max(8px,calc(10px * var(--ms-scale,1)));text-decoration:none !important;color:#fff;transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease}
.lmx-rr-link:hover{border-color:var(--rr-accent);transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.5),0 0 0 1px rgba(82,199,198,.3)}
.lmx-rr-link:focus-visible{outline:2px solid var(--rr-accent);outline-offset:3px}
.lmx-rr-media{display:block;position:relative;aspect-ratio:5/4;overflow:hidden;background:#12161a}
.lmx-rr-inner .lmx-rr-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.lmx-rr-link:hover .lmx-rr-img{transform:scale(1.03)}
.lmx-rr-body{position:relative;display:flex;flex-direction:column;gap:max(8px,calc(12px * var(--ms-scale,1)));padding:max(14px,calc(30px * var(--ms-scale,1))) max(8px,calc(14px * var(--ms-scale,1))) max(40px,calc(54px * var(--ms-scale,1)));flex:1 1 auto}
.lmx-rr-type{font-size:max(10px,calc(13px * var(--ms-scale,1)));font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--rr-accent)}
.lmx-rr-card-title{font-family:var(--lmx-ms-display,'Outfit',sans-serif);font-weight:400;font-size:max(17px,calc(24px * var(--ms-scale,1)));line-height:1.3;color:#fff}
/* the publication date goes under the title, in the same muted tone as the label */
.lmx-rr-date{font-size:max(11px,calc(14px * var(--ms-scale,1)));line-height:1.2;color:rgba(255,255,255,.55);font-variant-numeric:tabular-nums}
.lmx-rr-arrow{position:absolute;right:max(8px,calc(14px * var(--ms-scale,1)));bottom:max(12px,calc(22px * var(--ms-scale,1)));width:max(24px,calc(32px * var(--ms-scale,1)));height:max(24px,calc(32px * var(--ms-scale,1)));color:var(--rr-accent);transition:transform .25s ease}
.lmx-rr-arrow svg{width:100%;height:100%;display:block}
.lmx-rr-link:hover .lmx-rr-arrow{transform:translateX(6px)}

/* --- description, excerpt, placeholders (Use Case pages; the service pages have none) --- */
.lmx-rr-desc{margin:max(8px,calc(16px * var(--ms-scale,1))) auto 0 !important;max-width:720px;font-size:max(14px,calc(18px * var(--ms-scale,1))) !important;line-height:1.55 !important;font-weight:300;color:rgba(255,255,255,.7) !important}
.lmx-rr-excerpt{display:block;font-size:max(12px,calc(15px * var(--ms-scale,1)));line-height:1.5;font-weight:300;color:rgba(255,255,255,.62)}
.lmx-rr-badge{position:absolute;left:max(8px,calc(12px * var(--ms-scale,1)));top:max(8px,calc(12px * var(--ms-scale,1)));padding:max(4px,calc(6px * var(--ms-scale,1))) max(8px,calc(12px * var(--ms-scale,1)));background:rgba(0,0,0,.72);border:1px solid rgba(82,199,198,.6);color:var(--rr-accent);font-size:max(9px,calc(11px * var(--ms-scale,1)));font-weight:700;letter-spacing:.22em;text-transform:uppercase;line-height:1.2}
/* A card without an address (the “Coming Soon” placeholder) is not a link — no lift, no glow, no arrow. */
.lmx-rr-link--static{cursor:default}
.lmx-rr-link--static:hover{border-color:rgba(255,255,255,.14);transform:none;box-shadow:none}
.lmx-rr-link--static:hover .lmx-rr-img{transform:none}
.lmx-rr-link--static .lmx-rr-body{padding-bottom:max(14px,calc(30px * var(--ms-scale,1)))}
.lmx-rr-link--static .lmx-rr-img{opacity:.8}

/* --- desktop ---------------------------------------------------------------- */
@media (min-width:1025px){
.lmx-rr-inner{display:grid;align-content:center;height:100%;min-height:100%}
}

/* --- narrow screens --------------------------------------------------------- */
@media (max-width:1024px){
.lmx-rr-inner{min-height:0;height:auto;padding:84px var(--lmx-section-padding-x) 64px}
.lmx-rr-title{font-size:36px !important}
.lmx-rr-grid,.lmx-rr-grid[data-count="2"]{grid-template-columns:1fr;max-width:520px;gap:18px}
.lmx-rr-body{padding:18px 8px 48px}
.lmx-rr-card-title{font-size:19px}
}

/* --- video card and the “show more” button (the /demo/ page) ----------------
   The play icon over the cover and the button under the grid. The service pages
   have neither, so the rules change nothing there. */
.lmx-rr-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max(44px,calc(64px * var(--ms-scale,1)));height:max(44px,calc(64px * var(--ms-scale,1)));color:#fff;opacity:.92;filter:drop-shadow(0 4px 18px rgba(0,0,0,.55));transition:transform .25s ease,color .25s ease;pointer-events:none;z-index:2}
.lmx-rr-play svg{width:100%;height:100%;display:block}
.lmx-rr-link:hover .lmx-rr-play,.lmx-rr-link:focus-visible .lmx-rr-play{color:var(--lmx-teal,#52C7C6);transform:translate(-50%,-50%) scale(1.06)}
.lmx-rr-more{display:flex;justify-content:center;margin-top:max(18px,calc(30px * var(--ms-scale,1)))}
@media (prefers-reduced-motion:reduce){
.lmx-rr-play{transition:none}
.lmx-rr-link:hover .lmx-rr-play,.lmx-rr-link:focus-visible .lmx-rr-play{transform:translate(-50%,-50%)}
}

/* --- less motion ------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
.lmx-rr-inner *{transition:none !important}
}