/* ==========================================================================
   DP section styles that lived in Astro <style> blocks (scoped there): WorksMosaic (.wm) and GalleryWall (.gw).
   Ported from repo/site/src/sections/{WorksMosaic,GalleryWall}.astro at 5c68120; :global(html.js-loaded) → html.js-loaded.
   ========================================================================== */

/* ── WorksMosaic ── */
  /* the rings run past the container to the screen edges; clip them on x only (clip: no scroll box) */
  .wm-bleed { overflow-x: clip; }
  .wm { container-type: inline-size; }
  /* the wrapper only triggers the reveal; the tiles animate */
  html.js-loaded .wm.reveal { opacity: 1; transform: none; }

  /* 10 modules across the container, the scene's 6 in the middle; the band is 6 modules tall */
  .wm__lattice { --u: calc(100cqw / 10); --ox: 5; --oy: -1; position: relative; height: calc(6 * var(--u)); }
  @container (max-width: 700px) {
    .wm__lattice { --u: calc(100cqw / 6); --ox: 3; }
    .wm__tile--ring { display: none; }
  }

  .wm__tile {
    --gap: 6px;
    position: absolute;
    left: calc((var(--cx) - var(--s) + var(--ox)) * var(--u));
    top: calc((var(--cy) - var(--s) + var(--oy)) * var(--u));
    width: calc(var(--s) * 2 * var(--u));
    height: calc(var(--s) * 2 * var(--u));
    clip-path: polygon(50% var(--gap), calc(100% - var(--gap)) 50%, 50% calc(100% - var(--gap)), var(--gap) 50%);
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    opacity: var(--o, 1);
  }

  /* entrance: grow from 0 to full size */
  html.js-loaded .wm__tile { transform: scale(0); }
  html.js-loaded .wm.is-visible .wm__tile { animation: wm-grow 1.2s var(--ease-out) var(--d, 0s) both; }
  @keyframes wm-grow { from { transform: scale(0); } to { transform: scale(1); } }

  /* content kept to the square inscribed in the diamond */
  .wm__in { position: absolute; inset: 20%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; text-align: center; }

  .wm__tile--photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease-soft, ease); }
  .wm__tile--photo:hover img, .wm__tile--photo:focus-visible img { transform: scale(1.06); }
  .wm__info {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem;
    padding: 28%; text-align: center; color: var(--color-white);
    background: rgb(11 11 11 / .45); opacity: 0; transition: opacity .8s var(--ease-soft, ease);
  }
  .wm__tile--photo:hover .wm__info, .wm__tile--photo:focus-visible .wm__info { opacity: 1; }
  .wm__name { font-family: var(--font-display); font-weight: var(--font-weight-light); font-size: var(--text-title); line-height: 1.2; }
  .wm__name em { font-weight: var(--font-weight-normal); }
  .wm__meta { font-size: var(--text-small); color: var(--color-on-deck); }
  .wm__tile--photo:focus-visible { outline: none; }
  .wm__tile--photo:focus-visible .wm__info { box-shadow: inset 0 0 0 2px var(--color-gold); }

  .wm__tile--white { background: var(--color-white); }
  .wm__tile--soft { background: color-mix(in srgb, var(--color-gold) 28%, var(--color-gesso)); }
  .wm__tile--ink { background: var(--color-ink); color: var(--color-on-deck); }
  .wm__tile--gold { background: var(--color-gold); color: var(--color-ink); }
  .wm__tile--gold .wm__in { inset: 18%; }

  .wm__title { margin: 0; font-family: var(--font-display); font-weight: var(--font-weight-thin); font-size: clamp(1.05rem, 1.9cqw, 1.7rem); line-height: 1.15; letter-spacing: -.015em; }
  .wm__text { margin: 0; font-size: var(--text-small); line-height: 1.45; color: var(--color-muted); }
  a.wm__tile--ink { transition: background .6s var(--ease-soft, ease); }
  a.wm__tile--ink:hover { background: var(--color-gold-deep); }
  .wm__ink-label { font-size: var(--text-small); font-weight: var(--font-weight-normal); }

  @container (max-width: 700px) {
    .wm__info { display: none; }
    .wm__title { font-size: 1rem; }
    .wm__text { font-size: 12px; }
    .wm__tile { --gap: 4px; }
  }
  @media (prefers-reduced-motion: reduce) {
    html.js-loaded .wm__tile { transform: none; }
    html.js-loaded .wm.is-visible .wm__tile { animation: none; }
    .wm__tile--photo img { transition: none; }
  }

/* ── GalleryWall ── */
  .gw-bleed { overflow-x: clip; }
  .gw { container-type: inline-size; }
  html.js-loaded .gw.reveal { opacity: 1; transform: none; }

  /* 12 modules across the container (5 under 700px); 5 rows plus the fade margin */
  .gw__lattice { --u: calc(100cqw / 12); --oy: -1.25; position: relative; height: calc(6.5 * var(--u)); }
  @container (max-width: 700px) { .gw__lattice { --u: calc(100cqw / 5); } }
  .gw__track { position: absolute; inset: 0; will-change: transform; }
  .gw__copy { position: absolute; inset: 0; }

  .gw__tile {
    --gap: 6px;
    position: absolute;
    left: calc((var(--cx) - var(--s) + var(--k) * var(--p)) * var(--u));
    top: calc((var(--cy) - var(--s) + var(--oy)) * var(--u));
    width: calc(var(--s) * 2 * var(--u));
    height: calc(var(--s) * 2 * var(--u));
    clip-path: polygon(50% var(--gap), calc(100% - var(--gap)) 50%, 50% calc(100% - var(--gap)), var(--gap) 50%);
    overflow: hidden;
    padding: 0; border: 0; background: none; color: inherit; font: inherit;
  }
  html.js-loaded .gw__tile { transform: scale(0); }
  html.js-loaded .gw.is-visible .gw__tile {
    animation:
      gw-grow 1.2s var(--ease-out) var(--d, 0s) both,
      gw-breathe var(--b, 7s) ease-in-out calc(var(--d, 0s) + 1.2s) infinite;
  }
  @keyframes gw-grow { from { transform: scale(0); } to { transform: scale(1); } }
  @keyframes gw-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(.95); } }

  .gw__in { position: absolute; inset: 20%; display: flex; align-items: center; justify-content: center; text-align: center; }
  .gw__tile--photo { cursor: zoom-in; }
  .gw__tile--photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease-soft, ease); }
  .gw__tile--photo:hover img, .gw__tile--photo:focus-visible img { transform: scale(1.06); }
  .gw__tile--photo:focus-visible { outline: none; }
  .gw__tile--photo:focus-visible img { outline: 2px solid var(--color-gold); outline-offset: -8px; }

  .gw__tile--fade1 { --gap: 3px; opacity: .55; }
  .gw__tile--fade2 { --gap: 2px; opacity: .3; }
  .gw__tile--white { background: var(--color-white); }
  .gw__tile--soft { background: color-mix(in srgb, var(--color-gold) 28%, var(--color-gesso)); }
  .gw__tile--ink { background: var(--color-ink); }
  .gw__tile--line { background: var(--color-line); }
  .gw__tile--line::after { content: ""; position: absolute; inset: 0; background: var(--color-gesso); clip-path: polygon(50% calc(var(--gap) + 1.5px), calc(100% - var(--gap) - 1.5px) 50%, 50% calc(100% - var(--gap) - 1.5px), calc(var(--gap) + 1.5px) 50%); }
  .gw__tile--gold { background: var(--color-gold); color: var(--color-ink); }
  .gw__label { margin: 0; font-family: var(--font-display); font-weight: var(--font-weight-thin); font-size: clamp(1rem, 1.7cqw, 1.5rem); line-height: 1.15; letter-spacing: -.01em; }
  @container (max-width: 700px) { .gw__tile { --gap: 4px; } .gw__label { font-size: 1rem; } }

  @media (prefers-reduced-motion: reduce) {
    html.js-loaded .gw__tile { transform: none; }
    html.js-loaded .gw.is-visible .gw__tile { animation: none; }
    .gw__tile--photo img { transition: none; }
  }

/* ── WedgeHero (Σχετικά hero) ── */
  .wh {
    --h: max(620px, calc(100svh - 77px)); /* under the 76px header and its dotted line */
    --edge: calc(max(0px, (100% - var(--container-site) - 2 * var(--spacing-gutter)) / 2) + var(--spacing-gutter));
    --col: calc((min(100%, var(--container-site) + 2 * var(--spacing-gutter)) - 2 * var(--spacing-gutter)) / 12);
    --x0: calc(var(--edge) + var(--col));
    position: relative; height: var(--h); overflow: hidden;
  }
  html.js-loaded .wh.reveal { opacity: 1; transform: none; }

  .wh__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .wh__wedge { position: absolute; inset: 0; z-index: 1; background: var(--color-gesso); clip-path: polygon(0 0, var(--x0) 0, calc(var(--x0) + var(--h)) 100%, 0 100%); }
  .wh__ghost { position: absolute; left: calc(var(--edge) - .06em); bottom: -.12em; font-family: var(--font-display); font-weight: var(--font-weight-hair); font-size: min(40vw, 560px); line-height: .8; letter-spacing: -.06em; color: var(--color-white); user-select: none; }

  .wh__text { position: absolute; z-index: 2; left: var(--edge); bottom: clamp(2.5rem, 6vh, 4rem); width: min(34rem, calc(var(--h) - 6rem)); }
  .wh__title { margin: .75rem 0 1rem; }
  .wh__lead { color: var(--color-muted); max-width: 28rem; margin: 0 0 1.75rem; }

  /* the row: the first diamond centred on the 45° edge at 52% of the height; the others touch it at the corners */
  .wh__row { --u: min(8.5vw, 15vh, 130px); --y: .52; position: absolute; z-index: 3; left: calc(var(--x0) + var(--h) * var(--y) - var(--u)); top: calc(var(--h) * var(--y) - var(--u)); }
  .wh__dia {
    --gap: 6px; position: absolute; top: 0; left: calc(var(--n) * 2 * var(--u)); width: calc(2 * var(--u)); height: calc(2 * var(--u));
    clip-path: polygon(50% var(--gap), calc(100% - var(--gap)) 50%, 50% calc(100% - var(--gap)), var(--gap) 50%);
    overflow: hidden; text-decoration: none;
  }
  .wh__dia--blur { background: var(--color-gesso); }
  .wh__dia--blur img { width: 100%; height: 100%; object-fit: cover; filter: blur(10px) saturate(.7); opacity: .55; transform: scale(1.15); }
  .wh__dia--ink { background: var(--color-ink); color: var(--color-on-deck); }
  .wh__dia--gold { background: var(--color-gold); color: var(--color-ink); }
  a.wh__dia--ink, a.wh__dia--gold { transition: background var(--t-hover, .4s); }
  a.wh__dia--ink:hover { background: #1d1c1a; }
  a.wh__dia--gold:hover { background: var(--color-gold-deep); }
  .wh__in { position: absolute; inset: 21%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; text-align: center; }
  .wh__key { font-size: 12px; font-weight: var(--font-weight-normal); opacity: .75; }
  .wh__val { font-family: var(--font-display); font-weight: var(--font-weight-light); font-size: clamp(.95rem, .6rem + .5vw, 1.2rem); line-height: 1.2; white-space: nowrap; }

  /* entrance: the wedge opens, the diamonds follow */
  html.js-loaded .wh__bg { transform: scale(1.06); transition: transform 2.6s var(--ease-soft); }
  html.js-loaded .wh__wedge { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); transition: clip-path 1.2s var(--ease-out); }
  html.js-loaded .wh__text { opacity: 0; transform: translateY(20px); transition: opacity .9s var(--ease-out) .5s, transform 1.1s var(--ease-out) .5s; }
  html.js-loaded .wh__dia { opacity: 0; transform: scale(.9); transition: opacity .9s var(--ease-out), transform 1s var(--ease-out); transition-delay: calc(var(--n) * 120ms + .8s); }
  html.js-loaded .wh.is-visible .wh__bg { transform: none; }
  html.js-loaded .wh.is-visible .wh__wedge { clip-path: polygon(0 0, var(--x0) 0, calc(var(--x0) + var(--h)) 100%, 0 100%); }
  html.js-loaded .wh.is-visible .wh__text,
  html.js-loaded .wh.is-visible .wh__dia { opacity: 1; transform: none; }

  @media (max-width: 960px) {
    html.js-loaded .wh.is-visible .wh__wedge, .wh__wedge { clip-path: polygon(0 calc(100% - 100vw - 6rem), 100% calc(100% - 6rem), 100% 100%, 0 100%); }
    .wh__text { width: auto; right: var(--spacing-gutter); }
    .wh__row { --u: 15vw; left: auto; right: calc(var(--spacing-gutter) + 2 * var(--u)); top: 1.5rem; }
    .wh__dia--ink, .wh__dia--gold { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    html.js-loaded .wh__bg, html.js-loaded .wh__wedge, html.js-loaded .wh__text, html.js-loaded .wh__dia { transition-duration: .01ms; transition-delay: 0s; }
  }