@charset "utf-8";
/* CSS Document */

	 :root{
      --bg: #f5f7f6;
      --card: #ffffff;
      --ink: #223033;
      --muted: #6f7d7d;

      --brand-1: #7aa5a8; /* accento */
      --brand-2: #4d6a6d; /* titoli */
      --soft: #eef5f4;    /* box evidenza */
      --soft-2:#f7faf9;   /* sfondo tenue */
      --shadow: 0 12px 28px rgba(0,0,0,.08);

      --radius-xl: 20px;
      --radius-lg: 16px;
      --radius-md: 12px;
    }

    body{
      margin:0;
      font-family: "Segoe UI", Tahoma, system-ui, -apple-system, sans-serif;
      background: var(--bg);
      color: var(--ink);
    }
  .story{
	  width: 100%;
      max-width: 1200px;
      margin: 30px auto;
      padding: 0 16px;
    }

    .story__card{
      background: var(--card);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow);
      overflow: hidden; /* per arrotondare anche hero */
    }

    /* ====== ELEMENT: hero ====== */
    .story__hero{
      position: relative;
      min-height: 300px;
      padding: 12px;
      display: grid;
      align-content: end;
      gap: 10px;

      /* Fallback se non vuoi foto */
      background:
        radial-gradient(1200px 420px at 20% 0%, rgba(122,165,168,.35), transparent 60%),
        linear-gradient(135deg, rgba(238,245,244,1), rgba(247,250,249,1));
    }

    /* Se vuoi immagine: applicala come background-image su .story__hero */
    .story__hero--with-image{
      background-size: cover;
      background-position: center;
    }

    /* Overlay per rendere testo leggibile su foto */
    .story__hero::before{
      content:"";
      position:absolute;
      inset:0;
      background: linear-gradient(
        to top,
        rgba(0,0,0,.55) 0%,
        rgba(0,0,0,.15) 55%,
        rgba(0,0,0,0) 100%
      );
      opacity: 0; /* di default (per fallback gradiente) */
      pointer-events:none;
    }

    /* Attiva overlay solo quando usi immagine */
    .story__hero--with-image::before{
      opacity: 1;
    }

    .story__hero-content{
      position: relative;
      max-width: 1100px;
      color: var(--ink);
    }

    /* Quando c’è immagine, testo chiaro */
    .story__hero--with-image .story__hero-content{
		
      color: #ffffff;
    }

.story__hero--with-image{
      background-size: cover;
      background-position: center;
    }

    .story__badge{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      width: fit-content;
      padding: 8px 12px;
      border-radius: 999px;
      font-size: .88rem;
      font-weight: 600;
      letter-spacing: .2px;
      background: rgba(255,255,255,.75);
      color: #1f2d30;
      backdrop-filter: blur(6px);
    }

    /* Badge su immagine: più trasparente e chiaro */
    .story__hero--with-image .story__badge{
      background: rgba(255,255,255,.18);
      color: #ffffff;
      border: 1px solid rgba(255,255,255,.24);
    }

    .story__title{
      margin: 0;
      font-size: clamp(1.5rem, 2.4vw, 2.2rem);
      line-height: 1.15;
      letter-spacing: -0.4px;
    }

    .story__subtitle{
      margin: 0;
      font-size: 1.02rem;
      line-height: 1.5;
      color: rgba(34,48,51,.82);
    }

    .story__hero--with-image .story__subtitle{
      color: rgba(255,255,255,.88);
    }

    /* ====== ELEMENT: body ====== */
    .story__body{
      padding: 26px 28px 30px;
      background: var(--card);
    }

    .story__meta{
      display: flex;
      flex-wrap: wrap;
      gap: 10px 14px;
      margin: 0 0 18px;
      color: var(--muted);
      font-size: .95rem;
    }

    .story__meta-item{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      background: var(--soft-2);
      border-radius: 999px;
      border: 1px solid rgba(122,165,168,.22);
    }

    .story__section-title{
      margin: 22px 0 8px;
      font-size: 1.18rem;
      color: var(--brand-2);
      letter-spacing: -0.2px;
    }

    .story__text{
      margin: 10px 0;
      line-height: 1.75;
      color: rgba(34,48,51,.92);
    }

    .story__highlight{
      margin: 18px 0;
      padding: 16px 16px;
      background: var(--soft);
      border-left: 4px solid var(--brand-1);
      border-radius: var(--radius-md);
      color: rgba(34,48,51,.95);
    }

    /* ====== MODIFIER: highlight important ====== */
    .story__highlight--important{
      background: #e6f2f1;
      border-left-color: #4d8488;
    }


.story__actions {
  margin-top: 15px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Pulsante base */
.story__btn {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 25px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
}

/* Pulsante principale */
.story__btn--primary {
  background-color: #3182ce;
  color: white;
}

.story__btn--primary:hover {
  background-color: #2b6cb0;
  transform: translateY(-2px);
}

/* Pulsante secondario (chiaro) */
.story__btn--ghost {
  background-color: #edf2f7;
  color: #2b6cb0;
  border: 1px solid #cbd5e0;
}

.story__btn--ghost:hover {
  background-color: #e2e8f0;
}

    .story__footer{
      margin-top: 22px;
      padding-top: 16px;
      border-top: 1px solid rgba(0,0,0,.06);
      color: var(--muted);
      font-style: italic;
    }

    /* ====== Responsive ====== */
    @media (max-width: 640px){
      .story__hero{ min-height: 240px; padding: 20px; }
      .story__body{ padding: 20px; }
      .story__meta-item{ width: 100%; justify-content: center; }
    }