/* css/formacio.css — Formació (listado, ficha e inscripción). Sustituye a resultats_digiforma.css.
   Solo clases dgf-* (y retoques de componentes de main.css dentro de .dgf-*): no toca cabecera, pie ni modales.
   Colores y tipografía de root.css · 1rem = 10px (reset.css) · esquinas rectas y sin sombras, como el resto de la web. */

/* ------------------------------------------------------------------ Ajustes de la maqueta en estas páginas */

/* La columna de contenido no puede ser más ancha que la pantalla (los items de grid tienen min-width: auto) */
.modulesWrapper > .modulesContentRight,
.modulesWrapper > .modulesTreeLeft {
    min-width: 0;
}
/* Migas largas (área + curso): pasan a la línea siguiente en móvil */
.breadcrumb ul {
    flex-wrap: wrap;
    row-gap: 0.4rem;
}
.breadcrumb ul li {
    font-size: 1.4rem;   /* el último elemento puede ser texto sin enlace (inscripción) */
}

/* ------------------------------------------------------------------ Piezas comunes */

/* Iconos de img/content (blancos o grises) coloreados con máscara */
.dgf-ico {
    display: inline-block;
    flex-shrink: 0;
    width: 1.6rem;
    height: 1.6rem;
    background-color: var(--primary-color);
    -webkit-mask: var(--dgf-ico) center / contain no-repeat;
    mask: var(--dgf-ico) center / contain no-repeat;
}
.dgf-ico--calendari { --dgf-ico: url("/img/content/calendar-icon.svg"); }
.dgf-ico--curs      { --dgf-ico: url("/img/content/curs-icon.svg"); }
.dgf-ico--fletxa    { --dgf-ico: url("/img/content/icon-arrow.svg"); width: 1.2rem; height: 1.2rem; transform: rotate(-90deg); }
.dgf-ico--tornar    { --dgf-ico: url("/img/content/icon-arrow.svg"); width: 1.2rem; height: 1.2rem; transform: rotate(90deg); }

/* Etiqueta: categoría en tarjeta y ficha */
.dgf-tag {
    display: inline-block;
    align-self: flex-start;
    font-size: 1.2rem;
    font-weight: var(--fw-600);
    line-height: 1.4;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--primary-color--20);
    background-color: var(--primary-color--90);
    padding: 0.4rem 1rem;
}
.dgf-tag--mida {
    color: var(--black);
    background-color: rgba(255, 189, 52, 0.25);   /* --yellow */
}
.dgf-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

/* Botón (el .primary-btn de main.css es para <button>) */
.dgf-btn {
    display: inline-block;
    background-color: var(--primary-color);
    color: var(--white);
    padding: 1.2rem 3rem;
    font-size: 1.6rem;
    font-weight: var(--fw-600);
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}
.dgf-btn:hover,
.dgf-btn:focus {
    background-color: var(--primary-color--40);
    color: var(--white);
}
.dgf-btn--sm {
    padding: 1rem 2rem;
    font-size: 1.5rem;
    white-space: nowrap;
}

/* Aviso neutro (sin cursos, sin convocatorias, error de la API) */
.dgf-avis {
    grid-column: 1 / -1;
    background-color: var(--gris-claro);
    padding: 3rem;
    font-family: var(--ff-secondary), sans-serif;
    font-size: var(--fs-0);
}
.dgf-avis p {
    margin-bottom: 1rem;
}
.dgf-avis .dgf-btn {
    margin-top: 1rem;
}

/* Enlace de vuelta */
.dgf-back {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 1.4rem;
    font-weight: var(--fw-600);
    color: var(--primary-color);
    text-decoration: none;
    margin-bottom: 2.5rem;
}
.dgf-back:hover {
    color: var(--primary-color--20);
}

/* Listas */
.dgf-llista li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 0.8rem;
    font-family: var(--ff-secondary), sans-serif;
}
.dgf-llista li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.75em;
    width: 0.6rem;
    height: 0.6rem;
    background-color: var(--primary-color);
}
.dgf-llista ul {
    margin-top: 0.8rem;
}
.dgf-llista ul li::before {
    background-color: transparent;
    border: 1px solid var(--primary-color);
}

.dgf-checks {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.2rem 4rem;
}
@media (min-width: 768px) {
    .dgf-checks { grid-template-columns: 1fr 1fr; }
}
.dgf-checks li {
    position: relative;
    padding-left: 3rem;
    font-family: var(--ff-secondary), sans-serif;
}
.dgf-checks li::before {
    content: "";
    position: absolute;
    left: 0.4rem;
    top: 0.2em;
    width: 0.7rem;
    height: 1.3rem;
    border-right: 2px solid var(--primary-color);
    border-bottom: 2px solid var(--primary-color);
    transform: rotate(45deg);
}

/* ------------------------------------------------------------------ Listado */

.dgf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(28rem, 1fr));
    gap: 5rem 3rem;
    padding-top: clamp(3rem, 5vw, 6rem);
    padding-bottom: clamp(3rem, 5vw, 6rem);
}

.dgf-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}
.dgf-card__img {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: var(--gris-claro);
}
.dgf-card__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease-in-out;
}
.dgf-card__body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 2rem 0 2rem;
    border-bottom: 1px solid var(--gris-medio);
}
.dgf-card__title {
    color: var(--primary-color);
    font-size: var(--fs-1);
    font-weight: var(--fw-600);
    line-height: 1.3;
    margin: 1.2rem 0 1rem;
    transition: color 0.2s ease-in-out;
}
.dgf-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.8rem;
    font-size: 1.4rem;
    color: var(--gris-footer);
}
.dgf-meta li {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}
.dgf-card__desc {
    font-family: var(--ff-secondary), sans-serif;
    font-size: 1.5rem;
    line-height: 1.5;
    margin: 1.4rem 0 2rem;
    flex-grow: 1;
}
.dgf-more {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 1.5rem;
    font-weight: var(--fw-600);
    color: var(--primary-color);
}
.dgf-more .dgf-ico {
    transition: transform 0.2s ease-in-out;
}
.dgf-card__link:hover .dgf-card__img img,
.dgf-card__link:focus .dgf-card__img img {
    transform: scale(1.04);
}
.dgf-card__link:hover .dgf-card__title,
.dgf-card__link:focus .dgf-card__title {
    color: var(--primary-color--20);
}
.dgf-card__link:hover .dgf-more .dgf-ico {
    transform: rotate(-90deg) translateY(0.4rem);
}

/* ------------------------------------------------------------------ Ficha */

.dgf-ficha {
    padding-top: 1rem;
    padding-bottom: clamp(3rem, 5vw, 6rem);
}
.dgf-ficha__head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: start;
}
@media (min-width: 1200px) {
    .dgf-ficha__head--img { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 4rem; }
}
.dgf-ficha__title {
    color: var(--primary-color);
    font-size: var(--fs-3);
    font-weight: var(--fw-600);
    line-height: 1.15;
    text-align: left;
    margin: 1.4rem 0 1.2rem;
}
.dgf-ficha__subtitle {
    font-family: var(--ff-secondary), sans-serif;
    font-size: var(--fs-1);
    color: var(--gris-footer);
    margin-bottom: 2rem;
}
.dgf-ficha__img img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.dgf-dades.etiquetas {
    gap: 1rem;
    margin: 2rem 0 2.5rem;
    font-size: 1.5rem;
}
.dgf-dades .highlight span {
    font-weight: var(--fw-600);
}
@media (width <= 992px) {
    .dgf-ficha__title { font-size: var(--fs-2-5); }
    .dgf-ficha__subtitle { font-size: var(--fs-0); }
}

/* Bloques de la ficha: sin marco, título con el filete lateral de .training-cards__text */
.dgf-bloc {
    margin-top: 6rem;
}
.dgf-bloc__title {
    color: var(--primary-color);
    font-size: var(--fs-2-5);
    font-weight: var(--fw-600);
    line-height: 1.2;
    border-left: 5px solid var(--primary-color);
    padding: 0.2rem 0 0.2rem 1.5rem;
    margin-bottom: 2.5rem;
}
.dgf-bloc__subtitle {
    font-size: var(--fs-1);
    font-weight: var(--fw-600);
    margin-bottom: 1.5rem;
}
.dgf-text {
    font-size: var(--fs-0);
    line-height: 1.6;
}
.dgf-columnes {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem 5rem;
}
@media (min-width: 768px) {
    .dgf-columnes--2 { grid-template-columns: 1fr 1fr; }
}
@media (width <= 992px) {
    .dgf-bloc { margin-top: 4.5rem; }
    .dgf-bloc__title { font-size: var(--fs-2); }
}

/* Convocatorias: filas como .courses-table de "Propers inicis" */
.dgf-sessio {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    background-color: var(--gris-claro);
    border-bottom: 5px solid var(--white);
    font-size: 1.5rem;
}
.dgf-sessio > div {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.4rem 2rem;
}
.dgf-sessio__dates {
    font-weight: var(--fw-600);
    font-size: 1.6rem;
}
.dgf-sessio__lloc {
    background-color: var(--primary-color--90);
}
@media (min-width: 768px) {
    .dgf-sessio { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) auto; }
    .dgf-sessio__accio { justify-content: flex-end; }
}

/* Programa: acordeón de Cidet (FAQ de main.css), más compacto */
.dgf-programa .accordion-header {
    margin: 0;
    font-size: inherit;
}
.dgf-programa .accordion-button {
    gap: 2rem;
    padding: 1.6rem 2.4rem;
    font-size: 1.8rem;
    line-height: 1.3;
}
.dgf-programa__hores {
    margin-left: auto;
    font-size: 1.4rem;
    font-weight: var(--fw-500);
    white-space: nowrap;
}
.dgf-programa .accordion-body {
    padding: 2.4rem;
    font-size: 1.6rem;
}
.dgf-programa .accordion-body > p {
    font-family: var(--ff-secondary), sans-serif;
    margin-bottom: 1.6rem;
}

/* ------------------------------------------------------------------ Inscripción */

.dgf-inscripcio {
    max-width: 96rem;
    padding-top: 1rem;
    padding-bottom: clamp(3rem, 5vw, 6rem);
}
.dgf-resum {
    background-color: var(--primary-color--90);
    padding: 3rem;
    margin-bottom: 4rem;
}
.dgf-resum .dgf-ficha__title {
    font-size: var(--fs-2-5);
    margin-bottom: 1rem;
}
.dgf-resum__sessio {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-weight: var(--fw-600);
    font-size: 1.6rem;
    margin-bottom: 0;
}
.dgf-form__title {
    color: var(--primary-color);
    font-size: var(--fs-1);
    font-weight: var(--fw-600);
    border-left: 5px solid var(--primary-color);
    padding-left: 1.5rem;
    margin: 4rem 0 2rem;
}
.dgf-form .form-label {
    font-size: 1.5rem;
    font-weight: var(--fw-600);
    margin-bottom: 0.6rem;
}
.dgf-form .req {
    color: var(--red);
}
.dgf-form .form-control,
.dgf-form .form-select {
    font-family: var(--ff-secondary), sans-serif;
    font-size: 1.6rem;
    padding: 1rem 1.4rem;
    border: 1px solid var(--gris-medio);
    border-radius: 0;
    color: var(--black);
}
.dgf-form .form-select {
    padding-right: 3.6rem;
    background-size: 1.6rem 1.2rem;
}
.dgf-form .form-control:focus,
.dgf-form .form-select:focus {
    border-color: var(--primary-color);
}
.dgf-form .dgf-btn {
    margin-top: 3rem;
}

.dgf-alert {
    padding: 2rem 2.4rem;
    margin-bottom: 3rem;
    font-size: 1.6rem;
    border-left: 5px solid;
}
.dgf-alert--ok {
    background-color: var(--primary-color--90);
    border-color: var(--primary-color);
    color: var(--primary-color--20);
}
.dgf-alert--error {
    background-color: #fdecec;
    border-color: var(--red);
    color: var(--dark-red);
}
.dgf-alert h2 {
    font-size: var(--fs-1);
    font-weight: var(--fw-600);
    margin-bottom: 0.8rem;
}
.dgf-alert p {
    margin-bottom: 0;
}