/* ==========================================================================
   TNA — OPPORTUNITY CARD (.jc): the image-led job card of the Opportunities board.
   Shared by jobs.html (the board), academies.html and employer.html (the "Preview your listing" card that
   TNAEmpJobs.card() builds from the same markup). Moved out of jobs.html's inline styles in Oct 2026 so the preview
   is the board card. Loads after tna-styles.css (variables) and before each page's own styles.
   ========================================================================== */
.jc{position:relative;display:flex;flex-direction:column;background:var(--cream);border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease)}
.jc:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover);border-color:var(--gold-border)}
.jc-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:#14243A}
.jc-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .65s var(--ease)}
.jc:hover .jc-media img{transform:scale(1.06)}
.jc-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(14,27,45,.9),rgba(14,27,45,.25) 46%,rgba(14,27,45,.05) 72%)}
.jc-sport{position:absolute;top:13px;left:13px;z-index:2;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--green-950);background:var(--gold);padding:6px 13px;border-radius:999px;box-shadow:0 4px 14px rgba(0,0,0,.28)}
.jc-feat{position:absolute;top:13px;right:13px;z-index:2;font-size:11.5px;font-weight:700;letter-spacing:.03em;color:var(--cream);background:rgba(14,27,45,.72);border:1px solid var(--gold-border);backdrop-filter:blur(6px);padding:6px 12px;border-radius:999px}
.jc-loc{position:absolute;left:15px;right:15px;bottom:13px;z-index:2;display:flex;align-items:center;gap:7px;color:#fff;font-size:14.5px;font-weight:600;text-shadow:0 1px 6px rgba(0,0,0,.55)}
.jc-loc svg{width:15px;height:15px;flex-shrink:0;stroke:var(--gold-soft);fill:none;stroke-width:2}
.jc-body{display:flex;flex-direction:column;flex:1;padding:20px 22px 22px}
.jc-body h3{font-family:'Inter',sans-serif;font-size:20px;font-weight:600;color:var(--green-950);margin:0 0 12px;line-height:1.25}
.jc-comp{display:inline-block;align-self:flex-start;font-size:13px;font-weight:600;color:var(--green-950);background:var(--gold-soft);border:1px solid var(--gold-border);padding:8px 13px;border-radius:10px;line-height:1.45}
.jc-spacer{flex:1;min-height:16px}
.jc-divider{height:1px;background:var(--border);margin:0 0 14px}
.jc-apply{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--gold-deep);text-decoration:none}
.jc-apply .ar{transition:transform .4s var(--ease)}
.jc:hover .jc-apply .ar{transform:translateX(4px)}
/* ---- closed / filled roles (kept on the page, marked unavailable) ---- */
.jc-closed .jc-media img{filter:grayscale(1) brightness(.5)}
.jc-closed:hover{transform:none;box-shadow:var(--shadow);border-color:var(--border)}
.jc-closed:hover .jc-media img{transform:none}
.jc-closed .jc-body h3{color:#8E8E8E}
.jc-filled{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-3.5deg);z-index:3;
display:inline-flex;align-items:center;gap:9px;background:rgba(20,36,58,.82);color:#EDE6DA;
border:1.5px solid var(--gold-border);backdrop-filter:blur(2px);
font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
padding:11px 22px;border-radius:999px;box-shadow:0 12px 34px rgba(0,0,0,.45)}
.jc-filled svg{width:16px;height:16px;stroke:var(--gold-soft);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.jc-closed-label{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#8E8E8E;letter-spacing:.01em}
.jc-closed-label svg{width:15px;height:15px;stroke:#8E8E8E;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}