/* ==========================================================================
   CORE BASIC ELEMENTS INDEX
   ==========================================================================
   1. Utility Classes — Section Padding
      - .u-section-padding  (responsive automático)
      - .u-section-padding-xs
      - .u-section-padding-sm
      - .u-section-padding-lg
      - .u-section-padding-none
   2. Utility Classes — Section Margin
      - .u-section-margin  (responsive automático)
      - .u-section-margin-sm
      - .u-section-margin-lg
      - .u-section-margin-none
   3. Bootstrap Overrides — Layout
      - .row gutter (≥1024px)
      - .container max-width (≥1600px)
   4. Button (base)
   5. Button Variants
      - button--primary
         - :hover
      - button--secondary
         - :hover
         - :focus / :focus-visible
         - :active (pressed)
         - :disabled
   6. Button Elements
      - button__icon
      - button__icon--small
   7. Background Utilities
      - .bg-primary-100
   8. Card (base) — .c-card
   9. Card Elements
      - .c-card__badge / .c-card__badge-icon
      - .c-card__row_badge
      - .c-card__badges-footer
      - .c-card__image / .c-card__image__img / .c-card__image__icon
      - .c-card__header
      - .c-card__title
      - .c-card__body / .c-card__text
      - .c-card__actions
      - .c-card__dates / .c-card__dates-icon
      - .c-card__date / .c-card__dates-separator
      - .card__date--open / .card__date--close
  10. Section Header Block
      - .section-header
      - .section-heading
      - .section-title-wrapper
      - .section-icon
      - .section-title
      - .section-subtitle
      - .section-body
      - .section-text
      - .section-actions
  11. Swiper Carousel — Core Component (.c-swiper)
      - .c-swiper              (clip container, overflow-x: hidden)
      - .c-swiper__track       (div.swiper, overflow: visible)
      - .c-swiper__actions     (barra de navegació)
      - .c-swiper__arrows      (contenidor flechas)
      - .c-swiper__prev / __next
      - .c-swiper__pagination  (paginació lineal)
      Variant oscur:
      - .c-swiper--on-dark     (flechas y bullets en blanco)
   ========================================================================== */




/* ==========================================================================
   Utility Classes — Section Padding
   ========================================================================== */

/* Aplica padding vertical responsive automático */
.u-section-padding {
    padding-top:    var(--section-padding);
    padding-bottom: var(--section-padding);
}

/* Variante compacta */
.u-section-padding-sm {
    padding-top:    var(--section-padding-sm);
    padding-bottom: var(--section-padding-sm);
}

/* Variante mínima */
.u-section-padding-xs {
    padding-top:    var(--section-padding-xs);
    padding-bottom: var(--section-padding-xs);
}

/* Variante amplia */
.u-section-padding-lg {
    padding-top:    var(--section-padding-lg);
    padding-bottom: var(--section-padding-lg);
}

/* Sin padding */
.u-section-padding-none {
    padding-top:    var(--section-padding-none);
    padding-bottom: var(--section-padding-none);
}


/* ==========================================================================
   Utility Classes — Section Margin
   ========================================================================== */

/* Aplica margin vertical responsive automático */
.u-section-margin {
    margin-top:    var(--section-margin);
    margin-bottom: var(--section-margin);
}

/* Variante compacta */
.u-section-margin-sm {
    margin-top:    var(--section-margin-sm);
    margin-bottom: var(--section-margin-sm);
}

/* Variante amplia */
.u-section-margin-lg {
    margin-top:    var(--section-margin-lg);
    margin-bottom: var(--section-margin-lg);
}

/* Sin margin */
.u-section-margin-none {
    margin-top:    var(--section-margin-none);
    margin-bottom: var(--section-margin-none);
}


/* ==========================================================================
Bootstrap overrides — Layout
========================================================================== */


@media (min-width: 1024px) {
    .row {
    --bs-gutter-x: 40px;
  }
}
@media (min-width: 1600px) {
  

  .container,
  .container-lg,
  .container-xl,
  .container-xxl {
    max-width: 1556px;
  }
}

/* ==========================================================================
Components
========================================================================== */

.c-list__grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}
@media (min-width: 1400px){
    .c-list__grid{
        grid-template-columns: repeat(4, 1fr);
    }
}
@media (max-width: 1399px){
    .c-list__grid{
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 991px){
    .c-list__grid{
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 767px){
    .c-list__grid{
        grid-template-columns: repeat(1, 1fr);
    }
}

.title-wrapper{
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    margin-bottom: 20px;
}

.c-highlight-row {
    background-color: var(--primary-100);
    padding: var(--section-padding-xs);
    border-radius: var(--radius-16);
    margin: var(--section-margin) 0;
}

.button{
    text-decoration: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border: none;
    cursor: pointer;
    transition: var(--transition-default);
}

.button--primary{
    color: var(--primary-500);
    background-color: transparent;
    border-radius: var(--radius-0);
    padding:0;
    font-size: var(--text-body-size);
    width: fit-content;
}

.button__text--primary{
        border-bottom: 2px solid var(--primary-500);

}

.button__text--primary:hover{
        border-bottom: 2px solid var(--secondary-500);

}

/* button secondary */

.button--secondary{
    background-color: var(--secondary-500);
    color: var(--black);
    border-radius: var(--radius-4);
    padding: 8px 16px;
    font-size: var(--text-body-size);
    width: fit-content;
    transition: all 0.2s ease-in-out;
}
.button__icon{
    font-size: 1.5em;  /* 24px relativo al font-size del botón */
    line-height: 1;
    margin-left: 0px;
    margin-right: 8px;
}
.button__icon--small{
    font-size: 1em;    /* igual al texto del botón */
    line-height: 1;
    margin-right: 0;
    margin-left: 4px;
}


/* States para button--secondary */
.button--secondary:hover {
    background-color: var(--secondary-300);
}

.button--secondary:focus,
.button--secondary:focus-visible {
    outline: 2px dashed var(--grey-700);
}

.button--secondary.active,
.button--secondary:active {
    background-color: var(--secondary-700);
}

.button--secondary:disabled,
.button--secondary.disabled {
    cursor: not-allowed;
    pointer-events: none;
    background-color: var(--secondary-100);
}



/* Background diversity */

.bg-primary-100{
    background-color: var(--primary-100);
}

/* CARD defoult */

.c-card{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.c-card__border{
    border: 1px solid var(--grey-400);
    background-color: var(--white);
    border-radius: var(--radius-16);
    padding: 24px;
}

 /* c-card badage use */

.c-card__badge{
    background-color: var(--grey-300);
    color: var(--black);
    font-size: var(--fs-xs);
    padding: 2px 8px;
    border-radius: var(--radius-4);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    width: fit-content;
}
.c-card__badge-icon{
    font-size: 1em;    /* relativo al font-size del badge */
    line-height: 1;
}

.c-card__row_badge{
    display: flex;
    flex-direction: row;
    gap: 8px;
    flex-wrap: wrap;
}

.c-card__badges-footer{
    display: flex;
    flex-direction: row;
    gap: 8px;
    flex-wrap: wrap;
}


/* c-card layout use */
.c-card__image{
    width: 100%;
    height: auto;
}
.c-card__image__img{
    width: 100%;
    height: 100%;
    border-radius: var(--radius-8);
    margin-bottom: 16px;
}
.c-card__image__icon{
    font-size: 3em;    /* 48px relativo al font-size del card */
    color: var(--primary-500);
}
.c-card__header{
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.c-card__title{
    color: var(--grey-900);
    font-size: var(--text-heading-m-size);
    font-weight: var(--text-heading-weight);
    line-height: var(--text-heading-line);
    margin: 0;
}
.c-card__body{
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.c-card__text{
    margin: 0;
}

.c-card__actions{
    margin: auto 0 0 0;
    display: flex;
    flex-direction: row;
    gap: 8px;
   flex-wrap: wrap;
}
.c-card__dates{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
}

.c-card__dates-icon{
    font-size: 1.5em;  /* icono inline relativo al texto de fechas */
    color: var(--grey-700);
    line-height: 1;
}

.c-card__date{
    font-size: var(--fs-s);
    color: var(--grey-800);
}
.c-card__dates-separator{
    font-size: var(--fs-m);
    color: var(--grey-800);
    line-height: 24px;
}
.card__date--open{
    color: var(--success-500);
}
.card__date--close{
    color: var(--danger-500);
}


/* ==========================================================================
   Section Header Block
   ========================================================================== */

.section-header {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.section-heading {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.section-title-wrapper {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
}

.section-icon {
    font-size: 1.5em;  /* icono inline relativo al section-title */
    color: var(--primary-500);
    line-height: 1;
}

.section-title {
    color: var(--grey-900);
    font-size: var(--text-heading-l-size);
    font-weight: var(--text-heading-weight);
    line-height: var(--text-heading-line);
    margin: 0;
}

.section-subtitle {
    font-size: var(--text-heading-s-size);
    color: var(--grey-900);
    margin: 0;
    font-weight: var(--font-weight-regular);
}

.section-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.section-text {
    font-size: var(--text-body-size);
    color: var(--grey-800);
    margin: 0;
    line-height: var(--text-body-line);
}

.section-actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
}


/* ==========================================================================
   Page Header Block
   ========================================================================== */

.page-header {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.page-header__title {
    font-size: var(--text-heading-xl-size);
    font-weight: var(--font-weight-bold);
    line-height: var(--text-heading-line);
    color: var(--primary-500);
    margin: 0;
}

.page-header__subtitle {
    font-size: var(--text-heading-s-size);
    font-weight: var(--font-weight-regular);
    line-height: var(--text-body-line);
    color: var(--grey-800);
    margin: 0;
}

.page-header__lead {
    font-size: var(--text-heading-s-size);
    font-weight: var(--font-weight-regular);
    line-height: var(--text-body-line);
    color: var(--grey-900);
    margin: 0;
}

.page-header__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.page-header__text {
    font-size: var(--text-body-size);
    line-height: var(--text-body-line);
    color: var(--grey-800);
    margin: 0;
}

.page-header__text--bold {
    font-weight: var(--font-weight-bold);
    color: var(--grey-900);
}

.page-header__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.page-header__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-body-size);
    color: var(--primary-500);
    text-decoration: underline;
    transition: color 0.2s ease;
}

.page-header__link:hover {
    color: var(--primary-700);
}

.page-header__link .ti {
    font-size: 1em;
    line-height: 1;
}


/* ==========================================================================
   11. Swiper Carousel — Core Component
   ==========================================================================

   Estructura HTML:

   <div class="c-swiper">
     <div class="c-swiper__track swiper">
       <div class="swiper-wrapper">
         <div class="swiper-slide">...</div>
       </div>
     </div>
     <!-- .c-swiper__actions és GERMÀ de .c-swiper__track, NO fill -->
     <div class="c-swiper__actions">
       <div class="c-swiper__pagination swiper-pagination"></div>
       <div class="c-swiper__arrows">
         <div class="c-swiper__prev swiper-button-prev"><i class="ti ti-arrow-left"></i></div>
         <div class="c-swiper__next swiper-button-next"><i class="ti ti-arrow-right"></i></div>
       </div>
     </div>
   </div>

   Variant fosc  → afegir .c-swiper--on-dark al mateix div.c-swiper
   ========================================================================== */

/* Clip container — solo recorta el overflow horizontal de los slides */
.c-swiper {
    overflow-x: hidden;
}

/* Swiper element — visible per als slides que surten dels límits */
.c-swiper__track {
    margin-top: var(--section-margin);
    overflow: visible;
}

/* Barra de navegació (paginació + fletxes) */
.c-swiper__actions {
    margin-top: var(--section-margin);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

/* Contenidor de fletxes */
.c-swiper__arrows {
    display: flex;
    justify-content: flex-end;
    width: 64px;
    height: 32px;
}

@media (min-width: 768px) {
    .c-swiper__arrows { width: 80px; }
}

@media (min-width: 1200px) {
    .c-swiper__arrows { width: 144px; }
}

/* Botons de fletxa */
.c-swiper__prev,
.c-swiper__next {
    color: var(--black);
    position: relative;
    width: 32px;
    height: 32px;
    left: inherit;
    margin: 0;
    right: inherit;
    top: inherit;
    bottom: inherit;
}

.c-swiper__prev::after,
.c-swiper__next::after {
    display: none;
}

.c-swiper__prev:hover,
.c-swiper__next:hover {
    color: var(--primary-700);
}

/* Paginació lineal */
.c-swiper__pagination {
    display: flex !important;
    gap: 0;
    position: relative;
    bottom: inherit !important;
    width: calc(100% - 64px) !important;
}

@media (min-width: 768px) {
    .c-swiper__pagination { width: calc(100% - 80px) !important; }
}

@media (min-width: 1200px) {
    .c-swiper__pagination { width: calc(100% - 144px) !important; }
}

.c-swiper__pagination .swiper-pagination-bullet {
    flex: 1;
    height: 3px;
    border-radius: 0;
    background-color: var(--grey-300);
    opacity: 1;
    margin: 0 !important;
    transition: background-color 0.2s ease;
}

.c-swiper__pagination .swiper-pagination-bullet-active {
    background-color: var(--primary-500);
    border-radius: 0;
    width: auto;
}

/* Variant: fons fosc — .c-swiper--on-dark */
.c-swiper--on-dark .c-swiper__prev,
.c-swiper--on-dark .c-swiper__next {
    color: var(--white);
}

.c-swiper--on-dark .c-swiper__prev:hover,
.c-swiper--on-dark .c-swiper__next:hover {
    color: var(--secondary-500);
}

.c-swiper--on-dark .c-swiper__pagination .swiper-pagination-bullet {
    background-color: var(--primary-300);
}

.c-swiper--on-dark .c-swiper__pagination .swiper-pagination-bullet-active {
    background-color: var(--white);
}

/* TABS */
.c-nav {
    display: flex;
    flex-direction: row;
    gap: 12px;
    padding: 0;
    margin-bottom: var(--section-margin-sm);
}

.c-nav__item {
    background-color: var(--white);
    border: 1px solid var(--grey-400);
    font-size: var(--fs-m);
    border-radius: var(--radius-8);
    padding: 8px 24px;
    transition: var(--transition-default);
}

.c-nav__item:hover,
.c-nav__item:has(a.active) {
    background-color: var(--primary-500);
    border: var(--primary-500);
    color: var(--white)
}

.c-position-relative {
    position: relative;
}


.stretched-link::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    content: "";
}

.c-stretched-link {
    font-size: 0;
    opacity: 0;
    margin: 0;
    padding: 0;
}