/* Explore More pages: Solutions, Communities, Education. The panel's pages/explore.css (dev.xagio.net) with its --rd-* tokens
   mapped to the marketplace's (main.css, dark.css); the icons are mk_icon() SVGs instead of Font Awesome. */
.ex-page { padding-bottom: 40px; }
.ex-intro { margin: 0 0 20px; font-size: 15px; color: var(--ink-2); max-width: 720px; }
.ex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.ex-card { display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden; text-decoration: none !important;
    color: var(--ink) !important; background: var(--white); border: 0;
    box-shadow: var(--shadow);
    transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease; }
.ex-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.ex-media { position: relative; aspect-ratio: 1200 / 630; background: var(--bg-2); display: flex; align-items: center; justify-content: center; overflow: hidden;
    border-bottom: 1px solid var(--line); }
.ex-media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.ex-media-icon img { width: 72px; height: 72px; object-fit: contain; }
.ex-media-fa .ico { width: 56px; height: 56px; color: var(--blue); }
.ex-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ex-tag { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ex-body h3 { margin: 0; font-size: 17px; font-weight: 600; color: var(--ink); }
.ex-body p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); flex: 1; }
.ex-cta { margin-top: 10px; font-weight: 600; font-size: 14px; color: var(--blue); }
.ex-card:hover .ex-cta { color: var(--blue-dark); }
.ex-badge { position: absolute; top: 12px; right: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; line-height: 1; color: #fff;
    background: rgba(17,26,50,.82); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ex-badge .ico { width: 12px; height: 12px; color: var(--logo-accent); }
/* Title-first cards (Communities): tag + count badge on top, title, full-width image, then body. */
.ex-card-tf .ex-head { padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 8px; }
.ex-head-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ex-card-tf .ex-head h3 { margin: 0; font-size: 17px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.ex-card-tf .ex-media { aspect-ratio: 40 / 21; border-top: 1px solid var(--line); }
.ex-card-tf .ex-media img { object-position: center; }
.ex-card-tf .ex-tag .ico { display: inline-block; vertical-align: -2px; width: 13px; height: 13px; color: var(--blue); margin-right: 2px; }
.ex-count { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; line-height: 1.2;
    color: var(--blue); background: var(--blue-soft); }
.ex-count .ico { width: 12px; height: 12px; }
/* Keep "Facebook group" + the count on one row, even at the narrowest card width. */
.ex-card-tf .ex-head-row { flex-wrap: nowrap; }
.ex-card-tf .ex-tag { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; letter-spacing: .04em; }
.ex-count { white-space: nowrap; }
/* Titled rows under the main grid (e.g. Solutions: In Partnership). */
.ex-section-title { display: flex; align-items: center; gap: 12px; margin: 34px 0 16px; font-size: 12px; font-weight: 600; letter-spacing: .08em;
    text-transform: uppercase; color: var(--muted); }
.ex-section-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }
/* Column count follows the content area's width (sidebar already excluded): 4 per row max. */
.ex-page { container-type: inline-size; }
.ex-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container (min-width: 760px)  { .ex-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 1000px) { .ex-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container (max-width: 520px)  { .ex-grid { grid-template-columns: minmax(0, 1fr); } }
/* Standard layout everywhere: screenshots anchor to the top so each product's hero shows in the 12:5 frame. */
.ex-card-tf .ex-media img { object-position: top center; }
/* Every card image is made at 1200x630, so the frame matches it exactly: nothing is cropped. */
.ex-card .ex-media img { object-fit: cover; object-position: center; }
/* The frame's 1px divider must sit outside the image box, or it shaves ~2px off the 1200x630 image. */
.ex-card .ex-media { box-sizing: content-box; }
/* Communities only: its long group names wrap, so reserve 2 lines there to keep the images level. */
.ex-communities .ex-card-tf .ex-head h3 { min-height: 2.6em; }
/* Marketplace: SVG icon sizes inside the CTA, and no underline on the card link. */
.ex-cta { display: inline-flex; align-items: center; gap: 4px; }
.ex-cta .ico { width: 15px; height: 15px; }
.ex-card:hover { text-decoration: none; }