/* ==========================================================================
   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;
}

/* box-shadow spillover (footer only, see home.css for full rationale):
   paint-only, doesn't add scrollable height, just backstops a possible
   dvh-drift gap below the footer with matching accent colour. */
.mk-sec--accent#the-footer {
  box-shadow: 0 150px 0 0 var(--colour-accent);
}

.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-bottom: min(40px, 5dvh); /* padding-top intentionally NOT overridden here (v29) -- keeps the base min(56px, 8dvh) so this page's title sits at the same vertical position as Thoughts/Cookie Policy, which never had this reduction */ }
  .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 =====
   Full-screen scrollable surface (not a small centred card over a backdrop)
   so a 5-10 image gallery has room to breathe. Prev/next/close are pinned to
   the viewport's top-right corner via position:fixed (NOT scoped to
   .mk-overlay's own scroll), so they stay reachable no matter how far the
   visitor has scrolled down the gallery. */
@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; }

/* Same glass shade as every other overlay on the site (.acq-overlay,
   .case-overlay, .cg-overlay, .t-overlay, .qn-success-overlay,
   .ct-success-overlay, .iq-success-overlay) -- this one had been left on an
   older, more opaque rgba(246,243,238,0.85)/blur(24px) treatment from before
   that shade was standardised site-wide. */
.mk-overlay {
  position: fixed; inset: 0; z-index: 60; background: rgba(245, 245, 247, 0.9);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  display: none; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.mk-overlay.is-open { display: block; }

/* Sibling of .mk-overlay (see the HTML comment in marks/index.php for why) --
   toggled by the SAME is-open class, added/removed by marks.js alongside the
   overlay's own, so it appears/disappears in lockstep with it despite living
   outside it in the DOM. */
.mk-lb-controls {
  display: none;
  position: fixed; top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right));
  z-index: 61; align-items: center; gap: min(14px, 3cqw);
  background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  padding: 8px 12px; border-radius: 999px; box-shadow: 0 10px 30px rgba(58, 63, 67, 0.15);
}
.mk-lb-controls.is-open { display: flex; }
.mk-lb-controls button { background: none; border: none; cursor: pointer; padding: 4px; display: flex; }
.mk-lb-controls button svg { transition: stroke 0.2s ease; }
.mk-lb-controls button:hover svg { stroke: var(--colour-accent); }

.mk-lb-inner {
  max-width: min(1200px, calc(100vw - 40px)); margin: 0 auto;
  padding: min(90px, 13dvh) 20px min(60px, 6dvh);
  box-sizing: border-box; container-type: inline-size;
}

/* align-items: flex-start (not baseline/stretch) is deliberate: the
   right-hand meta column (.mk-lightbox-meta-right) can be up to 3 lines
   tall, while the left column is only the name + a short tagline line.
   With baseline/stretch alignment, this row's own box grows to match
   whichever child is taller -- and since .mk-lb-tagline-row used to be a
   SIBLING of this row, that stretched height pushed it down, reading as a
   big gap under the name no matter what margin/line-height was set on the
   name or tagline. Fixed by moving the tagline row INSIDE
   .mk-lb-header-left (so name + tagline occupy a single flex item together,
   unaffected by the meta column's height) and aligning both columns to the
   top with flex-start. */
.mk-lb-title-row {
  display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 8px;
}
.mk-lb-header-left { flex: 1 1 auto; min-width: 0; }
/* .pg-title (global type-scale primitive, see base.css/CLAUDE.md) overrides
   the old bespoke lightbox-name styling below it -- both the lightbox and
   the standalone mark page (marks/_work.php) render this h1 as
   `class="mk-lightbox-name pg-title"`, so it reads as a real page title in
   both places, not a modal heading. .mk-lightbox-name is kept alongside it
   purely as the JS query-selector hook (see marks.js). */
.mk-lightbox-name.pg-title { margin: 0; line-height: 1; }
@media (min-width: 760px) {
  .mk-lightbox-name.pg-title { font-size: min(16pt, 3dvh); }
}
/* Right-side details (scope/category/year/country) are all-caps, all the SAME
   font-size (they inherit it from here -- .mk-lightbox-scope/-country no
   longer set their own), and stretched (align-items: stretch, not flex-end)
   to a shared column capped at 30% of the content width -- the same
   proportion as the testimonial column in .mk-lb-content-row -- so the
   divider lines below (.mk-meta-divider) span a consistent, predictable
   width instead of hugging whichever line's text happens to be longest.
   Country lives INSIDE this flex column (moved out of .mk-lb-tagline-row)
   specifically so all 3 lines share this single `gap` and divider treatment
   and read as one block, instead of the old layout where country sat in a
   separate row with its own, larger margin-top. */
.mk-lightbox-meta-right {
  display: flex; flex-direction: column; align-items: stretch; gap: 4px;
  max-width: 30cqw; margin-left: auto;
  font-family: var(--font-body); font-weight: 300; font-size: min(0.85rem, 3.8cqw, 2.1dvh); color: #5C646B; text-align: right;
  text-transform: uppercase;
}
/* Scope of work (e.g. "Logo · Brand Identity · Brand Strategy") -- an extra
   line above the existing category/year line, explaining how much was
   delivered for this project (see admin/marks form + database migration
   029_marks_scope_of_work.sql). Ink colour + tighter tracking so it reads as
   the headline of this meta block, with the lighter grey category/year/
   country lines underneath it as supporting detail (font-size inherited from
   .mk-lightbox-meta-right -- same size as every other line here). Empty
   string when not set -- JS/PHP both hide it via display:none rather than
   leaving a blank line. */
.mk-lightbox-scope {
  font-family: var(--font-ui); font-weight: 500; letter-spacing: 0.03em;
  color: var(--colour-ink);
}
/* Thin rule above a meta-right line that follows another visible one --
   applied conditionally (server-side in marks/_work.php, JS in marks.js) so
   it never appears above whichever line happens to render first when scope/
   country are blank for a given mark. */
.mk-meta-divider { border-top: 1px solid rgba(92, 100, 107, 0.25); padding-top: 4px; }

.mk-lb-tagline-row {
  margin-top: 7px;
}
.mk-lightbox-client { margin: 0; font-family: var(--font-ui); font-weight: 400; font-size: calc(min(0.9rem, 3.9cqw, 2.2dvh) + 1pt); letter-spacing: 0.02em; color: var(--colour-accent); }
.mk-lightbox-country { margin: 0; }

/* Primary image leads, right after the tagline row -- the "hero" visual,
   seen before the write-up below it. Same rounded treatment as it had when
   it lived inside .mk-lb-gallery. */
.mk-lb-primary-wrap { margin-top: min(28px, 3.2dvh); }
.mk-lb-primary-wrap img { width: 100%; height: auto; display: block; border-radius: 16px; }

/* Overview/Testimonial: 70:30 on desktop when a testimonial exists (added
   via JS as .has-testimonial); collapses to a single full-width Overview
   column when the mark has no testimonial_text, and is always single-column
   on mobile regardless. */
.mk-lb-content-row { display: grid; grid-template-columns: 1fr; gap: min(28px, 3.2dvh); margin-top: min(32px, 3.6dvh); }
@media (min-width: 760px) {
  .mk-lb-content-row.has-testimonial { grid-template-columns: 7fr 3fr; }
}
.mk-lb-overview h5, .mk-lb-testimonial h5 {
  margin: 0 0 8px; font-family: var(--font-ui); font-weight: 500; font-size: calc(min(0.7rem, 3cqw, 1.6dvh) + 1pt);
  letter-spacing: 0.08em; text-transform: uppercase; color: #8A9099;
}
.mk-lightbox-desc { margin: 0; font-family: var(--font-body); font-weight: 300; font-size: calc(min(0.95rem, 4.1cqw, 2.3dvh) + 1pt); line-height: 1.55; color: var(--colour-ink); }
/* Solution (logo_idea): sits directly under Overview in the same column,
   hidden entirely (via marks.js) when a mark has no logo_idea text. */
.mk-lb-solution { margin-top: min(24px, 2.6dvh); }
.mk-lightbox-idea { margin: 0; font-family: var(--font-body); font-weight: 300; font-size: calc(min(0.95rem, 4.1cqw, 2.3dvh) + 1pt); line-height: 1.55; color: var(--colour-ink); }
.mk-lb-testimonial { background: rgba(255, 255, 255, 0.6); border-radius: 14px; padding: min(18px, 2dvh) min(20px, 4.4cqw); }
/* No auto-added quote marks here -- testimonial_text is free text (quote +
   attribution together, e.g. name/role/company), so the admin adds their own
   quotation marks around just the quoted part when they want them. */
.mk-lightbox-testimonial-text { margin: 0; font-family: var(--font-body); font-weight: 300; font-style: italic; font-size: calc(min(0.9rem, 3.9cqw, 2.2dvh) + 1pt); line-height: 1.5; color: #3A3F43; }

/* Remaining gallery images (everything after the primary, which now renders
   up top in .mk-lb-primary-wrap instead), in admin-controlled
   display_order, always full-width at its own natural aspect ratio.
   Collapses to zero height on its own (empty :empty div) when a mark has no
   secondary gallery images, so no stray margin shows below Overview. */
.mk-lb-gallery:empty { margin-top: 0; }
.mk-lb-gallery { margin-top: min(40px, 4.4dvh); display: flex; flex-direction: column; gap: min(18px, 2dvh); }
.mk-lb-gallery img { width: 100%; height: auto; display: block; border-radius: 14px; }

/* Mobile-only "< Home" back-link — wide screens use the disabled self-link
   in the nav bar instead, so this is hidden there. */
@media (min-width: 760px) {
  .mk-back { display: none; }
}