/* =========================================================
   Decopierre — Texture Placeholders
   Stone-like surfaces in pure CSS (no external images)
   Used wherever a real photo would go.
   ========================================================= */

.tx {
  position: relative;
  overflow: hidden;
  background: var(--stone-100);
  isolation: isolate;
}

/* Common grain overlay using SVG noise — applied via ::after */
.tx::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.45;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.36  0 0 0 0 0.30  0 0 0 0 0.24  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}

/* Layered light gradients — subtle directional sheen */
.tx::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 20% 10%, rgba(255,250,242,0.55), transparent 60%),
    radial-gradient(120% 90% at 80% 90%, rgba(80,60,40,0.18), transparent 55%);
  z-index: 1;
}
.tx > * { position: relative; z-index: 2; }

/* ----- Variantes ----- */

.tx--ivory {
  background:
    linear-gradient(135deg, #FAF4EA 0%, #ECE0CC 100%);
}
.tx--stone {
  background:
    linear-gradient(140deg, #DCCCB1 0%, #BFAB8C 60%, #A8916F 100%);
}
.tx--stone-light {
  background:
    linear-gradient(140deg, #ECE0CC 0%, #D7C5A8 100%);
}
.tx--stone-dark {
  background:
    linear-gradient(140deg, #756857 0%, #4A4136 100%);
  color: var(--ivory);
}
.tx--terracotta {
  background:
    linear-gradient(140deg, #B97A56 0%, #8B4F33 100%);
  color: var(--ivory);
}
.tx--charcoal {
  background:
    linear-gradient(140deg, #3A332C 0%, #1F1B18 100%);
  color: var(--ivory);
}
.tx--lichen {
  background:
    linear-gradient(140deg, #7A8470 0%, #4F5A48 100%);
  color: var(--ivory);
}

/* Stone bond — appareillage de pierre, motif géométrique subtil */
.tx--bond {
  background:
    /* horizontal joints */
    linear-gradient(to bottom, transparent 0 49.5%, rgba(80,60,40,0.18) 49.5% 50.5%, transparent 50.5%),
    linear-gradient(to bottom, transparent 0 24.5%, rgba(80,60,40,0.12) 24.5% 25.5%, transparent 25.5%),
    linear-gradient(to bottom, transparent 0 74.5%, rgba(80,60,40,0.12) 74.5% 75.5%, transparent 75.5%),
    /* vertical joints staggered */
    linear-gradient(to right, transparent 0 33%, rgba(80,60,40,0.15) 33% 33.4%, transparent 33.4% 66.6%, rgba(80,60,40,0.15) 66.6% 67%, transparent 67%),
    linear-gradient(140deg, #DCCCB1 0%, #B89B78 100%);
  background-size: 100% 220px, 100% 220px, 100% 220px, 200px 110px, 100% 100%;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
}

/* "Enduit projeté" — fine grainy texture */
.tx--enduit {
  background:
    radial-gradient(circle at 30% 30%, rgba(255,248,235,0.7), transparent 40%),
    radial-gradient(circle at 70% 70%, rgba(110,90,68,0.35), transparent 50%),
    linear-gradient(135deg, #E4D2B6 0%, #C6AB87 100%);
}

/* Façade / Wall — vertical light gradient */
.tx--facade {
  background:
    linear-gradient(to bottom, rgba(255,250,240,0.5), transparent 30%, transparent 70%, rgba(40,30,20,0.18)),
    linear-gradient(135deg, #D9C5A7 0%, #A88D6A 100%);
}

/* Sky / open — for hero treatments */
.tx--sky {
  background:
    linear-gradient(to bottom, #D6CFC2 0%, #E8DDCC 60%, #C9B998 100%);
}

/* Glow accent corner — for cards */
.tx--corner-glow::before {
  background:
    radial-gradient(60% 50% at 100% 0%, rgba(160, 98, 63, 0.30), transparent 60%),
    radial-gradient(120% 90% at 0% 100%, rgba(80,60,40,0.18), transparent 55%);
}

/* Small placeholder label inside texture */
.tx-label {
  position: absolute;
  left: var(--s-5); bottom: var(--s-5);
  z-index: 3;
  font-family: var(--font-body);
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ivory);
  padding: 6px 10px;
  background: rgba(20, 15, 10, 0.35);
  backdrop-filter: blur(2px);
  border-radius: var(--r-sm);
}

/* Aspect helpers */
.aspect-4x5  { aspect-ratio: 4 / 5; }
.aspect-16x9 { aspect-ratio: 16 / 9; }
.aspect-3x2  { aspect-ratio: 3 / 2; }
.aspect-1x1  { aspect-ratio: 1 / 1; }
.aspect-21x9 { aspect-ratio: 21 / 9; }
.aspect-9x16 { aspect-ratio: 9 / 16; }