/* =========================================================
   BDG — Pagina PROFESSIONISTI
   Si appoggia a chi-siamo.css (container, eyebrow, titoli, sprite, card,
   percorso a tappe, galleria orizzontale). Qui solo i pezzi specifici (.pr-*).
   ========================================================= */

.pr-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 22px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none !important;
  transition: background-color .25s ease, color .25s ease, transform .25s cubic-bezier(.2,.7,.2,1);
}
.pr-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 16px;
  transition: transform .25s ease;
}
.pr-btn:hover { transform: translateY(-2px); }
.pr-btn:hover .pr-btn__icon { transform: translateX(2px); }
.pr-btn--primary { background: var(--cs-orange); color: #fff !important; box-shadow: 0 12px 24px -14px rgba(189, 31, 23, .8); }
.pr-btn--primary .pr-btn__icon { background: #fff; color: var(--cs-orange); }
.pr-btn--primary:hover { background: #BD1F17; }
.pr-btn--ghost { background: #fff; color: var(--cs-ink) !important; box-shadow: inset 0 0 0 1.5px rgba(29, 29, 27, .15); }
.pr-btn--ghost .pr-btn__icon { background: #F6F1EA; color: var(--cs-orange); }
.pr-btn--light { background: #fff; color: var(--cs-red) !important; }
.pr-btn--light .pr-btn__icon { background: var(--cs-orange); color: #fff; }
.pr-btn--outline-light { background: transparent; color: #fff !important; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55); }
.pr-btn--outline-light .pr-btn__icon { background: rgba(255, 255, 255, .16); color: #fff; }
.pr-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }

/* ---------- 1. HERO ---------- */
.pr-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(36px, 6vw, 64px) 0 clamp(60px, 8vw, 100px);
  background: linear-gradient(180deg, var(--cs-cream) 0%, #fff 100%);
}
.pr-hero__grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 960px) { .pr-hero__grid { grid-template-columns: 1.05fr .95fr; gap: 72px; } }
.pr-hero__badge {
  display: inline-block;
  margin-bottom: 20px;
  padding: 7px 16px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--cs-orange);
  color: var(--cs-orange);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.pr-hero__title {
  margin: 0;
  font-family: var(--cs-slab);
  font-size: clamp(40px, 9.5vw, 68px);
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--cs-ink);
}
.pr-hero__title span { display: block; color: var(--cs-orange); }
.pr-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}
.pr-trust li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--cs-ink);
}
.pr-trust li::before {
  content: "\2713";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--cs-yellow);
  color: var(--cs-red);
  font-size: 12px;
  font-weight: 800;
}
.pr-hero__media { position: relative; margin: 0 26px 30px 0; }
.pr-hero__photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 4.4;
  max-height: calc(100svh - 190px);
  object-fit: cover;
  border-radius: 28px;
  box-shadow: 0 34px 70px -34px rgba(60, 25, 5, .5);
}
.pr-hero__photo--small {
  position: absolute;
  left: -26px;
  bottom: -30px;
  width: 42%;
  aspect-ratio: 3 / 4;
  border: 6px solid #fff;
  border-radius: 20px;
  transform: rotate(-5deg);
}
.pr-hero__photo--wide { width: 56%; aspect-ratio: 4 / 3; transform: rotate(-4deg); }
/* card "fluttuante" con il plus principale */
.pr-hero__note {
  position: absolute;
  right: -26px;
  top: 9%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 12px 12px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 40px -22px rgba(60, 25, 5, .5);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--cs-ink);
}
.pr-hero__note small { display: block; font-weight: 500; color: var(--cs-muted); }
.pr-hero__note-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--cs-orange);
  color: #fff;
}
.pr-hero .cs-sprite--basil { right: -16px; bottom: 12%; transform: rotate(24deg); z-index: 2; }
@media (max-width: 959.98px) {
  .pr-hero__media { margin: 0 14px 34px 14px; }
  .pr-hero__note { right: -12px; }
  .pr-hero__photo--small { left: -12px; }
}

/* ---------- 2. PER CHI LAVORIAMO ---------- */
.pr-segments { padding: clamp(70px, 10vw, 130px) 0; }
.pr-segments__head { max-width: 640px; margin-bottom: 44px; }
.pr-segments__grid { display: grid; gap: 18px; }
@media (min-width: 960px) { .pr-segments__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.pr-segment {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  background: var(--cs-cream);
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease;
}
.pr-segment:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -34px rgba(60, 25, 5, .55); }
.pr-segment__media { margin: 0; overflow: hidden; aspect-ratio: 4 / 3; background: #fff; }
.pr-segment__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.pr-segment__media--contain img { object-fit: contain; padding: 14px; box-sizing: border-box; }
.pr-segment:hover .pr-segment__media img { transform: scale(1.05); }
.pr-segment__body { padding: 24px 24px 28px; }
.pr-segment__tag {
  display: inline-block;
  margin-bottom: 10px;
  font-family: var(--cs-slab);
  font-size: 14px;
  color: var(--cs-orange);
}
.pr-segment__title { margin: 0 0 8px; font-family: var(--cs-slab); font-size: 25px; line-height: 1.1; color: var(--cs-ink); }
.pr-segment__text { margin: 0; font-size: 16px; line-height: 1.6; color: var(--cs-muted); }

/* ---------- 3. VANTAGGI (riusa .cs-ingredients / .cs-card) ---------- */
.cs-cards--3 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .cs-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .cs-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cs-cards--3 .cs-card { min-height: 0; }
.cs-cards--3 .cs-card__icon { margin-bottom: 26px; }
.cs-cards--3 .cs-card__number { margin-top: 0; }
.pr-benefits .cs-sprite--pepper { right: -20px; top: 30px; transform: rotate(-20deg); }

/* ---------- 4. LA GAMMA ---------- */
.pr-range { padding: clamp(70px, 10vw, 130px) 0 clamp(40px, 6vw, 70px); }
.pr-range__head { display: grid; gap: 18px; align-items: end; margin-bottom: 40px; }
@media (min-width: 960px) { .pr-range__head { grid-template-columns: 1fr auto; } }
.pr-range__grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .pr-range__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.pr-product {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 20px 16px 16px;
  border-radius: 22px;
  background: var(--cs-cream);
  color: var(--cs-ink);
  text-decoration: none !important;
  transition: background-color .3s ease, transform .35s cubic-bezier(.2,.7,.2,1);
}
@media (min-width: 640px) {
  .pr-product { flex-direction: column; align-items: flex-start; padding: 22px 22px 26px; }
}
.pr-product img { width: 84px; height: 84px; flex: 0 0 auto; object-fit: contain; border-radius: 50%; background: #fff; }
@media (min-width: 640px) { .pr-product img { width: 100%; height: auto; aspect-ratio: 1; border-radius: 18px; } }
.pr-product__title { display: block; font-family: var(--cs-slab); font-size: 21px; line-height: 1.15; }
.pr-product__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 14px; font-weight: 700; color: var(--cs-orange); }
.pr-product:hover { background: #F3E9DD; transform: translateY(-4px); }
.pr-range__note { margin: 26px 0 0; font-size: 15px; color: var(--cs-muted); }

/* ---------- 5. COME FUNZIONA (riusa .cs-steps) ---------- */
.pr-process { padding: clamp(70px, 10vw, 130px) 0; background: var(--cs-cream); }
.pr-process__head { max-width: 640px; margin-bottom: 56px; }
.pr-step__num {
  display: block;
  margin-bottom: 6px;
  font-family: var(--cs-slab);
  font-size: 13px;
  color: var(--cs-orange);
}

/* ---------- 7. CONTATTO ---------- */
.pr-contact { padding: clamp(60px, 9vw, 120px) 0; }
.pr-contact__box {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 40px;
  padding: clamp(34px, 6vw, 72px) clamp(22px, 5vw, 72px);
  border-radius: 32px;
  background: var(--cs-red);
  color: #fff;
}
@media (min-width: 960px) { .pr-contact__box { grid-template-columns: 1.2fr 1fr; align-items: center; gap: 64px; } }
.pr-contact__box::before {
  content: "";
  position: absolute;
  right: -120px;
  top: -120px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(235, 207, 71, .35), rgba(235, 207, 71, 0) 70%);
  pointer-events: none;
}
.pr-contact .cs-eyebrow { color: var(--cs-yellow); }
.pr-contact .cs-title { color: #fff; }
.pr-contact .cs-title em { color: var(--cs-yellow); }
.pr-contact .cs-lead { color: rgba(255, 255, 255, .88); }
.pr-contact__list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pr-contact__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fff !important;
  text-decoration: none !important;
  transition: background-color .25s ease;
}
a.pr-contact__item:hover { background: rgba(255, 255, 255, .17); }
.pr-contact__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 12px;
  background: var(--cs-yellow);
  color: var(--cs-red);
}
.pr-contact__label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .65); }
.pr-contact__value { display: block; font-size: 16px; font-weight: 600; word-break: break-word; }
.pr-contact .cs-sprite--tomato { left: -30px; bottom: -34px; transform: rotate(14deg); }

@media (prefers-reduced-motion: reduce) {
  .pr-btn, .pr-btn__icon, .pr-segment, .pr-segment__media img, .pr-product, .pr-contact__item { transition: none; }
  .pr-segment:hover, .pr-product:hover, .pr-btn:hover { transform: none; }
}