/* ============================================================
   css/en.css — 4 novembre 2026
   1) Selettore di lingua IT/EN nell'header (tutte le pagine)
   2) Componenti delle pagine inglesi /en/ (prefisso .en-)
   Usa le variabili di styles.css (--black, --gray-*, --accent-warm, ...).
   Le foto non hanno MAI sovrapposizioni, sfumature o ritagli: si vedono
   intere, come le ha create Domenico (gallerie a colonne, non a riquadri).
   ============================================================ */

/* ---------- 1. Selettore lingua ---------- */
.nav-links .lang-switch a {
    display: inline-block;
    padding: 2px 8px;
    border: 0.5px solid var(--gray-500, #999);
    font-size: 11px;
    letter-spacing: 0.12em;
    line-height: 1.6;
}
.nav-links .lang-switch a:hover { border-color: var(--black, #111); }
.nav-mobile-links .lang-switch--mobile a {
    font-size: 14px;
    color: var(--gray-700, #555);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------- 2. Pagine /en/ ---------- */
.en-page { overflow-x: clip; }
.en-page h1, .en-page h2, .en-page h3 { font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.en-page h1 { font-size: clamp(30px, 5vw, 48px); margin: 0 0 16px; }
.en-page h2 { font-size: clamp(24px, 3.4vw, 34px); margin: 0 0 16px; }
.en-page h3 { font-size: 18px; margin: 0 0 8px; }
.en-page p { margin: 0 0 14px; }
.en-page .section-label { margin-bottom: 10px; }

.en-wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-md, 48px); }
.en-narrow { max-width: 760px; }
.en-section { padding: var(--space-lg, 80px) 0; }
.en-section--tint { background: var(--gray-100, #f7f6f4); }
.en-section--dark { background: var(--dark-bg, #111); color: var(--white, #fff); }
.en-section--dark .section-label { color: var(--accent-warm, #c59261); }
.en-section--dark a:not(.btn-main) { text-decoration: underline; text-underline-offset: 3px; }

/* Hero: testo + foto affiancati su desktop, impilati su mobile */
.en-hero { padding: 32px 0 var(--space-md, 48px); }
.en-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.en-hero__text .en-lead { font-size: 17px; color: var(--gray-700, #555); max-width: 520px; }
.en-hero__media img { width: 100%; height: auto; }
.en-hero--wide .en-hero__grid { grid-template-columns: 1fr; gap: 28px; }
.en-hero--wide .en-hero__text { max-width: 780px; }
.en-cta-row { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-top: 22px; }
.en-kicker { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-warm, #c59261); margin: 0 0 12px; }

/* Box "In short" */
.en-short {
    border-left: 2px solid var(--accent-warm, #c59261);
    background: var(--gray-100, #f7f6f4);
    padding: 22px 26px;
    margin: 28px 0 0;
}
.en-short ul { margin: 0; padding-left: 18px; }
.en-short li { margin: 4px 0; }

/* Card servizi / griglie */
.en-grid { display: grid; gap: 24px; }
.en-grid--3 { grid-template-columns: repeat(3, 1fr); }
.en-grid--2 { grid-template-columns: repeat(2, 1fr); }
.en-grid--4 { grid-template-columns: repeat(4, 1fr); }
.en-card { display: flex; flex-direction: column; background: var(--white, #fff); border: 0.5px solid var(--gray-300, #e0deda); }
.en-card img { width: 100%; height: auto; }
.en-card__body { padding: 22px 22px 26px; display: flex; flex-direction: column; flex: 1; }
.en-card__body p { color: var(--gray-700, #555); }
.en-card__more { margin-top: auto; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }
a.en-card:hover { border-color: var(--black, #111); }

/* Passi */
.en-steps { counter-reset: enstep; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.en-steps li { counter-increment: enstep; }
.en-steps li::before {
    content: counter(enstep, decimal-leading-zero);
    display: block;
    font-size: 13px;
    letter-spacing: 0.14em;
    color: var(--accent-warm, #c59261);
    margin-bottom: 8px;
}
.en-steps p { color: var(--gray-700, #555); font-size: 14px; }
.en-section--dark .en-steps p { color: var(--gray-300, #e0deda); }

/* Formule / prezzi */
.en-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.en-plan { border: 0.5px solid var(--gray-300, #e0deda); background: var(--white, #fff); padding: 28px 24px; display: flex; flex-direction: column; }
.en-plan--featured { border-color: var(--black, #111); }
.en-plan__name { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; margin: 0 0 6px; }
.en-plan__price { font-size: 34px; font-weight: 600; line-height: 1.1; margin: 0 0 16px; }
.en-plan__price small { font-size: 13px; font-weight: 400; color: var(--gray-600, #777); }
.en-plan ul { margin: 0 0 20px; padding-left: 18px; color: var(--gray-700, #555); font-size: 14px; }
.en-plan li { margin: 5px 0; }
.en-plan .btn-main, .en-plan .btn-ghost { margin-top: auto; text-align: center; }
.en-note { font-size: 13px; color: var(--gray-600, #777); margin-top: 18px; }

/* Tabella prezzi per servizio */
.en-price-list { width: 100%; border-collapse: collapse; margin-top: 8px; }
.en-price-list th, .en-price-list td { text-align: left; padding: 14px 10px; border-bottom: 0.5px solid var(--gray-300, #e0deda); vertical-align: top; }
.en-price-list th { font-weight: 600; }
.en-price-list td:last-child { white-space: nowrap; text-align: right; font-weight: 600; }

/* Galleria: colonne (nessun ritaglio delle foto) */
.en-gallery { columns: 3; column-gap: 14px; }
.en-gallery figure { break-inside: avoid; margin: 0 0 14px; }
.en-gallery img { width: 100%; height: auto; }

/* Rassicurazioni / info pratiche */
.en-checks { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 36px; }
.en-checks li { padding-left: 28px; position: relative; }
.en-checks li::before { content: ''; position: absolute; left: 0; top: 9px; width: 14px; height: 7px; border-left: 1.5px solid var(--accent-warm, #c59261); border-bottom: 1.5px solid var(--accent-warm, #c59261); transform: rotate(-45deg); }
.en-checks strong { display: block; }
.en-info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.en-info h3 { font-size: 15px; letter-spacing: 0.04em; }
.en-info p { color: var(--gray-700, #555); font-size: 14px; }

/* Recensione */
.en-review { max-width: 760px; margin: 0 auto; text-align: center; }
.en-review__stars { font-size: 18px; letter-spacing: 4px; color: var(--accent-warm, #c59261); }
.en-review p { font-size: 18px; }

/* FAQ */
.en-faq details { border-bottom: 0.5px solid var(--gray-300, #e0deda); padding: 16px 0; }
.en-faq summary { cursor: pointer; font-weight: 600; list-style: none; position: relative; padding-right: 28px; }
.en-faq summary::-webkit-details-marker { display: none; }
.en-faq summary::after { content: '+'; position: absolute; right: 4px; top: -2px; font-size: 20px; font-weight: 300; }
.en-faq details[open] summary::after { content: '–'; }
.en-faq details p { margin: 12px 0 0; color: var(--gray-700, #555); }

/* CTA finale */
.en-cta-final { text-align: center; }
.en-cta-final p { max-width: 560px; margin-left: auto; margin-right: auto; }
.en-cta-final .en-cta-row { justify-content: center; }
.en-wa {
    display: inline-block;
    background: #1f7a4d;
    color: #fff;
    padding: 14px 26px;
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.en-wa:hover { opacity: 0.88; }

/* Contatti */
.en-contact { display: grid; grid-template-columns: 1fr 1.4fr; gap: 56px; align-items: start; }
.en-contact .info-block { margin-bottom: 22px; }
.en-route { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 24px; }
.en-route figure { margin: 0; }
.en-route figcaption { font-size: 13px; color: var(--gray-700, #555); margin-top: 6px; }
.en-route b { color: var(--accent-warm, #c59261); margin-right: 4px; }
.en-form .form-group { margin-bottom: 16px; }
.en-form label { display: block; font-size: 13px; margin-bottom: 6px; }
.en-form input[type=text], .en-form input[type=email], .en-form input[type=tel], .en-form input[type=date], .en-form select, .en-form textarea {
    width: 100%; padding: 12px 14px; border: 0.5px solid var(--gray-500, #999); font: inherit; background: var(--white, #fff);
}
.en-form .form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.en-form .form-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; margin-bottom: 10px; }
.en-form .form-check input { margin-top: 4px; }
.en-form .form-nota { font-size: 12px; color: var(--gray-600, #777); margin: -6px 0 16px; }
.en-alert { padding: 16px 18px; margin-bottom: 20px; border-left: 2px solid; }
.en-alert--ok { border-color: #1f7a4d; background: #eef6f1; }
.en-alert--err { border-color: #a33; background: #fbefef; }
.en-alert p { margin: 0 0 4px; }

/* Barra WhatsApp fissa (solo mobile) */
.en-sticky { display: none; }
@media (max-width: 899px) {
    .en-sticky {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
        display: flex; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
        background: var(--white, #fff); border-top: 0.5px solid var(--gray-300, #e0deda);
        transform: translateY(110%); transition: transform var(--transition, .25s ease);
    }
    .en-sticky.is-visible { transform: none; }
    .en-sticky a { flex: 1; text-align: center; padding: 12px 8px; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }
    .en-sticky__wa { background: #1f7a4d; color: #fff; flex: 1.6 !important; }
    .en-sticky__sec { border: 0.5px solid var(--black, #111); }
    body.has-en-sticky .back-to-top { bottom: 84px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
    .en-grid--4, .en-steps { grid-template-columns: repeat(2, 1fr); }
    .en-route { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 899px) {
    .en-hero__grid, .en-contact { grid-template-columns: 1fr; gap: 28px; }
    .en-hero__media { order: 2; }
    .en-plans, .en-grid--3, .en-info { grid-template-columns: 1fr; }
    .en-gallery { columns: 2; column-gap: 10px; }
    .en-gallery figure { margin-bottom: 10px; }
}
@media (max-width: 640px) {
    .en-wrap { padding: 0 20px; }
    .en-section { padding: 56px 0; }
    .en-grid--2, .en-checks, .en-form .form-row-2 { grid-template-columns: 1fr; }
    .en-steps { grid-template-columns: 1fr; gap: 18px; }
    .en-price-list td:last-child { white-space: normal; }
}

/* Link nel testo: sottolineati (i bottoni hanno sempre una classe) */
.en-page p a:not([class]), .en-page li a:not([class]), .en-page td a:not([class]), .en-page th a:not([class]) {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 0.5px;
}