/*
 * CalcioCatania.com — Community home widget v9.1
 * Integrato con la nuova home 2026.
 */

.home-community-section {
  margin-top: 42px;
}

#cc-community-home {
  min-height: 190px;
}

.cc-community-card {
  --community-red: #d72638;
  --community-blue: #087fb8;
  --community-ink: #111111;
  --community-muted: #737373;
  --community-rule: #dedede;

  position: relative;

  min-height: 190px;

  overflow: hidden;

  padding:
    clamp(
      23px,
      3vw,
      32px
    );

  border-top:
    3px solid
    var(--community-ink);

  border-bottom:
    1px solid
    var(--community-rule);

  background:
    linear-gradient(
      115deg,
      rgba(8,127,184,.045),
      transparent 38%
    ),
    #fff;

  color:
    var(--community-ink);

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Helvetica Neue",
    Arial,
    sans-serif;
}

.cc-community-card::after {
  content: "";

  position: absolute;

  top: 0;
  right: 0;

  width: 92px;
  height: 3px;

  background:
    linear-gradient(
      90deg,
      var(--community-blue)
      0 50%,
      var(--community-red)
      50% 100%
    );
}

.cc-community-card__head {
  display: flex;

  align-items: flex-start;

  justify-content:
    space-between;

  gap: 20px;

  margin-bottom: 20px;
}

.cc-community-card__heading {
  display: grid;
  gap: 4px;
}

.cc-community-card__kicker {
  color:
    var(--community-red);

  font-size: .59rem;

  line-height: 1;

  font-weight: 900;

  letter-spacing: .10em;

  text-transform: uppercase;
}

.cc-community-card__title,
.cc-community-card__loading-title {
  margin: 0;

  color:
    var(--community-ink);

  font-size:
    clamp(
      1.55rem,
      3vw,
      2.45rem
    );

  line-height: .95;

  font-weight: 900;

  letter-spacing: -.045em;
}

.cc-community-card__live {
  display: inline-flex;

  align-items: center;

  gap: 7px;

  flex: 0 0 auto;

  min-height: 34px;

  padding:
    0
    11px;

  border:
    1px solid
    #e3e3e3;

  border-radius:
    999px;

  background: #fafafa;

  color:
    #777;

  font-size: .64rem;

  font-weight: 800;
}

.cc-community-card__dot {
  width: 8px;
  height: 8px;

  flex: 0 0 8px;

  border-radius: 50%;

  background: #1aa35d;

  box-shadow:
    0 0 0 4px
    rgba(26,163,93,.1);
}

.cc-community-card__online {
  color:
    var(--community-ink);

  font-size: .78rem;

  font-variant-numeric:
    tabular-nums;
}

.cc-community-card__meta {
  display: flex;

  align-items: baseline;

  flex-wrap: wrap;

  gap:
    6px
    12px;

  margin-bottom: 10px;
}

.cc-community-card__author {
  color:
    var(--community-blue);

  font-size: .78rem;

  font-weight: 900;
}

.cc-community-card__date {
  color: #8a8a8a;

  font-size: .61rem;

  font-weight: 700;
}

.cc-community-card__quote {
  max-width: 900px;

  margin: 0;

  color: #333;

  font-size:
    clamp(
      1rem,
      1.7vw,
      1.22rem
    );

  line-height: 1.48;

  font-weight: 560;

  font-style: normal;
}

.cc-community-card__quote::before {
  content: "“";

  margin-right: 4px;

  color:
    var(--community-red);

  font-size: 1.7em;

  line-height: 0;

  vertical-align: -.16em;
}

.cc-community-card__actions {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap:
    9px
    18px;

  margin-top: 20px;
}

.cc-community-card__cta,
.cc-community-card__secondary {
  color:
    var(--community-blue);

  font-size: .63rem;

  line-height: 1;

  font-weight: 900;

  letter-spacing: .055em;

  text-transform: uppercase;

  text-decoration: none;
}

.cc-community-card__cta {
  color:
    var(--community-red);
}

.cc-community-card__cta:hover,
.cc-community-card__secondary:hover {
  text-decoration: underline;

  text-underline-offset: 3px;
}

.cc-community-card__empty {
  max-width: 700px;

  margin: 0 0 18px;

  color:
    var(--community-muted);

  font-size: .82rem;

  line-height: 1.5;
}


/* Skeleton: spazio riservato per ridurre CLS */

.cc-community-card--loading {
  min-height: 190px;
}

.cc-community-card__loading-line {
  width: min(
    720px,
    88%
  );

  height: 13px;

  margin-top: 13px;

  border-radius: 20px;

  background:
    linear-gradient(
      90deg,
      #eeeeec 25%,
      #f7f7f5 50%,
      #eeeeec 75%
    );

  background-size: 200% 100%;

  animation:
    ccCommunityLoading
    1.25s linear
    infinite;
}

.cc-community-card__loading-line--short {
  width:
    min(
      480px,
      62%
    );
}

@keyframes ccCommunityLoading {
  from {
    background-position:
      200% 0;
  }

  to {
    background-position:
      -200% 0;
  }
}


@media (max-width: 680px) {

  .home-community-section {
    margin-top: 34px;
  }

  #cc-community-home,
  .cc-community-card {
    min-height: 205px;
  }

  .cc-community-card {
    padding:
      20px
      16px;
  }

  .cc-community-card__head {
    align-items: center;
  }

  .cc-community-card__live {
    min-height: 31px;

    padding:
      0
      9px;
  }

  .cc-community-card__actions {
    align-items: flex-start;

    flex-direction: column;

    gap: 13px;
  }

}


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

  .cc-community-card__loading-line {
    animation: none;
  }

}