/* ─── Pardits — photo treatment system ───────────────────────────────────────
   Audience-relevant photography presented with SVG image masks (organic shapes),
   brand-wine gradient overlays, a soft feTurbulence grain texture, and decorative
   gradient blobs. Pure CSS data-URIs, so it works on every static page with no
   inline SVG defs. Honors the site's OKLCH tokens and dark mode. */

:root{
  /* feTurbulence film grain (desaturated), tiled — gives photos a tactile feel. */
  --pf-grain: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
}

/* Organic SVG mask shapes (fill=white → kept). aspect-ratio matches each viewBox
   so mask-size:100% 100% never distorts the shape. */
.pf--arch{
  --pf-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120' preserveAspectRatio='none'><path d='M0 120 L0 46 C0 20 22 0 50 0 C78 0 100 20 100 46 L100 120 Z' fill='white'/></svg>");
  aspect-ratio: 100 / 120;
}
.pf--blob{
  --pf-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' preserveAspectRatio='none'><path d='M100 6 C146 4 184 34 192 78 C200 120 184 158 150 180 C118 200 74 202 44 180 C14 158 -4 120 6 80 C14 44 40 20 72 11 C81 8 90 7 100 6 Z' fill='white'/></svg>");
  aspect-ratio: 1 / 1;
}
.pf--squircle{
  --pf-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' preserveAspectRatio='none'><path d='M0 100 C0 22 22 0 100 0 C178 0 200 22 200 100 C200 178 178 200 100 200 C22 200 0 178 0 100 Z' fill='white'/></svg>");
  aspect-ratio: 1 / 1;
}
.pf--leaf{
  --pf-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' preserveAspectRatio='none'><path d='M8 96 C8 47 47 8 96 8 L192 8 L192 104 C192 153 153 192 104 192 L8 192 Z' fill='white'/></svg>");
  aspect-ratio: 1 / 1;
}

/* Wrapper holds the unclipped decorative gradient blob behind the masked photo. */
.pf-wrap{position:relative; margin:0; display:block;}
.pf-wrap::before{
  content:""; position:absolute; z-index:0; inset:-10% -12% -14% -8%;
  background:
    radial-gradient(60% 55% at 72% 22%, color-mix(in oklab, var(--gold) 60%, transparent), transparent 70%),
    radial-gradient(70% 70% at 28% 82%, color-mix(in oklab, var(--accent) 70%, transparent), transparent 72%);
  filter: blur(34px); opacity:.5; border-radius:50%;
  pointer-events:none;
}
html[data-theme="dark"] .pf-wrap::before{opacity:.42;}

/* The masked photo frame. drop-shadow follows the mask alpha, so the shadow takes
   the organic shape too. */
.pf{
  position:relative; z-index:1; width:100%; overflow:hidden;
  -webkit-mask-image: var(--pf-mask); mask-image: var(--pf-mask);
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  filter: drop-shadow(0 28px 42px color-mix(in oklab, var(--accent) 28%, transparent));
}
.pf__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  z-index:0; transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.pf-wrap:hover .pf__img{transform: scale(1.04);}

/* Brand-wine gradient tint — cohesion + lets captions sit on the photo. */
.pf::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(155deg, transparent 38%, color-mix(in oklab, var(--accent) 16%, transparent) 78%, color-mix(in oklab, var(--bg-deep) 55%, transparent) 100%);
  mix-blend-mode: multiply;
}
/* Grain texture overlay. */
.pf::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background-image: var(--pf-grain); background-size:180px 180px;
  mix-blend-mode: overlay; opacity:.42;
}

/* Optional caption pinned to the bottom of the frame. */
.pf__cap{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  padding:22px 22px 18px; color:#fff;
  display:flex; flex-direction:column; gap:4px;
  text-shadow:0 1px 14px color-mix(in oklab, var(--bg-deep) 80%, transparent);
}
.pf__cap-kicker{
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; opacity:.92;
}
.pf__cap-title{font-family:'Instrument Serif',serif; font-size:22px; line-height:1.1; letter-spacing:-.01em;}

/* ─── Page layout: photo band (persona pages, after the hero) ──────────────── */
.photo-band{padding:0 0 8px;}
.photo-band__inner{
  display:grid; grid-template-columns:1.05fr 1fr; gap:56px; align-items:center;
}
.photo-band__inner.is-reversed{grid-template-columns:1fr 1.05fr;}
.photo-band__inner.is-reversed .photo-band__media{order:2;}
.photo-band__copy .section-eyebrow{margin-bottom:14px;}
.photo-band__media{max-width:520px; width:100%; margin-inline:auto;}
.photo-band--narrow .photo-band__media{max-width:440px;}

/* ─── Home: audience gallery ──────────────────────────────────────────────── */
.metiers-gallery{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:26px; margin-top:44px;
}
.metiers-gallery .pf-wrap{max-width:none;}
.metiers-gallery .pf__cap-title{font-size:19px;}
.metiers-gallery .gal-tall{margin-top:-28px;}
.metiers-gallery .gal-low{margin-top:28px;}

/* ─── Hero accent (a single masked photo beside hero copy) ─────────────────── */
.hero-photo{max-width:460px; width:100%; margin-inline:auto;}

@media (max-width: 960px){
  .photo-band__inner, .photo-band__inner.is-reversed{grid-template-columns:1fr; gap:32px;}
  .photo-band__inner.is-reversed .photo-band__media{order:0;}
  .photo-band__media, .photo-band--narrow .photo-band__media{max-width:440px;}
  .metiers-gallery{grid-template-columns:repeat(2, 1fr); gap:20px;}
  .metiers-gallery .gal-tall, .metiers-gallery .gal-low{margin-top:0;}
}
@media (max-width: 520px){
  .metiers-gallery{grid-template-columns:1fr 1fr; gap:14px;}
  .pf__cap{padding:14px 14px 12px;}
  .pf__cap-title{font-size:18px;}
  .metiers-gallery .pf__cap-kicker{font-size:9.5px;}
}

/* ─── Texturized backgrounds (imageLibrary) — gradients × textures × SVG masks ─
   Library photos are desaturated to luminance textures, then re-coloured by brand
   gradients and faded with a soft SVG mask so each band melts into the next. */
:root{
  --tex-paper:     url("/assets/img/textures/paper.webp?v=1.0-20260623");
  --tex-weave:     url("/assets/img/textures/weave.webp?v=1.0-20260623");
  --tex-waves:     url("/assets/img/textures/waves.webp?v=1.0-20260623");
  --tex-wood:      url("/assets/img/textures/wood.webp?v=1.0-20260623");
  --tex-gold:      url("/assets/img/textures/gold.webp?v=1.0-20260623");
  --tex-honeycomb: url("/assets/img/textures/honeycomb.webp?v=1.0-20260623");
  /* Soft top/bottom fade — texture blends seamlessly into adjacent sections. */
  --band-fade: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'><linearGradient id='f' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='black'/><stop offset='0.15' stop-color='white'/><stop offset='0.85' stop-color='white'/><stop offset='1' stop-color='black'/></linearGradient><rect width='1' height='1' fill='url(%23f)'/></svg>");
}

/* Cards keep their OWN native surface so body text always has full contrast.
   A full-bleed texture behind card copy hurt readability both ways — it darkened
   light cards (dark text vanished) and lightened dark cards (light text vanished)
   — so it is no longer applied to cards of any kind.

   Only the métier cards carry a texture, because they always sit in a light
   section on a white surface with dark text. The texture lives in ::before at a
   very low opacity, behind the content, and each card gets a different image. */
.metier-card{ position: relative; isolation: isolate; }
.metier-card > *{ position: relative; z-index: 1; }
.metier-card::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  border-radius: inherit;
  background-image: var(--card-tex, var(--tex-paper));
  background-size: 300px 300px; background-repeat: repeat;
  opacity: .08;
}
.metier-grid > .metier-card:nth-child(6n+1){ --card-tex: var(--tex-weave); }
.metier-grid > .metier-card:nth-child(6n+2){ --card-tex: var(--tex-waves); }
.metier-grid > .metier-card:nth-child(6n+3){ --card-tex: var(--tex-honeycomb); }
.metier-grid > .metier-card:nth-child(6n+4){ --card-tex: var(--tex-wood); }
.metier-grid > .metier-card:nth-child(6n+5){ --card-tex: var(--tex-gold); }
.metier-grid > .metier-card:nth-child(6n){   --card-tex: var(--tex-paper); }
html[data-theme="dark"] .metier-card::before{ opacity: .05; }

/* Section texture bands — opt-in (.tex-band--*) plus the photo bands and the home
   audience gallery. The textured layer lives in ::before, content is lifted above. */
.tex-band, .photo-band, .metiers-gallery-band{ position:relative; isolation:isolate; }
.tex-band > *, .photo-band > *, .metiers-gallery-band > *{ position:relative; z-index:1; }
.tex-band::before, .photo-band::before, .metiers-gallery-band::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image: var(--band-grad, none), var(--band-tex, none);
  background-repeat:no-repeat; background-size:cover; background-position:center;
  background-blend-mode: multiply, normal;
  -webkit-mask-image: var(--band-fade); mask-image: var(--band-fade);
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  opacity: var(--band-op, .5);
}
.tex-band--paper{ --band-tex:var(--tex-paper); --band-grad:linear-gradient(120deg, color-mix(in oklab,var(--accent) 8%, transparent), transparent 62%); --band-op:.55; }
.tex-band--waves{ --band-tex:var(--tex-waves); --band-grad:linear-gradient(120deg, color-mix(in oklab,var(--accent) 14%, white 86%), color-mix(in oklab,var(--gold) 9%, white 91%)); --band-op:.42; }
.tex-band--honeycomb{ --band-tex:var(--tex-honeycomb); --band-grad:linear-gradient(160deg, color-mix(in oklab,var(--accent) 10%, transparent), transparent 60%); --band-op:.42; }
.tex-band--wood{ --band-tex:var(--tex-wood); --band-grad:linear-gradient(120deg, color-mix(in oklab,var(--accent) 18%, transparent), color-mix(in oklab,var(--gold) 14%, transparent)); --band-op:.30; }
.tex-band--gold{ --band-tex:var(--tex-gold); --band-grad:linear-gradient(120deg, color-mix(in oklab,var(--accent) 50%, transparent), color-mix(in oklab,var(--gold) 32%, transparent)); --band-op:.30; }

/* Defaults for the bands I own. */
.photo-band{ --band-tex:var(--tex-paper); --band-grad:linear-gradient(120deg, color-mix(in oklab,var(--accent) 6%, transparent), transparent 64%); --band-op:.5; }
.metiers-gallery-band{ --band-tex:var(--tex-honeycomb); --band-grad:linear-gradient(160deg, color-mix(in oklab,var(--accent) 9%, transparent), transparent 62%); --band-op:.4; }
html[data-theme="dark"] .tex-band::before,
html[data-theme="dark"] .photo-band::before,
html[data-theme="dark"] .metiers-gallery-band::before{ background-blend-mode: screen, soft-light; opacity:.3; }