/* Pagine interne Comer SRL - Bootstrap 4.4.1
   Da caricare dopo bootstrap.css e css/navbar.css (usa le sue variabili colore). */

body.cp { color: #2b2f36; background: #fff; }
.cp a { color: var(--comer-blue); }

/* ---------- Hero ---------- */
.cp-hero {
    --hero-img: url("../images/bg/bg_lavoraz.jpg");
    color: #fff;
    background:
        linear-gradient(180deg, rgba(18, 18, 45, .62), rgba(18, 18, 45, .82)),
        var(--hero-img) center / cover no-repeat;
    /* sale sotto il menu semitrasparente */
    margin-top: calc(-1 * var(--comer-nav-h) - 1px);
    padding: calc(5.5rem + var(--comer-nav-h)) 0 8rem;
}
.cp-hero__sub {
    font-size: .95rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--comer-gray);
    margin: 0;
}
.cp-hero h1 {
    font-family: var(--comer-font);
    font-weight: 700;
    font-size: clamp(2.4rem, 6vw, 4.2rem);
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: .02em;
    margin: .5rem 0 0;
}
.cp-hero h1::after {
    content: "";
    display: block;
    width: 72px;
    height: 4px;
    background: #fff;
    margin-top: 1.1rem;
}

/* ---------- Numeri ---------- */
.cp-stats { position: relative; z-index: 2; margin-top: -4.25rem; }
.cp-stats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: #fff;
    border-top: 4px solid var(--comer-blue);
    border-radius: 4px;
    box-shadow: 0 12px 32px rgba(15, 15, 40, .14);
}
.cp-stat { padding: 1.5rem 1rem; text-align: center; border-left: 1px solid var(--comer-line); }
.cp-stat:first-child { border-left: 0; }
.cp-stat__num {
    font-family: var(--comer-font);
    font-weight: 700;
    font-size: 2.5rem;
    line-height: 1;
    color: var(--comer-blue);
}
.cp-stat__label { margin-top: .45rem; font-size: .9rem; color: #5b616b; }
@media (max-width: 767.98px) {
    .cp-stats__grid { grid-template-columns: repeat(2, 1fr); }
    .cp-stat:nth-child(odd) { border-left: 0; }
    .cp-stat:nth-child(n+3) { border-top: 1px solid var(--comer-line); }
}

/* ---------- Sezioni ---------- */
.cp-section { padding: 5rem 0; }
.cp-section--tint { background: #f4f5f7; }
.cp-h2 {
    font-family: var(--comer-font);
    font-weight: 700;
    font-size: clamp(1.9rem, 3.6vw, 2.7rem);
    line-height: 1.15;
    color: var(--comer-ink);
    margin: 0 0 1.75rem;
}
.cp-h2::after {
    content: "";
    display: block;
    width: 48px;
    height: 3px;
    background: var(--comer-blue);
    margin-top: .8rem;
}
.cp-text p { font-size: 1.05rem; line-height: 1.8; color: #3a3f47; margin-bottom: 1.1rem; max-width: 44rem; }
.cp-text p.cp-lead { font-size: 1.25rem; line-height: 1.65; color: var(--comer-ink); }

.cp-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 10px 28px rgba(15, 15, 40, .14);
}
.cp-img--plain { box-shadow: none; border-radius: 0; }

/* Due foto affiancate, la seconda leggermente sfalsata */
.cp-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; }
.cp-duo > :nth-child(2) { margin-top: 2.5rem; }
@media (max-width: 575.98px) {
    .cp-duo { grid-template-columns: 1fr; }
    .cp-duo > :nth-child(2) { margin-top: 0; }
}

/* Foto che restano visibili mentre si legge il testo */
.cp-stack { display: grid; gap: 1.5rem; }
@media (min-width: 992px) {
    .cp-sticky { position: sticky; top: calc(var(--comer-nav-h) + 1.5rem); }
}

/* ---------- Settori ---------- */
.cp-sectors {
    list-style: none;
    margin: 1.25rem 0 2rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
}
.cp-sectors li {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--comer-line);
    border-left: 3px solid var(--comer-blue);
    border-radius: 3px;
    padding: .7rem .9rem;
    font-weight: 600;
    color: var(--comer-ink);
}
.cp-sectors i {
    flex: 0 0 2.2rem;
    width: 2.2rem;
    height: 2.2rem;
    line-height: 2.2rem;
    margin-right: .75rem;
    text-align: center;
    border-radius: 50%;
    background: var(--comer-blue-tint);
    color: var(--comer-blue);
}
@media (max-width: 575.98px) { .cp-sectors { grid-template-columns: 1fr; } }

/* ---------- Galleria ---------- */
.cp-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.cp-gallery img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 4px;
    box-shadow: 0 10px 28px rgba(15, 15, 40, .14);
}
@media (max-width: 767.98px) { .cp-gallery { grid-template-columns: 1fr; } }

/* ---------- Video ---------- */
.cp-video { border-radius: 4px; overflow: hidden; box-shadow: 0 10px 28px rgba(15, 15, 40, .18); background: #000; }

/* ---------- Footer ---------- */
.cp-footer {
    background: #eceef1;
    border-top: 4px solid var(--comer-blue);
    padding: 3.5rem 0 1.5rem;
    font-size: .95rem;
    color: #3a3f47;
}
.cp-footer h6 { font-family: var(--comer-font); font-weight: 700; font-size: 1.2rem; color: var(--comer-ink); margin-bottom: 1rem; }
.cp-footer ul { list-style: none; margin: 0; padding: 0; }
.cp-footer li { margin-bottom: .55rem; }
.cp-footer a { color: #3a3f47; text-decoration: none; }
.cp-footer a:hover, .cp-footer a:focus { color: var(--comer-blue); text-decoration: underline; }
.cp-footer__brand img { height: 72px; width: auto; margin-bottom: 1rem; }
.cp-footer__brand p { font-size: .9rem; line-height: 1.65; max-width: 24rem; }
.cp-footer__contacts i { width: 1.5rem; color: var(--comer-blue); }
.cp-footer__legal { background: var(--comer-ink); color: var(--comer-gray); font-size: .82rem; padding: 1rem 0; text-align: center; }

@media (max-width: 767.98px) {
    .cp-hero { padding: calc(3.5rem + var(--comer-nav-h)) 0 6.5rem; }
    .cp-section { padding: 3.5rem 0; }
}

/* ---------- Varianti intestazione (una per pagina) ---------- */
.cp-hero--pt   { --hero-img: url("../images/bg/bg_pt.jpg"); }
.cp-hero--prog { --hero-img: url("../images/bg/bg_prog.jpg"); }
.cp-hero--plain { padding-bottom: 5rem; }
@media (max-width: 767.98px) { .cp-hero--plain { padding-bottom: 3.5rem; } }

/* ---------- Etichette e pulsante ---------- */
.cp-chips { display: flex; flex-wrap: wrap; list-style: none; margin: 0 0 1.75rem; padding: 0; }
.cp-chips li {
    display: inline-flex;
    align-items: center;
    margin: 0 .6rem .6rem 0;
    padding: .45rem .9rem;
    background: #fff;
    border: 1px solid var(--comer-line);
    border-left: 3px solid var(--comer-blue);
    border-radius: 3px;
    font-weight: 600;
    color: var(--comer-ink);
}
.cp-chips i { margin-right: .55rem; color: var(--comer-blue); }

.cp-btn {
    display: inline-flex;
    align-items: center;
    font-family: var(--comer-font);
    font-weight: 700;
    font-size: 1.15rem;
    color: #fff !important;
    background: var(--comer-blue);
    border: 2px solid var(--comer-blue);
    border-radius: 3px;
    padding: .55rem 1.5rem;
    text-decoration: none !important;
    transition: background .2s ease, color .2s ease;
}
.cp-btn:hover, .cp-btn:focus { background: #fff; color: var(--comer-blue) !important; }

/* ---------- Altre immagini di testata ---------- */
.cp-hero--impr    { --hero-img: url("../images/bg/bg_impr.jpg"); }
.cp-hero--quality { --hero-img: url("../images/bg/bg_quality.jpg"); }
.cp-hero--contact { --hero-img: url("../images/bg/COMER_bg_contact.jpg"); }

/* ---------- Schede ---------- */
.cp-cardgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.cp-cardgrid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 991.98px) { .cp-cardgrid, .cp-cardgrid--2 { grid-template-columns: 1fr; } }

.cp-card {
    height: 100%;
    background: #fff;
    border: 1px solid var(--comer-line);
    border-top: 3px solid var(--comer-blue);
    border-radius: 4px;
    padding: 1.6rem;
    box-shadow: 0 6px 18px rgba(15, 15, 40, .06);
}
.cp-card h3 {
    font-family: var(--comer-font);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--comer-ink);
    margin: 0 0 .75rem;
}
.cp-card p { margin: 0; color: #3a3f47; line-height: 1.75; }
.cp-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: var(--comer-blue-tint);
    color: var(--comer-blue);
    font-size: 1.1rem;
}

/* Elenco con pallini */
.cp-checks {
    list-style: none;
    margin: 1.25rem 0 2rem;
    padding: 1.25rem 1.5rem;
    background: #fff;
    border: 1px solid var(--comer-line);
    border-left: 3px solid var(--comer-blue);
    border-radius: 3px;
}
.cp-checks li { position: relative; padding-left: 1.6rem; margin-bottom: .75rem; line-height: 1.7; color: #3a3f47; }
.cp-checks li:last-child { margin-bottom: 0; }
.cp-checks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .65rem;
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--comer-blue);
}

/* Applicazioni */
.cp-apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 991.98px) { .cp-apps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .cp-apps { grid-template-columns: 1fr; } }
.cp-app { background: #fff; border: 1px solid var(--comer-line); border-radius: 4px; text-align: center; overflow: hidden; }
.cp-app__img { display: flex; align-items: center; justify-content: center; height: 200px; padding: 1rem; }
.cp-app__img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cp-app h3 {
    margin: 0;
    padding: 1rem;
    border-top: 1px solid var(--comer-line);
    font-family: var(--comer-font);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--comer-ink);
}

/* Modulo di contatto */
.cp-form label { font-weight: 600; color: var(--comer-ink); }
.cp-form .form-control { height: auto; padding: .65rem .8rem; border-radius: 3px; border-color: #cfd3d8; }
.cp-form .form-control:focus { border-color: var(--comer-blue); box-shadow: 0 0 0 .2rem var(--comer-blue-tint); }
.cp-form .cp-btn { width: 100%; justify-content: center; cursor: pointer; }
.cp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cp-embed { display: flex; justify-content: center; }

/* Recapiti */
.cp-info { list-style: none; margin: 0; padding: 0; }
.cp-info li { display: flex; align-items: flex-start; margin-bottom: 1.5rem; }
.cp-info__icon {
    flex: 0 0 3rem;
    width: 3rem;
    height: 3rem;
    line-height: 3rem;
    margin-right: 1rem;
    text-align: center;
    border-radius: 50%;
    background: var(--comer-blue);
    color: #fff;
}
.cp-info small { display: block; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: #6b717b; }
.cp-info a, .cp-info .cp-info__value { font-size: 1.15rem; font-weight: 600; color: var(--comer-ink); text-decoration: none; }
.cp-info a:hover { color: var(--comer-blue); text-decoration: underline; }