/* ==========================================================================
   The Marks — page-specific styles.
   Normal flowing content page (no scroll-snap, no 100dvh-locked sections),
   same architecture as paradigm.css / ontologist.css. Shared button/nav/
   footer/cookie styles live in components.css; global .pg-col/.pg-title/
   .pg-headline/.pg-body type-scale primitives in base.css.
   ========================================================================== */

.mk-sec {
  background: linear-gradient(var(--colour-bg), var(--colour-bg)) center / 100% 100% no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  padding: min(56px, 8dvh) 20px;
}

.mk-sec--accent {
  background: linear-gradient(var(--colour-accent), var(--colour-accent)) center / 100% 100% no-repeat;
}

.mk-back {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 8px;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: min(0.8rem, 3.6cqw, 2.1dvh);
  letter-spacing: 0.08em;
  color: var(--colour-ink);
  text-transform: uppercase;
}

.mk-back:hover { color: var(--colour-accent); }

.mk-eyebrow {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: min(0.95rem, 4.2cqw, 2.5dvh);
  letter-spacing: 0.12em;
  color: var(--colour-accent);
  text-transform: uppercase;
  margin-top: min(30px, 3.6dvh);
}

.mk-filters {
  display: flex;
  gap: min(10px, 2.5cqw);
  margin-top: min(14px, 1.6dvh);
}

.mk-filter {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: min(0.72rem, 3.2cqw, 1.8dvh);
  letter-spacing: 0.06em;
  color: #5C646B;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--colour-ink-12);
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.mk-filter--active {
  font-weight: 500;
  color: var(--colour-ink);
  border: none;
  background: var(--colour-accent-40);
}

/* Gallery grid — mobile masonry-ish 3-col grid, each tile positioned via
   inline grid-column/grid-row (mirrors the source layout's per-mark placement) */
.mk-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: calc((100cqw - 20px) / 3);
  gap: 10px;
  width: 100%;
  margin-top: min(16px, 1.8dvh);
}

.mk-tile {
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

/* Matches the homepage Selected Marks bento hover (.pg-grid > *:hover in
   home.css) so the two mark grids feel identical. */
.mk-tile:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px rgba(58, 63, 67, 0.16);
  z-index: 2;
}

.mk-tile img {
  pointer-events: none;
  filter: brightness(0) invert(1);
  transform: scale(0.75);
}

.mk-tile-name {
  position: absolute;
  bottom: 10px;
  left: 12px;
  z-index: 1;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: calc(min(0.72rem, 3.2cqw, 1.8dvh) + 1pt);
  letter-spacing: 0.04em;
  color: #FFFFFF;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

.mk-cta-body {
  margin: min(16px, 1.8dvh) 0 0 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: min(0.95rem, 4.4cqw, 2.6dvh);
  line-height: 1.4;
  color: var(--colour-bg);
}

/* "Available Marks" sits on the accent-coloured CTA section; its fill is the
   page (cream) background instead of the standard dusty-blue tone, matching
   the same contrast fix used on the Paradigm/Ontologist CTA buttons. */
.mk-btn-bg { background: var(--colour-bg); margin-top: min(28px, 3.4dvh); }

@media (min-width: 760px) {
  .mk-sec { background-size: 100% 100%; padding-top: min(40px, 5dvh); padding-bottom: min(40px, 5dvh); }
  .mk-sec .pg-col { max-width: min(1200px, calc(100vw - 48px)); }
  .mk-sec .pg-title { font-size: min(16pt, 3dvh); }
  .mk-sec .pg-headline { font-size: min(40px, 5dvh); max-width: 820px; }
  .mk-sec .pg-cta-head { font-size: min(40px, 5dvh); max-width: 820px; }
  .mk-sec .pg-body { font-size: min(12pt, 2.4dvh); line-height: 1.3; max-width: 820px; }
  .mk-cta-body { font-size: min(12pt, 2.4dvh); line-height: 1.3; max-width: 820px; }
  .mk-btn-bg { font-size: min(12pt, 2.4dvh); width: 400px; align-self: flex-start; }

  /* 6-col bento block. Tile shape/placement comes from each mark's bento_size
     (square/horizontal/vertical, applied as inline grid-column/grid-row spans
     in marks/index.php) packed via grid-auto-flow: dense — no fixed nth-child
     positions here, so the mosaic actually reflects the database. */
  .mk-grid {
    --mk-w: 100cqw;
    --mk-gap: 14px;
    --mk-cell: calc((var(--mk-w) - 5 * var(--mk-gap)) / 6);
    grid-template-columns: repeat(6, var(--mk-cell));
    grid-auto-rows: var(--mk-cell);
    gap: var(--mk-gap);
    width: 100%;
    justify-content: center;
  }
}

/* ===== Mark lightbox (matches .t-overlay/.t-card chrome on the homepage) ===== */
@keyframes mkSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes mkSlideDown { from { transform: translateY(0); } to { transform: translateY(100%); } }
.slide-up { animation: mkSlideUp 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.slide-down { animation: mkSlideDown 0.42s cubic-bezier(0.4, 0, 1, 1) forwards; }

.mk-overlay {
  position: fixed; inset: 0; z-index: 60; background: rgba(246, 243, 238, 0.47);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  display: none; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box;
}
.mk-overlay.is-open { display: flex; }

@media (max-width: 767px) {
  .mk-overlay { padding: 12px; }
  .mk-card { max-width: 100% !important; }
}

.mk-card {
  width: 100%; max-width: min(480px, 92vw); max-height: 88dvh; overflow-y: auto; scrollbar-width: none;
  background: rgba(255, 255, 255, 0.50); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-radius: 18px; box-shadow: 0 20px 50px rgba(58, 63, 67, 0.18); padding: min(24px, 2.6dvh) min(26px, 6cqw) min(30px, 3.4dvh);
  box-sizing: border-box; position: relative; container-type: inline-size; display: flex; flex-direction: column;
}
.mk-card::-webkit-scrollbar { display: none; }
.mk-card-head { display: flex; justify-content: flex-end; align-items: center; width: 100%; flex-shrink: 0; }
.mk-card-head-actions { display: flex; align-items: center; gap: min(14px, 3cqw); }
.mk-card-head-actions button { background: none; border: none; cursor: pointer; padding: 4px; display: flex; }
.mk-card-head-actions button svg { transition: stroke 0.2s ease; }
.mk-card-head-actions button:hover svg { stroke: var(--colour-accent); }

.mk-card-body { flex: 1 1 auto; min-height: 0; margin-top: min(6px, 0.7dvh); display: flex; flex-direction: column; }

/* Neutral cream backdrop (same tone used behind every avatar/logo circle
   site-wide, e.g. .t-avatar/.pf-avatar) so the mark's true colours read
   clearly regardless of its own brand background_color — the lightbox
   chrome itself matches the other overlays, not each mark's tile colour.
   Aspect ratio is 2:1, matching the recommended 2000x1000 "bigger image"
   upload, so the box height always follows the image's own width at 100%
   without cropping or letterboxing when that image is shown. When a mark
   has no bigger image and the logo is shown instead (see .mk-lightbox-logo
   img default sizing below), the logo is shrunk and centred within this
   same 2:1 box on the cream backdrop, exactly as before. */
.mk-lightbox-logo {
  width: 100%; aspect-ratio: 2 / 1; border-radius: 14px; background: var(--colour-bg);
  display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0;
}
.mk-lightbox-logo img { width: 65%; height: 65%; object-fit: contain; }
/* Bigger image present: fill the box edge-to-edge (padding comes from the
   card's own padding, not extra margin inside the box) since its native
   ratio already matches the box exactly. */
.mk-lightbox-logo.mk-lightbox-logo--full img { width: 100%; height: 100%; object-fit: cover; }

/* Name/client-details/description sit on the left; country/year sit on the
   right, sharing the SAME grid rows as their left-column counterpart so each
   right-hand line sits flush with the BOTTOM of the row it shares — country
   bottom-aligned with the description (row 3), year bottom-aligned with the
   idea-of-the-logo field (row 4, since it sits below description; align-self:
   end keeps country/year pinned to that row's bottom edge rather than its
   top, which matters since desc/idea are often multi-line and so their rows
   are taller). The client-details row has no right-column counterpart. Empty
   rows collapse naturally when an optional field is hidden (display: none
   removes it from the grid, so the row's height then comes from whichever
   sibling still occupies it, or 0 if both are hidden). */
.mk-lightbox-meta {
  margin-top: min(20px, 2.2dvh); display: grid;
  grid-template-columns: 1fr auto; column-gap: min(24px, 4cqw); row-gap: 6px;
  grid-template-areas: "name    name" "client  client" "desc    country" "idea    year";
}
.mk-lightbox-name { grid-area: name; margin: 0; font-family: var(--font-ui); font-weight: 500; font-size: calc(min(1.1rem, 4.8cqw, 2.6dvh) + 2pt); color: var(--colour-ink); }
.mk-lightbox-client { grid-area: client; margin: 0; font-family: var(--font-ui); font-weight: 400; font-size: calc(min(0.85rem, 3.8cqw, 2.2dvh) + 1pt); letter-spacing: 0.02em; color: var(--colour-accent); }
.mk-lightbox-desc { grid-area: desc; margin: 4px 0 0 0; font-family: var(--font-body); font-weight: 300; font-size: calc(min(0.9rem, 4cqw, 2.3dvh) + 1pt); line-height: 1.45; color: #5C646B; }
.mk-lightbox-idea { grid-area: idea; margin: 4px 0 0 0; font-family: var(--font-body); font-weight: 700; font-size: calc(min(0.9rem, 4cqw, 2.3dvh) + 1pt); line-height: 1.45; color: #5C646B; }
.mk-lightbox-country { grid-area: country; align-self: end; text-align: right; margin: 0; font-family: var(--font-body); font-weight: 300; font-size: calc(min(0.78rem, 3.4cqw, 1.9dvh) + 1pt); color: #5C646B; }
.mk-lightbox-year { grid-area: year; align-self: end; text-align: right; margin: 0; font-family: var(--font-body); font-weight: 300; font-size: calc(min(0.78rem, 3.4cqw, 1.9dvh) + 1pt); color: #5C646B; }

@media (min-width: 760px) {
  /* Lightbox content matches the page content column width (same as
     .mk-sec .pg-col above), rather than a narrower fixed card width. */
  .mk-card { max-width: min(1200px, calc(100vw - 48px)); padding: min(30px, 3.2dvh) min(34px, 3.6cqw) min(34px, 3.6dvh); }
}