/* ==========================================================================
   LAVORA CON NOI — Figma 87:465, y=809–1836.
   The simplest page in the build. Reused verbatim, no CSS here:
     · .page-hero — the *plain* 686px variant (Chi Siamo's), no wash and no
       caption; this frame draws only the photo
     · .breadcrumb, .page-kicker, .grid-2, .aec-btn
     · .service-card and its whole body/media/title/desc/arrow anatomy —
       this page's cards are the same component one size up, minus the number
   No CTA band: the footer starts at 1836 and is 540 tall, ending at 2376 =
   the frame height.
   ========================================================================== */
.lavora {
  padding-top: 64px;      /* measured: hero bottom (809) → crumb top (873) */
  padding-bottom: 79px;   /* measured: card bottom (1757) → footer top (1836) */
}

.lavora__kicker { margin: 0 0 16px; }   /* kicker box bottom (1009) → intro top (1025) */
.lavora__intro {
  max-width: 628px;     /* narrower than the hubs' 845 — Figma holds it to one column */
  margin: 0 0 120px;    /* measured: intro bottom (1112) → card top (1232) */
  color: var(--c-text);
}

/* --- Cards ---------------------------------------------------------------
   .service-card at the 628px .grid-2 width instead of the 411px .grid-3 one:
   same border, same 5px radius, same fixed height (525, as it happens), same
   bottom-pinned arrow. What differs is the taller image band, the roomier
   inset, a title on a 50px line rather than t-h3's 35, and no number at all —
   so the markup simply omits .service-card__num rather than hiding it.
   Measured off card 1 (rect 87:527, x=80 y=1232 628x525):
     image      1232–1609 (377)
     title top  1626   inset 32 from the card's left edge
     desc top   1685
     arrow      centred on 1724, right edge 47 in from the card edge
   ========================================================================== */
.service-card--wide { height: 525px; }
.service-card--wide .service-card__media { height: 377px; }
.service-card--wide .service-card__body { padding: 17px 47px 26px 32px; }
.service-card--wide .service-card__title {
  margin: 0 0 9px;
  line-height: 50px;   /* t-h3 supplies the 29px size; only the leading differs */
}
.service-card--wide .service-card__desc { margin: 0; }

/* Same arrow glyph as everywhere else — identical head, identical 11.0459
   height — but drawn with a longer shaft here (39.75 vs 21.75 wide). Since
   .icon-arrow masks the file at `contain`, a longer tail genuinely needs the
   longer file rather than a wider box, which would just scale the head up. */
.icon-arrow--long {
  width: 39px;
  -webkit-mask-image: url("../../icons/arrow-right-long.svg");
          mask-image: url("../../icons/arrow-right-long.svg");
}

@media (max-width: 1024px) {
  .lavora { padding-bottom: 47px; }
  .lavora__intro { margin-bottom: 72px; }
}
@media (max-width: 768px) {
  .lavora { padding-top: 40px; padding-bottom: 36px; }
  .lavora__intro { margin-bottom: 54px; }
  /* Height has to release once a card owns the full width, same as the base
     component — and this modifier's 525px would otherwise out-specify it. */
  .service-card--wide { height: auto; }
  .service-card--wide .service-card__media { height: 220px; }
  .service-card--wide .service-card__body { padding: 24px; }
  .service-card--wide .service-card__title { line-height: 1.25; }
}