/*
 * CaseFol.io showcase
 *
 * This block renders inside someone else's theme, so it inherits their type and keeps its
 * own colour to a hairline grid, near-black text, and a single accent the theme can
 * override with --casefolio-accent. Everything is scoped under .casefolio-showcase so it
 * cannot leak into the host site.
 */

.casefolio-showcase {
  --casefolio-accent: #1f6feb;
  --casefolio-ink: #17191c;
  --casefolio-muted: #5b6169;
  --casefolio-line: #e3e6ea;
  --casefolio-surface: #ffffff;
  --casefolio-sunken: #f6f7f9;
  --casefolio-radius: 10px;

  font-family: inherit;
  color: var(--casefolio-ink);
  max-width: 100%;
}

.casefolio-showcase *,
.casefolio-showcase *::before,
.casefolio-showcase *::after {
  box-sizing: border-box;
}

/* ---------------------------------------------------------------- map */

.casefolio-showcase__map-frame {
  border: 1px solid var(--casefolio-line);
  border-radius: var(--casefolio-radius);
  /* Clips the tile layer to the radius; without it the corners show square tiles. */
  overflow: hidden;
  background: var(--casefolio-sunken);
}

.casefolio-showcase__map {
  width: 100%;
  min-height: 280px;
}

.casefolio-showcase .leaflet-container {
  font-family: inherit;
}

.casefolio-showcase .leaflet-control-attribution {
  font-size: 11px;
  background: rgba(255, 255, 255, 0.85);
}

/* ---------------------------------------------------------------- fields */

.casefolio-field {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}

.casefolio-field__icon,
.casefolio-field__chevron {
  position: absolute;
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--casefolio-muted);
  pointer-events: none;
}

.casefolio-field__icon { left: 12px; }
.casefolio-field__chevron { right: 12px; }

/* Every one of these rules is prefixed with the .casefolio-showcase ancestor rather than
   left as a bare single class. A host theme's own reset stylesheet (Hello Elementor's
   reset.css is the concrete one this was checked against live) resets `button`,
   `[type="button"]`, `[type="submit"]` wholesale — not just colour, but display, padding,
   font-size, white-space, text-align, transition, the lot — at the same specificity as a
   single class. That is a tie, and it is normally enqueued after this stylesheet, so the
   theme wins it: the checkbox rendered above its label instead of beside it, because
   `display: flex` itself lost the tie, not just a colour. `.casefolio-showcase` is always
   the wrapper's own class (see showcase.php / single-job.php), so prefixing with it changes
   no element this matches — only raises specificity from (0,1,0) to (0,2,0), which beats
   the theme's tie outright, with no !important anywhere. */
.casefolio-showcase .casefolio-field__input {
  width: 100%;
  font: inherit;
  font-size: 14.5px;
  line-height: 1.4;
  border-radius: var(--casefolio-radius);
  padding: 9px 13px;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.casefolio-showcase .casefolio-field__icon + .casefolio-field__input { padding-left: 37px; }
.casefolio-showcase .casefolio-field--select .casefolio-field__input { padding-right: 36px; }

/* Default skin: our own colour and a custom chevron replace the native input/select
   chrome, so the appearance reset and the colour tokens travel together. */
.casefolio-skin-default .casefolio-field__input {
  color: var(--casefolio-ink);
  background: var(--casefolio-surface);
  border: 1px solid var(--casefolio-line);
  appearance: none;
  -webkit-appearance: none;
}

.casefolio-skin-default .casefolio-field__input::placeholder { color: var(--casefolio-muted); opacity: 1; }

.casefolio-skin-default .casefolio-field__input:focus,
.casefolio-skin-default .casefolio-field__input:focus-visible {
  outline: none;
  border-color: var(--casefolio-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--casefolio-accent) 18%, transparent);
}

/* Site skin: no competing declaration, so the host theme's own native input/select/border
   styling shows through untouched — including its own arrow, since the chevron below is
   ours and only makes sense once the native one is suppressed. */
.casefolio-skin-site .casefolio-field__chevron { display: none; }

/* Every icon in the block is sized explicitly; an inline SVG with no width renders at
   its natural size, which is how a 200px magnifier ends up in a search field. */
.casefolio-showcase svg { max-width: 100%; }
/* ---------------------------------------------------------------- explorer */

.casefolio-explorer {
  --casefolio-explorer-height: min(78vh, 860px);
  --casefolio-bar-height: 62px;
}

/* Break out of the theme's content column. A search interface needs the width; overflow
   is clipped so a theme without its own guard cannot gain a horizontal scrollbar. */
.casefolio-explorer--wide {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
  overflow-x: clip;
}

.casefolio-explorer__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px clamp(14px, 3vw, 28px);
  border-top: 1px solid var(--casefolio-line);
  border-bottom: 1px solid var(--casefolio-line);
  background: var(--casefolio-surface);
  min-height: var(--casefolio-bar-height);
}

.casefolio-explorer__bar .casefolio-field { flex: 1 1 260px; max-width: 460px; }
.casefolio-explorer__sort { flex: 0 0 190px; margin-left: auto; }

.casefolio-showcase .casefolio-explorer__maptoggle {
  display: none;
  align-items: center;
  gap: 7px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--casefolio-radius);
  padding: 10px 14px;
  cursor: pointer;
}

.casefolio-explorer__maptoggle svg { width: 17px; height: 17px; }

.casefolio-skin-default .casefolio-explorer__maptoggle {
  color: var(--casefolio-ink);
  background: var(--casefolio-surface);
  border: 1px solid var(--casefolio-line);
}

.casefolio-explorer__body {
  display: grid;
  grid-template-columns: 246px minmax(340px, 1fr) minmax(0, 1.25fr);
  height: var(--casefolio-explorer-height);
  min-height: 520px;
}

/* --------------------------------------------------------------- filters */

.casefolio-explorer__filters {
  border-right: 1px solid var(--casefolio-line);
  padding: 20px clamp(12px, 1.6vw, 20px) 28px;
  overflow-y: auto;
  /* Not `contain`: trapping the wheel at the end of a pane leaves the visitor unable
     to scroll the page either way. */
  overscroll-behavior: auto;
}

.casefolio-filtergroup + .casefolio-filtergroup {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--casefolio-line);
}

.casefolio-filtergroup__title {
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--casefolio-muted);
  margin: 0 0 10px;
}

.casefolio-filtergroup__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.casefolio-showcase .casefolio-filter {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  font: inherit;
  font-size: 14px;
  line-height: 1.35;
  text-align: left;
  border-radius: 7px;
  padding: 7px 8px;
  cursor: pointer;
  transition: background-color 120ms ease;
}

/* color/background/border still need the .casefolio-skin-default scoping on top of the
   ancestor prefix above: those three are the ones the toggle actually changes per skin,
   where the structural properties above apply in both skins. */
.casefolio-skin-default .casefolio-filter {
  color: var(--casefolio-ink);
  background: none;
  border: 0;
}
.casefolio-skin-default .casefolio-filter:hover { background: var(--casefolio-sunken); }

.casefolio-filter:focus-visible { outline: 2px solid var(--casefolio-accent); outline-offset: -2px; }

.casefolio-filter__box {
  flex: none;
  width: 17px;
  height: 17px;
  border: 1.5px solid var(--casefolio-line);
  border-radius: 4px;
  display: grid;
  place-items: center;
  color: #fff;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.casefolio-filter__box svg { width: 11px; height: 11px; opacity: 0; transition: opacity 120ms ease; }

.casefolio-filter[aria-pressed="true"] .casefolio-filter__box {
  background: var(--casefolio-accent);
  border-color: var(--casefolio-accent);
}

.casefolio-filter[aria-pressed="true"] .casefolio-filter__box svg { opacity: 1; }
.casefolio-filter[aria-pressed="true"] .casefolio-filter__label { font-weight: 600; }

/* A selected row still turned theme-pink after the layout fix above, from the theme's
   own :active/:focus button styling — a real click leaves the button focused, and a host
   theme can (Hello Elementor does) style that focus state directly rather than resetting
   it back to the plain button look. Rather than chase the exact pseudo-class responsible,
   this states its own explicit look for "selected" outright: two classes + an attribute
   selector is (0,3,0), comfortably past anything in the theme's own reset, and it wins the
   tie against the plain :hover rule above by coming after it in the file — a selected row
   reads the same whether or not the pointer happens to still be over it. */
.casefolio-skin-default .casefolio-filter[aria-pressed="true"] {
  background: var(--casefolio-ink);
  color: #fff;
}
.casefolio-skin-default .casefolio-filter[aria-pressed="true"] .casefolio-filter__count {
  color: rgba(255, 255, 255, 0.75);
}

.casefolio-filter__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.casefolio-filter__count {
  flex: none;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--casefolio-muted);
}

.casefolio-showcase .casefolio-reset {
  font: inherit;
  font-size: 13.5px;
  padding: 14px 8px 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.casefolio-skin-default .casefolio-reset {
  color: var(--casefolio-muted);
  background: none;
  border: 0;
}
.casefolio-skin-default .casefolio-reset:hover { color: var(--casefolio-ink); }

/* --------------------------------------------------------------- results */

.casefolio-explorer__results {
  overflow-y: auto;
  /* Not `contain`: trapping the wheel at the end of a pane leaves the visitor unable
     to scroll the page either way. */
  overscroll-behavior: auto;
  padding: 16px clamp(12px, 1.6vw, 20px) 32px;
  border-right: 1px solid var(--casefolio-line);
}

.casefolio-explorer__count {
  font-size: 13px;
  color: var(--casefolio-muted);
  margin: 0 0 12px;
  font-variant-numeric: tabular-nums;
}

.casefolio-results {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.casefolio-result {
  border: 1px solid var(--casefolio-line);
  border-radius: var(--casefolio-radius);
  background: var(--casefolio-surface);
  overflow: hidden;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.casefolio-result--hidden { display: none; }

/* Hover on either side lights the other; this is the pairing that makes the two panes one
   interface rather than two widgets sharing a page. */
.casefolio-result:hover,
.casefolio-result--active {
  border-color: color-mix(in srgb, var(--casefolio-accent) 55%, var(--casefolio-line));
  box-shadow: 0 6px 18px -10px rgba(15, 20, 28, 0.3);
}

.casefolio-result--active {
  outline: 2px solid var(--casefolio-accent);
  outline-offset: -1px;
}

.casefolio-result__link {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 0;
  text-decoration: none;
  color: inherit;
}

.casefolio-result__link:focus-visible { outline: 2px solid var(--casefolio-accent); outline-offset: -2px; }

.casefolio-result__media {
  background: var(--casefolio-sunken);
  overflow: hidden;
}

.casefolio-result__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 128px;
}

.casefolio-result__body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px 14px;
  min-width: 0;
}

.casefolio-result__place {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  color: var(--casefolio-muted);
  min-width: 0;
}

.casefolio-result__place svg { width: 13px; height: 13px; flex: none; }

.casefolio-result__title {
  font-size: 16px;
  font-weight: 650;
  line-height: 1.3;
}

/* Proof, not decoration — same ticks, same accent fill as the job page's own reviews, so a
   visitor recognises it as the same signal before they've even clicked through. The product
   owner asked for this even at the cost of card height, so it gets its own row rather than
   being squeezed onto the title line. */
.casefolio-result__rating {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.casefolio-result__rating .casefolio-review__ticks { font-size: 12px; }
.casefolio-result__rating .casefolio-review__tick { font-size: 12px; }

.casefolio-result__rating-value {
  font-size: 12.5px;
  font-weight: 600;
}

.casefolio-result__rating-count {
  font-size: 12px;
  color: var(--casefolio-muted);
}

.casefolio-result__review {
  display: block;
  font-size: 13px;
  font-style: italic;
  line-height: 1.5;
  color: var(--casefolio-muted);
}

.casefolio-result__review-author {
  display: inline-block;
  margin-left: 4px;
  font-style: normal;
  font-weight: 600;
  color: var(--casefolio-ink);
}

.casefolio-result__excerpt {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--casefolio-muted);
}

.casefolio-result__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 6px;
}

.casefolio-result__tag {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--casefolio-muted);
  background: var(--casefolio-sunken);
  border-radius: 4px;
  padding: 3px 7px;
}

.casefolio-result__date {
  font-size: 12px;
  color: var(--casefolio-muted);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- map pane */

.casefolio-explorer__map {
  position: relative;
  background: var(--casefolio-sunken);
}

.casefolio-explorer__canvas {
  position: absolute;
  inset: 0;
}

.casefolio-showcase .casefolio-explorer__mapclose {
  display: none;
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 500;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
}

.casefolio-skin-default .casefolio-explorer__mapclose {
  background: var(--casefolio-surface);
  color: var(--casefolio-ink);
  border: 1px solid var(--casefolio-line);
  box-shadow: 0 4px 14px -6px rgba(15, 20, 28, 0.35);
}

.casefolio-explorer__mapclose svg { width: 13px; height: 13px; }

.casefolio-explorer__none {
  margin: 8px 0 0;
  padding: 28px;
  text-align: center;
  font-size: 15px;
  color: var(--casefolio-muted);
  background: var(--casefolio-sunken);
  border-radius: var(--casefolio-radius);
}

.casefolio-empty {
  margin: 20px 0;
  padding: 30px;
  text-align: center;
  font-size: 15px;
  color: var(--casefolio-muted);
  background: var(--casefolio-sunken);
  border-radius: var(--casefolio-radius);
}

/* The default Leaflet pin is a transparent-background PNG, so brightness(0) turns every
   opaque pixel solid black while keeping the pin's own silhouette and shadow-image alpha
   intact — no separate black-pin asset needed. Transition lives on the base marker class
   (every pin, not just the active one) so it only animates the property that actually
   changes and doesn't fight Leaflet's own positioning transforms on the same element. */
.casefolio-showcase .leaflet-marker-icon {
  transition: filter 140ms ease;
}

/* A pin for the hovered result, so the map answers the list. */
.casefolio-pin--active {
  filter: brightness(0) drop-shadow(0 3px 7px rgba(15, 20, 28, 0.45));
  z-index: 1000 !important;
}

/* --------------------------------------------------------------- popup */

.casefolio-map-popup { max-width: 236px; font-family: inherit; }

.casefolio-map-popup-image {
  width: 100%;
  height: 116px;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 9px;
  display: block;
}

.casefolio-map-popup-title { margin: 0 0 3px; font-size: 15px; line-height: 1.3; }
.casefolio-map-popup-location { margin: 0 0 6px; font-size: 12px; color: #5b6169; }

/* Compact on purpose — this popup stays at its existing 236px scale even though the list
   cards go bigger; same ticks, same accent fill as everywhere else this rating appears. */
.casefolio-map-popup-rating {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 6px;
}

.casefolio-map-popup-rating .casefolio-review__ticks { font-size: 11px; }
.casefolio-map-popup-rating .casefolio-review__tick { font-size: 11px; }
.casefolio-map-popup-rating-value { font-size: 12px; font-weight: 600; }
.casefolio-map-popup-rating-count { font-size: 11px; color: #5b6169; }

.casefolio-map-popup-excerpt { margin: 0 0 9px; font-size: 13px; line-height: 1.45; }
.casefolio-map-popup-link { font-weight: 600; text-decoration: none; }

/* --------------------------------------------------------------- responsive */

@media (max-width: 1100px) {
  .casefolio-explorer__body { grid-template-columns: 216px minmax(300px, 1fr) minmax(0, 1fr); }
  .casefolio-result__link { grid-template-columns: 108px minmax(0, 1fr); }
}

/* The filter rail costs more than it earns once the map and list are already competing;
   below this it folds into the results column as a scrolling row of chips. */
@media (max-width: 900px) {
  .casefolio-explorer__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .casefolio-explorer__filters {
    grid-column: 1 / -1;
    grid-row: 1;
    border-right: 0;
    border-bottom: 1px solid var(--casefolio-line);
    padding: 12px 16px;
    display: flex;
    gap: 20px;
    overflow-x: auto;
  }
  .casefolio-explorer__body {
    grid-template-rows: auto minmax(0, 1fr);
    height: auto;
  }
  .casefolio-explorer__results,
  .casefolio-explorer__map { height: var(--casefolio-explorer-height); }
  .casefolio-filtergroup + .casefolio-filtergroup {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    padding-left: 20px;
    border-left: 1px solid var(--casefolio-line);
  }
  .casefolio-filtergroup__list { flex-direction: row; gap: 6px; }
  /* .casefolio-showcase-prefixed here too: this overrides the desktop rule above, which is
     now itself boosted to (0,2,0) — a bare .casefolio-filter here would lose to that rule,
     not just to the theme, since a media query earns no specificity of its own. */
  .casefolio-showcase .casefolio-filter { white-space: nowrap; border-radius: 999px; }
  .casefolio-skin-default .casefolio-filter { border: 1px solid var(--casefolio-line); }
  .casefolio-showcase .casefolio-reset { padding: 0 8px; align-self: center; }
}

/* One pane at a time on a phone: the map is a mode you enter, not a column. */
@media (max-width: 720px) {
  .casefolio-explorer__body { grid-template-columns: minmax(0, 1fr); }
  .casefolio-explorer__results { border-right: 0; }
  /* Search earns its place on a desktop rail; on a phone the map is the thing worth
     reaching for, so the bar is sort plus a primary Show map. */
  .casefolio-explorer__bar .casefolio-field--search { display: none; }
  .casefolio-explorer__sort { flex: 1 1 auto; margin-left: 0; }

  .casefolio-showcase .casefolio-explorer__maptoggle {
    display: inline-flex;
    flex: 0 0 auto;
    padding: 11px 18px;
  }

  /* Overrides the desktop default-skin rule above to a filled, accent CTA — the map is the
     thing worth reaching for on a phone (see the file header comment). Skin-scoped for the
     same reason as every other native-button rule in this file. */
  .casefolio-skin-default .casefolio-explorer__maptoggle {
    background: var(--casefolio-accent);
    border-color: var(--casefolio-accent);
    color: #fff;
    box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--casefolio-accent) 70%, transparent);
  }

  .casefolio-explorer__map {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    height: auto;
  }
  .casefolio-explorer--map-open .casefolio-explorer__map { display: block; }
  .casefolio-explorer--map-open .casefolio-explorer__mapclose { display: inline-flex; }
  .casefolio-explorer--map-open { position: relative; }
}

@media (prefers-reduced-motion: reduce) {
  .casefolio-explorer * { transition-duration: 1ms !important; }
}


/* ================================================================ job page */

.casefolio-job {
  max-width: 1120px;
  margin: 0 auto;
  /* The theme's own content wrapper isn't reliable for vertical breathing room — the same
     "don't lean on the host theme" lesson the showcase grid's specificity fixes came from.
     Without this, the breadcrumbs sit flush against the site header and the nearby-work
     link at the bottom sits flush against the footer. */
  padding: 48px 0 72px;
}

.casefolio-job__crumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 22px;
  padding: 0;
  font-size: 13px;
  color: var(--casefolio-muted);
}

.casefolio-job__crumbs li + li::before {
  content: "/";
  margin-right: 6px;
  color: var(--casefolio-line);
}

.casefolio-job__crumbs a {
  color: inherit;
  text-decoration: none;
}

.casefolio-job__crumbs a:hover {
  color: var(--casefolio-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.casefolio-job__crumbs [aria-current="page"] { color: var(--casefolio-ink); }

.casefolio-job__hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 34px;
  align-items: center;
}

/* Without a featured image, the intro block is the grid's only child — left in a
   two-column grid it would sit squeezed into the first ~53% of the width with an empty
   column beside it. A case folio with no photo yet still needs to read as a normal,
   complete page rather than a broken layout. */
.casefolio-job__hero--no-image {
  grid-template-columns: 1fr;
}

.casefolio-job__hero--no-image .casefolio-job__summary {
  max-width: 68ch;
}

.casefolio-job__lead {
  margin: 0;
  border-radius: var(--casefolio-radius);
  overflow: hidden;
  background: var(--casefolio-sunken);
  aspect-ratio: 4 / 3;
}

.casefolio-job__lead img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.casefolio-job__title {
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 20px;
  text-wrap: balance;
}

/* Facts read as a specification, which is what makes the page feel like a record of work
   rather than a blog post. */
.casefolio-job__facts {
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--casefolio-line);
  border: 1px solid var(--casefolio-line);
  border-radius: var(--casefolio-radius);
  overflow: hidden;
}

.casefolio-job__facts > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 11px 14px;
  background: var(--casefolio-surface);
}

.casefolio-job__facts dt {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--casefolio-muted);
  margin: 0;
}

.casefolio-job__facts dd {
  margin: 0;
  font-size: 15px;
  text-align: right;
}

.casefolio-job__summary {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--casefolio-muted);
  margin: 0;
  max-width: 60ch;
}

/* Ruled rows, not cards — reviews are a record, matching the same "ruled sections, not
   filled" convention the rest of this page follows (facts, tags, body). Directly under the
   hero now, not after a full gallery dump — a lighter rule than the other major sections
   below so it reads as "right under the hero" rather than as its own chaptered stop on the
   page. */
.casefolio-job__reviews {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--casefolio-line);
  max-width: 68ch;
}

.casefolio-job__body {
  margin-top: 46px;
  padding-top: 34px;
  border-top: 1px solid var(--casefolio-line);
  font-size: 17px;
  line-height: 1.7;
  max-width: 68ch;
}

.casefolio-job__body > * + * { margin-top: 1.1em; }

.casefolio-job__body h2 {
  font-size: clamp(21px, 2.2vw, 27px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-top: 1.9em;
  margin-bottom: 0.5em;
}

.casefolio-job__body h3 {
  font-size: 18px;
  margin-top: 1.6em;
  margin-bottom: 0.4em;
}

.casefolio-job__body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--casefolio-radius);
}

/* A photo breaking up the prose, not a grid tile — full body-width at a wider aspect ratio
   than the gallery's uniform 4:3, so it reads as part of the story rather than a stray card.
   Browsers default `figure` to `margin: 1em 40px`; reset it so spacing comes from the same
   `> * + *` rhythm as the rest of the body. */
.casefolio-job__inline-figure {
  margin: 0;
  border-radius: var(--casefolio-radius);
  overflow: hidden;
  background: var(--casefolio-sunken);
  aspect-ratio: 16 / 9;
}

.casefolio-job__inline-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

.casefolio-job__gallery {
  margin-top: 46px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.casefolio-job__gallery figure {
  margin: 0;
  border-radius: var(--casefolio-radius);
  overflow: hidden;
  background: var(--casefolio-sunken);
  aspect-ratio: 4 / 3;
}

.casefolio-job__gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.casefolio-job__reviews-heading {
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 22px;
}

.casefolio-review + .casefolio-review {
  margin-top: 26px;
  padding-top: 26px;
  border-top: 1px solid var(--casefolio-line);
}

.casefolio-review__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.casefolio-review__author {
  font-weight: 600;
}

.casefolio-review__ticks { display: inline-flex; gap: 1px; }

.casefolio-review__tick {
  font-size: 14px;
  color: var(--casefolio-line);
}

.casefolio-review__tick--filled { color: var(--casefolio-accent); }

.casefolio-review__body {
  font-size: 16px;
  line-height: 1.65;
  color: var(--casefolio-muted);
  margin: 0;
  white-space: pre-wrap;
}

.casefolio-review__response {
  margin-top: 12px;
  padding-left: 14px;
  border-left: 2px solid var(--casefolio-line);
}

.casefolio-review__response-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--casefolio-muted);
}

.casefolio-review__response p {
  margin: 4px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--casefolio-muted);
}

.casefolio-job__tags {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--casefolio-line);
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.casefolio-job__tag {
  font-size: 12px;
  color: var(--casefolio-muted);
  background: var(--casefolio-sunken);
  border-radius: 999px;
  padding: 5px 11px;
}

.casefolio-job__nearby {
  margin-top: 30px;
  padding: 16px 18px;
  background: var(--casefolio-sunken);
  border-radius: var(--casefolio-radius);
  font-size: 15px;
}

.casefolio-job__nearby p { margin: 0; }

.casefolio-job__nearby a {
  color: var(--casefolio-accent);
  font-weight: 600;
  text-underline-offset: 3px;
}

@media (max-width: 860px) {
  .casefolio-job { padding: 32px 0 48px; }
  .casefolio-job__hero {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .casefolio-job__lead { aspect-ratio: 16 / 10; }
  .casefolio-job__reviews { margin-top: 22px; padding-top: 18px; }
  .casefolio-job__body { margin-top: 34px; padding-top: 26px; font-size: 16px; }
  .casefolio-job__gallery { grid-template-columns: 1fr 1fr; gap: 10px; }
}

@media (max-width: 520px) {
  .casefolio-job__gallery { grid-template-columns: 1fr; }
  .casefolio-job__facts > div { flex-direction: column; gap: 3px; }
  .casefolio-job__facts dd { text-align: left; }
}

/* ---------------------------------------------------------------- map hint */

.casefolio-map-hint {
  position: absolute;
  inset: 0;
  z-index: 450;
  display: grid;
  place-items: center;
  padding: 20px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: rgba(17, 22, 28, 0.42);
  backdrop-filter: blur(1px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, visibility 180ms ease;
}

.casefolio-map--hinting .casefolio-map-hint {
  opacity: 1;
  visibility: visible;
}

@media (hover: none) {
  /* Touch pans and pinches; there is no wheel to explain. */
  .casefolio-map-hint { display: none; }
}