/* ============================================================
   Vacanze Studio college pages — booking box, price box text and
   «Torna alle destinazioni» (client, 18 Oct 2026).
   Templates: sections/pages/colleges/content-vs-booking.php
              sections/pages/colleges/content-vs-back.php
              sections/pages/prices/content-study-trips.php (vs_intro)
   Plain CSS, no build step; the colours are the «Campus» block's
   (css/college-overview.css), the highlights in the site's pink
   instead of the mockup's blue.
   Loaded by inc/vs-college-booking/vs-college-booking.php.
   ============================================================ */

.stx-vsb,
.stx-vsb-price,
.stx-vsb-back {
  /* Study Tours palette only: black + magenta, neutral greys (ST-0052). */
  --vsb-black: #18191a;
  --vsb-ink: #18191a;
  --vsb-muted: #848484;
  --vsb-pink: #cc0f7a;
  --vsb-band: #f7f7f7;
  --vsb-line: #e8e8e8;
  --vsb-radius: 16px;
  font-family: var(--stx-font, "DM Sans", sans-serif);
}

.stx-vsb-hl { color: var(--vsb-pink); font-weight: 600; }
a.stx-vsb-hl { text-decoration: none; }
a.stx-vsb-hl:hover { text-decoration: underline; }

.stx-vsb :focus-visible,
.stx-vsb-price :focus-visible,
.stx-vsb-back :focus-visible {
  outline: 2px solid var(--vsb-pink);
  outline-offset: 3px;
  border-radius: 6px;
}

/* --- «Torna alle destinazioni» ------------------------------ */

.stx-vsb-back { margin-bottom: 12px; }
.stx-vsb-back__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--vsb-black);
  text-decoration: none;
}
.stx-vsb-back__link:hover { color: var(--vsb-pink); }
.stx-vsb-back__icon { width: 14px; height: 14px; fill: currentColor; flex: none; }

/* --- Booking box ------------------------------------------- */

.stx-vsb { padding: 60px 0; color: var(--vsb-ink); }
.stx-vsb__grid { display: grid; gap: 32px; }

.stx-vsb__kicker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vsb-muted);
}
.stx-vsb__rule { width: 56px; height: 1px; background: currentColor; opacity: .6; }
.stx-vsb__place { color: var(--vsb-pink); }

.stx-vsb__title {
  margin: 0 0 16px;
  font-size: clamp(1.602rem, 0.858vi + 1.387rem, 2.074rem);
  line-height: 1.25;
  font-weight: 400;
  color: var(--vsb-black);
}
.stx-vsb__text { margin: 0 0 24px; font-size: 17px; line-height: 1.55; color: var(--vsb-ink); }

.stx-vsb__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 882 / 366;
  object-fit: cover;
  border-radius: var(--vsb-radius);
}

.stx-vsb__features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 12px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
.stx-vsb__features li { display: flex; flex-direction: column; gap: 4px; padding: 0 6px; }
.stx-vsb__features strong { font-size: 15px; line-height: 1.25; font-weight: 600; color: var(--vsb-black); }
.stx-vsb__features span { font-size: 13px; line-height: 1.35; color: var(--vsb-muted); }
/* Phone: two per row, the fifth centred on its own row. */
.stx-vsb__features li:last-child:nth-child(odd) { grid-column: 1 / -1; }

.stx-vsb__card {
  align-self: start;
  padding: 28px 22px;
  background: var(--vsb-band);
  border: 1px solid var(--vsb-line);
  border-radius: var(--vsb-radius);
}
.stx-vsb__card-kicker {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vsb-ink);
}
.stx-vsb__card-lead { margin: 0 0 10px; font-size: 16px; line-height: 1.5; color: var(--vsb-ink); }

.stx-vsb__points { margin: 0 0 24px; padding: 0; list-style: none; }
.stx-vsb__points li {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 8px;
  padding: 18px 0;
  border-bottom: 1px solid var(--vsb-line);
}
.stx-vsb__num { font-size: 20px; line-height: 1.2; font-weight: 400; color: var(--vsb-muted); }
.stx-vsb__point-title { display: block; margin-bottom: 4px; font-size: clamp(1.125rem, 0.136vi + 1.091rem, 1.2rem); line-height: 1.25; font-weight: 400 !important; color: var(--vsb-black); }
.stx-vsb__point-text { display: block; font-size: 15px; line-height: 1.5; color: var(--vsb-muted); }

.stx-vsb__button.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 16px 24px;
  border-radius: 999px;
  font-size: 18px;
}
.stx-vsb__arrow { width: 14px; height: 14px; fill: currentColor; flex: none; }

@media (min-width: 768px) {
  .stx-vsb__title { font-size: clamp(1.602rem, 0.858vi + 1.387rem, 2.074rem); line-height: 1.25; }
  .stx-vsb__text { font-size: 19px; }
  .stx-vsb__features { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
  .stx-vsb__features li:last-child:nth-child(odd) { grid-column: auto; }
  .stx-vsb__features li + li { border-left: 1px solid var(--vsb-line); }
}

@media (min-width: 1024px) {
  .stx-vsb { padding: 80px 0; }
  .stx-vsb__grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 32px; align-items: start; }
  .stx-vsb__title { font-size: clamp(1.602rem, 0.858vi + 1.387rem, 2.074rem); line-height: 1.25; }
  .stx-vsb__card { padding: 36px 32px; }
}

/* --- Price box text ---------------------------------------- */
/* ST-0055: only the brand's black and magenta (tailwind.config.js
   `black` / `primary-500`), not the booking box's navy. */

.stx-vsb-price { --vsb-black: #18191a; max-width: 900px; color: var(--vsb-black); }
.stx-vsb-price__title {
  margin: 0 0 22px;
  font-size: clamp(1.424rem, 0.553vi + 1.286rem, 1.728rem);
  line-height: 1.25;
  font-weight: 400;
  color: var(--vsb-black);
}
.stx-vsb-price__lead,
.stx-vsb-price__actions { margin: 0 0 20px; font-size: 19px; line-height: 1.6; }
.stx-vsb-price__lead strong:not(.stx-vsb-hl),
.stx-vsb-price__actions strong { font-weight: 600; }
.stx-vsb-price__help { margin: 0; font-size: 17px; }

/* ST-0056: under «Richiedi il preventivo e prenota», centred, the text of the payment the listino shows (Smart
   Pay, or Classic Pay once chosen), in the client's lines from a tablet up (her screenshot, «1:1»). */
.stx-vsb-pay { max-width: 760px; margin: 24px auto 0; }
.stx-vsb-pay__text { margin: 0; line-height: 1.6; }
.stx-vsb-pay__text[hidden] { display: none; }
.stx-vsb-pay__text strong { font-weight: 600; }
.stx-vsb-pay__text br { display: none; }
.stx-vsb-pay__text strong + br { display: inline; }
.stx-vsb-price__lead br { display: none; }

@media (min-width: 768px) {
  .stx-vsb-price__lead br { display: inline; }
  .stx-vsb-pay__text br { display: inline; }
}

@media (min-width: 1024px) {
  .stx-vsb-price__title { font-size: clamp(1.602rem, 0.858vi + 1.387rem, 2.074rem); line-height: 1.25; }
  .stx-vsb-price__lead,
  .stx-vsb-price__actions { font-size: 22px; }
  .stx-vsb-price__help { font-size: 19px; }
}