/* V21 — revisione gerarchia, card espandibili, progetti modali e contrasto giallo */
:root {
  --gold: #ffcd00;
  --gold-dark: #ffcd00;
  --section-y: clamp(52px, 6vw, 84px);
}

/* Typography: H1 più compatti e piccoli titoli nel giallo del brand. */
h1 { font-size: clamp(2.05rem, 4.15vw, 4.35rem); }
.page-hero h1 { font-size: clamp(2rem, 3.8vw, 3.75rem); }
.about-hero h1 { font-size: clamp(2.05rem, 4vw, 3.95rem); }
.hero-slide h1,
.hero-slide h2 { font-size: clamp(2rem, 3.7vw, 3.65rem); }
.eyebrow,
.kicker,
.service-block__number,
.service-accordion-card__eyebrow,
.process-stage__eyebrow,
.process-chapter__eyebrow,
.partner-card__index,
.mission-card__mark {
  color: var(--yellow);
  font-size: .9rem;
  font-weight: 850;
  text-shadow: 0 1px 1px rgba(16,32,42,.28);
}
.section-head { margin-bottom: 32px; }
.section + .section { padding-top: clamp(44px, 5vw, 68px); }

/* Riduce l'impatto del giallo decorativo nelle quattro card valori/Business Unit. */
.value-item::after { border-color: rgba(255,205,0,.035); }
.business-grid--four .business-card {
  background: linear-gradient(145deg, rgba(255,205,0,.035), var(--white) 42%);
}
html[data-theme="dark"] .business-grid--four .business-card {
  background: linear-gradient(145deg, rgba(255,205,0,.045), var(--page-surface) 42%);
}

/* Team con gerarchia visiva, nello stesso ordine del sito ufficiale (senza Grazia). */
.team-hierarchy { display: grid; gap: 42px; }
.team-tier { display: grid; gap: 18px; }
.team-tier__label {
  width: max-content;
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--yellow);
  font-size: 1.12rem;
}
.team-grid--executive { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 780px; }
.team-grid--executive .team-card { border-color: rgba(255,205,0,.4); box-shadow: 0 22px 55px rgba(16,32,42,.12); }
.team-grid--executive .team-card__body h3 { font-size: 1.2rem; }
.team-grid--leadership { grid-template-columns: repeat(4, minmax(0,1fr)); }
.team-grid--technical { grid-template-columns: repeat(5, minmax(0,1fr)); }
.team-grid--commercial { grid-template-columns: repeat(2, minmax(0,1fr)); max-width: 620px; }

/* Servizi: card simili alla home, interamente cliccabili e con pannello a tendina. */
.service-cards-section { background: var(--warm); }
.service-accordion-list { display: grid; gap: 24px; }
.service-accordion-card.service-block { padding-block: 0; border-bottom: 0; background: var(--white); }
.service-accordion-card.service-block:nth-of-type(even) { background: var(--white); }
.service-accordion-card {
  scroll-margin-top: calc(var(--header-h) + 118px);
  overflow: hidden;
  border: 1px solid var(--gray-200);
  border-radius: 24px;
  background: var(--white);
  box-shadow: 0 17px 44px rgba(16,32,42,.08);
}
.service-accordion-card > summary { list-style: none; cursor: pointer; }
.service-accordion-card > summary::-webkit-details-marker { display: none; }
.service-accordion-card__summary {
  display: grid;
  grid-template-columns: minmax(280px, 38%) minmax(0,1fr);
  min-height: 270px;
  align-items: stretch;
}
.service-accordion-card--reverse .service-accordion-card__media { order: 2; }
.service-accordion-card--reverse .service-accordion-card__overview { order: 1; }
.service-accordion-card__media { position: relative; min-height: 270px; overflow: hidden; background: var(--gray-100); }
.service-accordion-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 420ms ease; }
.service-accordion-card:hover .service-accordion-card__media img { transform: scale(1.02); }
.service-accordion-card__overview { position: relative; display: flex; flex-direction: column; justify-content: center; padding: clamp(30px,4.5vw,58px); }
.service-accordion-card__eyebrow { display: block; margin-bottom: 13px; letter-spacing: .12em; text-transform: uppercase; }
.service-accordion-card__title { display: block; max-width: 760px; color: var(--navy); font-family: var(--font-display); font-size: clamp(1.65rem,3vw,2.8rem); font-weight: 750; line-height: 1.08; }
.service-accordion-card__lead { display: block; max-width: 760px; margin-top: 16px; color: var(--ink-soft); line-height: 1.65; }
.service-accordion-card__toggle { position: absolute; right: 28px; bottom: 24px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,205,0,.18); color: var(--navy); font-size: 1.7rem; transition: transform var(--transition), background var(--transition); }
.service-accordion-card[open] .service-accordion-card__toggle { transform: rotate(45deg); background: var(--yellow); }
.service-accordion-card__panel { border-top: 1px solid var(--gray-200); }
.service-accordion-card__content { padding: clamp(28px,4vw,54px); }
.service-accordion-card__content > p { max-width: 920px; }
.service-accordion-card__content .inline-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
html[data-theme="dark"] .service-cards-section { background: #091820; }
html[data-theme="dark"] .service-accordion-card,
html[data-theme="dark"] .service-accordion-card.service-block,
html[data-theme="dark"] .service-accordion-card.service-block:nth-of-type(even) { border-color: #233640; background: var(--page-surface); }
html[data-theme="dark"] .service-accordion-card__title { color: #f1f6f7; }
html[data-theme="dark"] .service-accordion-card__lead { color: var(--page-text-soft); }
html[data-theme="dark"] .service-accordion-card__panel { border-top-color: #233640; }

/* Progetti: griglia a due card e popup di dettaglio. */
.project-grid--two { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 26px; }
.project-grid--two .project-card { min-height: 100%; }
.project-grid--two .card__body { display: flex; flex-direction: column; }
.project-grid--two .btn--text { margin-top: auto; align-self: flex-start; }
.project-grid--two .card__image { aspect-ratio: 500 / 313; }
.project-modal[hidden] { display: none; }
.project-modal { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 24px; }
.project-modal__backdrop { position: absolute; inset: 0; border: 0; background: rgba(4,14,20,.78); backdrop-filter: blur(4px); cursor: pointer; }
.project-modal__dialog { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(280px,.82fr) minmax(0,1.18fr); width: min(1080px,100%); max-height: min(88vh,860px); overflow: auto; border-radius: 26px; background: var(--white); box-shadow: 0 36px 110px rgba(0,0,0,.34); }
.project-modal__close { position: absolute; top: 14px; right: 14px; z-index: 4; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--navy); color: var(--white); font-size: 1.7rem; cursor: pointer; }
.project-modal__media { min-height: 100%; background: var(--gray-100); }
.project-modal__media img { width: 100%; height: 100%; min-height: 470px; object-fit: cover; }
.project-modal__content { padding: clamp(32px,4.5vw,58px); }
.project-modal__content h2 { margin: 17px 0 16px; font-size: clamp(1.8rem,3vw,2.85rem); }
.project-modal__facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 24px 0 28px; }
.project-modal__facts > div { padding: 15px; border-radius: 13px; background: var(--warm); }
.project-modal__facts span { display: block; color: var(--ink-soft); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.project-modal__facts strong { display: block; margin-top: 5px; color: var(--navy); font-family: var(--font-display); }
.project-modal__activities { margin-bottom: 26px; }
body.modal-open { overflow: hidden; }
html[data-theme="dark"] .project-modal__dialog { background: var(--page-surface); }
html[data-theme="dark"] .project-modal__facts > div { background: #122630; }
html[data-theme="dark"] .project-modal__facts strong { color: #f1f6f7; }

/* Mappa progetti: base senza etichette/POI, con soli marker Energyco. */
.projects-map { position: relative; min-height: 520px; overflow: hidden; border: 1px solid var(--gray-200); border-radius: 26px; background: #dfe8e9; box-shadow: var(--shadow-sm); }
.projects-map__fallback { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--navy); font-weight: 700; }
.project-map-pin { display: grid; place-items: center; width: 38px; height: 38px; border: 4px solid var(--white); border-radius: 50% 50% 50% 0; background: var(--yellow); color: var(--navy); box-shadow: 0 8px 20px rgba(16,32,42,.28); transform: rotate(-45deg); }
.project-map-pin::after { content: "E"; transform: rotate(45deg); font-family: var(--font-display); font-size: .78rem; font-weight: 900; }
.leaflet-tooltip { border: 0 !important; border-radius: 10px !important; background: var(--navy) !important; color: #fff !important; box-shadow: 0 8px 24px rgba(0,0,0,.18) !important; font-family: var(--font-body) !important; }
.leaflet-tooltip::before { border-top-color: var(--navy) !important; }

/* Contatti: quattro card, numero WhatsApp senza etichetta testuale. */
.contact-card-list { grid-template-rows: repeat(4,minmax(0,1fr)) !important; }
.contact-card--phone { cursor: default; }
.contact-card__primary-link { display: block; color: var(--navy); font-family: var(--font-display); font-weight: 750; }
.contact-card__secondary-link { display: inline-block; margin-top: 5px; color: var(--ink-soft); font-size: .88rem; }
.contact-card__secondary-link:hover { color: var(--navy); }
html[data-theme="dark"] .contact-card__primary-link { color: #f1f6f7; }
html[data-theme="dark"] .contact-card__secondary-link { color: #b8c7cd; }

@media (max-width: 1120px) {
  .team-grid--technical { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .team-grid--leadership { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 920px) {
  .service-accordion-card__summary { grid-template-columns: 1fr; }
  .service-accordion-card--reverse .service-accordion-card__media,
  .service-accordion-card--reverse .service-accordion-card__overview { order: initial; }
  .service-accordion-card__media { min-height: 320px; }
  .service-accordion-card__content .inline-list { grid-template-columns: 1fr; }
  .project-modal__dialog { grid-template-columns: 1fr; }
  .project-modal__media img { min-height: 280px; max-height: 340px; }
}
@media (max-width: 760px) {
  .project-grid--two,
  .team-grid--executive,
  .team-grid--leadership,
  .team-grid--technical,
  .team-grid--commercial { grid-template-columns: 1fr; max-width: none; }
  .project-modal { padding: 10px; }
  .project-modal__dialog { max-height: 94vh; border-radius: 19px; }
  .project-modal__content { padding: 27px 22px 30px; }
  .project-modal__facts { grid-template-columns: 1fr; }
  .projects-map { min-height: 430px; }
}