/* La storia del team, sul fondo a griglia del riferimento. */
.team-background {
  --team-content-width: min(calc((100% - 84px) * .92), calc(1426px * .92));
  background-color: #fafafa;
  background-image: linear-gradient(#cfcfcf 1px, transparent 1px),
    linear-gradient(90deg, #cfcfcf 1px, transparent 1px);
  background-size: 43.5px 43.5px;
  background-position: center 24px;
}

.team-story {
  position: relative;
  overflow: hidden;
  padding: 72px 0 78px;
  color: #171717;
  text-align: center;
  scroll-margin-top: 24px;
}

.team-story-inner {
  position: relative;
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) 180px;
  grid-template-areas: ". heading ." "left copy right";
  column-gap: 32px;
  width: var(--team-content-width);
  margin-inline: auto;
}

.team-story-heading {
  grid-area: heading;
  justify-self: center;
  position: relative;
  display: inline-block;
  margin-bottom: 20px;
}

.team-story h2 {
  margin: 0;
  font-size: clamp(38px, 5.8vw, 54px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.035em;
}

.team-story-copy {
  grid-area: copy;
  align-self: center;
  position: relative;
  z-index: 1;
  width: 100%;
  margin-inline: auto;
  font-size: 23px;
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -.025em;
}

.team-story-copy p { margin: 0 0 23px; }
.team-story-copy p:last-child { margin-bottom: 0; }
.team-story-copy strong { font-weight: 700; }
.team-story-copy em {
  font-family: "Playfair Display", "Times New Roman", serif;
  font-size: 1.08em;
  font-weight: 400;
  line-height: 1.1;
}

.team-story-star {
  position: absolute;
  pointer-events: none;
  object-fit: contain;
}
.team-story-star-heading { width: 54px; height: 54px; top: -4px; right: -70px; }
.team-story-star-small { width: 23px; height: 23px; top: -8px; right: -80px; }
.team-story-star-right { width: 62px; height: 62px; top: 12px; right: 48px; }
.team-story-star-bottom { width: 82px; height: 82px; bottom: -80px; left: 170px; }

@media (max-width: 760px) {
  .team-story { padding: 56px 0 80px; }
  .team-story-heading { margin-bottom: 20px; }
  .team-story-copy { font-size: 23px; line-height: 1.4; }
  .team-story-star-right { width: 42px; height: 42px; top: auto; right: -10px; bottom: -62px; }
  .team-story-star-bottom { width: 58px; height: 58px; left: 72px; bottom: -74px; }
}

@media (max-width: 420px) {
  .team-background { background-size: 36px 36px; }
  .team-story-copy { font-size: 23px; }
  .team-story-star-heading { width: 42px; height: 42px; right: -49px; }
  .team-story-star-small { width: 18px; height: 18px; right: -58px; }
}

/* Profili ai due lati del testo, con nomi ad arco e ruoli originali. */
.team-members { padding: 18px 0 60px; color: #171717; }
.team-members-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 30px;
  width: var(--team-content-width);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  text-align: center;
}
.team-member { min-width: 0; }
.team-member-visual {
  position: relative;
  width: 180px;
  height: 158px;
  margin-inline: auto;
}
.team-member-name { position: absolute; inset: 0; margin: 0; }
.team-member-name svg { display: block; width: 100%; height: 180px; overflow: visible; }
.team-member-name text {
  fill: currentColor;
  font-family: "Playfair Display", "Times New Roman", serif;
  font-size: 19px;
  font-weight: 400;
  font-style: italic;
}
.team-member-portrait {
  position: absolute;
  top: 34px;
  left: 28px;
  display: grid;
  place-items: center;
  width: 124px;
  height: 124px;
  overflow: hidden;
}
.team-member-portrait img { width: 100%; height: 100%; object-fit: contain; }
.team-member-portrait {
  transition: transform .25s ease, filter .25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .team-member:hover .team-member-portrait {
    transform: scale(1.06);
    filter: drop-shadow(0 0 10px rgb(41 35 97 / .3));
  }
}
@media (prefers-reduced-motion: reduce) {
  .team-member-portrait { transition: none; }
  .team-member:hover .team-member-portrait { transform: none; }
}
.team-member-role { margin: 6px 0 0; font-size: 14px; font-weight: 700; line-height: 1.15; }

/* Galaxy S25 / S25 Ultra: hide entire profiles, including names and roles. */
.team-without-portraits .team-story .team-members-grid { display: none; }

.team-story .team-members-grid {
  grid-template-columns: minmax(0, 1fr);
  align-content: space-between;
  gap: 24px;
  width: 100%;
}
.team-members-left { grid-area: left; }
.team-members-right { grid-area: right; }

@media (max-width: 1100px) {
  .team-story-inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "heading" "copy" "left" "right";
    row-gap: 20px;
  }
  .team-story-heading { margin-bottom: 0; }
  .team-story .team-members-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .team-story-star-right { top: 0; right: 0; bottom: auto; }
  .team-story-copy br { display: none; }
}

@media (max-width: 640px) {
  .team-story .team-members-grid { grid-template-columns: minmax(0, 1fr); }
  .team-members-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 8px; }
  .team-member-visual { width: 160px; height: 141px; }
  .team-member-name svg { height: 160px; }
  .team-member-portrait { top: 30px; left: 25px; width: 110px; height: 110px; }
  .team-member-role { font-size: 13px; }
}
@media (max-width: 359px) {
  .team-members-grid { grid-template-columns: 1fr; }
}

/* Stessa larghezza e stessi margini della sezione contatti. */
.team-background .coffee-contact > .shell { width: var(--team-content-width); }
@media (max-width: 1000px) {
  .team-background { --team-content-width: calc(100% - 48px); }
}
@media (max-width: 720px) {
  .team-background { --team-content-width: calc(100% - 44px); }
}