/*
 * ==========================================================
 * π-FACTOR
 * CONTENUTI
 * ==========================================================
 */

.page-contenuti,
.page-contenuto {

  --pf-navy: #102a43;
  --pf-text: #263f55;
  --pf-muted: #52677b;

  --pf-blue: #009fe3;
  --pf-blue-soft: #e8f7fd;
  --pf-blue-pale: #f3fbff;

  --pf-orange: #ff8a1f;
  --pf-orange-soft: #fff0e1;
  --pf-orange-pale: #fff8f1;

  --pf-border: #dce5ec;
  --pf-soft: #f6f9fb;

  --pf-white: #ffffff;

}


/*
 * ==========================================================
 * BASE
 * ==========================================================
 */

.page-contenuti main,
.page-contenuto main {

  overflow:
    hidden;

}


.page-contenuti .container,
.page-contenuto .container {

  width:
    min(
      1180px,
      calc(100% - 40px)
    );

  margin:
    0 auto;

}


/*
 * ==========================================================
 * ARCHIVIO HERO
 * ==========================================================
 */

.content-hero {

  position:
    relative;

  overflow:
    hidden;

  padding:
    82px 0
    68px;

  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #f7fcff 55%,
      #fff9f4 100%
    );

}


.content-hero::before {

  content:
    "";

  position:
    absolute;

  top:
    -120px;

  left:
    -90px;

  width:
    310px;

  height:
    230px;

  border-radius:
    50%;

  background:
    rgba(0, 159, 227, 0.11);

  transform:
    rotate(-20deg);

}


.content-hero::after {

  content:
    "";

  position:
    absolute;

  right:
    -100px;

  bottom:
    -130px;

  width:
    340px;

  height:
    250px;

  border-radius:
    50%;

  background:
    rgba(255, 138, 31, 0.12);

  transform:
    rotate(18deg);

}


.content-hero .container {

  position:
    relative;

  z-index:
    1;

}


.content-hero-kicker {

  margin:
    0 0 22px;

  color:
    var(--pf-blue);

  font-size:
    14px;

  font-weight:
    800;

  letter-spacing:
    0.15em;

}


.content-hero h1 {

  max-width:
    900px;

  margin:
    0;

  color:
    var(--pf-navy);

  font-size:
    clamp(
      42px,
      5vw,
      72px
    );

  line-height:
    1.04;

  letter-spacing:
    -0.035em;

}


.content-hero-intro {

  max-width:
    760px;

  margin:
    27px 0 0;

  color:
    var(--pf-muted);

  font-size:
    20px;

  line-height:
    1.65;

}


/*
 * ==========================================================
 * ARCHIVIO
 * ==========================================================
 */

.content-archive {

  position:
    relative;

  padding:
    46px 0
    110px;

}


/*
 * ==========================================================
 * FILTRI
 * ==========================================================
 */

.content-filters {

  display:
    grid;

  grid-template-columns:
    minmax(260px, 1.7fr)
    repeat(
      3,
      minmax(170px, 1fr)
    );

  gap:
    16px;

  align-items:
    end;

  margin-bottom:
    52px;

  padding:
    24px;

  border:
    1px solid
    #dce8ef;

  border-radius:
    24px;

  background:
    linear-gradient(
      120deg,
      #f2faff 0%,
      #ffffff 55%,
      #fff7ef 100%
    );

  box-shadow:
    0 12px 35px
    rgba(16, 42, 67, 0.05);

}


.content-search,
.content-filter {

  min-width:
    0;

}


.content-filter-label {

  display:
    block;

  margin:
    0 0 8px;

  color:
    var(--pf-muted);

  font-size:
    12px;

  font-weight:
    800;

  letter-spacing:
    0.09em;

  text-transform:
    uppercase;

}


.content-filters input,
.content-filters select {

  display:
    block;

  width:
    100%;

  height:
    52px;

  box-sizing:
    border-box;

  padding:
    0 16px;

  border:
    1px solid
    #d4dfe7;

  border-radius:
    12px;

  outline:
    none;

  background:
    #ffffff;

  color:
    var(--pf-navy);

  font:
    inherit;

}


.content-filters input:focus,
.content-filters select:focus {

  border-color:
    var(--pf-blue);

  box-shadow:
    0 0 0 3px
    rgba(0, 159, 227, 0.12);

}


/*
 * ==========================================================
 * GRID
 * ==========================================================
 */

.content-grid {

  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap:
    30px;

}


/*
 * ==========================================================
 * CARD
 * ==========================================================
 */

.content-card {

  display:
    flex;

  flex-direction:
    column;

  overflow:
    hidden;

  border:
    1px solid
    var(--pf-border);

  border-radius:
    24px;

  background:
    #ffffff;

  box-shadow:
    0 12px 36px
    rgba(16, 42, 67, 0.065);

  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease;

}


.content-card:nth-child(3n + 1) {

  border-top:
    4px solid
    var(--pf-blue);

}


.content-card:nth-child(3n + 2) {

  border-top:
    4px solid
    var(--pf-orange);

}


.content-card:nth-child(3n + 3) {

  border-top:
    4px solid
    #63bfa7;

}


.content-card:hover {

  transform:
    translateY(-5px);

  box-shadow:
    0 20px 48px
    rgba(16, 42, 67, 0.11);

}


/*
 * ==========================================================
 * IMMAGINE CARD
 * ==========================================================
 */

.content-card-image {

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  aspect-ratio:
    4 / 5;

  overflow:
    hidden;

  background:
    linear-gradient(
      135deg,
      #eaf7fc,
      #fff5ea
    );

}


.content-card-image img {

  display:
    block;

  width:
    100%;

  height:
    100%;

  object-fit:
    contain;

}


/*
 * ==========================================================
 * BODY CARD
 * ==========================================================
 */

.content-card-body {

  display:
    flex;

  flex:
    1;

  flex-direction:
    column;

  padding:
    25px 26px
    28px;

}


.content-card-kicker {

  margin:
    0 0 13px;

  color:
    var(--pf-blue);

  font-size:
    12px;

  font-weight:
    800;

  letter-spacing:
    0.11em;

  text-transform:
    uppercase;

}


.content-card h2 {

  margin:
    0;

  color:
    var(--pf-navy);

  font-size:
    24px;

  line-height:
    1.2;

}


.content-card h2 a {

  color:
    inherit;

  text-decoration:
    none;

}


.content-card-excerpt {

  margin:
    17px 0 0;

  color:
    var(--pf-muted);

  font-size:
    16px;

  line-height:
    1.65;

}


.content-card-meta {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    8px;

  margin-top:
    20px;

}


.content-card-meta span {

  display:
    inline-flex;

  align-items:
    center;

  min-height:
    28px;

  padding:
    4px 11px;

  border-radius:
    999px;

  background:
    var(--pf-blue-soft);

  color:
    #426078;

  font-size:
    12px;

  font-weight:
    700;

}


.content-card-meta span:nth-child(even) {

  background:
    var(--pf-orange-soft);

}


.content-card-link {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    8px;

  align-self:
    flex-start;

  margin-top:
    auto;

  padding-top:
    25px;

  color:
    var(--pf-navy);

  font-size:
    14px;

  font-weight:
    800;

  text-decoration:
    none;

}


.content-card-link:hover {

  color:
    var(--pf-blue);

}


/*
 * ==========================================================
 * ARCHIVIO VUOTO
 * ==========================================================
 */

.content-empty {

  margin:
    48px 0 0;

}


.content-empty-state {

  max-width:
    760px;

  margin:
    10px auto 0;

  padding:
    60px 50px;

  border:
    1px solid
    var(--pf-border);

  border-radius:
    26px;

  background:
    linear-gradient(
      135deg,
      var(--pf-blue-pale),
      #ffffff 55%,
      var(--pf-orange-pale)
    );

  text-align:
    center;

}


.content-empty-kicker {

  color:
    var(--pf-blue);

  font-weight:
    800;

}


.content-empty-state h2 {

  color:
    var(--pf-navy);

}


.content-card[hidden],
.content-empty[hidden] {

  display:
    none !important;

}


/*
 * ==========================================================
 * ARTICOLO
 * ==========================================================
 */

.article-page {

  position:
    relative;

  overflow:
    hidden;

}


/*
 * ==========================================================
 * DECORAZIONI ALTE
 * ==========================================================
 */

.article-page::before {

  content:
    "";

  position:
    absolute;

  z-index:
    -1;

  top:
    30px;

  left:
    -120px;

  width:
    290px;

  height:
    210px;

  border-radius:
    50%;

  background:
    rgba(0, 159, 227, 0.11);

  transform:
    rotate(-18deg);

}


.article-page::after {

  content:
    "";

  position:
    absolute;

  z-index:
    -1;

  top:
    80px;

  right:
    -135px;

  width:
    330px;

  height:
    230px;

  border-radius:
    50%;

  background:
    rgba(255, 138, 31, 0.12);

  transform:
    rotate(18deg);

}


/*
 * ==========================================================
 * MAIN ARTICOLO
 * ==========================================================
 */

.article-main {

  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(300px, 410px);

  gap:
    clamp(
      50px,
      6vw,
      90px
    );

  align-items:
    start;

  width:
    min(
      1180px,
      calc(100% - 40px)
    );

  margin:
    0 auto;

  padding:
    72px 0
    86px;

}


/*
 * ==========================================================
 * COLONNA TESTO
 * ==========================================================
 */

.article-copy {

  min-width:
    0;

}


.article-back {

  display:
    inline-flex;

  margin-bottom:
    38px;

  color:
    var(--pf-muted);

  font-size:
    14px;

  font-weight:
    700;

  text-decoration:
    none;

}


.article-back:hover {

  color:
    var(--pf-blue);

}


.article-kicker {

  margin:
    0 0 18px;

  color:
    var(--pf-blue);

  font-size:
    13px;

  font-weight:
    800;

  letter-spacing:
    0.13em;

  text-transform:
    uppercase;

}


.article-copy h1 {

  max-width:
    720px;

  margin:
    0;

  color:
    var(--pf-navy);

  font-size:
    clamp(
      42px,
      4.4vw,
      66px
    );

  font-weight:
    800;

  line-height:
    1.03;

  letter-spacing:
    -0.038em;

}


.article-lead {

  max-width:
    690px;

  margin:
    26px 0 0;

  color:
    var(--pf-muted);

  font-size:
    19px;

  line-height:
    1.65;

}


/*
 * ==========================================================
 * TASSONOMIA
 * ==========================================================
 */

.article-taxonomy {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    9px;

  margin-top:
    27px;

}


.article-taxonomy span {

  display:
    inline-flex;

  align-items:
    center;

  min-height:
    31px;

  padding:
    5px 12px;

  border-radius:
    999px;

  background:
    var(--pf-blue-soft);

  color:
    #496278;

  font-size:
    12px;

  font-weight:
    700;

}


.article-taxonomy span:nth-child(2n) {

  background:
    var(--pf-orange-soft);

}


/*
 * ==========================================================
 * TESTO
 * ==========================================================
 */

.article-body {

  margin-top:
    54px;

  color:
    var(--pf-text);

  font-size:
    18px;

  line-height:
    1.82;

}


.article-body p {

  margin:
    0 0 26px;

}


.article-body h2 {

  margin:
    52px 0
    20px;

  color:
    var(--pf-navy);

  font-size:
    31px;

  line-height:
    1.2;

}


.article-body h3 {

  margin:
    40px 0
    17px;

  color:
    var(--pf-navy);

  font-size:
    24px;

}


.article-body a {

  color:
    #008fc9;

}


.article-body blockquote {

  margin:
    40px 0;

  padding:
    10px 0
    10px 24px;

  border-left:
    4px solid
    var(--pf-orange);

  color:
    #3f566b;

}


/*
 * ==========================================================
 * COPERTINA DESTRA
 * ==========================================================
 */

.article-aside {

  min-width:
    0;

}


.article-aside-sticky {

  position:
    sticky;

  top:
    110px;

}


.article-cover-frame {

  padding:
    14px;

  border:
    1px solid
    #dbe6ed;

  border-radius:
    27px;

  background:
    linear-gradient(
      145deg,
      var(--pf-blue-soft),
      #ffffff 50%,
      var(--pf-orange-soft)
    );

  box-shadow:
    0 18px 50px
    rgba(16, 42, 67, 0.10);

}


.article-cover-image {

  display:
    block;

  width:
    100%;

  height:
    auto;

  max-height:
    calc(100vh - 180px);

  object-fit:
    contain;

  border-radius:
    17px;

}


/*
 * ==========================================================
 * SOCIAL
 * ==========================================================
 */

.article-social {

  margin-top:
    20px;

  padding:
    18px;

  border:
    1px solid
    var(--pf-border);

  border-radius:
    18px;

  background:
    linear-gradient(
      110deg,
      #f4fbff,
      #ffffff 55%,
      #fff8f1
    );

}


.article-social-label {

  margin:
    0 0 12px;

  color:
    var(--pf-muted);

  font-size:
    12px;

  font-weight:
    800;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;

}


.article-social-links {

  display:
    flex;

  gap:
    10px;

}


.article-social-link {

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    41px;

  height:
    41px;

  border:
    1px solid
    #d4e0e8;

  border-radius:
    50%;

  background:
    #ffffff;

  color:
    var(--pf-navy);

  text-decoration:
    none;

  transition:
    transform 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;

}


.article-social-link svg {

  width:
    19px;

  height:
    19px;

}


.article-social-link:hover {

  transform:
    translateY(-2px);

  color:
    var(--pf-blue);

  border-color:
    var(--pf-blue);

}


.article-social-bottom {

  margin-top:
    46px;

}


/*
 * ==========================================================
 * PRECEDENTE / SUCCESSIVO
 * ==========================================================
 */

.article-navigation {

  width:
    min(
      1180px,
      calc(100% - 40px)
    );

  margin:
    0 auto;

  padding-bottom:
    74px;

}


.article-navigation-inner {

  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    18px;

}


.article-navigation-next {

  text-align:
    right;

}


.article-navigation-link {

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  min-height:
    120px;

  padding:
    22px 25px;

  border:
    1px solid
    #d9e5ec;

  border-radius:
    20px;

  background:
    linear-gradient(
      120deg,
      #edf9ff,
      #ffffff 55%,
      #fff6ed
    );

  color:
    var(--pf-navy);

  text-decoration:
    none;

}


.article-navigation-link span {

  margin-bottom:
    9px;

  color:
    var(--pf-blue);

  font-size:
    12px;

  font-weight:
    800;

  text-transform:
    uppercase;

}


.article-navigation-link strong {

  font-size:
    17px;

  line-height:
    1.4;

}


/*
 * ==========================================================
 * CTA
 * ==========================================================
 */

.article-footer {

  position:
    relative;

  overflow:
    hidden;

  padding:
    92px 20px
    96px;

  border-top:
    1px solid
    #e1e9ef;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f7fcff 45%,
      #fff9f3 100%
    );

}


.article-footer::before {

  content:
    "";

  position:
    absolute;

  bottom:
    -145px;

  left:
    -80px;

  width:
    510px;

  height:
    250px;

  border-radius:
    50%;

  background:
    rgba(0, 159, 227, 0.13);

  transform:
    rotate(12deg);

}


.article-footer::after {

  content:
    "";

  position:
    absolute;

  right:
    -100px;

  bottom:
    -140px;

  width:
    520px;

  height:
    250px;

  border-radius:
    50%;

  background:
    rgba(255, 138, 31, 0.14);

  transform:
    rotate(-10deg);

}


.article-footer-inner {

  position:
    relative;

  z-index:
    2;

  max-width:
    760px;

  margin:
    0 auto;

  text-align:
    center;

}


.article-footer h2 {

  margin:
    0;

  color:
    var(--pf-navy);

  font-size:
    clamp(
      34px,
      4vw,
      48px
    );

  line-height:
    1.12;

  letter-spacing:
    -0.03em;

}


.article-footer p {

  margin:
    21px auto 0;

  color:
    var(--pf-muted);

  font-size:
    17px;

}


.article-footer-link {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    10px;

  margin-top:
    30px;

  padding:
    14px 24px;

  border-radius:
    999px;

  background:
    var(--pf-navy);

  color:
    #ffffff;

  font-size:
    14px;

  font-weight:
    800;

  text-decoration:
    none;

  box-shadow:
    0 10px 28px
    rgba(16, 42, 67, 0.14);

}


.article-footer-link:hover {

  transform:
    translateY(-2px);

}


/*
 * ==========================================================
 * 404
 * ==========================================================
 */

.article-not-found {

  min-height:
    60vh;

  display:
    flex;

  align-items:
    center;

  padding:
    90px 0;

}


.article-not-found h1 {

  color:
    var(--pf-navy);

}


/*
 * ==========================================================
 * TABLET
 * ==========================================================
 */

@media (max-width: 1020px) {

  .content-filters {

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

  }


  .content-grid {

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

  }


  .article-main {

    grid-template-columns:
      minmax(0, 1fr)
      minmax(270px, 330px);

    gap:
      42px;

  }

}


/*
 * ==========================================================
 * TABLET PICCOLO
 * ==========================================================
 */

@media (max-width: 820px) {

  .article-main {

    display:
      flex;

    flex-direction:
      column;

    padding-top:
      50px;

  }


  .article-copy {

    order:
      1;

  }


  .article-aside {

    order:
      2;

    width:
      min(
        100%,
        470px
      );

    margin:
      0 auto;

  }


  .article-aside-sticky {

    position:
      static;

  }


  .article-cover-image {

    max-height:
      none;

  }

}


/*
 * ==========================================================
 * MOBILE
 * ==========================================================
 */

@media (max-width: 680px) {

  .page-contenuti .container,
  .page-contenuto .container {

    width:
      calc(
        100% - 30px
      );

  }


  .content-hero {

    padding:
      52px 0
      42px;

  }


  .content-hero h1 {

    font-size:
      clamp(
        36px,
        11vw,
        52px
      );

  }


  .content-hero-intro {

    font-size:
      17px;

  }


  .content-archive {

    padding:
      25px 0
      78px;

  }


  .content-filters {

    grid-template-columns:
      1fr;

    margin-bottom:
      34px;

    padding:
      18px;

  }


  .content-grid {

    grid-template-columns:
      1fr;

  }


  .article-main {

    width:
      calc(
        100% - 30px
      );

    padding:
      42px 0
      58px;

  }


  .article-copy h1 {

    font-size:
      clamp(
        35px,
        10.5vw,
        49px
      );

  }


  .article-lead {

    font-size:
      18px;

  }


  .article-body {

    margin-top:
      44px;

    font-size:
      17px;

    line-height:
      1.76;

  }


  .article-cover-frame {

    padding:
      10px;

    border-radius:
      21px;

  }


  .article-navigation {

    width:
      calc(
        100% - 30px
      );

    padding-bottom:
      58px;

  }


  .article-navigation-inner {

    grid-template-columns:
      1fr;

  }


  .article-navigation-next {

    text-align:
      left;

  }


  .article-footer {

    padding:
      70px 20px
      80px;

  }

}
/* ==========================================================
   CONTENUTI — IN EVIDENZA
   ========================================================== */

.page-contenuti .content-featured {
  position: relative;
  overflow: hidden;
  padding: 76px 0 82px;
  background:
    radial-gradient(
      circle at 8% 18%,
      rgba(0, 159, 227, 0.12),
      transparent 24%
    ),
    radial-gradient(
      circle at 92% 82%,
      rgba(255, 138, 31, 0.13),
      transparent 26%
    ),
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f8fcff 54%,
      #fffaf5 100%
    );
}


.page-contenuti .content-featured::before {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  left: -190px;
  top: 20px;
  border-radius: 50%;
  background:
    rgba(0, 159, 227, 0.08);
  pointer-events: none;
}


.page-contenuti .content-featured::after {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  right: -230px;
  bottom: -180px;
  border-radius: 50%;
  background:
    rgba(255, 138, 31, 0.09);
  pointer-events: none;
}


.page-contenuti .content-featured .container {
  position: relative;
  z-index: 1;
}


/* ==========================================================
   TESTATA
   ========================================================== */

.page-contenuti .content-featured-header {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(280px, 460px);
  gap: 56px;
  align-items: end;
  margin-bottom: 38px;
}


.page-contenuti .content-featured-kicker {
  margin: 0 0 8px;
  color: var(--pf-orange);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}


.page-contenuti .content-featured-header h2 {
  margin: 0;
  color: var(--pf-navy);
  font-size: clamp(
    2rem,
    4vw,
    3.5rem
  );
  line-height: 1;
  letter-spacing: -0.035em;
}


.page-contenuti .content-featured-intro {
  margin: 0;
  color: var(--pf-muted);
  font-size: 1.03rem;
  line-height: 1.7;
}


/* ==========================================================
   GRIGLIA
   ========================================================== */

.page-contenuti .content-featured-grid {
  display: grid;
  grid-template-columns:
    minmax(0, 1.45fr)
    minmax(300px, 0.75fr);
  gap: 24px;
}


.page-contenuti .content-featured-grid-single {
  grid-template-columns: 1fr;
}


/* ==========================================================
   CARD
   ========================================================== */

.page-contenuti .content-featured-card {
  position: relative;
  overflow: hidden;
  background: var(--pf-white);
  border:
    1px solid
    rgba(16, 42, 67, 0.09);
  border-radius: 30px;
  box-shadow:
    0 18px 55px
    rgba(16, 42, 67, 0.11);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}


.page-contenuti .content-featured-card:hover {
  transform:
    translateY(-4px);
  box-shadow:
    0 24px 65px
    rgba(16, 42, 67, 0.15);
}

/* ==========================================================
   CARD PRINCIPALE
   ========================================================== */

.page-contenuti .content-featured-card-main {
  display: grid;
  grid-template-columns:
    minmax(220px, 0.52fr)
    minmax(0, 1.48fr);
  min-height: 410px;
}


.page-contenuti .content-featured-card-main::before {
  content: "";
  position: absolute;
  z-index: 2;
  width: 9px;
  height: 100%;
  left: 0;
  top: 0;
  background:
    linear-gradient(
      180deg,
      var(--pf-blue),
      var(--pf-orange)
    );
}


.page-contenuti .content-featured-card-main
.content-featured-image {
  min-height: 100%;
  padding: 22px;
}


.page-contenuti .content-featured-card-main
.content-featured-image img {
  width: 100%;
  height: 100%;
  max-height: 470px;
  object-fit: contain;
}

/* ==========================================================
   IMMAGINE
   ========================================================== */

.page-contenuti .content-featured-image {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    linear-gradient(
      145deg,
      var(--pf-blue-pale) 0%,
      #ffffff 50%,
      var(--pf-orange-pale) 100%
    );
}


.page-contenuti .content-featured-image img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 560px;
  object-fit: contain;
  transition:
    transform 0.35s ease;
}


.page-contenuti .content-featured-card:hover
.content-featured-image img {
  transform:
    scale(1.018);
}


/* ==========================================================
   TESTO CARD
   ========================================================== */

.page-contenuti .content-featured-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding:
    clamp(30px, 4vw, 58px);
}


.page-contenuti .content-featured-rubrica {
  margin: 0 0 14px;
  color: var(--pf-blue);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}


.page-contenuti .content-featured-body h3 {
  margin: 0;
  color: var(--pf-navy);
  font-size: clamp(
    1.7rem,
    3vw,
    2.65rem
  );
  line-height: 1.08;
  letter-spacing: -0.03em;
}


.page-contenuti .content-featured-body h3 a {
  color: inherit;
  text-decoration: none;
}


.page-contenuti .content-featured-body h3 a:hover {
  color: var(--pf-blue);
}


.page-contenuti .content-featured-excerpt {
  margin: 20px 0 0;
  color: var(--pf-text);
  font-size: 1rem;
  line-height: 1.72;
}


/* ==========================================================
   META
   ========================================================== */

.page-contenuti .content-featured-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}


.page-contenuti .content-featured-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 12px;
  border-radius: 999px;
  background:
    var(--pf-blue-soft);
  color: var(--pf-navy);
  font-size: 0.77rem;
  font-weight: 700;
}


.page-contenuti .content-featured-meta span:nth-child(even) {
  background:
    var(--pf-orange-soft);
}


/* ==========================================================
   LINK
   ========================================================== */

.page-contenuti .content-featured-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  margin-top: 28px;
  color: var(--pf-navy);
  font-size: 0.92rem;
  font-weight: 800;
  text-decoration: none;
}


.page-contenuti .content-featured-link span {
  color: var(--pf-orange);
  font-size: 1.15rem;
  transition:
    transform 0.2s ease;
}


.page-contenuti .content-featured-link:hover span {
  transform:
    translateX(5px);
}


/* ==========================================================
   CARD SECONDARIE
   ========================================================== */

.page-contenuti .content-featured-card-secondary {
  display: grid;
  grid-template-columns:
    minmax(130px, 0.72fr)
    minmax(0, 1.28fr);
  min-height: 218px;
}


.page-contenuti .content-featured-card-secondary
.content-featured-body {
  padding: 26px;
}


.page-contenuti .content-featured-card-secondary
.content-featured-body h3 {
  font-size: clamp(
    1.2rem,
    2vw,
    1.55rem
  );
}


.page-contenuti .content-featured-card-secondary
.content-featured-excerpt {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 12px;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  font-size: 0.92rem;
}


.page-contenuti .content-featured-card-secondary
.content-featured-meta {
  margin-top: 16px;
}


.page-contenuti .content-featured-card-secondary
.content-featured-link {
  margin-top: 18px;
}


/* ==========================================================
   SE CI SONO 3 CONTENUTI
   ========================================================== */

.page-contenuti .content-featured-grid
.content-featured-card-secondary:nth-child(3) {
  grid-column: 2;
}


/* ==========================================================
   INTESTAZIONE ARCHIVIO
   ========================================================== */

.page-contenuti .content-archive-header {
  margin-bottom: 30px;
}


.page-contenuti .content-archive-kicker {
  margin: 0 0 7px;
  color: var(--pf-blue);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}


.page-contenuti .content-archive-header h2 {
  margin: 0;
  color: var(--pf-navy);
  font-size: clamp(
    1.9rem,
    3vw,
    2.7rem
  );
  line-height: 1.08;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (
  max-width: 1020px
) {

  .page-contenuti
  .content-featured-header {
    grid-template-columns: 1fr;
    gap: 16px;
  }


  .page-contenuti
  .content-featured-intro {
    max-width: 650px;
  }


  .page-contenuti
  .content-featured-grid {
    grid-template-columns: 1fr;
  }


  .page-contenuti
  .content-featured-grid
  .content-featured-card-secondary:nth-child(3) {
    grid-column: auto;
  }

}


@media (
  max-width: 760px
) {

  .page-contenuti
  .content-featured {
    padding:
      58px 0 64px;
  }


  .page-contenuti
  .content-featured-card-main {
    grid-template-columns: 1fr;
  }


  .page-contenuti
  .content-featured-card-main
  .content-featured-image {
    min-height: auto;
  }


  .page-contenuti
  .content-featured-image img {
    width: 100%;
    max-height: 500px;
  }


  .page-contenuti
  .content-featured-card-secondary {
    grid-template-columns:
      minmax(120px, 0.8fr)
      minmax(0, 1.2fr);
  }

}


@media (
  max-width: 560px
) {

  .page-contenuti
  .content-featured-card {
    border-radius: 24px;
  }


  .page-contenuti
  .content-featured-card-secondary {
    grid-template-columns: 1fr;
  }


  .page-contenuti
  .content-featured-card-secondary
  .content-featured-image img {
    max-height: 380px;
  }


  .page-contenuti
  .content-featured-body {
    padding: 28px 24px;
  }


  .page-contenuti
  .content-featured-card-secondary
  .content-featured-body {
    padding: 24px;
  }

}
/* ==========================================================
   CONTENUTI — CAROUSEL IN EVIDENZA
   ========================================================== */

.page-contenuti .content-featured-header-side {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}


/* ==========================================================
   CONTROLLI
   ========================================================== */

.page-contenuti .content-featured-controls {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
}


.page-contenuti .content-featured-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border:
    1px solid
    rgba(16, 42, 67, 0.12);
  border-radius: 50%;
  background:
    rgba(255, 255, 255, 0.94);
  color: var(--pf-navy);
  font-size: 1.2rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow:
    0 8px 22px
    rgba(16, 42, 67, 0.08);
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}


.page-contenuti .content-featured-arrow:hover {
  transform:
    translateY(-2px);
  background:
    var(--pf-navy);
  color:
    var(--pf-white);
  border-color:
    var(--pf-navy);
  box-shadow:
    0 12px 28px
    rgba(16, 42, 67, 0.14);
}


.page-contenuti .content-featured-arrow:focus-visible {
  outline:
    3px solid
    rgba(0, 159, 227, 0.28);
  outline-offset: 3px;
}


/* ==========================================================
   VIEWPORT
   ========================================================== */

.page-contenuti .content-featured-viewport {
  position: relative;
  overflow: hidden;
  width: 100%;
}


.page-contenuti .content-featured-track {
  position: relative;
  width: 100%;
}


/* ==========================================================
   SLIDE
   ========================================================== */

.page-contenuti .content-featured-slide {
  width: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform:
    translateX(22px);
  transition:
    opacity 0.34s ease,
    transform 0.34s ease,
    visibility 0.34s ease;
}


.page-contenuti .content-featured-slide:not(.is-active) {
  position: absolute;
  inset: 0;
}


.page-contenuti .content-featured-slide.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform:
    translateX(0);
}


/* ==========================================================
   CARD CAROUSEL
   ========================================================== */

.page-contenuti .content-featured-slide
.content-featured-card-main {
  width: 100%;
}


/* ==========================================================
   PALLINI
   ========================================================== */

.page-contenuti .content-featured-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 24px;
}


.page-contenuti .content-featured-dot {
  position: relative;
  width: 11px;
  height: 11px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background:
    rgba(16, 42, 67, 0.18);
  cursor: pointer;
  transition:
    width 0.22s ease,
    background 0.22s ease,
    transform 0.22s ease;
}


.page-contenuti .content-featured-dot:hover {
  transform:
    scale(1.15);
  background:
    rgba(0, 159, 227, 0.45);
}


.page-contenuti .content-featured-dot.is-active {
  width: 30px;
  background:
    linear-gradient(
      90deg,
      var(--pf-blue),
      var(--pf-orange)
    );
}


.page-contenuti .content-featured-dot:focus-visible {
  outline:
    3px solid
    rgba(0, 159, 227, 0.28);
  outline-offset: 3px;
}


/* ==========================================================
   ACCESSIBILITÀ
   ========================================================== */

.page-contenuti .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* ==========================================================
   TOUCH
   ========================================================== */

.page-contenuti [data-featured-carousel] {
  touch-action:
    pan-y;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (
  max-width: 1020px
) {

  .page-contenuti
  .content-featured-header-side {
    align-items: center;
  }

}


@media (
  max-width: 760px
) {

  .page-contenuti
  .content-featured-header-side {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
  }


  .page-contenuti
  .content-featured-controls {
    align-self: flex-start;
  }


  .page-contenuti
  .content-featured-arrow {
    width: 42px;
    height: 42px;
  }

}


@media (
  prefers-reduced-motion: reduce
) {

  .page-contenuti
  .content-featured-slide,
  .page-contenuti
  .content-featured-arrow,
  .page-contenuti
  .content-featured-dot {
    transition: none;
  }

}
/* ==========================================================
   CONTENUTI — COPERTINE REEL CENTRATE
   ========================================================== */

/* Card principale "In evidenza" */
.page-contenuti .content-featured-card-main {
  grid-template-columns:
    minmax(300px, 0.72fr)
    minmax(0, 1.28fr);
}

/* Area che contiene la copertina */
.page-contenuti .content-featured-card-main .content-featured-image {
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 460px;
  padding: 24px 32px;

  background:
    linear-gradient(
      145deg,
      var(--pf-blue-pale) 0%,
      #ffffff 50%,
      var(--pf-orange-pale) 100%
    );
}

/* Copertina Reel */
.page-contenuti .content-featured-card-main .content-featured-image img {
  display: block;

  width: auto;
  height: auto;

  max-width: 100%;
  max-height: 430px;

  object-fit: contain;
  object-position: center;

  margin: auto;

  border-radius: 14px;

  box-shadow:
    0 10px 28px rgba(16, 42, 67, 0.10);
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1020px) {

  .page-contenuti .content-featured-card-main {
    grid-template-columns:
      minmax(280px, 0.8fr)
      minmax(0, 1.2fr);
  }

  .page-contenuti .content-featured-card-main .content-featured-image {
    min-height: 420px;
    padding: 22px;
  }

  .page-contenuti .content-featured-card-main .content-featured-image img {
    max-height: 390px;
  }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 760px) {

  .page-contenuti .content-featured-card-main {
    grid-template-columns: 1fr;
  }

  .page-contenuti .content-featured-card-main .content-featured-image {
    min-height: 0;
    height: 430px;
    padding: 20px;
  }

  .page-contenuti .content-featured-card-main .content-featured-image img {
    width: auto;
    height: 100%;

    max-width: 100%;
    max-height: 390px;

    object-fit: contain;
    margin: auto;
  }
}