/* ============================================================
   ClimaService Rent - main.css
   Tokens, reset, tipografia, layout di base. Tema: solo chiaro.
   ============================================================ */

:root {
    --bg: #F3F6F9;
    --surface: #FBFCFD;
    --ink: #101B26;
    --muted: #4B5B6B;
    --accent: #1B6FB8;
    --accent-hover: #155A96;
    --accent-ink: #0E4A7E;
    --tint: #E3EEF8;
    --tint-2: #EEF4FA;
    --line: #D5DEE7;
    --line-strong: #B9C6D3;
    --navy: #101B26;
    --navy-2: #182838;
    --on-navy: #E6EDF3;
    --on-navy-muted: #9FB0C0;
    --danger: #B3261E;
    --success: #1D6B3A;

    --ch: 14px;                    /* chamfer */
    --nav-h: 72px;
    --container: 1280px;
    --gutter: 24px;

    --font-display: 'Sora', 'Segoe UI', system-ui, sans-serif;
    --font-body: 'Manrope', 'Segoe UI', system-ui, sans-serif;

    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --shadow-float: 0 24px 60px rgba(16, 27, 38, 0.10), 0 2px 6px rgba(16, 27, 38, 0.06);
}

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-h) + 16px);
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img, picture, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
address { font-style: normal; }
::selection { background: var(--accent); color: #fff; }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* ---------- Tipografia ---------- */

.display-xl, .display-lg, .display-md, .display-sm, .heading {
    font-family: var(--font-display);
    letter-spacing: -0.025em;
    line-height: 1.05;
    font-weight: 700;
    text-wrap: balance;
}
.display-xl { font-size: clamp(2.4rem, 4.8vw, 4.2rem); }
.display-lg { font-size: clamp(2rem, 3.8vw, 3.2rem); }
.display-md { font-size: clamp(1.6rem, 2.6vw, 2.25rem); line-height: 1.12; }
.display-sm { font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.2; font-weight: 600; }
.heading    { font-size: 1.125rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }

.lead {
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
    line-height: 1.55;
    color: var(--muted);
    max-width: 62ch;
}
.body-lg { font-size: 1.0625rem; line-height: 1.65; color: var(--muted); max-width: 65ch; }
.body    { font-size: 1rem; line-height: 1.65; color: var(--muted); max-width: 65ch; }
.small   { font-size: 0.875rem; line-height: 1.5; }
.muted   { color: var(--muted); }
.accent  { color: var(--accent); }

.eyebrow {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 18px;
}

.prose p + p { margin-top: 1em; }
.prose h2 { margin: 2.2em 0 0.6em; }
.prose h3 { margin: 1.6em 0 0.5em; }
.prose ul { margin: 0.8em 0 1em; padding-left: 1.2em; list-style: square; color: var(--muted); }
.prose ul li { margin: 0.35em 0; }
.prose ul li::marker { color: var(--accent); }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--ink); font-weight: 600; }

/* ---------- Layout ---------- */

.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}
.container--narrow { max-width: 880px; }
.container--wide { max-width: 1440px; }

.section { padding: clamp(64px, 8vw, 112px) 0; }
.section--tight { padding: clamp(48px, 5vw, 72px) 0; }
.section--tint { background: var(--tint-2); }
.section--surface { background: var(--surface); }

.section-head { max-width: 720px; margin-bottom: clamp(36px, 4vw, 56px); }
.section-head .lead { margin-top: 16px; }

.grid { display: grid; gap: var(--gutter); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1024px) {
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    :root { --gutter: 20px; --nav-h: 64px; }
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ---------- Forme: chamfer + hatch ---------- */

.chamfer {
    clip-path: polygon(0 0, calc(100% - var(--ch)) 0, 100% var(--ch), 100% 100%, 0 100%);
}
.chamfer--bl {
    clip-path: polygon(0 0, 100% 0, 100% 100%, var(--ch) 100%, 0 calc(100% - var(--ch)));
}
.hatch {
    background-color: var(--tint);
    background-image: repeating-linear-gradient(
        135deg,
        rgba(27, 111, 184, 0.10) 0 1px,
        transparent 1px 12px
    );
}

/* ---------- Utility ---------- */

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}
.mt-1 { margin-top: 8px; }  .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; } .mt-5 { margin-top: 48px; } .mt-6 { margin-top: 64px; }
.mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; } .mb-4 { margin-bottom: 32px; }
.text-center { text-align: center; }
.hide-mobile { display: initial; }
.show-mobile { display: none; }
@media (max-width: 768px) {
    .hide-mobile { display: none !important; }
    .show-mobile { display: initial; }
}