/* ============================================================================
 * content.css — shared page-body building blocks (hero, contact bar, two-column
 * card layout, static map, promo band + glass stats) for the Sella Farmaceutici
 * owned pages (contatti, and — per docs/design-baseline/README.md — the same
 * hero/section/card/stats vocabulary reused by farmacovigilanza/lavora-con-noi).
 *
 * PROVENANCE
 *   Source: docs/design-baseline/contatti-body.demo.html (Tailwind utility
 *   bundles on the demo /contatti markup), re-authored as stable semantic
 *   classes the way chrome.css re-authors the header/footer. Token values from
 *   docs/design-baseline/page-tokens.demo.css, promoted into base.css's :root.
 *   base.css must load BEFORE this file (tokens, preflight, .glass/.noise-overlay).
 * ============================================================================ */

/* ---------------------------------------------------------------- hero --- */

.page-hero {
  position: relative;
  height: 45vh;
  min-height: 320px;
  max-height: 420px;
  overflow: hidden;
}
.page-hero__image {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center 30%;
}
/* per-page focal point: contatti/lavora crop at center 30% (default above);
 * farmacovigilanza is object-center in the demo. */
.page-hero__image--center {
  object-position: center;
}
.page-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    hsl(var(--foreground) / .7) 0%,
    hsl(var(--foreground) / .3) 55%,
    transparent 100%
  );
}
.page-hero__inner {
  position: relative;
  z-index: 10;
  margin-inline: auto;
  display: flex;
  height: 100%;
  max-width: var(--max-width);
  align-items: flex-end;
  padding: 0 1.5rem 2.5rem;
}
.page-hero__eyebrow {
  margin-bottom: .5rem;
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: hsl(var(--primary-foreground) / .6);
}
.page-hero__title {
  max-width: 32rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -.025em;
  color: hsl(var(--primary-foreground));
}

/* ---------------------------------------------------------- contact bar --- */

.contact-bar {
  border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  padding: 2rem 0;
}
.contact-bar__inner {
  margin-inline: auto;
  max-width: var(--max-width);
  padding: 0 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
}
.contact-bar__items {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.contact-bar__label {
  display: block;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: hsl(var(--muted-foreground));
}
.contact-bar__value {
  margin-top: .125rem;
  display: block;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: hsl(var(--foreground));
  text-decoration: none;
  transition: color .15s;
}
.contact-bar__value:hover {
  color: hsl(var(--primary));
}
.contact-bar__social {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.contact-bar__social-icon {
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid hsl(var(--border));
  color: hsl(var(--muted-foreground));
  transition: all .15s;
}
.contact-bar__social-icon:hover {
  border-color: hsl(var(--primary));
  color: hsl(var(--primary));
  background: hsl(var(--primary) / .05);
}
.contact-bar__social-icon svg {
  height: 1rem;
  width: 1rem;
}

/* ------------------------------------------------------- two-column --- */

.contact-columns {
  background: hsl(var(--secondary));
  padding: 3.5rem 0;
}
.contact-columns__inner {
  margin-inline: auto;
  max-width: var(--max-width);
  padding: 0 1.5rem;
}
.contact-columns__grid {
  display: grid;
  gap: 1.5rem;
}
.contact-columns__col--info {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* card surface shared by the address card + the form card */
.info-card,
.form-card {
  border-radius: 1.5rem;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  box-shadow: var(--shadow-sm);
  padding: 2rem;
}

.info-card__header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.info-card__icon {
  display: flex;
  height: 2.75rem;
  width: 2.75rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  background: hsl(var(--primary) / .1);
}
.info-card__icon svg {
  height: 1.25rem;
  width: 1.25rem;
  color: hsl(var(--primary));
}
.info-card__address {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: hsl(var(--foreground));
}
.info-card__fiscal {
  display: flex;
  flex-direction: column;
  gap: .375rem;
  font-family: var(--font-body);
  font-size: 13px;
  color: hsl(var(--muted-foreground));
}
.info-card__fiscal p {
  margin: 0;
}
.info-card__hours {
  margin-top: 1.25rem;
  display: flex;
  align-items: center;
  gap: .625rem;
  border-radius: .5rem;
  background: hsl(var(--primary) / .05);
  padding: .75rem 1rem;
}
.info-card__hours svg {
  height: 1rem;
  width: 1rem;
  color: hsl(var(--primary));
  flex-shrink: 0;
}
.info-card__hours span {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: hsl(var(--foreground));
}

/* Static map placeholder (decision 2026-07-09: no Google Maps iframe/third-party
 * request before consent — see the TODO comment on the markup). Mirrors the
 * demo's iframe frame (rounded-2xl border shadow-sm) with a self-contained,
 * map-like muted surface instead of a live embed. */
.static-map {
  flex: 1;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  overflow: hidden;
  border-radius: 1.5rem;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--muted));
  box-shadow: var(--shadow-sm);
  padding: 2rem;
  text-align: center;
}
.static-map__icon {
  display: flex;
  height: 3rem;
  width: 3rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: hsl(var(--primary) / .1);
  margin-bottom: .5rem;
}
.static-map__icon svg {
  height: 1.5rem;
  width: 1.5rem;
  color: hsl(var(--primary));
}
.static-map__label {
  margin: 0;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: hsl(var(--foreground));
}
.static-map__link {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: hsl(var(--primary));
  text-decoration: none;
}
.static-map__link:hover {
  text-decoration: underline;
}

.form-card__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -.025em;
  color: hsl(var(--foreground));
}
.form-card__intro {
  margin-top: .5rem;
  font-family: var(--font-body);
  font-size: 12px;
  color: hsl(var(--muted-foreground));
}
.form-card__back {
  margin-top: .5rem;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-family: var(--font-body);
  font-size: 12px;
  color: hsl(var(--primary));
  transition: color .15s;
}
.form-card__back:hover {
  text-decoration: underline;
}
.form-card__footnote {
  margin-top: 1rem;
  font-family: var(--font-body);
  font-size: 11px;
  color: hsl(var(--muted-foreground));
}
.form-card__footnote a {
  color: hsl(var(--primary));
  text-decoration: none;
}
.form-card__footnote a:hover {
  text-decoration: underline;
}

/* ----------------------------------------------------------- promo band --- */

.promo-band {
  padding: 3.5rem 0;
}
.promo-band__inner {
  position: relative;
  z-index: 10;
  margin-inline: auto;
  max-width: var(--max-width);
  padding: 0 1.5rem;
}
.promo-band__grid {
  display: grid;
  align-items: center;
  gap: 2.5rem;
}
.promo-band__eyebrow {
  margin-bottom: .5rem;
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: hsl(var(--primary-foreground) / .5);
}
.promo-band__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -.025em;
  color: hsl(var(--primary-foreground));
}
.promo-band__text {
  margin-top: .75rem;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.6;
  color: hsl(var(--primary-foreground) / .6);
}
.promo-band__benefits {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.promo-band__benefits li {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-body);
  font-size: 12px;
  color: hsl(var(--primary-foreground) / .8);
}
.promo-band__benefits svg {
  height: .875rem;
  width: .875rem;
  color: hsl(var(--blue-electric));
  flex-shrink: 0;
}
.promo-band__cta {
  margin-top: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border-radius: .5rem;
  background: hsl(var(--primary-foreground));
  padding: .75rem 1.5rem;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: hsl(var(--foreground));
  text-decoration: none;
  box-shadow: var(--shadow-md);
  transition: all .15s;
}
.promo-band__cta:hover {
  box-shadow: var(--shadow-lg);
  filter: brightness(.95);
}
.promo-band__cta svg {
  height: .875rem;
  width: .875rem;
}

.promo-band__stats {
  display: none;
}

.stat-tile {
  border-radius: 1rem;
  padding: 1.25rem;
  text-align: center;
}
.stat-tile__value {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: hsl(var(--primary-foreground));
}
.stat-tile__label {
  margin-top: .25rem;
  font-family: var(--font-body);
  font-size: 11px;
  color: hsl(var(--primary-foreground) / .5);
}

/* ------------------------------------------------- responsive (Tailwind) --- */

/* sm: >= 640px — contact bar goes horizontal */
@media (min-width: 640px) {
  .contact-bar__inner {
    flex-direction: row;
    align-items: center;
  }
  .contact-bar__items {
    flex-direction: row;
    gap: 3rem;
  }
}

/* md: >= 768px — hero title steps up before the lg breakpoint (matches demo's
 * md:text-3xl lg:text-4xl step). MUST precede the lg block below so the lg size
 * wins at >= 1024px (equal specificity → later source wins). */
@media (min-width: 768px) {
  .page-hero__title {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
  .promo-band__title {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

/* lg: >= 1024px — two-column layouts split; promo stats become visible */
@media (min-width: 1024px) {
  .page-hero__inner,
  .contact-bar__inner,
  .contact-columns__inner,
  .promo-band__inner,
  .stats-band__inner,
  .jobs-content__inner {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .page-hero__title {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
  .contact-columns {
    padding: 5rem 0;
  }
  .contact-columns__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .promo-band {
    padding: 5rem 0;
  }
  .promo-band__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4rem;
  }
  .promo-band__stats {
    display: block;
  }
  .promo-band__stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
  }
}

/* ================================================================
 * /farmacovigilanza — page-specific additions (Trello ltcwU4o2 / yyC4tzDy)
 *
 * Reuses .contact-columns / .contact-columns__inner / .contact-columns__grid
 * (the bg-secondary two-column section) and .contact-form__* (form.css) for
 * the widget chrome. New rules below cover only what's genuinely new: the
 * regulatory-editorial prose column, the "Modulo Segnalazioni" card's own
 * two-zone header/body layout (distinct from contatti's flat .form-card),
 * and the 2-step form's grouping/legal-text presentation.
 * ================================================================ */

/* Visually-hidden utility for the 2-step form's <legend> elements (accessible
 * step grouping without a visible heading duplicating the card title). Shared
 * across every 2-step page (fv + lavora-con-noi), despite living in this block. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.fv-editorial {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: hsl(var(--foreground));
}
.fv-editorial__eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: hsl(var(--primary));
}
.fv-editorial__title {
  margin-top: .5rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  letter-spacing: -.025em;
  color: hsl(var(--foreground));
}
/* demo editorial H2 = text-2xl md:text-3xl (not uppercase); step up at md. Placed
 * after the base rule so it wins at >= 768px. */
@media (min-width: 768px) {
  .fv-editorial__title {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
}
.fv-editorial__divider {
  margin-top: 1rem;
  height: 2px;
  width: 3rem;
  background: hsl(var(--primary));
}
.fv-editorial__body {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.fv-editorial__body p {
  margin: 0;
}
.fv-editorial__body a {
  color: inherit;
  text-decoration: underline;
  transition: color .15s;
}
.fv-editorial__body a:hover {
  color: hsl(var(--primary));
}
.fv-editorial__callout {
  border-radius: .75rem;
  border: 1px solid hsl(var(--primary) / .2);
  background: hsl(var(--primary) / .05);
  padding: 1rem;
}
.fv-editorial__callout p {
  margin: 0;
  font-size: 13px;
}
.fv-editorial__callout a {
  font-weight: 700;
  color: inherit;
  text-decoration: underline;
}
.fv-editorial__callout a:hover {
  color: hsl(var(--primary));
}

/* "Modulo Segnalazioni" card: header band (gradient) + body, unlike
 * contatti's flat .form-card padding. */
.fv-form-card {
  overflow: hidden;
  border-radius: 1.5rem;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  box-shadow: var(--shadow-sm);
}
.fv-form-card__header {
  border-bottom: 1px solid hsl(var(--border));
  background: linear-gradient(to bottom right, hsl(var(--primary) / .05), transparent);
  padding: 1.5rem 2rem;
}
.fv-form-card__eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: hsl(var(--primary));
}
.fv-form-card__title {
  margin-top: .25rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  letter-spacing: -.025em;
  color: hsl(var(--foreground));
}
.fv-form-card__body {
  padding: 2rem;
}

/* 2-step grouping: each step is a plain fieldset (reset native chrome) so the
 * form degrades to one continuous, server-postable form without JS — the
 * multi-step behaviour (hide/reveal, "prosegui" advancing) is a separate
 * later card (tLQv9qfM). Shared by fv + lavora-con-noi. */
.contact-form__step {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border: 0;
  margin: 0;
  padding: 0;
}
.contact-form__step + .contact-form__step {
  margin-top: .5rem;
  padding-top: 1.5rem;
  border-top: 1px dashed hsl(var(--border));
}

/* the long, verbatim GDPR informativa embedded in step 2 of the real CF7
 * form — a scrollable legal-text box so it doesn't dominate the page while
 * remaining fully readable/selectable without JS. Shared by fv + lavora-con-noi
 * (both are 2-step forms with an embedded step-2 informativa). */
.fv-legal {
  max-height: 320px;
  overflow-y: auto;
  border-radius: var(--radius);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--muted));
  padding: 1rem 1.25rem;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.6;
  color: hsl(var(--muted-foreground));
}
.fv-legal p {
  margin: 0 0 .75rem;
}
.fv-legal p:last-child {
  margin-bottom: 0;
}
.fv-legal strong {
  color: hsl(var(--foreground));
}

.fv-legal-acceptance {
  margin: 0;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.6;
  color: hsl(var(--foreground));
}
.fv-legal-acceptance strong {
  font-weight: 700;
}

/* ================================================================
 * /lavora-con-noi — page-specific additions (Trello yEKO8BuF / 4lT71vj6)
 *
 * Reuses .page-hero* (default center-30% crop, no --center modifier), .form-card
 * (card surface), .contact-form__* (form.css widget chrome — including
 * select.contact-form__input for the department picker, already styled there),
 * and .fv-legal / .fv-legal-acceptance / .sr-only / .contact-form__step (2-step
 * legal-text + step-grouping primitives, shared with farmacovigilanza above).
 * New rules below cover only what's genuinely new to this page: the stats band
 * (flat, not .glass — the demo renders these outside the dark promo gradient),
 * the "Perché Sella" editorial column + benefits list, the form card's compact
 * title variant, the CV file-upload control, and the two consent radio-groups.
 * ================================================================ */

/* Stats band: its own bg-card section (see the demo markup — NOT nested inside
 * the bg-background editorial section below), styled with the same border-b +
 * bg-card + py-8 wrapper treatment as .contact-bar, but flat icon+figure tiles
 * instead of tel/email. */
.stats-band {
  border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  padding: 2rem 0;
}
.stats-band__inner {
  margin-inline: auto;
  max-width: var(--max-width);
  padding: 0 1.5rem;
}
.stats-band__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.stat-flat {
  text-align: center;
}
.stat-flat__icon {
  margin: 0 auto .375rem;
  display: block;
  height: 1.25rem;
  width: 1.25rem;
  color: hsl(var(--primary));
}
.stat-flat__value {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  color: hsl(var(--foreground));
}
.stat-flat__label {
  margin-top: .125rem;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1rem;
  color: hsl(var(--muted-foreground));
}

/* "Perché Sella" content section (bg-background, editorial + form card). */
.jobs-content {
  background: hsl(var(--background));
  padding: 2.5rem 0;
}
.jobs-content__inner {
  margin-inline: auto;
  max-width: var(--max-width);
  padding: 0 1.5rem;
}
.jobs-content__grid {
  display: grid;
  gap: 2.5rem;
}

.jobs-editorial__eyebrow {
  margin-bottom: .5rem;
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: hsl(var(--muted-foreground));
}
.jobs-editorial__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -.025em;
  color: hsl(var(--foreground));
}
.jobs-editorial__text {
  margin-top: 1rem;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.625;
  color: hsl(var(--muted-foreground));
}
.jobs-editorial__text + .jobs-editorial__text {
  margin-top: .75rem;
}

/* benefits list: rounded-xl tinted rows with a briefcase icon. The demo's
 * `bg-sella-surface` utility isn't a token promoted into base.css (README:
 * "no new tokens" for this page) — --muted is the closest already-promoted
 * neutral surface tint and is used here in its place. */
.jobs-benefits {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .625rem;
}
.jobs-benefits__item {
  display: flex;
  align-items: center;
  gap: .75rem;
  border-radius: 1rem;
  background: hsl(var(--muted));
  padding: .875rem;
}
.jobs-benefits__item svg {
  height: 1rem;
  width: 1rem;
  flex-shrink: 0;
  color: hsl(var(--primary));
}
.jobs-benefits__item span {
  font-family: var(--font-body);
  font-size: 13px;
  color: hsl(var(--foreground));
}

.jobs-direct-line {
  margin-top: 1.5rem;
  font-family: var(--font-body);
  font-size: 11px;
  color: hsl(var(--muted-foreground));
}
.jobs-direct-line a {
  color: hsl(var(--primary));
  text-decoration: none;
}
.jobs-direct-line a:hover {
  text-decoration: underline;
}

/* Compact form-card title variant: this card's <h3> is text-sm (unlike
 * contatti's text-xl .form-card__title), so it needs its own size/tracking
 * rather than reusing .form-card__title. */
.form-card__title--compact {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.25rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: hsl(var(--foreground));
}

/* CV file-upload control: a dashed-border "drop zone" look, but — unlike the
 * demo's hidden <input> + JS-triggered button — the real <input type="file">
 * stays present and clickable across the whole box (absolutely positioned,
 * opacity 0) so choosing a file works with no JS at all; the icon/label below
 * it are decorative. focus-within on the wrapper gives keyboard users a visible
 * focus state since the input itself is invisible. */
.file-upload {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border-radius: var(--radius);
  border: 2px dashed hsl(var(--border));
  background: hsl(var(--secondary));
  padding: .75rem 1rem;
  font-family: var(--font-body);
  font-size: 13px;
  color: hsl(var(--muted-foreground));
  text-align: center;
  transition: border-color .15s, color .15s;
}
.file-upload:hover,
.file-upload:focus-within {
  border-color: hsl(var(--primary));
  color: hsl(var(--primary));
}
.file-upload__icon {
  height: 1rem;
  width: 1rem;
  flex-shrink: 0;
}
.file-upload__label {
  font-weight: 500;
}
.file-upload__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}
.file-upload__input:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 2px;
}

/* the two [radio] consent pairs (valutazione-profilo / prolungamento-conservazione,
 * prod-cf7.md LAVORA CON NOI step 2) — same field-note typography as
 * .contact-form__consent's span, but for a pair of radio options instead of one
 * checkbox. */
.consent-radio-group {
  margin-top: .5rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.consent-radio {
  display: flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.6;
  color: hsl(var(--muted-foreground));
}
.consent-radio input[type="radio"] {
  height: 1rem;
  width: 1rem;
  flex-shrink: 0;
  accent-color: hsl(var(--primary));
}

/* sm: >= 640px handled by the shared .contact-form__row rule (form.css). */

/* md: >= 768px — stats band goes 4-across; editorial title steps up. */
@media (min-width: 768px) {
  .stats-band__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .jobs-editorial__title {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

/* lg: >= 1024px — editorial/form card split; content section gets more breathing
 * room, matching .contact-columns' py-14/py-20-style step-up. */
@media (min-width: 1024px) {
  .jobs-content {
    padding: 3.5rem 0;
  }
  .jobs-content__grid {
    grid-template-columns: 1fr 1.2fr;
    gap: 4rem;
  }
}