/**
 * OSM Team - stile front office
 *
 * Tutte le personalizzazioni (colori, larghezza massima, raggio, dimensione
 * della foto) si fanno dalle variabili CSS del blocco .osmteam qui sotto.
 */

/* Poppins self-hosted (SIL Open Font License 1.1 - vedi views/fonts/OFL.txt).
   Nessuna chiamata esterna: i file sono serviti dal dominio del sito. */

@font-face {
  font-family: 'OSM Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/poppins-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'OSM Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/poppins-latin-600-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'OSM Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/poppins-latin-700-normal.woff2') format('woff2');
}

.osmteam,
.osmteam-preview {
  /* Tipografia */
  --osmteam-font: 'OSM Poppins', 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Colori */
  --osmteam-accent: #b22d6c;
  --osmteam-accent-2: #d8749f;
  --osmteam-title: #1b2233;
  --osmteam-text: #5a6377;
  --osmteam-muted: #7b8496;
  --osmteam-hairline: rgba(178, 45, 108, 0.16);
  --osmteam-kicker: #b22d6c;
  --osmteam-btn: #b22d6c;
  --osmteam-btn-hover: #92225a;

  /* Geometria */
  --osmteam-max-width: 1140px;
  --osmteam-radius: 18px;
  --osmteam-media-width: 300px;
  --osmteam-min-height: 360px;
  --osmteam-content-padding: 2rem 2.5rem;

  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
  max-width: var(--osmteam-max-width);
  margin: 0 auto;
  font-family: var(--osmteam-font);
}

.osmteam .osmteam-card,
.osmteam .osmteam-card__name,
.osmteam .osmteam-card__role,
.osmteam .osmteam-card__text,
.osmteam .osmteam-card__contact,
.osmteam .osmteam-card__contact a {
  font-family: var(--osmteam-font);
}

/* --------------------------------------------------------------- Card */

.osmteam-card {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: stretch;
  min-height: var(--osmteam-min-height);
  overflow: hidden;
  border-radius: var(--osmteam-radius);
  background:
    linear-gradient(115deg, #ffffff 0%, #fffcfd 45%, #fdf5f8 100%);
  box-shadow:
    0 1px 2px rgba(27, 34, 51, 0.04),
    0 18px 40px -26px rgba(74, 28, 52, 0.35);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.osmteam-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 1px 2px rgba(27, 34, 51, 0.04),
    0 26px 50px -26px rgba(74, 28, 52, 0.4);
}

.osmteam-card--reverse {
  flex-direction: row-reverse;
  background:
    linear-gradient(245deg, #ffffff 0%, #fffbfd 45%, #fdf4f8 100%);
}

/* Cerchi decorativi morbidi sul lato della foto */

.osmteam-card__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(52% 92% at 97% 4%, rgba(214, 120, 166, 0.22) 0%, rgba(214, 120, 166, 0) 66%),
    radial-gradient(42% 74% at 82% 112%, rgba(178, 45, 108, 0.11) 0%, rgba(178, 45, 108, 0) 68%);
}

.osmteam-card--reverse .osmteam-card__glow {
  background:
    radial-gradient(52% 92% at 3% 4%, rgba(178, 45, 108, 0.15) 0%, rgba(178, 45, 108, 0) 66%),
    radial-gradient(42% 74% at 18% 112%, rgba(214, 120, 166, 0.20) 0%, rgba(214, 120, 166, 0) 68%);
}

/* -------------------------------------------------------------- Media */

/* La foto e a filo con il bordo della card: stessa altezza, nessun margine.
   Gli angoli seguono il raggio della card grazie a overflow:hidden. */

.osmteam-card__media {
  position: relative;
  z-index: 1;
  flex: 0 0 var(--osmteam-media-width);
  max-width: var(--osmteam-media-width);
  align-self: stretch;
  overflow: hidden;
  background: #f6eef2;
}

.osmteam-card__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.6s ease;
}

.osmteam-card:hover .osmteam-card__img {
  transform: scale(1.035);
}

/* ------------------------------------------------------------ Content */

.osmteam-card__content {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--osmteam-content-padding);
}

.osmteam-card__header {
  margin-bottom: 1.1rem;
}

.osmteam-card__name {
  margin: 0 0 0.4rem;
  font-size: 1.6rem;
  line-height: 1.2;
  font-weight: 700;
  color: var(--osmteam-title);
  letter-spacing: -0.015em;
}

.osmteam-card__role {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--osmteam-accent);
}

.osmteam-card__text {
  color: var(--osmteam-text);
  font-size: 0.9375rem;
  line-height: 1.7;
}

.osmteam-card__text p {
  margin: 0 0 0.8rem;
}

.osmteam-card__text p:last-child {
  margin-bottom: 0;
}

/* ----------------------------------------------------------- Contatti */

.osmteam-card__contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.75rem;
  margin: 1.25rem 0 0;
  padding: 1.1rem 0 0;
  list-style: none;
  border-top: 1px solid var(--osmteam-hairline);
}

.osmteam-card__contact {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.4;
}

.osmteam-card__contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--osmteam-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.osmteam-card__contact a:hover,
.osmteam-card__contact a:focus {
  color: var(--osmteam-accent);
  text-decoration: none;
}

.osmteam-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: var(--osmteam-accent);
  background: rgba(178, 45, 108, 0.09);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.osmteam-ico svg {
  width: 16px;
  height: 16px;
}

.osmteam-card__contact a:hover .osmteam-ico,
.osmteam-card__contact a:focus .osmteam-ico {
  color: #ffffff;
  background: var(--osmteam-accent);
}

/* LinkedIn: icona ufficiale di Font Awesome 6, gia caricata dal tema warehouse.
   Nel tpl: <i class="fa-brands fa-linkedin"></i> */

.osmteam-ico i {
  line-height: 1;
}

.osmteam-card__contact--linkedin .osmteam-ico {
  color: #0a66c2;
  background: rgba(10, 102, 194, 0.1);
  font-size: 1.05rem;
}

.osmteam-card__contact--linkedin a:hover .osmteam-ico,
.osmteam-card__contact--linkedin a:focus .osmteam-ico {
  color: #ffffff;
  background: #0a66c2;
}

.osmteam-card__contact--linkedin a:hover,
.osmteam-card__contact--linkedin a:focus {
  color: #0a66c2;
}

.osmteam-card__contact-label {
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------ Comparsa soft */

.osmteam-card.osmteam-card--animate {
  opacity: 0;
  transform: translateY(18px);
}

.osmteam-card.osmteam-card--visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

@media (prefers-reduced-motion: reduce) {
  .osmteam-card,
  .osmteam-card__img {
    transition: none !important;
  }

  .osmteam-card.osmteam-card--animate {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------- Responsive */

@media (max-width: 991px) {
  .osmteam {
    --osmteam-media-width: 240px;
    --osmteam-min-height: 320px;
    --osmteam-content-padding: 1.6rem 1.9rem;
  }

  .osmteam-card__name {
    font-size: 1.4rem;
  }

  .osmteam-card__contacts {
    gap: 0.5rem 1.25rem;
  }
}

@media (max-width: 767px) {
  .osmteam {
    --osmteam-media-width: 100%;
    --osmteam-min-height: 0;
    --osmteam-content-padding: 1.6rem 1.5rem 1.7rem;

    /* Le card non toccano i bordi dello schermo */
    box-sizing: border-box;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .osmteam-card,
  .osmteam-card--reverse {
    flex-direction: column;
  }

  /* Foto a tutta larghezza, a filo con i bordi della card */

  .osmteam-card__media {
    flex: 0 0 auto;
    max-width: none;
    width: 100%;
    height: 420px;
  }

  .osmteam-card:hover {
    transform: none;
  }

  /* Testi piu leggibili su schermi piccoli */

  .osmteam-card__name {
    font-size: 1.625rem;
  }

  .osmteam-card__role {
    font-size: 1rem;
    letter-spacing: 0.05em;
  }

  .osmteam-card__text {
    font-size: 1.125rem;
    line-height: 1.6;
  }

  .osmteam-card__contacts {
    flex-direction: column;
    gap: 0.85rem;
    padding-top: 1.25rem;
  }

  .osmteam-card__contact {
    font-size: 1.0625rem;
  }

  /* Testo sempre centrato rispetto all'icona, anche quando va a capo */

  .osmteam-card__contact a {
    align-items: center;
  }

  .osmteam-ico {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
  }

  .osmteam-ico svg {
    width: 20px;
    height: 20px;
  }

  .osmteam-card__contact--linkedin .osmteam-ico {
    font-size: 1.2rem;
  }
}

/* ==================================================================== */
/* Anteprima team (hook displayTeamPreview)                             */
/* ==================================================================== */

.osmteam-preview {
  --osmteam-preview-min-col: 210px;
  gap: 2.25rem;
}

.osmteam-preview__head {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.osmteam-preview__kicker {
  margin: 0 0 0.6rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--osmteam-kicker);
}

.osmteam-preview__title {
  margin: 0 0 0.6rem;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--osmteam-title);
}

.osmteam-preview__sub {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--osmteam-text);
}

/* ------------------------------------------------------------ Griglia */

.osmteam-preview__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--osmteam-preview-min-col), 1fr));
  gap: 1.4rem;
}

.osmteam-preview__item {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  border-radius: 16px;
  background: #f6eef2;
  text-decoration: none;
  box-shadow: 0 18px 36px -26px rgba(74, 28, 52, 0.6);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.osmteam-preview__item:hover,
.osmteam-preview__item:focus {
  transform: translateY(-4px);
  text-decoration: none;
  box-shadow: 0 26px 46px -24px rgba(74, 28, 52, 0.65);
}

.osmteam-preview__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.6s ease;
}

.osmteam-preview__img--empty {
  background: linear-gradient(150deg, #f6e7ee, #efd8e3);
}

.osmteam-preview__item:hover .osmteam-preview__img,
.osmteam-preview__item:focus .osmteam-preview__img {
  transform: scale(1.04);
}

.osmteam-preview__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 22, 45, 0) 42%, rgba(20, 22, 45, 0.84) 100%);
}

.osmteam-preview__caption {
  position: absolute;
  left: 1.1rem;
  right: 1.1rem;
  bottom: 1rem;
  display: flex;
  flex-direction: column;
  color: #ffffff;
}

.osmteam-preview__name {
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.25;
}

.osmteam-preview__role {
  margin-top: 0.25rem;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.86;
}

/* ---------------------------------------------------------------- CTA */

.osmteam-preview__actions {
  text-align: center;
}

.osmteam-preview__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.7rem;
  border-radius: 999px;
  background: var(--osmteam-btn);
  color: #ffffff!important;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 14px 26px -14px rgba(178, 45, 108, 0.9);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.osmteam-preview__btn:hover,
.osmteam-preview__btn:focus {
  background: var(--osmteam-btn-hover);
  color: #ffffff!important;
  text-decoration: none;
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .osmteam-preview__item,
  .osmteam-preview__img,
  .osmteam-preview__btn {
    transition: none !important;
  }
}

/* --------------------------------------------------------- Responsive */

@media (max-width: 991px) {
  .osmteam-preview {
    --osmteam-preview-min-col: 180px;
  }

  .osmteam-preview__title {
    font-size: 1.75rem;
  }
}

/* Su mobile la griglia diventa un carosello a scorrimento orizzontale */

@media (max-width: 767px) {
  .osmteam-preview {
    box-sizing: border-box;
    gap: 1.75rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .osmteam-preview__title {
    font-size: 1.65rem;
  }

  .osmteam-preview__sub {
    font-size: 1.0625rem;
  }

  .osmteam-preview__grid {
    display: flex;
    gap: 0.9rem;
    margin-left: -1rem;
    margin-right: -1rem;
    padding: 0.25rem 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 1rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .osmteam-preview__grid::-webkit-scrollbar {
    display: none;
  }

  .osmteam-preview__item {
    flex: 0 0 72%;
    max-width: 72%;
    scroll-snap-align: start;
  }

  .osmteam-preview__item:hover {
    transform: none;
  }

  .osmteam-preview__name {
    font-size: 1.1rem;
  }

  .osmteam-preview__role {
    font-size: 0.78rem;
  }

  .osmteam-preview__btn {
    font-size: 1rem;
    padding: 0.95rem 1.9rem;
  }
}