/* ==========================================================================
   Cucine in muratura — tema dedicato (si carica DOPO site.css)
   Concetto: pietra di Prun e intonaco a calce, lettering inciso come su
   un architrave (Marcellus), marmo Rosso Verona come unico accento.
   Tema scuro: ferro e ardesia.
   ========================================================================== */

@font-face { font-family: "Marcellus"; src: url("../fonts/marcellus.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --paper: #DCD5C9;        /* pietra di Prun */
  --sheet: #EFEBE4;        /* intonaco a calce */
  --ink: #33271F;          /* ferro brunito */
  --ink-2: #5E5248;
  --rule: #B9AE9E;
  --rule-soft: #CCC3B5;
  --accent: #8C2F26;       /* Rosso Verona */
  --cta: #8C2F26;
  --cta-ink: #FFF8F2;
  --cta-hover: #73251E;
  --wash: #E8CFC6;
  --band: #33271F;
  --band-ink: #EFEBE4;
  --band-ink-2: #CBBFAF;
  --kd-stone: #CBC2B2;     /* disegno: pietra */
  --kd-wood: #E2CBAE;      /* disegno: larice */
  --kd-tile: #E7E1D6;      /* disegno: piastrelle */
  --kd-plaster: #F4F1EB;   /* disegno: calce */
  --kd-fabric: #EBD5CB;    /* disegno: tende in tessuto (lino tinto) */
  --kd-salvia: #A3B8A2;    /* disegno: piastrelle verde salvia */
  --kd-salvia-2: #B8C9B5;
  --kd-maiolica: #F0E7D4;  /* disegno: maiolica chiara, piatti e fascia decorata */
  --kd-cotto: #C2683F;     /* disegno: cotto e decori */
  --kd-ocra: #D2A04A;
  --kd-rame: #C27B4E;      /* disegno: pentole in rame */
  --kd-ferro: #4B423B;     /* disegno: ferro battuto */
  --shadow: 0 1px 0 rgba(51, 39, 31, .06), 0 22px 44px -26px rgba(51, 39, 31, .5);
  --display: var(--serif);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #211C18;
    --sheet: #2B2520;
    --ink: #EDE6DB;
    --ink-2: #BDB1A2;
    --rule: #4D433A;
    --rule-soft: #3A322B;
    --accent: #DE8B7B;
    --cta: #A83E33;
    --cta-ink: #FFF8F2;
    --cta-hover: #BA4B3F;
    --wash: #4A2E28;
    --band: #2B2520;
    --band-ink: #EDE6DB;
    --band-ink-2: #BDB1A2;
    --kd-stone: #4A423A;
    --kd-wood: #5A4632;
    --kd-tile: #36302A;
    --kd-plaster: #3A332D;
    --kd-fabric: #5C3B33;
  --kd-salvia: #4F6352;
  --kd-salvia-2: #5A6E5C;
  --kd-maiolica: #4A4237;
  --kd-cotto: #A85B3B;
  --kd-ocra: #A8823F;
  --kd-rame: #A0653F;
  --kd-ferro: #17130F;
    --kd-salvia: #4F6352;
    --kd-salvia-2: #5A6E5C;
    --kd-maiolica: #4A4237;
    --kd-cotto: #A85B3B;
    --kd-ocra: #A8823F;
    --kd-rame: #A0653F;
    --kd-ferro: #17130F;
    --shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 22px 44px -26px rgba(0, 0, 0, .85);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #211C18;
  --sheet: #2B2520;
  --ink: #EDE6DB;
  --ink-2: #BDB1A2;
  --rule: #4D433A;
  --rule-soft: #3A322B;
  --accent: #DE8B7B;
  --cta: #A83E33;
  --cta-ink: #FFF8F2;
  --cta-hover: #BA4B3F;
  --wash: #4A2E28;
  --band: #2B2520;
  --band-ink: #EDE6DB;
  --band-ink-2: #BDB1A2;
  --kd-stone: #4A423A;
  --kd-wood: #5A4632;
  --kd-tile: #36302A;
  --kd-plaster: #3A332D;
  --kd-fabric: #5C3B33;
  --shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 22px 44px -26px rgba(0, 0, 0, .85);
  color-scheme: dark;
}

/* Titoli incisi: Marcellus ha un solo peso, niente compressione */
.k h1, .k h2 { font-weight: 400; font-stretch: 100%; letter-spacing: .005em; }
.k h1 { font-size: clamp(2.4rem, 1.3rem + 4vw, 4.2rem); line-height: 1.04; }
.k h2 { font-size: clamp(1.9rem, 1.25rem + 2.2vw, 2.85rem); line-height: 1.08; }
.k h3 { font-family: var(--serif); font-weight: 400; font-stretch: 100%; font-size: 1.32rem; letter-spacing: .005em; }
.k .final h2 { font-weight: 400; font-stretch: 100%; }

.k-brand-name { font-family: var(--serif); font-size: 1.22rem; letter-spacing: .01em; white-space: nowrap; }

/* Hero cucine */
.k-hero { padding-block: clamp(36px, 6vw, 80px) clamp(48px, 7vw, 96px); }
.k-hero .hero-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.drawing { margin: 0; background: var(--sheet); border: 1px solid var(--rule); border-radius: 3px; box-shadow: var(--shadow); padding: clamp(12px, 2vw, 22px); min-width: 0; }
.drawing svg { display: block; width: 100%; height: auto; }
.drawing figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--rule-soft); font-size: .86rem; color: var(--ink-2); }
.callouts { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; font-size: .92rem; }
.callouts li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; align-items: start; line-height: 1.35; }
.callout-num { width: 22px; height: 22px; border-radius: 50%; background: var(--cta); color: var(--cta-ink); display: grid; place-items: center; font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Classi del disegno (prospetto) */
.kd-line { fill: none; stroke: var(--ink); stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }
.kd-thin { fill: none; stroke: var(--ink-2); stroke-width: .7; }
.kd-hair { fill: none; stroke: var(--ink-2); stroke-width: .45; opacity: .8; }
.kd-plaster { fill: var(--kd-plaster); stroke: var(--ink); stroke-width: 1.2; }
.kd-stone { fill: var(--kd-stone); stroke: var(--ink); stroke-width: 1.2; }
.kd-wood { fill: var(--kd-wood); stroke: var(--ink); stroke-width: 1; }
.kd-tile { fill: var(--kd-tile); stroke: none; }
.kd-fabric { fill: var(--kd-fabric); stroke: var(--ink); stroke-width: 1; }
.kd-fold { fill: none; stroke: var(--ink-2); stroke-width: .5; opacity: .7; }
.kd-ring { fill: var(--kd-plaster); stroke: var(--ink); stroke-width: .8; }
.kd-salvia { fill: var(--kd-salvia); }
.kd-salvia-2 { fill: var(--kd-salvia-2); }
.kd-band { fill: var(--kd-maiolica); }
.kd-motif-cotto { fill: var(--kd-cotto); }
.kd-motif-ocra { fill: var(--kd-ocra); }
.kd-maiolica { fill: var(--kd-maiolica); stroke: var(--ink); stroke-width: .8; }
.kd-cotto { fill: var(--kd-cotto); stroke: var(--ink); stroke-width: .8; }
.kd-ceramica { fill: var(--kd-salvia); stroke: var(--ink); stroke-width: .8; }
.kd-plate-rim { fill: none; stroke: var(--kd-cotto); stroke-width: 1.2; }
.kd-hole { fill: var(--kd-plaster); stroke: var(--ink); stroke-width: .6; }
.kd-rame { fill: var(--kd-rame); stroke: var(--ink); stroke-width: .9; }
.kd-ferro { fill: var(--kd-ferro); stroke: var(--ink); stroke-width: .6; }
.kd-rail { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; }
.kd-hook { fill: none; stroke: var(--ink); stroke-width: .9; stroke-linecap: round; }
.kd-ring-iron { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.kd-rim-light { fill: none; stroke: var(--kd-plaster); stroke-width: .8; opacity: .7; }
.kd-oven { fill: var(--kd-tile); stroke: var(--ink); stroke-width: 1.1; }
.kd-glass { fill: var(--kd-ferro); fill-opacity: .8; stroke: var(--ink); stroke-width: .6; }
.kd-dark { fill: var(--ink); opacity: .85; }
.kd-dim { fill: none; stroke: var(--accent); stroke-width: .9; }
.kd-dim-text { fill: var(--accent); font-family: var(--font); font-size: 11px; font-weight: 600; text-anchor: middle; }
.kd-call { fill: var(--cta); }
.kd-call-num { fill: var(--cta-ink); font-family: var(--font); font-size: 10px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.kd-leader { fill: none; stroke: var(--cta); stroke-width: .9; }

/* Tre motivi */
.reasons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 48px); }
.reason { min-width: 0; padding-top: 22px; border-top: 1.5px solid var(--ink); }
.reason .service-icon { width: 36px; height: 36px; margin-bottom: 14px; display: block; }
.reason h3 { margin-bottom: 8px; }
.reason p { margin: 0; color: var(--ink-2); }

/* Campionario materiali */
.swatches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 32px); list-style: none; margin: 0; padding: 0; }
.swatch { min-width: 0; }
.swatch-chip { aspect-ratio: 4 / 3; max-width: 100%; border-radius: 2px; border: 1px solid var(--rule); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.swatch h3 { margin: 14px 0 4px; }
.swatch p { margin: 0; color: var(--ink-2); font-size: .96rem; }
.swatch .origin { display: block; font-size: .86rem; color: var(--ink-2); margin-top: 4px; }
/* Le texture sono "fotografie" dei materiali: restano uguali nei due temi */
.sw-lessinia { background:
  repeating-linear-gradient(177deg, rgba(255,255,255,.18) 0 2px, transparent 2px 13px),
  repeating-linear-gradient(176deg, #D9D3C5 0 10px, #CEC7B6 10px 12px, #DED9CC 12px 24px, #C8C0AE 24px 25px); }
.sw-rosso { background:
  radial-gradient(circle at 18% 24%, rgba(196,108,92,.55), transparent 11%),
  radial-gradient(circle at 62% 18%, rgba(140,56,44,.5), transparent 9%),
  radial-gradient(circle at 84% 46%, rgba(200,116,98,.45), transparent 13%),
  radial-gradient(circle at 40% 58%, rgba(128,48,38,.45), transparent 15%),
  radial-gradient(circle at 12% 78%, rgba(190,100,84,.5), transparent 10%),
  radial-gradient(circle at 70% 84%, rgba(204,122,104,.4), transparent 12%),
  radial-gradient(circle at 52% 36%, rgba(186,96,80,.35), transparent 7%),
  radial-gradient(circle at 30% 92%, rgba(120,44,34,.4), transparent 8%),
  radial-gradient(circle at 92% 12%, rgba(178,90,74,.45), transparent 8%),
  radial-gradient(circle at 4% 40%, rgba(150,62,50,.45), transparent 9%),
  linear-gradient(160deg, #A54D3F, #974334 60%, #A85345); }
.sw-larice { background:
  repeating-linear-gradient(91deg, rgba(90, 55, 25, .18) 0 1px, transparent 1px 9px),
  repeating-linear-gradient(90deg, #BC8D5C 0 7px, #AC7C4D 7px 8px, #C59869 8px 17px, #A3743F 17px 18px); }
.sw-piastrelle { background:
  linear-gradient(90deg, #8E9F8B 0 2px, transparent 2px) 0 0 / 34px 34px,
  linear-gradient(180deg, #8E9F8B 0 2px, transparent 2px) 0 0 / 34px 34px,
  radial-gradient(circle, #F0E7D4 0 1.6px, transparent 2px) 0 68px / 34px 34px repeat-x,
  radial-gradient(circle, #C2683F 0 6px, transparent 6.5px) 0 68px / 34px 34px repeat-x,
  linear-gradient(#F0E7D4, #F0E7D4) 0 68px / 100% 34px no-repeat,
  repeating-conic-gradient(#A3B8A2 0 25%, #B8C9B5 0 50%) 0 0 / 68px 68px; }
.sw-calce { background:
  radial-gradient(ellipse at 25% 35%, #F6F3ED 0 30%, transparent 60%),
  radial-gradient(ellipse at 75% 70%, #EAE5DB 0 25%, transparent 55%),
  #E9E4DA; }
.sw-tessuto { background:
  repeating-linear-gradient(0deg, rgba(140, 47, 38, .42) 0 9px, transparent 9px 18px),
  repeating-linear-gradient(90deg, rgba(140, 47, 38, .42) 0 9px, transparent 9px 18px),
  #F4EEE4; }

/* Elementi della cucina */
.elements { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 5vw, 64px); list-style: none; margin: 0; padding: 0; }
.elements li { padding: 22px 0; border-top: 1px solid var(--rule); min-width: 0; }
.elements h3 { margin-bottom: 6px; }
.elements p { margin: 0; color: var(--ink-2); }
.elements-one { grid-template-columns: minmax(0, 1fr); }

.k .site-footer { background: var(--paper); }

@media (max-width: 980px) {
  .k-hero .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .reasons, .elements { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .callouts { grid-template-columns: minmax(0, 1fr); }
  .k-brand-name { font-size: 1.05rem; }
}

/* Su telefono la prenotazione resta nella barra in basso: in alto c'è spazio per tornare al sito */
@media (max-width: 520px) {
  .k .site-header .k-cta { display: none; }
}