/* Extras loaded after site.css: previous/next navigation on concept and case-study
   pages, and a layout fix for the home-page "Behind the scenes" mosaic. */

/* --- Previous / next navigation ------------------------------------------ */
.pager-section { padding-block: clamp(2.4rem, 5vw, 4rem); border-top: 1px solid var(--line-soft); }
.pager {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(0.8rem, 2vw, 1.6rem);
  align-items: stretch;
}
.pager-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
  padding: clamp(0.8rem, 1.6vw, 1.1rem);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--page-ink);
  text-decoration: none;
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.pager-link:hover, .pager-link:focus-visible { transform: translateY(-2px); border-color: currentColor; background: var(--bone); }
.pager-link--next { flex-direction: row-reverse; text-align: right; }
.pager-link--none { visibility: hidden; }
.pager-thumb {
  flex: none;
  width: 64px;
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  overflow: hidden;
  background: var(--espresso);
}
.pager-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pager-text { display: grid; gap: 0.3rem; min-width: 0; }
.pager-dir {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.pager-link--next .pager-dir { justify-content: flex-end; }
.pager-dir svg { width: 14px; height: 14px; }
.pager-dir .flip { transform: scaleX(-1); }
.pager-title {
  font-family: var(--display);
  font-size: var(--step-1);
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.pager-all { align-self: center; justify-self: center; }

@media (max-width: 700px) {
  .pager { grid-template-columns: 1fr 1fr; }
  .pager-all { grid-column: 1 / -1; grid-row: 2; }
  .pager-link, .pager-link--next { flex-direction: column; align-items: flex-start; text-align: left; }
  .pager-link--next .pager-dir { justify-content: flex-start; }
  .pager-thumb { width: 52px; }
}

/* --- Home "Behind the scenes" mosaic: no lone image between 861px and 1080px.
   Below 1080px the grid goes to 3 columns, which left the closing image alone
   in the first column of its own row. Let it span the full row instead. ---- */
@media (min-width: 861px) and (max-width: 1080px) {
  .mosaic .m-note ~ figure { grid-column: 1 / -1; aspect-ratio: 21 / 8; min-height: 0; }
  .mosaic .m-note ~ figure img { position: absolute; inset: 0; }
}

/* --- Personal-project concept pages: hide the closing band when it has nothing
   in it but a button (no heading, facts or quote). The previous/next row and the
   site footer already carry the call to action. ------------------------------ */
.pp-band:not(:has(h2:not(:empty))):not(:has(.pp-facts)):not(:has(blockquote)) { display: none; }

/* --- Archived media slots: when some phones or graphics are left off a page,
   centre what remains instead of leaving an empty column. (Added by media.js.) */
@media (min-width: 861px) {
  .grid--3.has-gaps { display: flex; flex-wrap: wrap; justify-content: center; }
  .grid--3.has-gaps > * { flex: 0 0 calc((100% - 2 * clamp(0.9rem, 1.8vw, 1.4rem)) / 3); min-width: 0; }
}
@media (min-width: 901px) {
  .phones--four.has-gaps { display: flex; flex-wrap: wrap; justify-content: center; }
  .phones--four.has-gaps > .phone-item { flex: 0 0 calc((100% - 3 * clamp(1.4rem, 3vw, 2.6rem)) / 4); min-width: 0; }
}

/* --- Portfolio / freelance wording -------------------------------------------
   Elements marked data-only="portfolio" or data-only="freelance" show in that
   site mode only (portfolio is the default). Buttons that need the CV hide until
   a CV has been uploaded; "Email me" stands in until then. */
html:not([data-mode="freelance"]) [data-only="freelance"] { display: none !important; }
html[data-mode="freelance"] [data-only="portfolio"] { display: none !important; }
html:not(.has-cv) [data-cv] { display: none !important; }
html.has-cv [data-nocv] { display: none !important; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; }
.open-note { margin-top: 0.9rem; font-weight: 500; }
.open-note::before { content: ""; display: inline-block; width: 0.55rem; height: 0.55rem; margin-right: 0.55rem; border-radius: 50%; background: currentColor; opacity: 0.85; }
.exp-text { max-width: 64ch; font-size: clamp(1.02rem, 1.4vw, 1.14rem); line-height: 1.75; }
.quals { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.7rem; max-width: 64ch; }
.quals li { padding: 0.8rem 1rem; border: 1px solid var(--line-soft, rgba(0,0,0,0.12)); border-radius: 12px; }

.footer-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; align-items: center; padding-top: 1.4rem; font-size: 0.92rem; }
.footer-links a { text-decoration: underline; text-underline-offset: 3px; }
.footer-links [data-socials] { display: contents; }

/* Brand account links under a case study's intro (portfolio mode) */
.brand-links { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.1rem; }
.brand-links[hidden] { display: none; }