/* Grup Scout Parpalló — Famílies, Preguntes freqüents i Calendari (WEB-2B).
 * WEB-5: integrades en el llenguatge original del lloc. Capçalera de paper (.sec-hero),
 * contingut sobre el verd del cos, plaquetes de paper (calcària) amb filet de color,
 * eyebrow a mà en ocre i separacions amb la ratlla en morse. Només tokens de styles.css.
 */

/* ---- blocs de contingut sobre el verd del cos ---- */
.families-content-block,.faq-content-block,.calendar-content-block{background:transparent;color:var(--calcaria-2)}
.families-content-block + .families-content-block{padding-top:0}
.families-content-block h2,.faq-content-block h2,.calendar-content-block h2{color:#fff}
.families-content-block .intro-txt,.calendar-content-block .intro-txt{font-size:var(--fs-lg);max-width:56ch;margin-bottom:1.6rem}

/* ---- metodologia i recursos: plaquetes ---- */
.method-grid{display:grid;gap:1.1rem;grid-template-columns:1fr;margin-top:1.2rem}
@media (min-width:680px){.method-grid{grid-template-columns:1fr 1fr}}
@media (min-width:980px){.method-grid{grid-template-columns:repeat(3,1fr)}}
.method-card{background:var(--calcaria-2);color:var(--negre);border:2px solid var(--calcaria-3);border-left:6px solid var(--ocre);
  border-radius:12px 8px 12px 8px;padding:1rem 1.1rem}
.method-card h3{font-size:1.15rem;color:var(--verd);margin:0 0 .35rem}
.method-card p{margin:0;font-size:1rem}
.method-link{margin-top:.8rem!important}
.method-card .btn-link{color:var(--verd);font-weight:700}

/* ---- branques: com les plaquetes de les seccions de la portada ---- */
.branches-cards{display:grid;gap:1.2rem;grid-template-columns:1fr;margin-top:1.2rem}
@media (min-width:640px){.branches-cards{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.branches-cards{grid-template-columns:repeat(4,1fr)}}
.branch-summary-card{position:relative;display:flex;flex-direction:column;justify-content:space-between;background:var(--calcaria-2);color:var(--negre);
  border:2px solid var(--calcaria-3);border-left:8px solid var(--sc,var(--ocre));border-radius:16px 8px 18px 10px/10px 18px 8px 16px;padding:1.2rem 1.2rem 1.3rem}
.branch-summary-card.estol{--sc:var(--s-manada)}
.branch-summary-card.tropa{--sc:var(--s-tropa)}
.branch-summary-card.esculta{--sc:var(--s-escoltes)}
.branch-summary-card.clan{--sc:var(--s-clan)}
.branch-summary-card .edat{font-weight:700;color:var(--sc);font-size:.9rem;margin:0}
.branch-summary-card h3{color:var(--negre);margin:.1rem 0 .3rem}
.branch-summary-card .lema{font-family:inherit;font-style:italic;font-weight:600;color:var(--text-suau);margin:0 0 .5rem}
.branch-summary-card p{font-size:.98rem;margin:0 0 .7rem}
.branch-summary-card .btn-link{font-weight:700;color:var(--sc);margin-top:auto}

/* ---- paper de les famílies ---- */
.family-involvement-panel{background:var(--calcaria-2);color:var(--negre);border:2px solid var(--calcaria-3);border-left:6px solid var(--ocre);
  border-radius:14px 8px 16px 10px;padding:1.2rem 1.4rem;max-width:62rem}
.family-involvement-panel h3{color:var(--verd);margin-bottom:.4rem}
.family-involvement-panel ul{margin:.6rem 0 0;padding-left:1.2rem}
.family-involvement-panel li{margin-bottom:.5rem}
.family-involvement-panel li::marker{color:var(--ocre)}

/* ---- incorporació: passos com els de la secció d'alta original (.pas) ---- */
.steps-container{display:grid;gap:1rem;grid-template-columns:1fr;margin:1.4rem 0}
@media (min-width:680px){.steps-container{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.steps-container{grid-template-columns:repeat(4,1fr)}}
.step-card{background:color-mix(in srgb,var(--verd-nit) 88%,#000);border-radius:12px;padding:1rem 1.1rem;color:var(--calcaria-2)}
.step-card .step-badge{font-weight:800;font-size:1.5rem;color:var(--ocre-llum);line-height:1;margin-bottom:.4rem}
.step-card h3{color:#fff;font-size:1.1rem;margin:0 0 .35rem}
.step-card p{margin:0 0 .5rem;font-size:.98rem}
.step-card .step-note{font-size:var(--fs-sm);color:var(--ocre-llum);margin:0}
.families-accio{margin-top:1.4rem}

/* ============ Preguntes freqüents ============ */
.faq-wrap{max-width:52rem}
.faq-category{margin-bottom:2.4rem}
.faq-category:last-child{margin-bottom:0}
.faq-category-header h3{color:#fff;font-size:var(--fs-h3);margin:0 0 .8rem}
.faq-list{display:grid;gap:.7rem}
.faq-item{background:var(--calcaria-2);color:var(--negre);border:2px solid var(--calcaria-3);border-left:6px solid var(--ocre);border-radius:12px 8px 12px 8px}
.faq-item[open]{border-left-color:var(--roig)}
.faq-item summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;cursor:pointer;
  padding:.9rem 1.1rem;min-height:52px;font-weight:700;line-height:1.35}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--verd)}
.faq-icon-arrow{flex:none;width:20px;height:20px;fill:none;stroke:var(--roig);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.faq-item[open] .faq-icon-arrow{transform:rotate(180deg)}
.faq-body{padding:0 1.1rem 1rem}
.faq-body p:last-child{margin-bottom:0}
.faq-body a{color:var(--verd);text-decoration:underline;text-underline-offset:.18em}

/* ============ Calendari ============ */
.calendar-intro{max-width:46rem}
.calendar-filter-bar{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0 .4rem}
.filter-btn{font:inherit;font-weight:700;font-size:.92rem;min-height:44px;padding:.45em .95em;cursor:pointer;
  border:2px solid var(--ocre-llum);border-radius:9px;background:transparent;color:var(--ocre-llum)}
.filter-btn:hover{background:color-mix(in srgb,var(--ocre-llum) 18%,transparent)}
.filter-btn[aria-pressed="true"]{background:var(--ocre-llum);color:var(--verd-nit)}
.calendar-counter{font-size:var(--fs-sm);margin:.6rem 0 1.4rem}
.events-empty{background:color-mix(in srgb,#000 14%,transparent);border:2px dashed var(--ocre-clar);border-radius:12px;padding:1.2rem 1.3rem;margin:1rem 0 1.6rem}
.events-empty p{margin:0}
.events-list{display:grid;gap:1.1rem;max-width:56rem}
.event-card{display:grid;gap:1rem;grid-template-columns:1fr;background:var(--calcaria-2);color:var(--negre);border:2px solid var(--calcaria-3);
  border-left:6px solid var(--ocre);border-radius:14px 8px 16px 10px;padding:1.1rem 1.2rem}
.event-card[hidden]{display:none}
@media (min-width:640px){.event-card{grid-template-columns:auto 1fr;align-items:start}}
.event-date-box{display:flex;flex-direction:column;align-items:flex-start;min-width:7rem;padding:.55rem .8rem;border:2px dashed var(--ocre);border-radius:10px;background:color-mix(in srgb,var(--ocre) 12%,var(--calcaria-2))}
.date-range{font-weight:800;font-size:1.25rem;line-height:1.1;color:var(--negre)}
.date-year{font-size:var(--fs-sm);font-weight:600;color:var(--text-suau)}
.event-meta{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.4rem}
.event-badge{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.02em;padding:.15em .5em;border-radius:5px;background:var(--calcaria-3);color:var(--negre)}
.badge-pendent{background:color-mix(in srgb,var(--ocre) 22%,var(--calcaria));border-bottom:2px dashed var(--ocre)}
.badge-past{background:var(--calcaria-3);color:var(--text-suau)}
.badge-future{background:color-mix(in srgb,var(--verd) 18%,var(--calcaria-2));color:var(--verd-nit)}
.badge-campament{background:color-mix(in srgb,var(--roig) 14%,var(--calcaria-2));color:var(--roig-fosc)}
.event-info h3{color:var(--negre);margin:0 0 .3rem}
.event-location{display:flex;gap:.35rem;align-items:center;font-size:var(--fs-sm);color:var(--text-suau);margin:0 0 .5rem}
.event-location svg{color:var(--roig);flex:none}
.event-desc{margin:0;font-size:1rem}
.event-desc code{font-size:.9em}
.calendar-meta-box{margin-top:2rem;max-width:56rem;background:color-mix(in srgb,#000 14%,transparent);border:1px solid color-mix(in srgb,var(--ocre-clar) 28%,transparent);
  border-left:6px solid var(--ocre-clar);border-radius:14px 8px 16px 10px;padding:1.1rem 1.2rem;font-size:var(--fs-sm)}
.calendar-meta-box .meta-alert{font-weight:700;color:var(--ocre-llum);margin-bottom:.4rem}
.calendar-meta-box p{margin-bottom:.5rem}
.calendar-meta-box .meta-font{font-size:var(--fs-xs);color:var(--calcaria-3);margin:0}
.families-accio .btn,.families-content-block .btn{white-space:normal;max-width:100%}

/* Llei i Promesa Scout desplegables dins de la targeta del mètode */
.llei-promesa{margin-top:.7rem;font-size:.95rem}
.llei-promesa summary{cursor:pointer;color:var(--verd);font-weight:700}
.llei-promesa p{margin:.6rem 0 .2rem}
.llei-promesa ol,.llei-promesa ul{margin:.2rem 0 .4rem;padding-left:1.4rem}
.llei-promesa li{margin-bottom:.2rem}