/* ============================================================
   Manuals page (page-manuals.php)
   One card per product: centred image on top, product name, then one text
   link (with a small download icon) per manual — laid out in a grid.
   Design system: bg #0a0a0a / gold #F1B300 / white / Roboto
   Title font (Barlow Condensed) set explicitly below.
   ============================================================ */

.mn-page { background:#0a0a0a; color:#fff; overflow-x:hidden; }
.mn-inner { width:min(1350px,100%); margin:0 auto; padding:0 32px; }

/* ---------- Hero: plain centred title ---------- */
.mn-hero { padding:150px 0 46px; background:#0a0a0a; text-align:center; }
.mn-hero__title {
    font-family:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
    color:#fff; font-size:clamp(32px,4.6vw,56px); font-weight:800;
    line-height:1.05; letter-spacing:3px; text-transform:uppercase;
    margin:0 auto; max-width:1100px;
}

/* ---------- grid of product cards ---------- */
.mn-body { padding:20px 0 92px; }
.mn-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; align-items:start; }

.mn-card {
    display:flex; flex-direction:column;
    background:#101010; border:1px solid rgba(255,255,255,.10);
    border-radius:6px; padding:22px 22px 24px;
    transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.mn-card:hover {
    border-color:rgba(241,179,0,.45); transform:translateY(-3px);
    box-shadow:0 16px 36px rgba(0,0,0,.45);
}

/* product image — centred, keeps its own aspect ratio */
.mn-card__media {
    display:flex; align-items:center; justify-content:center;
    min-height:186px; margin:0 0 20px;
}
.mn-card__media img {
    max-width:100%; max-height:186px; width:auto; height:auto;
    object-fit:contain; display:block;
    transition:transform .45s ease;
}
.mn-card:hover .mn-card__media img { transform:scale(1.03); }
.mn-card__ph { color:rgba(241,179,0,.28); }
.mn-card__ph svg { width:56px; height:56px; display:block; }

/* product name */
.mn-card__title {
    color:#fff; font-size:16px; font-weight:800; line-height:1.4;
    letter-spacing:.2px; margin:0 0 16px;
}

/* one text link per manual, with a small download icon */
.mn-links { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.mn-link {
    display:inline-flex; align-items:center; gap:8px;
    color:#c9c9c9; font-size:13.5px; line-height:1.45; text-decoration:none;
    transition:color .25s ease;
}
.mn-link__tx { text-decoration:underline; text-decoration-color:rgba(255,255,255,.22); text-underline-offset:3px; }
.mn-link:hover { color:#F1B300; }
.mn-link:hover .mn-link__tx { text-decoration-color:rgba(241,179,0,.6); }
.mn-link__ic { display:inline-flex; flex:0 0 auto; }
.mn-link__ic svg { width:15px; height:15px; display:block; }

/* ---------- empty ---------- */
.mn-empty { text-align:center; color:#8a8a8a; font-size:14px; padding:70px 0; margin:0; }

/* ---------- responsive ---------- */
@media (max-width:1099px) {
    .mn-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
}

@media (max-width:680px) {
    .mn-inner { padding:0 18px; }
    .mn-hero { padding:108px 0 30px; }
    .mn-hero__title { letter-spacing:2px; }
    .mn-body { padding:14px 0 64px; }
    .mn-grid { grid-template-columns:1fr; gap:16px; }

    .mn-card { padding:18px 18px 20px; }
    .mn-card__media { min-height:150px; margin-bottom:16px; }
    .mn-card__media img { max-height:150px; }
    .mn-card__title { font-size:15px; margin-bottom:14px; }
    .mn-links { gap:11px; }
}

@media (prefers-reduced-motion: reduce) {
    .mn-card, .mn-card__media img, .mn-link { transition:none; }
}