/* Newsroom list (newsroom/newsroom_list.html, includes/_list.html, includes/_row.html).
   Scoped under .nr-index so nothing here can leak into the rest of the site.
   Same furniture as the video list (videos/css/videos.css): white rows on light
   grey, violet eyebrows, a sticky bar of outlined chips on a hairline. */

.nr-index {
  --nr-ink: #111;
  --nr-quiet: rgba(0, 0, 0, 0.6);
  --nr-rule: rgba(0, 0, 0, 0.14);
  --nr-rule-strong: rgba(0, 0, 0, 0.45);
  --nr-violet: #7c4b8c;
  --nr-ground: #f6f6f6;
  --nr-text: clamp(1.0625rem, calc(1rem + .3vw), 1.25rem);
  color: var(--nr-ink);
  background: var(--nr-ground);
  padding-bottom: 4rem;
}

.nr-index h1, .nr-index h2 { padding: 0; }

.nr-index__head { padding-top: clamp(2rem, 5vw, 4.5rem); }
.nr-index__head h1 {
  margin: 0 0 .5rem;
  font-size: clamp(2.1rem, calc(1.3rem + 3vw), 4.25rem);
  line-height: 1.12;
}
.nr-index__lede {
  max-width: 40rem;
  margin: 0 0 2rem;
  color: var(--nr-quiet);
  font-size: var(--nr-text);
}

/* ---- filters: a row of chips per filter, each after a small label ------- */

.nr-filters {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: .75rem 1.25rem;
  margin: 0 0 2.5rem;
  padding: 1rem 0;
  border-top: 1px solid var(--nr-rule);
  border-bottom: 1px solid var(--nr-rule);
  /* stays under the fixed site header while the list scrolls */
  position: sticky;
  top: var(--header-h, 0);
  z-index: 10;                     /* above the rows, below #global-header (100) */
  background: var(--nr-ground);
  /* paint the background edge to edge, not just across .body-width */
  box-shadow: 0 0 0 100vmax var(--nr-ground);
  clip-path: inset(0 -100vmax);
}

/* each row shares the label column, so the chips of both start at the same edge */
.nr-filters__group {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  align-items: start;
}

.nr-filters__label {
  /* centred on the first line of chips (2rem high) */
  line-height: 2rem;
  font-size: .8125rem;
  font-weight: bold;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--nr-quiet);
}

.nr-filters__chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  min-width: 0;
}
.nr-filters__chips a {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0 .75rem;
  border: 1px solid var(--nr-rule-strong);
  color: var(--nr-ink);
  font-size: .875rem;
  font-weight: normal;
  text-decoration: none;
}
.nr-filters__chips a:hover { border-color: var(--nr-violet); color: var(--nr-violet); }
.nr-filters__chips a[aria-current="page"] {
  border-color: var(--nr-violet);
  background: var(--nr-violet);
  color: #fff;
}

/* On a phone each filter is one line, label included, that scrolls sideways across
   the whole screen width, so the bar does not eat the screen. list.js scrolls the
   selected chip into view and fades the edge that has more chips beyond it. */
@media (max-width: 899px) {
  .nr-filters {
    grid-template-columns: minmax(0, 1fr);
    gap: .5rem;
    padding: .75rem 0;
  }
  .nr-filters__group {
    display: flex;
    align-items: center;
    gap: .75rem;
    /* run to the screen edges: undo the 1rem gutter of .body-width */
    margin: 0 -1rem;
    padding: 0 1rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .nr-filters__group::-webkit-scrollbar { display: none; }
  .nr-filters__label { flex: 0 0 auto; min-width: 5rem; }  /* fits "Prodotto": the two rows start aligned */
  .nr-filters__chips { flex: 0 0 auto; flex-wrap: nowrap; }
  .nr-filters__chips a { flex: 0 0 auto; white-space: nowrap; }

  .nr-filters__group.has-more-end {
    -webkit-mask-image: linear-gradient(to left, transparent, #000 3rem);
    mask-image: linear-gradient(to left, transparent, #000 3rem);
  }
  .nr-filters__group.has-more-start {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 3rem);
    mask-image: linear-gradient(to right, transparent, #000 3rem);
  }
  .nr-filters__group.has-more-start.has-more-end {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
    mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
  }
}

/* ---- rows: text left, large picture right --------------------------------- */

.nr-rows {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nr-row {
  display: grid;
  background: #fff;
  transition: box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.nr-row:hover { box-shadow: 0 50px 70px -25px rgba(0, 0, 0, 0.3); }

.nr-row__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.5rem 1.25rem;
  min-width: 0;
}
.nr-row__media {
  display: block;
  order: -1;                       /* on top in one column */
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #222;
  line-height: 0;
}
@media (min-width: 900px) {
  .nr-row { grid-template-columns: minmax(0, 35fr) minmax(0, 65fr); }
  .nr-row--text { grid-template-columns: minmax(0, 1fr); }
  .nr-row__body { padding: 3rem; }
  .nr-row--text .nr-row__body { padding-block: 2.5rem; }
  .nr-row__media { order: 0; }
}

.nr-row__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nr-row:hover .nr-row__media img { transform: scale(1.02); }

.nr-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1rem;
  margin: 0 0 .5rem;
  font-size: .8125rem;
  font-weight: bold;
  letter-spacing: .1em;
  line-height: 1.5;
  text-transform: uppercase;
}
.nr-row__kind { color: var(--nr-violet); }
.nr-row__press { color: var(--nr-ink); }
.nr-row__date { color: var(--nr-quiet); font-variant-numeric: tabular-nums; }

.nr-row__title {
  margin: 0 0 .75rem;
  font-size: clamp(1.375rem, calc(1rem + 1vw), 1.875rem);
  line-height: 1.2;
}
.nr-row--text .nr-row__title { max-width: 40rem; }
.nr-row__title a { color: inherit; font-weight: normal; text-decoration: none; }
.nr-row__title a:hover,
.nr-row__title a:focus-visible { color: var(--nr-violet); text-decoration: underline; }

.nr-row__intro { max-width: 40rem; margin: 0 0 1rem; color: var(--nr-quiet); }

.nr-row__products {
  margin: 0 0 1.5rem;
  font-size: .8125rem;
  font-weight: bold;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--nr-violet);
}
.nr-row__products a { color: inherit; font-weight: inherit; text-decoration: none; }
.nr-row__products a:hover { text-decoration: underline; }

.nr-row__read { margin-top: auto; font-size: .9375rem; font-weight: bold; }

/* ---- paging: "Older news" becomes infinite scrolling with list.js -------- */

.nr-newer { margin: 0 0 1.5rem; font-size: .9375rem; }

.nr-more {
  display: flex;
  justify-content: center;
  min-height: 2.5rem;
  margin-top: 2.5rem;
}
.nr-more a {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0 1.25rem;
  border: 1px solid var(--nr-rule-strong);
  background: #fff;
  color: var(--nr-ink);
  font-size: .9375rem;
  font-weight: bold;
  text-decoration: none;
}
.nr-more a:hover { border-color: var(--nr-violet); color: var(--nr-violet); }
/* while the next page loads: a ring in place of the link */
.nr-more[aria-busy="true"] { position: relative; }
.nr-more[aria-busy="true"] a { visibility: hidden; }
.nr-more[aria-busy="true"]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.5rem;
  height: 1.5rem;
  margin: -.75rem 0 0 -.75rem;
  border: 2px solid var(--nr-rule);
  border-top-color: var(--nr-violet);
  border-radius: 50%;
  animation: nr-spin .8s linear infinite;
}
@keyframes nr-spin { to { transform: rotate(360deg); } }

.nr-empty { color: var(--nr-quiet); }

@media (prefers-reduced-motion: reduce) {
  .nr-row, .nr-row__media img { transition: none; }
  .nr-row:hover .nr-row__media img { transform: none; }
  .nr-more[aria-busy="true"]::after { animation-duration: 2.4s; }
}

:where(.nr-index) a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}