/* CSS - estils per articles de miscel·lanea articles.css*/
* { /* Selecciona tots els elements  m'agrada fer sempre un RESET*/
          box-sizing: border-box; /* Inclou padding i border dins l'amplada i alçada */
          margin: 0; /* Elimina marges per defecte */
          padding: 0; /* Elimina padding per defecte */
        }
        :root{
      --bg:#f7f7f7;
      --card:#ffffff;
      --text:#222;
      --muted:#666;
      --accent:#2a6f97;
      --ring:rgba(42,111,151,0.25);
      --radius:14px;
      --shadow:0 6px 20px rgba(0,0,0,0.08);
    }
    body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: 1.2 em;
            line-height: 1.7;
            color: #333;
            max-width: 1200px;
            margin: 40px auto;
            padding: 20px;
            background: #acb0d6c0;
    }
    header { /* Capçalera */
            background: linear-gradient(135deg, #1a6fc4 0%, #0d4a8a 100%); /* Gradient de color blau */
            color: white; /* Text blanc */
            padding: 30px 0; /* Espaiat vertical */
            display: flex;  /* Utilitza Flexbox per al layout */
            align-items: center; /* Centra verticalment els elements */
            justify-content: center; /* Centra horitzontalment els elements */
            gap: 20px; /* Espai entre elements */
            flex-wrap: wrap; /* Permet que els elements es moguin a la següent línia si cal */
            text-align: center; /* Centra el text */
            border-radius: 10px 10px 10px 10px; /* Cantonades arrodonides a la part inferior */
            margin-bottom: 20px; /* Espai sota la capçalera */
            box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* Ombra suau */
        }
    .avatar {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            border: 4px solid white;
            margin-bottom: 1rem;
            object-fit: cover;
            box-shadow: var(--shadow);
        }    
    .container { /* Contenidor principal */
            width: 90%; /* Amplada del 90% de la finestra */
            max-width: 1200px; /* Amplada màxima */
            margin: 0 auto; /* Centrat horitzontalment */
            padding: 20px; /* Espaiat intern */
        }
    .logo-container { /* Contenidor per a la imatge del logo */
            display: flex; /* Utilitza Flexbox per al layout */
            align-items: center; /* Centra verticalment la imatge */
        }
        
    .logo { /* Estils per a la imatge del logo */
            width: 260px; /* Amplada de la imatge */
            height: 260px; /* Alçada de la imatge */
            border-radius: 12px; /* Cantonades arrodonides */
            object-fit: cover; /* Manté la proporció de la imatge */
            /* Si la imatge és més gran que el contenidor, s'ajusta */
            border: 3px solid white; /* Vora blanca */
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);  /* Ombra per a la imatge */
        }

    .titol-container { /* Contenidor per al títol i subtítol */
            text-align: center; /* Centra el text del títol */
        }

    /* TÍTOL PRINCIPAL */
    h1 {
            color: white;
            font-size: 2.5em;
            border-bottom: 1px solid #ccc;
            padding-bottom: 10px;
        }
        
    /* SUBTÍTOL */
    .subtitle { /* Estils per al subtítol */
            color: white;
            font-size: 1.2rem; /* Mida de font */
            opacity: 0.9; /* Lleugera transparència */
        }    

    /* peu foto moderna */
    .peu-foto-modern { /* Estil per al peu de foto */
        position: bottom; /* Posició a la part inferior de la imatge */
        padding: 8px 0; /* Espaiat intern */
        font-size: 0.8em; /* Mida de lletra més petita */
        text-align: center; /* Centrat */
        }
    .peu-foto-modern::before { /* Línia decorativa abans del text */
        content: ""; /* Contingut buit */
        position: absolute; /* Posició absoluta */
        top: 0; /* A la part superior del peu de foto */
        left: 25%; /* Centrat horitzontalment */
        width: 50%; /* Amplada de la línia */
        height: 1px; /* Alçada de la línia */
        background: linear-gradient(to right, transparent, #333, transparent);  /* Degradat */ 
        }

/* Contenidor responsive per vídeos */
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* Relació d'aspecte 16:9 */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    margin: 2rem 0; /* Espai superior i inferior */
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
/* Com funciona video-container?:
padding-bottom: 56.25% manté la proporció 16:9 (9/16 = 0.5625)
Si vols una proporció 4:3, usa padding-bottom: 75%
El position: absolute fa que l'iframe ompli tot el contenidor
És totalment responsive: s'adapta a qualsevol mida de pantalla */

    /* Estil per a títols i subtítols */
    h2, h3 {
        color: #1a1a1a;
        }
        
        h2 {
            font-size: 1.6em; 
            margin-top: 40px;
            color: #2c3e50;
        }
        h3 {
            font-size: 1.2em;
            margin: 15px 0 5px 0; /* Esquerra / dret / dalt /baix */
            color: #c0392b;
        }
        ul {
            margin: 15px 0 15px 20px; /* Marges */
            padding-left: 20px; /* Espaiat intern a l'esquerra */
        }
        p {
            margin: 15px 0; /* Marges verticals */
            line-height: 1.6; /* Altura de línia per llegibilitat */
        }

        /* Estil del separador */
.hr-degradat { /* Separador amb degradat */
    border: 0; /* Sense borde */ 
    height: 2px; /* Altura de la línia */ 
    background: linear-gradient(90deg, #ff0000, #00ff00, #0000ff); /* Degradat de colors */
    margin: 20px 0; /* Marge superior i inferior */
}
.wrap{
      max-width:1000px;
      padding:32px 20px 48px;
      margin:0 auto;
    }
     /* Grid 2x2 responsiu */
    .grid{
      display:grid;
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:18px;
    }
    @media (max-width:760px){
      .grid{ grid-template-columns:1fr; }
    }
     .card-grid{
      background:var(--card);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      padding:18px 18px 16px;
      transition:transform 160ms ease, box-shadow 160ms ease;
      position:relative;
      overflow:hidden;
    }
    .card-grid:focus-within,
    .card-grid:hover{
      transform:translateY(-2px);
      box-shadow:0 10px 28px rgba(0,0,0,0.12);
    }
    .card-grid h2{
      margin:0 0 8px;
      font-size:1.15rem;
      color:var(--accent);
    }
     .meta{
      font-size:0.88rem;
      color:var(--muted);
      margin-bottom:8px;
    }
    .list{
      margin:0;
      padding-left:18px;
    }
    .list li{
      margin:8px 0;
    }
    .list b{
      font-weight:600;
    }

    /* Detall visual subtil a la cantonada */
    .card::after{
      content:"";
      position:absolute;
      top:-40px; right:-40px;
      width:120px; height:120px;
      background:radial-gradient(circle at center, rgba(42,111,151,0.12), transparent 60%);
      transform:rotate(25deg);
    }

    /* Botó d'acció opcional */
    .actions{
      margin-top:12px;
      display:flex; gap:10px; flex-wrap:wrap;
    }
    .btn{
      appearance:none;
      border:1px solid rgba(42,111,151,0.35);
      background:#fff;
      color:var(--accent);
      border-radius:10px;
      padding:8px 12px;
      font-size:0.92rem;
      cursor:pointer;
    }
    .btn:hover{ border-color:var(--accent); }

        /* Estils addicionals per a la navegació */
        nav { /* Estils per a la barra de navegació */
            margin: 20px 0; /* Margen vertical */
        }
        
        .nav-links { /* Estils per a la llista de navegació */
            display: flex; /* Utilitza Flexbox per al layout */
            list-style: none; /* Elimina els punts de la llista */
            background: rgb(243, 240, 240); /* Fons blanc */
            border-radius: 8px; /* Cantonades arrodonides */
            overflow: hidden; /* Evita que els elements sobresurtin */
            box-shadow: 0 2px 8px rgba(0,0,0,0.08); /* Ombra suau */
        }
        
        .nav-links li { /* Estils per a cada element de la llista */
            flex: 1; /* Cada element ocupa la mateixa amplada */
        }
        
        .nav-links a { /* Estils per als enllaços de navegació */
            display: block; /* Mostra com a bloc */
            padding: 15px; /* Espaiat intern */
            text-align: center; /* Centra el text */
            text-decoration: none; /* Elimina la subratllada */
            color: #2c3e50; /* Color blau fosc */
            font-weight: 500; /* Text semi-negreta */
            transition: background 0.3s; /* Transició suau per al fons */
        }
        
        .nav-links a:hover { /* Efecte hover per als enllaços de navegació */
            background: #c8cacc; /* Fons gris clar */
        }
        .byline {
            font-style: italic;
            color: #666;
            font-size: 0.9em;
        }
        .chronology {
            margin: 30px 0; /* Margen vertical */
            display: flex;
            flex-direction: column;
            gap: 20px; /* Espai entre targetes */
            /* max-height: 600px; /* Altura màxima amb scroll */
            overflow-y: auto; /* Scroll vertical si cal */
            padding-right: 10px; /* Espai per al scroll */
            border-right: 1px solid #eee; /* Línia de separació */
            scrollbar-width: thin; /* Scrollbar prim */
            scrollbar-color: #ccc transparent; /* Colors del scrollbar */
            padding: 30px; /* Espaiat intern */
        }

article {
  max-width: 900px; /* Amplada màxima per llegibilitat */
  background-color: #fafafa; /* Blanc amb lleu toc de gris */ /* Fons suau */
  border: 1px solid #e0e0e0; /* Vora suau */
  border-radius: 12px; /* Cantons lleugerament arrodonits */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Ombra subtil */
  margin: 2rem auto; /* Espai exterior (separació entre articles) */
  padding: 2rem; /* Espai interior */
  overflow: hidden; /* Per si tens imatges o altres elements dins */
}
.cuote { /* Estil per a les cites dins l'article */
  font-style: italic; /* Text en cursiva */
  color: #555; /* Color gris fosc */
  border-left: 4px solid #ccc; /* Borde a l'esquerra */
  margin: 1.5rem 0; /* Marges verticals */
  padding-left: 1rem; /* Espaiat intern a l'esquerra */
}
.cuote-socratic { /* Estil per a cites socràtiques */
  background-color: #cfcfcf; 
  color:#1a1a1a; 
  padding: 10px;
  border-radius: 12px; 
  margin: 20px 0; 
  font-style: italic; 
  border-left: 6px solid #7f8c8d;
}


/* Botons de compartir */
.share-section { /* Contenidor dels botons de compartir */
  text-align: center; /* Centrat horitzontalment */
  margin: 32px 0 16px 0; /* Marge superior i inferior */
}
.share-title { /* Títol de la secció de compartir */
  color: #35424a; /* Color del text */
  font-size: 1.2em; /* Mida de la font */
  margin-bottom: 12px; /* Espai sota el títol */
  font-weight: bold; /* Text en negreta */
}
.share-btn { /* Estil dels botons de compartir */
  display: inline-block; /* Permet aplicar dimensions */
  margin: 0 10px; /* Espai entre els botons */
  padding: 8px 12px; /* Espaiat intern */
  border-radius: 8px; /* Cantons arrodonits */
  background: #f4f4f4; /* Color de fons */
  border: 2px solid #ddd; /* Borde */
  color: #222; /* Color del text */
  font-size: 1.1em; /* Mida de la font */
  text-decoration: none; /* Sense subratllat */
  transition: background 0.2s, border 0.2s, color 0.2s; /* Transicions suaus */
  vertical-align: middle; /* Alineació vertical */
}
.share-btn:hover { /* Efecte hover */
  background: #35424a; /* Color de fons més fosc */
  color: #fff; /* Color del text blanc */
  border-color: #35424a; /* Borde més fosc */
}
.share-btn img { /* Estil de les icones */
  width: 24px; /* Amplada de la icona */
  height: 24px; /* Altura de la icona */
  vertical-align: middle; /* Alineació vertical */
  margin-right: 6px; /* Espai entre la icona i el text */
}

/* Optimització per a mides petites (mòbils) */
/* Ajustos responsius per a mòbils i tauletes */

@media (max-width: 768px) {
  /* Ajust de l'article / targeta */
  article {
    margin: 1.5rem auto;
    padding: 1.5rem;
    border-radius: 10px;
  }

  /* Títols més petits però llegibles */
  .title {
    font-size: 1.4rem;
    line-height: 1.3;
  }

  .subtitle {
    font-size: 1rem;
    color: #ffffff;
  }

  /* Seccions i paràgrafs */
  section,
  p {
    font-size: 0.95rem;
    line-height: 1.6;
  }

  /* Menú del funeral d'Estat: més ajustat */
  .memorial-ritual {
    padding: 0 0.8rem;
  }

  .funeral-menu {
    padding: 1.2rem;
    margin: 1.5rem auto;
    max-width: 100%;
    font-size: 0.9rem;
  }

  .funeral-menu li {
    margin-bottom: 0.6rem;
  }

  /* Subllistes més compactes */
  .submenu {
    padding-left: 1em;
  }

  /* Línia decorativa més suau en mòbil */
  .hr-degradat {
    margin: 2.5rem 0;
  }

  .footnote {
    font-size: 0.85em;
    padding: 0 0.5rem;
  }
}

/* Ajustos per a pantalles molt petites (mòbils estrets) */
@media (max-width: 480px) {
  .title {
    font-size: 1.3rem;
  }

  .subtitle {
    font-size: 0.95rem;
  }

  section,
  p {
    font-size: 0.9rem;
    line-height: 1.5;
  }

  article {
    margin: 1.2rem auto;
    padding: 1.2rem;
  }

  /* Evita que el menú sobresurti */
  .funeral-menu {
    margin: 1.2rem 0.5rem;
    padding: 1rem;
    border-radius: 8px;
  }
  .content-img {  
    max-width: 300px; /* Amplada màxima del 100% del contenidor */
    height: auto; /* Altura automàtica per mantenir la proporció */
    width: 100%; /* Amplada completa del contenidor */
    display: block; /* Assegura que sigui un bloc */
    margin-left: auto; /* Centrat horitzontalment */
    margin-right: auto; /* Centrat horitzontalment */
  }

  .memorial-ritual {
    padding: 0 0.5rem;
  }

  /* Peu de foto: línia més curta */
  .peu-foto-modern::before {
    left: 20%;
    width: 60%;
  }
}

/* Opcional: millor visualització en mode horitzontal o tauletes (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  article {
    padding: 1.8rem;
    max-width: 800px;
  }

  .title {
    font-size: 1.6rem;
  }

  .funeral-menu {
    font-size: 0.95rem;
  }
}

        .card {
        background: #f9f9f9;
        border-left: 4px solid #c0392b;
        padding: 15px 20px;
        margin-bottom: 20px;
        border-radius: 0 8px 8px 0;
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        align-items: flex-start;
    }
        .card-content {
        flex: 1;
        min-width: 300px;
    }

    .card-image {
        flex: 0 0 260px;
        height: 260px;
        background-size: cover;
        background-position: center;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
        .type {
            font-size: 0.9em;
            font-weight: bold;
            color: #7f8c8d;
            margin: 0 0 8px 0;
        }
        .facts, .cause, .responsibility, .quote {
            margin: 8px 0;
            font-size: 0.95em;
        }
        .quote {
            font-style: italic;
            color: #2c3e50;
        }
        footer {
            margin-top: 60px;
            font-size: 0.85em;
            color: #777;
            border-top: 1px solid #eee;
            padding-top: 20px;
            padding-bottom: 20;
            text-align: right;
        }
        a {
            color: #0056b3;
            text-decoration: underline;
        }
        @media (max-width: 768px) {
            body {
                padding: 15px;
            }
            h1 {
                font-size: 1.8em;
            }
             .card {
            flex-direction: column;
        }
        .card-image {
            width: 100%;
        }
        .content-img {  
    max-width: 300px; /* Amplada màxima del 100% del contenidor */
    height: auto; /* Altura automàtica per mantenir la proporció */
    width: 100%; /* Amplada completa del contenidor */
    display: block; /* Assegura que sigui un bloc */
    margin-left: auto; /* Centrat horitzontalment */
    margin-right: auto; /* Centrat horitzontalment */
  }
        }
         .content-img {
        height: auto; /* Altura fixa (ajusta segons necessitis) */
        width: auto; /* Amplada proporcional */
        max-width: 600px; /* Amplada màxima per evitar que es faci massa gran */
        border: #a1a09f solid 8px; /* Borde blanc */
        border-radius: 15px; /* Cantons arrodonits */
        box-shadow: 0 8px 16px rgba(0,0,0,0.2); /* Ombra suau */
        margin: 20px auto; /* Marges i centrat */
        display: block; /* Centrat */
    }

.accessible-btn { 
  background-color: #005a9c; /* Blau fosc amb bon contrast */
  color: #ffffff; /* Text blanc per contrast AA/AAA */
  font-size: 1rem;
  padding: 0.75em 1.5em;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: sans-serif;
  transition: background-color 0.3s ease;
  text-decoration: none; /* ❌ Evita que torni a aparèixer en hover/focus */
}

.accessible-btn:hover,
.accessible-btn:focus {
  background-color: #003f6b; /* Color més fosc per hover/focus */
  outline: 2px solid #ffffff; /* Contorn visible per accessibilitat */
  outline-offset: 2px;
  
}

.accessible-btn:active {
  background-color: #002a45;
  
}
.caption {
      margin-top: 2em;
      font-size: 0.95em;
      color: #666;
      text-align: center;
      border-top: 1px dashed #ccc;
      padding-top: 1em;
    }
    .nota-link {
  display: inline-block;
  background-color: #e0e0e0;
  color: #333;
  font-size: 0.75em;
  padding: 0.2em 0.6em;
  border-radius: 4px;
  text-decoration: none;
  /* font-family: 'Georgia', serif;*/
  transition: background-color 0.3s ease;
}
.nota-link:hover {
  background-color: #d0d0d0;
}
.nota-link:focus {
  outline: 2px solid #005a9c;
  outline-offset: 2px;
}
.bloc-responsiu {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-start;
  }

  .bloc-responsiu img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    flex: 1 1 300px;
  }

  .bloc-responsiu .text {
    flex: 1 1 300px;
    max-width: 600px;
  }

  @media (max-width: 768px) {
    .bloc-responsiu {
      flex-direction: column;
    }
  }