/* PROPOSTA C - "Editorial": avorio e cobalto.
   Struttura: hero incorniciato con logo, testi in colonne, mosaico di riquadri video, approccio con immagine. */
:root {
    --page-bg: #efebe2; --alt-bg: #e4ddcd; --footer-bg: #0b1730; --header-rgb: 11, 23, 48;
    --sec-head: #14264a; --sec-text: #34405a; --sec-accent: #1f5da8; --sec-line: rgba(20, 38, 74, .22);
    --card-bg: #d5cdb9; --veil-rgb: 11, 23, 48;
    --btn-bg: #14264a; --btn-fg: #efebe2; --btn-hover: #1f5da8; --btn-hover-fg: #f4f8fc;
}
/* zone scure: colori chiari e pulsanti avorio */
.panel, .tile, .approach, .site-header, .site-footer, .dock {
    --sec-head: #f4f8fc; --sec-text: #d7d3ca; --sec-accent: #9cc7ee; --sec-line: rgba(156, 199, 238, .22);
    --btn-bg: #efebe2; --btn-fg: #050608; --btn-hover: #1f5da8; --btn-hover-fg: #f4f8fc;
}
body { color: #34405a; }
.site-header { background: rgba(var(--header-rgb), .96); border-bottom-color: rgba(156, 199, 238, .22); }
.hero-fade { display: none; }
.hero.inset {
    margin: calc(var(--header-h) + .5rem) var(--frame-x) 0;
    min-height: calc(100vh - var(--header-h) - 1.5rem); min-height: calc(100svh - var(--header-h) - 1.5rem);
    border-radius: 4px; padding-top: 2rem; border: 1px solid rgba(20, 38, 74, .35);
}

.intro-c { background: var(--page-bg); padding: clamp(4rem, 11vh, 8rem) 0 clamp(3rem, 8vh, 6rem); }
.intro-c-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: end; }
.intro-c h2 { font-size: clamp(2.3rem, 5.6vw, 4.8rem); }
.intro-c p { color: var(--sec-text); margin-bottom: 1.25rem; }
.intro-c .actions { margin-top: 1.5rem; }
.intro-c .btn-line { color: var(--sec-head); border-color: var(--sec-head); }
.intro-c .btn-line:hover { background: var(--sec-head); color: var(--page-bg); }

.mosaic { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.25rem; padding: 0 var(--frame-x) 1.25rem; background: var(--page-bg); }
.tile {
    position: relative; overflow: hidden; isolation: isolate; border-radius: 4px; border: 1px solid rgba(20, 38, 74, .35);
    min-height: 64vh; min-height: 64svh; display: flex; align-items: flex-end;
    padding: clamp(1.25rem, 3vw, 2.5rem); background: var(--navy-deep);
}
.tile:nth-child(1) { grid-column: span 7; }
.tile:nth-child(2) { grid-column: span 5; }
.tile:nth-child(3) { grid-column: span 5; }
.tile:nth-child(4) { grid-column: span 7; }
.tile .bg { z-index: -2; }
.tile-body { max-width: 30rem; }
.tile-num { display: block; font-size: .75rem; letter-spacing: .3em; color: var(--ice); margin-bottom: .6rem; }
.tile h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); margin-bottom: .8rem; }
.tile p { color: #d7d3ca; font-size: 1rem; }
.tile .link-arrow { margin-top: 1.1rem; }
.veil-tile { background: linear-gradient(0deg, rgba(var(--veil-rgb), .9) 0%, rgba(var(--veil-rgb), .42) 45%, rgba(var(--veil-rgb), .05) 100%); }

.band-c { background: var(--page-bg); padding: 0 var(--frame-x) var(--frame-gap); }
.band-c .panel.framed { margin: 0; border-color: rgba(20, 38, 74, .35); }

.approach-c { background: var(--alt-bg); }
.approach-c-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.steps-c { list-style: none; }
.steps-c li { display: grid; grid-template-columns: 4.5rem 1fr; gap: 1rem; padding: 1.4rem 0; border-top: 1px solid var(--sec-line); }
.steps-c li:last-child { border-bottom: 1px solid var(--sec-line); }
.steps-c .step-num { color: var(--sec-accent); font-size: .8rem; padding-top: .5rem; margin: 0; }
.steps-c h3 { margin-bottom: .3rem; }
.steps-c p { color: var(--sec-text); font-size: 1rem; }
.approach-fig { overflow: hidden; border-radius: 4px; border: 1px solid rgba(20, 38, 74, .3); aspect-ratio: 4 / 5; background: var(--card-bg); }
.approach-fig img { width: 100%; height: 100%; object-fit: cover; }
.draft-note { color: #566175; }
.intro-c :focus-visible { outline-color: #1f5da8; }

.form { background: rgba(11, 23, 48, .8); }

@media (max-width: 1000px) {
    .intro-c-grid, .approach-c-grid { grid-template-columns: 1fr; align-items: start; }
    .approach-fig { aspect-ratio: 16 / 10; }
}
@media (max-width: 820px) {
    .mosaic { grid-template-columns: 1fr; gap: 1.5rem; }
    .tile:nth-child(n) { grid-column: auto; }
    .tile { min-height: 74vh; min-height: 74svh; }
}