/* ==========================================================================
   Material Palette — reusable component (concept-board layout).

   Markup: template-parts/material-palette.php
   Enqueue: registered as 'ailikee-material-palette' in functions.php; turn it
   on wherever the template part is included (see ailikee_assets()).

   Colours, radii, motion resolve to the design tokens in style.css — the only
   literals here are the pinked-edge SVG mask (a shape, not a colour) and the
   rgba() sample shadows, which have no token equivalent.

   Look: an interior designer's material board. Six real photographic swatches
   scattered in a deliberate overlapping cluster, each tied by a 1px hairline
   connector out to a small uppercase name + description. Soft goods (tweed,
   oxblood leather) get pinked/zigzag edges like a cut fabric sample; stone,
   plaster and walnut are straight-cut; brushed brass reads as a rounded metal
   tag. Frames zoom their image on hover (theme-wide .hero-tile treatment);
   reduced motion is handled globally in style.css.
   ========================================================================== */
:root {
  /* Pinked (pinking-shear) edge, as a stretchable mask. Shape only. */
  --pink-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20240%20240%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2C0%20L6%2C9%20L12%2C0%20L18%2C9%20L24%2C0%20L30%2C9%20L36%2C0%20L42%2C9%20L48%2C0%20L54%2C9%20L60%2C0%20L66%2C9%20L72%2C0%20L78%2C9%20L84%2C0%20L90%2C9%20L96%2C0%20L102%2C9%20L108%2C0%20L114%2C9%20L120%2C0%20L126%2C9%20L132%2C0%20L138%2C9%20L144%2C0%20L150%2C9%20L156%2C0%20L162%2C9%20L168%2C0%20L174%2C9%20L180%2C0%20L186%2C9%20L192%2C0%20L198%2C9%20L204%2C0%20L210%2C9%20L216%2C0%20L222%2C9%20L228%2C0%20L234%2C9%20L240%2C0%20L231%2C6%20L240%2C12%20L231%2C18%20L240%2C24%20L231%2C30%20L240%2C36%20L231%2C42%20L240%2C48%20L231%2C54%20L240%2C60%20L231%2C66%20L240%2C72%20L231%2C78%20L240%2C84%20L231%2C90%20L240%2C96%20L231%2C102%20L240%2C108%20L231%2C114%20L240%2C120%20L231%2C126%20L240%2C132%20L231%2C138%20L240%2C144%20L231%2C150%20L240%2C156%20L231%2C162%20L240%2C168%20L231%2C174%20L240%2C180%20L231%2C186%20L240%2C192%20L231%2C198%20L240%2C204%20L231%2C210%20L240%2C216%20L231%2C222%20L240%2C228%20L231%2C234%20L240%2C240%20L234%2C231%20L228%2C240%20L222%2C231%20L216%2C240%20L210%2C231%20L204%2C240%20L198%2C231%20L192%2C240%20L186%2C231%20L180%2C240%20L174%2C231%20L168%2C240%20L162%2C231%20L156%2C240%20L150%2C231%20L144%2C240%20L138%2C231%20L132%2C240%20L126%2C231%20L120%2C240%20L114%2C231%20L108%2C240%20L102%2C231%20L96%2C240%20L90%2C231%20L84%2C240%20L78%2C231%20L72%2C240%20L66%2C231%20L60%2C240%20L54%2C231%20L48%2C240%20L42%2C231%20L36%2C240%20L30%2C231%20L24%2C240%20L18%2C231%20L12%2C240%20L6%2C231%20L0%2C240%20L9%2C234%20L0%2C228%20L9%2C222%20L0%2C216%20L9%2C210%20L0%2C204%20L9%2C198%20L0%2C192%20L9%2C186%20L0%2C180%20L9%2C174%20L0%2C168%20L9%2C162%20L0%2C156%20L9%2C150%20L0%2C144%20L9%2C138%20L0%2C132%20L9%2C126%20L0%2C120%20L9%2C114%20L0%2C108%20L9%2C102%20L0%2C96%20L9%2C90%20L0%2C84%20L9%2C78%20L0%2C72%20L9%2C66%20L0%2C60%20L9%2C54%20L0%2C48%20L9%2C42%20L0%2C36%20L9%2C30%20L0%2C24%20L9%2C18%20L0%2C12%20L9%2C6%20L0%2C0%20Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E");
}

.material-palette { max-width:1160px; margin:0 auto; padding:56px 48px 24px; }
/* Matches .eyebrow / section h2 in style.css + home.css exactly, so this
   section's heading reads at the same size/weight/tracking as Recent work,
   How we work, and Before you go. */
.palette-eyebrow { text-align:center; font-size:12px; letter-spacing:.06em; font-weight:500; color:var(--wine); text-transform:uppercase; margin:0 0 12px; }
.palette-title { text-align:center; font-family:'Newsreader',serif; font-weight:500; font-size:30px; color:var(--ink); margin:0 0 40px; letter-spacing:-.01em; }

/* Board — deliberate overlapping cluster. Sample size ≈ physical area in a
   real interior; z-index ≈ physical stacking layer. */
.palette-composition { position:relative; width:100%; max-width:1000px; margin:0 auto; height:688px; }

.mat-sample { position:absolute; border-radius:var(--radius-sm); overflow:hidden; background:var(--line); box-shadow:0 5px 16px rgba(34,30,26,.12); transition:transform .35s var(--ease), box-shadow .35s var(--ease), filter .35s var(--ease); }
.mat-sample img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease); }

/* Hover reveal — the pointed-at swatch jumps fully to the front, clear of every
   overlap and label (works for reduced-motion users too, it's occlusion not
   motion); the lift + deeper shadow are the motion layer. */
.mat-sample:hover { z-index:30; }
@media (hover:hover){
  .mat-sample:hover { transform:translateY(-5px) scale(1.04); }
  .mat-sample:hover:not(.is-pinked) { box-shadow:0 16px 32px rgba(34,30,26,.22); }
  .is-pinked:hover { filter:drop-shadow(0 11px 17px rgba(34,30,26,.28)); }
  .mat-sample:hover img { transform:scale(1.05); }
}

/* Straight-cut goods (plaster, walnut, marble) use the base treatment. */
.mat-plaster { top:100px; left:180px; width:340px; height:220px; z-index:1; }
.mat-walnut  { top:250px; left:220px; width:200px; height:310px; z-index:2; }
.mat-marble  { top:180px; left:440px; width:210px; height:250px; z-index:2; }

/* Brushed brass — small rounded metal tag. */
.mat-brass   { top:340px; left:540px; width:150px; height:150px; z-index:6; border-radius:var(--radius-lg); }

/* Soft goods — pinked (cut-fabric) edge. Mask clips the frame to a zigzag, so
   these carry a drop-shadow filter (follows the mask) instead of box-shadow. */
.mat-tweed   { top:400px; left:400px; width:230px; height:160px; z-index:3; }
.mat-oxblood { top:398px; left:602px; width:184px; height:182px; z-index:5; }
.is-pinked {
  border-radius:0;
  box-shadow:none;
  -webkit-mask:var(--pink-mask) center / 100% 100% no-repeat;
          mask:var(--pink-mask) center / 100% 100% no-repeat;
  filter:drop-shadow(0 5px 9px rgba(34,30,26,.18));
}

/* Labels — small uppercase name + description, out in the margins. */
.mat-label-group { position:absolute; font-size:12px; line-height:1.5; z-index:6; }
.mat-label { font-family:var(--font-body); font-weight:500; font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink); margin-bottom:5px; }
.mat-desc { font-family:'Newsreader',serif; font-style:italic; font-size:13px; color:var(--muted); }

.lbl-plaster { top:18px;  left:190px; width:340px; text-align:center; }
.lbl-marble  { top:190px; left:722px; width:220px; text-align:left; }
.lbl-walnut  { top:362px; left:0;     width:200px; text-align:right; }
.lbl-tweed   { top:600px; left:383px; width:200px; text-align:left; }
.lbl-brass   { top:324px; left:722px; width:180px; text-align:left; }
.lbl-oxblood { top:600px; left:604px; width:220px; text-align:left; }

/* Hairline connectors — 1px, orthogonal, ≥24px, back toward each swatch. */
.connector { position:absolute; background:var(--line-soft); z-index:1; }
.c-plaster { top:78px;  left:360px; width:1px;  height:18px; }
.c-marble  { top:207px; left:663px; width:55px;  height:1px; }
.c-walnut  { top:379px; left:206px; width:28px;  height:1px; }
.c-tweed   { top:548px; left:470px; width:1px;   height:48px; }
.c-brass   { top:341px; left:690px; width:28px;  height:1px; }
.c-oxblood { top:558px; left:694px; width:1px;   height:38px; }

/* Mobile — cluster collapses to a calm two-column grid, samples above labels.
   Pinked edges and shadows carry over; connectors are dropped. */
@media (max-width:900px){
  .palette-composition { height:auto; display:grid; grid-template-columns:repeat(2,1fr); gap:28px 20px; padding:4px 12px 0; }
  .mat-sample { position:static; width:100% !important; height:auto !important; aspect-ratio:1; }
  .mat-label-group { position:static; width:auto !important; text-align:left !important; margin-top:10px; }
  .connector { display:none; }
  .mat-plaster { order:1; } .lbl-plaster { order:2; text-align:left !important; }
  .mat-marble  { order:3; } .lbl-marble  { order:4; }
  .mat-tweed   { order:5; } .lbl-tweed   { order:6; }
  .mat-walnut  { order:7; } .lbl-walnut  { order:8; }
  .mat-brass   { order:9; } .lbl-brass   { order:10; }
  .mat-oxblood { order:11; } .lbl-oxblood { order:12; }
}
@media (max-width:520px){
  .material-palette { padding:48px 24px 24px; }
  .palette-composition { grid-template-columns:1fr; }
}