/*
  Layout engine that recreates how Cargo lays out the site.
  The design itself (fonts, sizes, colours, spacing) lives in dist/assets/site.css,
  which is generated from Cargo's own stylesheet in content/site.json.
*/

:root {
  --font-fallback: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --viewport-height: 100vh;
  --ease-smooth: cubic-bezier(0.45, 0.05, 0.33, 1);
}
@supports (height: 100dvh) {
  :root { --viewport-height: 100dvh; }
}

/* Cargo scales the whole site from the root font size:
   desktop follows the window height, phones follow the width. */
html {
  font-size: min(1.44vh, 1.4323vw);
  -webkit-text-size-adjust: 100%;
}
html.mobile {
  font-size: calc(5.67px + 1.714vw);
}

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

body {
  margin: 0;
  background: #fff;
  color: rgba(0, 0, 0, 0.85);
  font-family: var(--font-fallback);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.has-overlay { overflow: hidden; }

img, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

/* ---------- pages ---------- */

.page {
  display: flex;
  width: 100%;
  position: relative;
}
.page-layout {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.page-content {
  width: 100%;
  padding: 1rem;
  position: relative;
}
/* Cargo shrinks page padding to 75% on phones (--mobile-padding-offset) */
html.mobile .page-content { padding: 0.75rem; padding-top: 0.675rem; }
bodycopy { width: 100%; }

.page.pinned {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 20;
  pointer-events: none;
}
.page.pinned .page-content { pointer-events: auto; width: auto; }
.page.pinned .page-layout { align-items: stretch; }
.page.pin-top { top: 0; }
.page.pin-bottom { bottom: 0; }

html:not(.mobile) .only-mobile,
html.mobile .only-desktop { display: none !important; }

html.mobile main { padding-top: var(--pin-top-h, 4rem); }

/* A project page + its "Revenir aux projets" footer fill at least one screen
   together (Cargo counts the footer inside the page's minimum height). */
.set-stack {
  display: flex;
  flex-direction: column;
  min-height: var(--viewport-height);
}
.set-stack > .page:first-child {
  flex: 1 0 auto;
  min-height: 0 !important;
}

/* overlays (À propos, CV, mobile menu) */
.page.overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow-y: auto;
  overscroll-behavior: contain;
  align-items: flex-start;
}
.page.overlay[hidden] { display: none; }
.page.overlay.fade { animation: cr-fade-in 0.8s var(--ease-smooth); }
.page.overlay.fade.closing { animation: cr-fade-out 0.8s var(--ease-smooth) forwards; }
.page.overlay .page-layout { pointer-events: none; }
.page.overlay .page-content { pointer-events: auto; }

@keyframes cr-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes cr-fade-out { from { opacity: 1; } to { opacity: 0; } }

/* ---------- text bits ---------- */

.text-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  margin-right: 0.15em;
}
.text-icon.glyph {
  width: auto;
  height: auto;
  vertical-align: baseline;
  margin-right: 0.1em;
  font-family: "Apple Symbols", "Segoe UI Symbol", "DejaVu Sans", sans-serif;
  font-variant-emoji: text;
  line-height: 1;
}

/* ---------- columns (12-column grid) ---------- */

column-set {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--g, 1rem);
  row-gap: var(--g, 1rem);
  width: 100%;
}
column-unit {
  display: block;
  grid-column: span var(--span, 12);
  min-width: 0;
}
html.mobile column-set.m-stack { grid-template-columns: minmax(0, 1fr); }
html.mobile column-set.m-stack column-unit { grid-column: auto; }

/* ---------- media ---------- */

media-item {
  display: block;
  position: relative;
  min-width: 0;
}
media-item .media {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--media-corner-radius, 0);
}
media-item .media img,
media-item .media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
media-item.zoomable .media { cursor: zoom-in; }
.media-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* Fade-up as images scroll into view (Cargo "scroll animation") */
.reveal-on media-item:not(.in):not(.ss-slide media-item),
.reveal-on gallery-slideshow:not(.in) { opacity: 0; }
.reveal-on media-item.in,
.reveal-on gallery-slideshow.in { animation: cr-fade-up 1000ms var(--ease-smooth) both; }
@keyframes cr-fade-up {
  0% { opacity: 0; transform: translateY(40px); }
  25%, 100% { opacity: 1; transform: none; }
}

/* ---------- gallery: columnized (masonry) ---------- */

gallery-columnized {
  display: flex;
  flex-direction: column;
  gap: var(--g);
  width: 100%;
}
.gc-row {
  display: grid;
  column-gap: var(--g);
  align-items: start;
}
.gc-col {
  display: flex;
  flex-direction: column;
  gap: var(--g);
  min-width: 0;
}
/* Phones: one column, back in the original order */
html.mobile gallery-columnized { gap: var(--mg); }
html.mobile .gc-row,
html.mobile .gc-col { display: contents; }

/* ---------- gallery: grid ---------- */

gallery-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: var(--g);
  align-items: start;
  width: 100%;
}
gallery-grid media-item { grid-column: span var(--span, 1); }
html.mobile gallery-grid {
  grid-template-columns: repeat(var(--mcols), minmax(0, 1fr));
  gap: var(--mg);
}
html.mobile gallery-grid media-item { grid-column: auto; }

/* ---------- gallery: justify (equal-height rows) ---------- */

gallery-justify {
  display: flex;
  flex-direction: column;
  gap: var(--g);
  width: 100%;
}
.j-row {
  display: flex;
  gap: var(--g);
  align-items: flex-start;
}
html.mobile gallery-justify,
html.mobile .j-row { gap: var(--mg); }

/* ---------- gallery: slideshow ---------- */

gallery-slideshow {
  display: block;
  position: relative;
  width: 100%;
  --speed: 0.5s;
}
.ss-stage {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ar, 3 / 2);
}
.ss-stage.fit { max-height: calc(var(--viewport-height) * 0.8); }
.ss-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--speed) ease, visibility 0s linear var(--speed);
}
.ss-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--speed) ease, visibility 0s;
}
.ss-slide media-item,
.ss-slide .media { height: 100%; }
.ss-slide .media { aspect-ratio: auto !important; }
.ss-slide .media img,
.ss-slide .media video { object-fit: contain; }

/* Desktop: click the left/right half of the image */
.ss-btn {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  border: 0;
  padding: 0;
  margin: 0;
  background: none;
  z-index: 2;
}
.ss-prev {
  left: 0;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M20 6 10 16l10 10' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M20 6 10 16l10 10' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 16 16, w-resize;
}
.ss-next {
  right: 0;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M12 6l10 10-10 10' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 6l10 10-10 10' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 16 16, e-resize;
}
gallery-slideshow.single .ss-btn { display: none; }

/* Phones: round arrow buttons */
html.mobile .ss-btn,
.qv-btn {
  top: 50%;
  bottom: auto;
  width: 30px;
  height: 30px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: rgba(87, 87, 87, 0.35) center / 14px 14px no-repeat;
  cursor: pointer;
}
html.mobile .ss-prev { left: 10px; }
html.mobile .ss-next { right: 10px; }
html.mobile .ss-prev,
.qv-prev {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10.5 2.5 5 8l5.5 5.5' fill='none' stroke='rgba(255,255,255,.9)' stroke-width='1.5'/%3E%3C/svg%3E");
}
html.mobile .ss-next,
.qv-next {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 2.5 11 8l-5.5 5.5' fill='none' stroke='rgba(255,255,255,.9)' stroke-width='1.5'/%3E%3C/svg%3E");
}
.ss-btn:active, .qv-btn:active { opacity: 0.7; }

/* ---------- quick view (image zoom) ---------- */

.qv {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  animation: cr-fade-in 0.2s ease;
  cursor: zoom-out;
}
html.mobile .qv { padding: 10px; }
.qv img,
.qv video {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.qv-btn {
  position: absolute;
  border: 0;
  padding: 0;
  z-index: 2;
}
.qv-prev { left: 20px; }
.qv-next { right: 20px; }
html.mobile .qv-prev { left: 25px; }
html.mobile .qv-next { right: 25px; }
.qv-close {
  top: 20px;
  transform: none;
  right: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3l10 10M13 3 3 13' fill='none' stroke='rgba(255,255,255,.9)' stroke-width='1.5'/%3E%3C/svg%3E");
}
.qv.single .qv-prev,
.qv.single .qv-next { display: none; }

@media (prefers-reduced-motion: reduce) {
  .page.overlay.fade, .qv { animation: none; }
  .ss-slide { transition: none; }
}