/* ==========================================================================
   Agenda d'events — adaptació de la maqueta a la paleta IDIAP
   Verd primari #006C35 · text #1E1E1E · fons clar #F9F9F9 · accent #E94E10
   Font: SF Pro Display (global del tema)
   ========================================================================== */

.agenda-main-out { float: left; width: 100%; padding: 60px 0 90px; background: #fff; }

/* Columnes */
.agenda-main-lft { float: left; width: 300px; }
.cal-bx-lst { float: left; width: 100%; padding: 0; background: #fff; }
.agenda-main-rgt { float: left; width: calc(100% - 300px); padding-left: 85px; }
.agenda-main-rgt h2 {
    color: #1E1E1E; font-family: 'SFProDisplay-Semibold', sans-serif;
    font-size: 25px; line-height: 30px; letter-spacing: -0.3px; margin-bottom: 22px;
}

/* Llista de cards */
.agenda-main-rgt .agenda-list { display: flex; flex-wrap: wrap; row-gap: 16px; margin-bottom: 60px; padding: 0; list-style: none; }
.agenda-main-rgt .agenda-list-last { margin-bottom: 40px; }
.agenda-main-rgt .agenda-list li { flex: 0 1 100%; }
.agenda-main-rgt .agenda-list li > a,
.agenda-main-rgt .agenda-list li > div {
    display: flex; background: #F9F9F9; border-radius: 5px; overflow: hidden;
    transition: all 0.4s ease; text-decoration: none;
}
.agenda-main-rgt .agenda-list li > a:hover { box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); }

.agenda-empty { flex: 0 1 100% !important; }
.agenda-empty p { color: #515151; font-family: 'SFProDisplay-Regular', sans-serif; font-size: 15px; }

/* Icona d'enllaç extern/intern (només si hi ha enllaç) */
span.ext-link {
    display: inline-block; position: absolute; right: 16px; top: 16px; width: 18px; height: 18px;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23006C35' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") no-repeat center center;
}

/* Imatge de la card */
.agenda-main-rgt .agenda-list li .agenda-img { width: 117px; flex-shrink: 0; position: relative; }
.agenda-main-rgt .agenda-list li .agenda-img img { float: left; width: 100%; height: 100%; object-fit: cover; }
.agenda-img span.cat-txt {
    position: absolute; top: 18px; left: 18px; color: #fff; font-size: 12px; line-height: 12px;
    font-family: 'SFProDisplay-Semibold', sans-serif; text-transform: uppercase; letter-spacing: 0.3px;
    height: 22px; border-radius: 3px; padding: 0 8px; background: #006C35; display: none; align-items: center;
}

/* Contingut de la card */
.agenda-txt-out { display: flex; width: 100%; flex-wrap: wrap; padding: 20px 75px 20px 20px; position: relative; }
.agenda-cat { width: 130px; flex-shrink: 0; }
.agenda-cat span.cat-txt {
    color: #fff; font-size: 12px; line-height: 12px; font-family: 'SFProDisplay-Semibold', sans-serif;
    text-transform: uppercase; letter-spacing: 0.3px; height: 22px; border-radius: 3px; padding: 0 8px;
    background: #006C35; display: inline-flex; align-items: center;
}
ul.cat-lst { display: flex; flex-wrap: wrap; margin-top: 15px; row-gap: 3px; padding: 0; list-style: none; }
ul.cat-lst li:first-child { font-family: 'SFProDisplay-Bold', sans-serif; }
ul.cat-lst li { font-size: 14px; line-height: 20px; color: #1E1E1E; font-family: 'SFProDisplay-Regular', sans-serif; letter-spacing: -0.29px; width: 100%; }
.agenda-cnt { width: calc(100% - 130px); }
.agenda-cnt h3 { color: #006C35; font-family: 'SFProDisplay-Semibold', sans-serif; font-size: 20px; line-height: 26px; margin-bottom: 12px; }
.agenda-cnt p { font-size: 14px; line-height: 22px; color: #515151; font-family: 'SFProDisplay-Regular', sans-serif; }
.agenda-cnt ul.cat-lst { display: none; }

/* Read more */
.add-read-more.show-less-content .second-section,
.add-read-more.show-less-content .read-less { display: none; }
.add-read-more.show-more-content .read-more { display: none; }
.add-read-more .read-more, .add-read-more .read-less {
    margin-left: 2px; color: #006C35; font-family: 'SFProDisplay-Semibold', sans-serif;
    font-size: 14px; line-height: 22px; cursor: pointer;
}
.add-read-more { width: 100%; }

/* Botó "Cerca per data" (mòbil) */
.filter-btn { float: left; width: 100%; display: none; }
.filter-btn a { height: 50px; display: flex; align-items: center; padding: 0 18px; column-gap: 15px; position: relative; text-decoration: none; }
.filter-btn a span { font-size: 16px; line-height: 26px; color: #1E1E1E; font-family: 'SFProDisplay-Bold', sans-serif; letter-spacing: -0.33px; }
.filter-btn a::after {
    content: ""; position: absolute; right: 18px; width: 12px; height: 12px;
    border-right: 2px solid #006C35; border-bottom: 2px solid #006C35;
    transform: rotate(45deg); transition: transform 0.3s ease;
}
.filter-btn a.open::after { transform: rotate(-135deg); }

/* Enllaç "veure tots" sota el calendari filtrat */
.calendar-reset { float: left; width: 100%; margin-top: 12px; text-align: center; }
.calendar-reset a { color: #006C35; font-family: 'SFProDisplay-Semibold', sans-serif; font-size: 14px; text-decoration: underline; }

/* Paginació */
.pagination-lst { float: left; width: 100%; display: flex; align-items: center; justify-content: left; }
.pagination-lst ul { float: left; width: auto; display: flex; flex-wrap: wrap; column-gap: 2px; align-items: center; padding: 0; list-style: none; }
.pagination-lst ul li { flex: 0 1 auto; }
.pagination-lst ul li a {
    color: #1E1E1E; font-size: 16px; line-height: 20px; font-family: 'SFProDisplay-Bold', sans-serif;
    transition: all 0.4s ease; width: 35px; height: 35px; display: flex; align-items: center;
    justify-content: center; border-radius: 100%; letter-spacing: -0.33px; text-decoration: none;
}
.pagination-lst ul li a:hover { color: #006C35; }
.pagination-lst ul li a.current { color: #fff; background: #006C35; }
.pagination-lst ul li a.prev-arw { width: auto; margin-right: 20px; padding: 0 10px; }
.pagination-lst ul li a.prev-arw:hover { background: none; color: #006C35; }
.pagination-lst ul li a.next-arw { width: auto; margin-left: 20px; padding: 0 10px; }
.pagination-lst ul li a.next-arw:hover { background: none; color: #006C35; }

/* ==========================================================================
   Calendari (air-datepicker inline) — TOT scopat sota .cal-bx-lst .calendar
   perquè no afecti els altres datepickers de la web (.datepicker-here, etc.)
   ========================================================================== */
.cal-bx-lst .calendar { width: 100%; }

/* Contenidor: ample complet i estil net (maqueta) */
.cal-bx-lst .calendar .datepicker {
    width: 100%; border: 1px solid #EDEDED; border-radius: 6px; box-shadow: none;
    font-family: 'SFProDisplay-Regular', sans-serif; color: #1E1E1E;
}
.cal-bx-lst .calendar.-inline- .datepicker,
.cal-bx-lst .calendar .datepicker.-inline- { border-color: #EDEDED; }
.cal-bx-lst .calendar .datepicker--content { padding: 8px; }

/* Capçalera de navegació */
.cal-bx-lst .calendar .datepicker--nav { border-bottom: 1px solid #EDEDED; padding: 6px 4px; min-height: 38px; }
.cal-bx-lst .calendar .datepicker--nav-title {
    color: #1E1E1E; font-family: 'SFProDisplay-Semibold', sans-serif; font-size: 15px; text-transform: capitalize;
}
.cal-bx-lst .calendar .datepicker--nav-title i { color: #006C35; }
.cal-bx-lst .calendar .datepicker--nav-title:hover,
.cal-bx-lst .calendar .datepicker--nav-action:hover { background: #F9F9F9; }

/* Fletxes prev/next en verd (substitueixen l'SVG per defecte) */
.cal-bx-lst .calendar .datepicker--nav-action { width: 30px; }
.cal-bx-lst .calendar .datepicker--nav-action svg { display: none; }
.cal-bx-lst .calendar .datepicker--nav-action span {
    display: block; width: 9px; height: 9px;
    border-top: 2px solid #006C35; border-right: 2px solid #006C35;
}
.cal-bx-lst .calendar .datepicker--nav-action[data-action="prev"] span { transform: rotate(-135deg); }
.cal-bx-lst .calendar .datepicker--nav-action[data-action="next"] span { transform: rotate(45deg); }

/* Noms dels dies i cel·les */
.cal-bx-lst .calendar .datepicker--day-name { color: #989898; font-size: 11px; }
.cal-bx-lst .calendar .datepicker--cell { height: 34px; color: #1E1E1E; border-radius: 100%; }
.cal-bx-lst .calendar .datepicker--cell.-focus- { background: #F9F9F9; color: #006C35; }

/* Dia amb event: pastilla verda clara + punt */
.cal-bx-lst .calendar .datepicker--cell.has-event {
    background: rgba(0, 108, 53, 0.10); color: #006C35; font-family: 'SFProDisplay-Bold', sans-serif;
}
.cal-bx-lst .calendar .datepicker--cell.has-event::after {
    content: ""; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
    width: 5px; height: 5px; border-radius: 100%; background: #006C35;
}

/* Dia actual (avui) i dia seleccionat: cercle verd sòlid + número blanc (maqueta) */
.cal-bx-lst .calendar .datepicker--cell.-current-,
.cal-bx-lst .calendar .datepicker--cell.-current-.has-event,
.cal-bx-lst .calendar .datepicker--cell.-selected-,
.cal-bx-lst .calendar .datepicker--cell.-selected-.-current-,
.cal-bx-lst .calendar .datepicker--cell.-selected-.-focus- {
    background: #006C35; color: #fff; font-family: 'SFProDisplay-Bold', sans-serif;
}
.cal-bx-lst .calendar .datepicker--cell.-current-.has-event::after,
.cal-bx-lst .calendar .datepicker--cell.-selected-.has-event::after { background: #fff; }

/* Quan hi ha un dia seleccionat, "avui" (si no és el seleccionat) deixa d'estar marcat */
.cal-bx-lst .calendar.has-selection .datepicker--cell.-current-:not(.-selected-):not(.has-event) {
    background: none; color: #1E1E1E; font-family: 'SFProDisplay-Regular', sans-serif;
}
.cal-bx-lst .calendar.has-selection .datepicker--cell.-current-.has-event:not(.-selected-) {
    background: rgba(0, 108, 53, 0.10); color: #006C35; font-family: 'SFProDisplay-Bold', sans-serif;
}
.cal-bx-lst .calendar.has-selection .datepicker--cell.-current-.has-event:not(.-selected-)::after {
    background: #006C35;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
    .agenda-main-rgt { padding-left: 40px; }
}
@media (max-width: 767px) {
    .agenda-main-lft, .agenda-main-rgt { width: 100%; float: none; padding-left: 0; }
    .filter-btn { display: block; }
    .cal-bx-lst .calendar { display: none; }
    .agenda-main-lft { margin-bottom: 30px; }
    .agenda-txt-out { padding: 16px 50px 16px 16px; }
    .agenda-cat { width: 100%; }
    .agenda-cnt { width: 100%; }
    .agenda-cnt ul.cat-lst { display: flex; }
    .agenda-cat { display: none; }
}