/* ==========================================================================
   Fruscio — Homepage sections
   Enqueued only on the front page. Mirrors the design canvas section by
   section: hero, percorsi, numeri, eventi, protocollo, talks, partner,
   ecosistema, newsletter.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO

   The homepage hero is `.fr-phero--display` in components.css, the same
   component every other page opens with, one step up. Only what is genuinely
   particular to the homepage lives here: the lime disc pinned to the
   photograph, and the room the trio of cards needs when it climbs over it.
   Both are further down, next to the sections they belong to.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   PERCORSI — three audience cards
   -------------------------------------------------------------------------- */
.fr-percorsi {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fr-gap);
}

@media (min-width: 820px) {
  .fr-percorsi { grid-template-columns: repeat(3, 1fr); }
}

.fr-pcard {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 440px;
  color: var(--fr-white);
}

.fr-pcard:hover { color: var(--fr-white); }

.fr-pcard img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.fr-pcard::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 20, 40, .3), rgba(0, 20, 40, .88));
}

.fr-pcard:hover img { transform: scale(1.05); }

@media (prefers-reduced-motion: reduce) {
  .fr-pcard:hover img { transform: none; }
}

.fr-pcard__inner {
  position: relative;
  z-index: 2;
  padding: 30px;
}

.fr-pcard__tag {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid rgba(250, 248, 241, .3);
  border-radius: var(--fr-r-pill);
  background: rgba(250, 248, 241, .16);
  backdrop-filter: blur(6px);
  font-family: var(--fr-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fr-lime);
}

/* The colour has to be stated, not inherited from `.fr-pcard`: theme.json
   emits `h1, h2, h3 … { color: var(--wp--preset--color--navy) }` as
   global-styles-inline-css, and a direct rule on the element beats an
   inherited value however specific the ancestor is. Without this the card
   titles come back navy on top of the photograph. */
.fr-pcard h3 { margin-top: 14px; font-size: 30px; color: var(--fr-white); }

.fr-pcard p {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--fr-on-dark);
}

.fr-pcard__go {
  display: inline-flex;
  gap: 8px;
  width: fit-content;
  margin-top: 18px;
  padding: 11px 18px;
  border-radius: var(--fr-r-pill);
  background: var(--fr-lime);
  font-size: 14px;
  font-weight: 700;
  color: var(--fr-navy);
}

/* Per-card tag treatment */
.fr-pcard--1 .fr-pcard__tag { background: var(--fr-lime); color: var(--fr-navy); border-color: transparent; }
.fr-pcard--2 .fr-pcard__tag { background: var(--fr-green-deep); color: var(--fr-white); border-color: transparent; }
.fr-pcard--3 .fr-pcard__tag { background: var(--fr-navy); color: var(--fr-white); border-color: transparent; }

/* --------------------------------------------------------------------------
   NUMERI — flat band, no cards
   -------------------------------------------------------------------------- */
.fr-numeri-band { background: var(--fr-navy); }

.fr-numeri {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 640px) { .fr-numeri { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .fr-numeri { grid-template-columns: repeat(6, 1fr); } }

/* A grid item is `min-width: auto` by default, so a figure too wide for its
   column widens the column instead of wrapping: `22.670` at 40px pushed the
   two-column band to 355px inside a 320px wrapper and the whole page scrolled
   sideways at 360px. The track is told to hold its share, and the figure is
   sized to fit it. */
.fr-ncard {
  min-width: 0;
  padding: 20px 16px;
  border-right: 1px solid rgba(255, 255, 255, .12);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

@media (min-width: 480px) { .fr-ncard { padding-inline: 24px; } }

@media (min-width: 1024px) {
  .fr-ncard { border-bottom: none; }
  .fr-ncard:last-child { border-right: none; }
}

/* The figure is sized to the narrowest track it will ever stand in, not to
   the room the widest one has. Six columns of a 1320px wrap leave 213px a
   cell and 165px inside the padding; `22.670` at the old 58px measured
   194px of glyphs and ran 34px past its own divider on every desktop. At
   44px it measures 147px and the longest figure we have still fits the
   narrowest cell we draw.

   Tabular figures so the six values sit on one grid: proportional digits
   put `11.600` and `22.670` on visibly different widths. */
.fr-ncard b {
  display: block;
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--fr-on-dark);
}

/* The accent is a mark, not a surface. Six slabs of yellow filling a navy
   band was the whole of the clash; as a rule above each figure the brand
   colour is still in the band, at roughly a tenth of the ink. */
.fr-ncard b::before {
  content: "";
  display: block;
  width: 28px;
  height: 3px;
  margin-bottom: 18px;
  border-radius: 2px;
  background: var(--fr-lime);
}

.fr-ncard span {
  display: block;
  margin-top: 12px;
  font-family: var(--fr-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fr-on-dark-soft);
}

/* --------------------------------------------------------------------------
   EVENTI — bento of four tinted cards
   -------------------------------------------------------------------------- */
.fr-events {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fr-gap);
}

@media (min-width: 640px) { .fr-events { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .fr-events { grid-template-columns: repeat(4, 1fr); } }

.fr-ecard {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--fr-line);
  background: var(--fr-card);
  transition: var(--fr-t);
}

.fr-ecard:hover { transform: translateY(-4px); }

@media (prefers-reduced-motion: reduce) {
  .fr-ecard:hover,
  .fr-card:hover,
  .fr-tcard:hover { transform: none; }
}

.fr-ecard__ph {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--fr-cream);
}

.fr-ecard__ph img { width: 100%; height: 100%; object-fit: cover; }

.fr-ecard__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 5px 10px;
  border-radius: var(--fr-r-pill);
  background: var(--fr-lime);
  color: var(--fr-navy);
  font-family: var(--fr-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.fr-ecard__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px;
  background: var(--fr-card);
}

.fr-ecard__date {
  font-family: var(--fr-label);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--fr-green-deep);
}

.fr-ecard h3 {
  margin-top: 8px;
  font-size: 22px;
  color: var(--fr-navy);
}

.fr-ecard__loc {
  margin-top: 6px;
  font-size: 14px;
  color: var(--fr-gray-700);
}

.fr-ecard__disc {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 16px;
}

.fr-ecard__disc span {
  padding: 3px 10px;
  border: 1px solid var(--fr-line);
  border-radius: var(--fr-r-pill);
  font-size: 11px;
  color: var(--fr-gray-700);
}

.fr-ecard__go {
  margin-top: auto;
  padding-top: 18px;
  font-size: 14px;
  font-weight: 700;
  color: var(--fr-navy);
}

/* Layered tints — the cards alternate surfaces to build the bento rhythm. */
.fr-ecard--cream .fr-ecard__body { background: var(--fr-cream); }

.fr-ecard--sage .fr-ecard__body { background: var(--fr-sage); }
.fr-ecard--sage .fr-ecard__date { color: var(--fr-green-deep); }

.fr-ecard--sand .fr-ecard__body { background: var(--fr-sand); }
.fr-ecard--sand .fr-ecard__date { color: var(--fr-green-deep); }

.fr-ecard--navy { border-color: transparent; }
.fr-ecard--navy .fr-ecard__body { background: linear-gradient(158deg, #003A73 0%, #00284D 100%); }
.fr-ecard--navy .fr-ecard__date { color: var(--fr-lime); }
.fr-ecard--navy h3 { color: var(--fr-white); }
.fr-ecard--navy .fr-ecard__loc { color: var(--fr-on-dark-soft); }
.fr-ecard--navy .fr-ecard__disc span { border-color: rgba(255, 255, 255, .28); color: var(--fr-on-dark-soft); }
.fr-ecard--navy .fr-ecard__go { color: var(--fr-lime); }

.fr-events__empty {
  grid-column: 1 / -1;
  padding: 40px;
  border: 1px dashed var(--fr-line);
  border-radius: var(--fr-r);
  text-align: center;
  color: var(--fr-gray-700);
}

/* --------------------------------------------------------------------------
   PROTOCOLLO — dark mega-card
   -------------------------------------------------------------------------- */
.fr-proto {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
  padding: 48px;
  background: var(--fr-ink);
  color: var(--fr-white);
}

@media (min-width: 900px) {
  .fr-proto {
    grid-template-columns: 1.05fr .95fr;
    padding: 64px;
  }
}

@media (max-width: 599px) {
  .fr-proto { padding: 32px 24px; }
}

.fr-proto .fr-eyebrow { color: var(--fr-lime); }

/* Stated, not inherited: theme.json prints `h1 … h6 { color: navy }` into the
   page as global styles, and a direct rule on the element wins over any
   inherited colour. See the same note on `.fr-pcard h3`. */
.fr-proto h2 {
  margin-top: 16px;
  font-size: clamp(34px, 4.5vw, 58px);
  line-height: .98;
  color: var(--fr-white);
}

.fr-proto__reg {
  font-size: 14px;
  vertical-align: super;
  color: var(--fr-lime);
}

.fr-proto__lead {
  margin-top: 20px;
  max-width: 500px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--fr-on-dark-soft);
}

.fr-proto .fr-btn { margin-top: 30px; }

.fr-proto__keys {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--fr-gap);
}

.fr-proto__key {
  padding: 24px;
  border: 1px solid rgba(250, 248, 241, .12);
  border-radius: var(--fr-r-sm);
  background: rgba(250, 248, 241, .05);
}

.fr-proto__num {
  font-family: var(--fr-label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .15em;
  color: var(--fr-lime);
}

.fr-proto__key h3 {
  margin-top: 12px;
  font-size: 19px;
  color: var(--fr-white);
}

.fr-proto__key p {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fr-on-dark-mute);
}

/* --------------------------------------------------------------------------
   TALKS — three tinted editorial cards
   -------------------------------------------------------------------------- */
.fr-talks {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fr-gap);
}

@media (min-width: 768px) { .fr-talks { grid-template-columns: repeat(3, 1fr); } }

.fr-tcard {
  border: 1px solid var(--fr-line);
  background: var(--fr-card);
  transition: var(--fr-t);
}

.fr-tcard:hover { transform: translateY(-4px); }

.fr-tcard__ph {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--fr-cream);
}

.fr-tcard__ph img { width: 100%; height: 100%; object-fit: cover; }

.fr-tcard__play {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--fr-lime);
  color: var(--fr-navy);
}

.fr-tcard__play svg { width: 14px; height: 14px; }

.fr-tcard__body { padding: 24px; }

.fr-tcard__ep {
  font-family: var(--fr-label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fr-green-deep);
}

.fr-tcard h3 {
  margin-top: 10px;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--fr-navy);
}

.fr-tcard__who {
  margin-top: 14px;
  font-size: 13px;
  color: var(--fr-gray-700);
}

.fr-tcard--navy .fr-tcard__body { background: linear-gradient(158deg, #003A73 0%, #00284D 100%); }
.fr-tcard--navy .fr-tcard__ep { color: var(--fr-lime); }
.fr-tcard--navy h3 { color: var(--fr-white); }
.fr-tcard--navy .fr-tcard__who { color: var(--fr-on-dark-soft); }

.fr-tcard--green { border-color: transparent; }
.fr-tcard--green .fr-tcard__body { background: var(--fr-sage); }

.fr-tcard--cream { border-color: transparent; }
.fr-tcard--cream .fr-tcard__body { background: var(--fr-cream); }

/* --------------------------------------------------------------------------
   PARTNER — logo wall on a light card
   -------------------------------------------------------------------------- */
.fr-partner {
  padding: 40px;
  border: 1px solid var(--fr-line);
  background: var(--fr-card);
}

@media (min-width: 768px) { .fr-partner { padding: 56px; } }
@media (max-width: 599px) { .fr-partner { padding: 32px 24px; } }

.fr-partner__head {
  max-width: 620px;
  margin: 0 auto 40px;
  text-align: center;
}

.fr-partner__head h2 {
  margin-top: 12px;
  font-size: clamp(28px, 3.4vw, 44px);
  color: var(--fr-navy);
}

/* Logo wall lives in main.css: the event partner panel uses it too. */

.fr-partner__cta { margin-top: 36px; text-align: center; }

/* --------------------------------------------------------------------------
   ECOSISTEMA — image + numbered list panel
   -------------------------------------------------------------------------- */
.fr-eco {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fr-gap);
}

@media (min-width: 900px) { .fr-eco { grid-template-columns: .85fr 1.15fr; } }

.fr-eco__ph { aspect-ratio: 4 / 5; }
.fr-eco__ph img { width: 100%; height: 100%; object-fit: cover; }

.fr-eco__panel {
  padding: 40px;
  border-radius: var(--fr-r);
  background: var(--fr-cream);
}

@media (max-width: 599px) { .fr-eco__panel { padding: 28px 24px; } }

.fr-eco__panel h2 {
  margin-top: 12px;
  font-size: clamp(28px, 3.4vw, 42px);
  color: var(--fr-navy);
}

.fr-eco__items {
  display: flex;
  flex-direction: column;
  gap: var(--fr-gap);
  margin-top: 22px;
  list-style: none;
  padding: 0;
}

.fr-eco__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: baseline;
  padding: 22px 24px;
  border-radius: var(--fr-r-sm);
  background: var(--fr-card);
}

.fr-eco__idx {
  font-family: var(--fr-label);
  font-size: 12px;
  font-weight: 500;
  color: var(--fr-green-deep);
}

.fr-eco__item h3 { font-size: 18px; color: var(--fr-navy); }

.fr-eco__item p {
  margin-top: 5px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fr-gray-700);
}

/* --------------------------------------------------------------------------
   NEWSLETTER — green mega-card
   -------------------------------------------------------------------------- */
.fr-news {
  position: relative;
  overflow: hidden;
  padding: 64px 40px;
  background: var(--fr-green-deep);
  color: var(--fr-white);
  text-align: center;
}

@media (max-width: 599px) { .fr-news { padding: 48px 24px; } }

.fr-news__ring {
  position: absolute;
  left: 50%;
  bottom: -380px;
  width: 620px;
  height: 620px;
  transform: translateX(-50%);
  border: 1px solid rgba(216, 178, 63, .5);
  border-radius: 50%;
  pointer-events: none;
}

.fr-news__inner {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin-inline: auto;
}

.fr-news h2 { font-size: clamp(32px, 4.5vw, 56px); color: var(--fr-white); }
.fr-news h2 .fr-hl { color: var(--fr-sand); } /* 4.5:1 on the deep green, where lime is not */

.fr-news p {
  max-width: 520px;
  margin: 14px auto 0;
  font-size: 17px;
  color: #EEF4E2;
}

.fr-news__form {
  display: flex;
  flex-wrap: wrap;
  /* The two fields fill the first row and the button wraps under them. Without
     this it wrapped hard against the left edge, under a centred heading, a
     centred lead and two centred fields. */
  justify-content: center;
  gap: 10px;
  max-width: 520px;
  margin: 30px auto 0;
}

.fr-news__form input[type="text"],
.fr-news__form input[type="email"] {
  flex: 1;
  min-width: 200px;
  height: 52px;
  padding-inline: 20px;
  border: none;
  border-radius: var(--fr-r-pill);
  font-family: var(--fr-font);
  font-size: 15px;
  color: var(--fr-ink);
}

.fr-news__segs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 18px;
  font-size: 14px;
  color: #EEF4E2;
}

.fr-news__segs label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.fr-news__segs input[type="checkbox"] {
  position: relative;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 1.5px solid var(--fr-white);
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
}

.fr-news__segs input[type="checkbox"]:checked {
  background: var(--fr-lime);
  border-color: var(--fr-lime);
}

.fr-news__segs input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid var(--fr-navy);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.fr-news__consent {
  margin-top: 18px;
  font-size: 12px;
  line-height: 1.5;
  color: #E3EDD3;
}

.fr-news__consent a { color: var(--fr-white); text-decoration: underline; }

/* --------------------------------------------------------------------------
   GRIGLIA EDITORIALE — overlay cards on a dark band

   The wireframes put eight tiles on black: a full-bleed cover with the tags
   over the top-left corner and the kicker, title and date over the bottom.
   Nothing else in the design system overlays a card, hence `.fr-ccard` rather
   than another tint of `.fr-ecard`.
   -------------------------------------------------------------------------- */
.fr-storie--ink { background: var(--fr-ink); color: var(--fr-on-dark); }
.fr-storie--ink .fr-sec-head h2 { color: var(--fr-on-dark); }
.fr-storie--ink .fr-sec-head__sub { color: var(--fr-on-dark-soft); }
.fr-storie--ink .fr-eyebrow { color: var(--fr-on-dark-mute); }

.fr-storie--ink .fr-btn--ghost {
  border-color: rgba(230, 237, 245, .28);
  color: var(--fr-on-dark);
}

.fr-storie--paper { background: var(--fr-paper); }

.fr-cgrid {
  display: grid;
  gap: var(--fr-gap);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .fr-cgrid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .fr-cgrid--4 { grid-template-columns: repeat(4, 1fr); }
  .fr-cgrid--3 { grid-template-columns: repeat(3, 1fr); }
}

.fr-cgrid__empty {
  margin: 0;
  padding: 40px 0;
  font-size: 17px;
  color: var(--fr-on-dark-soft);
}

.fr-storie--paper .fr-cgrid__empty { color: var(--fr-gray-700); }

/* The slider is the same card on a rail. 24rem keeps roughly the grid's card
   width, so the two layouts read as one component. */
.fr-cslider__rail > .fr-ccard { width: min(24rem, 80vw); }

/* --------------------------------------------------------------------------
   The editorial card
   -------------------------------------------------------------------------- */
.fr-ccard {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--fr-r);
  background: var(--fr-navy);
  color: var(--fr-white);
  text-decoration: none;
  isolation: isolate;
}

.fr-ccard__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.fr-ccard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--fr-t);
}

/* The scrim is what makes the chips legible on any photograph; without it the
   card depends on whichever image an editor happens to upload. It covers the
   top only — the words at the bottom get a plate of their own, below. */
.fr-ccard::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(10, 18, 32, .5) 0%, rgba(10, 18, 32, 0) 38%);
}

.fr-ccard__tags {
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
  z-index: 2;
}

/* A gradient that fades to nothing cannot promise a contrast ratio: on a pale
   photograph the kicker landed where the old scrim was still half transparent
   and `PROSSIMO EVENTO` in lime read as pale yellow on white. The plate is
   opaque from the first line of type down, so the words no longer depend on
   what is behind them; the fade only covers the padding above, so the block
   still reads as part of the picture rather than as a pasted rectangle. */
.fr-ccard__body {
  position: relative;
  z-index: 2;
  padding: 20px;
  background: linear-gradient(180deg, rgba(10, 18, 32, 0) 0, rgba(10, 18, 32, .92) 20px);
}

.fr-ccard__kicker {
  margin: 0 0 8px;
  font-family: var(--fr-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fr-lime);
}

/* Post titles arrive as typed, and editors paste non-breaking spaces out of
   Word: `LA "TRANSBERICA" DI VICENZA DIVENTA` is one unbreakable run as far
   as the line breaker is concerned, and it ran straight out of the card and
   was clipped. Breaking anywhere is the only thing that holds for a title the
   card does not control. */
.fr-ccard__title {
  margin: 0;
  font-size: clamp(18px, 1.5vw, 21px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
  overflow-wrap: break-word;
  color: var(--fr-white);
}

.fr-ccard__date {
  display: block;
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--fr-on-dark-soft);
}

a.fr-ccard:hover .fr-ccard__media img { transform: scale(1.04); }

a.fr-ccard:focus-visible {
  outline: 2px solid var(--fr-navy);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .fr-ccard__media img,
  a.fr-ccard:hover .fr-ccard__media img { transition: none; transform: none; }
}

/* --------------------------------------------------------------------------
   HERO — the circular CTA

   The wireframes park a lime disc over the bottom-right corner of the photo.
   It sits outside `.fr-wrap` because it is pinned to the hero, not to the
   content column, and it stands down to an inline button on a phone where a
   96px disc would cover a third of the headline.
   -------------------------------------------------------------------------- */
.fr-phero__circle {
  position: absolute;
  z-index: 3;
  right: var(--fr-gutter);
  bottom: 28px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: var(--fr-r-pill);
  background: var(--fr-lime);
  font-family: var(--fr-label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fr-ink);
  transition: var(--fr-t);
}

.fr-phero__circle svg { flex: 0 0 auto; }

@media (min-width: 820px) {
  .fr-phero__circle {
    right: 48px;
    bottom: 48px;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    width: 148px;
    height: 148px;
    padding: 18px;
    border-radius: 50%;
    text-align: center;
    line-height: 1.35;
  }

  .fr-phero__circle svg { transform: rotate(45deg); }
}

.fr-phero__circle:hover { transform: scale(1.04); }
.fr-phero__circle:focus-visible { outline: 2px solid var(--fr-white); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .fr-phero__circle,
  .fr-phero__circle:hover { transition: none; transform: none; }
}

/* --------------------------------------------------------------------------
   PERCORSI — lifted over the section above

   Only from the breakpoint where the three cards are side by side: stacked,
   a negative margin would pull the first card over the hero and leave the
   other two hanging below it.
   -------------------------------------------------------------------------- */
@media (min-width: 820px) {
  .fr-section--overlap {
    position: relative;
    z-index: 2;
    margin-top: -120px;
    padding-top: 0;
  }

  /* The lift has to come out of the hero, not out of the hero's copy: without
     this the cards land on the headline and the CTA row. :has() reads the
     next sibling, so the hero only pays for the room when a section above
     actually asks to overlap it. */
  .fr-phero--display:has(+ .fr-section--overlap) .fr-phero__inner { padding-bottom: 200px; }
}

/* --------------------------------------------------------------------------
   NUMERI — the band as a rail
   -------------------------------------------------------------------------- */
.fr-numeri--rail {
  display: flex;
  gap: 0;
}

.fr-numeri--rail .fr-ncard {
  width: clamp(190px, 30vw, 240px);
  border-bottom: none;
}

.fr-numeri--rail .fr-ncard:last-child { border-right: none; }

.fr-numeri-rail { padding-block: 0 28px; }
.fr-numeri-rail .fr-rail__nav { color: var(--fr-on-dark); }

/* --------------------------------------------------------------------------
   PARTNER — dark ground and a logo rail
   -------------------------------------------------------------------------- */
.fr-partner--dark {
  background: var(--fr-ink);
  color: var(--fr-on-dark);
}

.fr-partner--dark .fr-partner__head h2 { color: var(--fr-on-dark); }
.fr-partner--dark .fr-eyebrow { color: var(--fr-on-dark-mute); }

/* On black the greyscale trick inverts: a dark logo disappears, so the cells
   get a light plate instead of a filter. */
.fr-partner--dark .fr-logowall__cell {
  border-color: rgba(230, 237, 245, .14);
  background: rgba(255, 255, 255, .92);
}

.fr-partner--dark .fr-logowall__cell span { color: var(--fr-gray-700); }

.fr-partner__rail .fr-logowall {
  grid-template-columns: none;
  margin: 0;
  /* `safe` is the point: a row of three logos centres under its title instead
     of hugging the left edge of a very wide band, but as soon as the row is
     longer than the rail the alignment falls back to the start so the first
     logo stays reachable instead of being clipped out of the scroll. */
  justify-content: safe center;
}

.fr-partner__rail .fr-logowall__cell { width: clamp(150px, 26vw, 190px); }
.fr-partner__rail .fr-rail__nav { justify-content: center; }

/* --------------------------------------------------------------------------
   LANDING PAGES — the wireframe shape shared by Community, Istituzioni and
   Partner: a photo hero with a rail of cards beside the headline, the four
   stages, a black photo band, the quick links and the black grid.
   -------------------------------------------------------------------------- */

/* Hero with a rail. The copy keeps the left column and the cards take the
   right; under 1024px they stack, the rail running full width under the CTAs. */
.fr-phero--rail { --fr-phero-min: 640px; }

.fr-phero--rail > .fr-wrap {
  display: grid;
  gap: 8px 40px;
  align-items: end;
  padding-bottom: 40px;
}

.fr-phero--rail .fr-phero__inner { padding-bottom: 12px; }

@media (min-width: 1024px) {
  .fr-phero--rail > .fr-wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .fr-phero--rail .fr-phero__inner { padding-bottom: 52px; }
  .fr-phero--rail h1 { font-size: clamp(40px, 4.6vw, 68px); }
}

.fr-phero__rail { min-width: 0; color: var(--fr-on-dark); }
.fr-phero__rail .fr-ccard { width: min(15rem, 70vw); }
.fr-phero__rail .fr-rail__nav { color: var(--fr-on-dark); }
.fr-phero__rail .fr-rail:focus-visible { outline-color: var(--fr-white); }

/* Stages without counters: the card keeps its frame, the title moves up. */
.fr-steps--plain { padding: 0; list-style: none; }
.fr-steps--plain .fr-step h3 { margin-top: 0; }

/* The black photo band. */
.fr-gallery-band--ink { background: var(--fr-ink); color: var(--fr-on-dark); }
.fr-gallery-band--ink .fr-sec-head h2 { color: var(--fr-on-dark); }
.fr-gallery-band--ink .fr-eyebrow { color: var(--fr-on-dark-mute); }
.fr-gallery-band--ink .fr-gallery__note { color: var(--fr-on-dark-mute); }

.fr-gallery-band--ink .fr-btn--ghost {
  border-color: rgba(230, 237, 245, .28);
  color: var(--fr-on-dark);
}

/* Type filter over the grid. Hidden without JS, where the grid shows all. */
.fr-cfilter { display: none; }

.fr-js .fr-cfilter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

/* Named twice for the reason given above `.fr-btn` in main.css. */
.fr-cfilter__btn.fr-cfilter__btn {
  padding: 8px 15px;
  border: 1.5px solid rgba(230, 237, 245, .28);
  border-radius: var(--fr-r-pill);
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--fr-on-dark-soft);
  cursor: pointer;
  transition: var(--fr-t);
}

.fr-cfilter + .fr-cfilter { margin-top: -12px; }

.fr-cfilter__label {
  align-self: center;
  min-width: 72px;
  font-family: var(--fr-label);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fr-on-dark-mute);
}

.fr-storie--paper .fr-cfilter__label { color: var(--fr-gray-500); }

.fr-cfilter__btn.fr-cfilter__btn:hover { border-color: var(--fr-on-dark); color: var(--fr-on-dark); }

.fr-cfilter__btn.fr-cfilter__btn[aria-pressed="true"] {
  border-color: var(--fr-lime);
  background: var(--fr-lime);
  color: var(--fr-ink);
}

.fr-cfilter__btn.fr-cfilter__btn:focus-visible { outline: 2px solid var(--fr-white); outline-offset: 2px; }
.fr-storie--paper .fr-cfilter__btn.fr-cfilter__btn:focus-visible { outline-color: var(--fr-navy); }

.fr-storie--paper .fr-cfilter__btn.fr-cfilter__btn { border-color: var(--fr-line); color: var(--fr-gray-700); }
.fr-storie--paper .fr-cfilter__btn.fr-cfilter__btn[aria-pressed="true"] { color: var(--fr-ink); }

.fr-ccard[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .fr-cfilter__btn.fr-cfilter__btn { transition: none; }
}

/* Home hero video: it covers the photograph, keeps its pause button clear of
   the circular CTA, and stays off phones, where no source matches anyway. */
.fr-phero--display .fr-phero__pause.fr-phero__pause {
  top: 20px;
  bottom: auto;
}

.fr-phero--display.is-video-on .fr-phero__bg:not(.fr-phero__video) { opacity: 0; }

@media (max-width: 767px) {
  .fr-phero--display .fr-phero__video,
  .fr-phero--display .fr-phero__pause.fr-phero__pause { display: none; }
  .fr-phero--display.is-video-on .fr-phero__bg:not(.fr-phero__video) { opacity: .62; }
}