/* ============================================================
   qb.page.mk.css — profile / page (page.php) design layer
   ------------------------------------------------------------
   Brings the public page onto the approved mockup: roomier grid,
   clearer card hierarchy, compact sidebar, calmer chrome.

   SCOPED TO .qb-page-mk (set on page.php's .content wrapper).
   The qbpg-* classes are defined in an INLINE <style> in page.php
   (lines ~684-838); this file is linked immediately after it, so it
   wins on source order AND on specificity (.qb-page-mk x = 0,2,0
   against the inline block's bare 0,1,0 selectors).

   CSS only. No markup changes, no new data. The hero renders cover,
   avatar, name and category — it has no location or reputation on
   this branch, so none is styled in.

   Design brief this serves: MORE usable space, not less. The page
   was capped at 1140px on every screen, wasting 230px per side at
   1600px, and each sidebar row spent 118px on two lines of text.
   ============================================================ */

.qb-page-mk{
  --accent:#2563eb; --accent-2:#1d4ed8; --accent-tint:#eff6ff; --accent-border:#dbe3ef;
  --ink:#111827; --ink-2:#1f2937; --muted:#64748b; --faint:#94a3b8;
  --border:#e8edf5; --divider:#eef2f7;
  --shadow:0 8px 18px rgba(15,23,42,.06);
  --shadow-h:0 12px 24px rgba(15,23,42,.10);
}

/* ---------- 1. give the page its width back ----------
   Bootstrap caps .container at 1140px and never goes wider, so a
   1600px monitor showed 1140px of content between two 230px voids.
   Scoped to this page; .container is shared chrome everywhere else. */
@media (min-width:1200px){
  .qb-page-mk > .container{max-width:1360px}
}
@media (min-width:1600px){
  .qb-page-mk > .container{max-width:1520px}
}

/* ---------- 2. hero ----------
   page.php renders THREE hero variants off the same classes: the standard
   page hero, .qbpg-hero-source (no cover, its own .qbpg-source-avatar) and
   .qbpg-hero-resume (gradient cover, same avatar class). Only the standard
   one is in scope for this pass, so the resume variant is excluded by name
   — without that exclusion these rules silently restyle every resume. */
/* Guard: STANDARD hero only. Both other variants reuse these class names --
   .qbpg-hero-resume has its own name/tag rules at the SAME specificity (0,2,0)
   which this file would win purely on source order, and .qbpg-hero-source
   shares .qbpg-hero-body/.qbpg-hero-name/.qbpg-hero-tag outright. Excluding
   only one of them leaks into the other. */
.qb-page-mk .qbpg-hero{border-radius:16px;border-color:var(--border);box-shadow:var(--shadow);margin-bottom:18px}
.qb-page-mk .qbpg-hero:not(.qbpg-hero-resume):not(.qbpg-hero-source) .qbpg-hero-cover{height:184px}
.qb-page-mk .qbpg-hero:not(.qbpg-hero-resume):not(.qbpg-hero-source) .qbpg-hero-body{padding:14px 22px 18px}
/* rounded square reads as a business page; the circle reads as a person */
.qb-page-mk .qbpg-hero:not(.qbpg-hero-resume):not(.qbpg-hero-source) .qbpg-hero-avatar{
  border-radius:20px;width:92px;height:92px;margin-top:-58px;border-width:4px;
}
.qb-page-mk .qbpg-hero:not(.qbpg-hero-resume):not(.qbpg-hero-source) .qbpg-hero-name{
  font-size:clamp(1.3rem,2vw,1.65rem);font-weight:800;letter-spacing:-.5px;color:var(--ink);
}
.qb-page-mk .qbpg-hero:not(.qbpg-hero-resume):not(.qbpg-hero-source) .qbpg-hero-tag{
  font-size:.82rem;color:var(--muted);font-weight:600;
}
.qb-page-mk .qbpg-hero-actions{gap:9px}
.qb-page-mk .qbpg-btn{border-radius:10px;font-weight:700;font-size:.82rem;padding:9px 15px;transition:.15s}
.qb-page-mk .qbpg-btn-outline{border:1px solid var(--border);background:#fff;color:var(--ink-2)}
.qb-page-mk .qbpg-btn-outline:hover{border-color:var(--accent-border);background:#f8fafc;color:var(--ink)}
.qb-page-mk .qbpg-btn-primary{background:var(--accent);border:1px solid var(--accent);color:#fff}
.qb-page-mk .qbpg-btn-primary:hover{background:var(--accent-2);border-color:var(--accent-2)}

/* ---------- 3. category filter row ----------
   These pills ARE the mockup's "Todas las categorías" control, and they
   carry live counts, so they stay. Only the treatment is calmed down. */
.qb-page-mk .qbpg-filter-tabs{gap:7px;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--divider)}
.qb-page-mk .qbpg-tab{padding:6px 12px;font-size:.78rem;font-weight:600;border-color:var(--border);background:#fff;color:var(--muted)}
.qb-page-mk .qbpg-tab:hover{background:var(--accent-tint);border-color:var(--accent-border);color:var(--accent)}
.qb-page-mk .qbpg-tab.active{background:var(--accent);border-color:var(--accent);color:#fff}
.qb-page-mk .qbpg-tab-count{min-width:19px;height:19px;font-size:.66rem;background:#f1f5f9;color:var(--muted)}

/* ---------- 4. cards: bigger type, clearer hierarchy ----------
   Card WIDTH comes from the container widening above; the gutter goes
   4px -> 6px (8px -> 12px between cards), which costs ~4px of card and
   buys real separation now that the cards are ~80px wider. */
.qb-page-mk .cali{padding:6px !important}
.qb-page-mk .qbpg-card{border-radius:14px;border-color:var(--border);box-shadow:var(--shadow);margin-bottom:0}
.qb-page-mk .qbpg-card:hover{box-shadow:var(--shadow-h)}
.qb-page-mk .qbpg-card-body{padding:12px 13px 13px}
.qb-page-mk .qbpg-card-price{font-size:1rem;font-weight:800;color:var(--accent);letter-spacing:-.3px;font-variant-numeric:tabular-nums;margin:0 0 5px}
.qb-page-mk .qbpg-card-title{font-size:.87rem;font-weight:600;color:var(--ink-2);line-height:1.4;margin:0 0 9px}
.qb-page-mk .qbpg-card-specs{font-size:.76rem;color:var(--muted)}
/* the date becomes a proper meta row, like the mockup's card footer */
.qb-page-mk .qbpg-card-date{
  font-size:.72rem;color:var(--muted);margin:0;
  padding-top:9px;border-top:1px solid var(--divider);
}

/* ---------- 5. sidebar: compact rows ----------
   Was 118px per row for a name and one line of text. The mockup uses a
   small thumbnail beside two tight lines — roughly half the height, so
   twice as many pages are visible without scrolling. */
.qb-page-mk .qbpg-similar-title{
  font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  /* --faint (#94a3b8) is 2.56:1 on white and this is ~11px bold, so it clears
     neither the 4.5:1 normal-text bar nor the 3:1 large-text one. --muted is
     4.76:1 and still reads as a quiet label. */
  color:var(--muted);margin-bottom:10px;
}
.qb-page-mk .qbpg-similar-item{
  display:flex;align-items:center;gap:11px;padding:9px 11px;
  margin:0 0 7px;min-height:0;                 /* inline rule pins 108px + margin-top:10px */
  background:#fff;border:1px solid var(--border);border-radius:12px;
  box-shadow:none;transition:border-color .15s ease,background .15s ease;
}
.qb-page-mk .qbpg-similar-item:hover{border-color:var(--accent-border);background:#f8fafc;text-decoration:none}
.qb-page-mk .qbpg-similar-media{
  width:44px;height:44px;min-width:44px;max-width:44px;flex:0 0 44px;
  align-self:center;margin:0;border-radius:11px;overflow:hidden;
}
.qb-page-mk .qbpg-similar-cover{width:44px;height:44px;border-radius:11px;object-fit:cover}
.qb-page-mk .qbpg-similar-meta{min-width:0;text-align:left;padding:0}
.qb-page-mk .qbpg-similar-name{
  display:block;font-size:.82rem;font-weight:700;color:var(--ink-2);line-height:1.3;
  margin:0;min-height:0;                       /* inline rule reserves 2.64em for 2 lines */
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.qb-page-mk .qbpg-similar-sub{
  display:block;font-size:.71rem;color:var(--muted);line-height:1.3;
  margin:2px 0 0;min-height:0;
  /* display:block kills the inline -webkit-line-clamp:1, so truncation has to
     be restored explicitly or a long occupation string re-grows the row. */
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ---------- 6. keyboard focus ---------- */
.qb-page-mk a:focus-visible,
.qb-page-mk button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

/* ---------- 7. mobile ----------
   header.php:341-348 emits margin-top:94px!important (122px under 768px)
   to clear a FIXED header, but the header flips to position:relative at
   992px, so below that the offset is counted twice. Same site-wide bug
   noted on the homepage; countered here for this page only. */
@media (max-width:991.98px){
  body > .content.content-fixed.qb-page-mk{margin-top:0!important}
}
@media (max-width:575.98px){
  .qb-page-mk .qbpg-hero:not(.qbpg-hero-resume):not(.qbpg-hero-source) .qbpg-hero-cover{height:130px}
  .qb-page-mk .qbpg-hero:not(.qbpg-hero-resume):not(.qbpg-hero-source) .qbpg-hero-body{padding:12px 14px 16px}
  .qb-page-mk .qbpg-hero:not(.qbpg-hero-resume):not(.qbpg-hero-source) .qbpg-hero-avatar{
    width:72px;height:72px;margin-top:-46px;border-radius:16px;
  }
  .qb-page-mk .cali{padding:5px !important}
}