/* ================== BASE ================== */

/* Contenedor general (PC + móvil) */
.letras-boda-container {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    justify-content: flex-start;
    align-items: center;

    /* PC por defecto: min 12px, normal 4vw, máximo 35px */
    gap: clamp(12px, 4vw, 35px);
}

/* Base de cada campo */
.letras-boda-container .tmcp-field-wrap {
    flex: 1 1 0;
    width: auto !important;
    max-width: none !important;
    float: none !important;
}

/* Inner + select como ya tenías */
.letras-boda-container .tmcp-field-wrap-inner,
.letras-boda-container ul.tmcp-ul-wrap li.tmcp-field-wrap .tmcp-field-wrap-inner {
    width: 100% !important;
}

.letras-boda-container select,
.letras-boda-container ul.tmcp-ul-wrap li.tmcp-field-wrap select {
    width: 100%;
    position: relative;
    z-index: 100;
}

/* Flecha de los selects (Woo + Select2) */
.letras-boda-container select,
.letras-boda-container .select2-container .select2-selection--single {
    background-position: 80% 50% !important;
    background-repeat: no-repeat;
}

/* ================== DESKTOP (≥ 768px) ================== */

@media (min-width: 768px) {

    /* distribucion 35% / 20% / 35% en PC */
    .letras-boda-container ul.tmcp-ul-wrap li.tmcp-field-wrap:nth-child(1),
    .letras-boda-container ul.tmcp-ul-wrap li.tmcp-field-wrap:nth-child(3) {
        flex: 0 0 35%;
    }

    .letras-boda-container ul.tmcp-ul-wrap li.tmcp-field-wrap:nth-child(2) {
        flex: 0 0 20%;
    }
}

/* ================== MÓVIL (≤ 767px) ================== */

/* ===== MÓVIL (≤ 767px) ===== */
@media (max-width: 767px) {

      /* 1. Dentro de letras-boda-container anulamos el gap del plugin */
    .letras-boda-container {
        --tcgaprow: 0px;
        --tcgapcolumn: 0px;
    }

    /* Contenedor: sin gap, ocupa el ancho del UL y permite ajuste */
    .letras-boda-container {
        display: flex;
        flex-wrap: nowrap;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        justify-content: flex-start;
        align-items: center;
        gap: 0; /* todo el hueco entre campos se hará con margin */
    }

   

    /* Base móvil: TODOS los campos pueden encogerse (flex-shrink:1) */
    .letras-boda-container .tmcp-field-wrap {
        flex: 1 1 auto;          /* grow:1, shrink:1, basis:auto */
        /*margin: 0 !important;     partimos de cero márgenes */
        max-width: none !important;
        float: none !important;
    }

    /* Campo 1 (Letra 1) – ancho grande + margen a la derecha */
    .letras-boda-container .tmcp-field-wrap:nth-child(1) {
        flex-basis: 37.5%; /* tamaño “deseado” */
        margin-right: clamp(1px, 6vw, 30px)!important;
    }

    /* Campo 2 (&) – más estrecho, márgenes pequeños a ambos lados */
    .letras-boda-container .tmcp-field-wrap:nth-child(2) {
        flex-basis: 25%; /* más pequeño que los otros */
        margin-left:  clamp(1px, 3vw, 10px)!important;
        margin-right: clamp(1px, 3vw, 10px)!important;
    }

    /* Campo 3 (Letra 2) – ancho grande + margen a la izquierda */
    .letras-boda-container .tmcp-field-wrap:nth-child(3) {
        flex-basis: 37.5%;
        margin-left: clamp(1px, 6vw, 30px)!important;
    }

    /* Inner + select como siempre */
    .letras-boda-container .tmcp-field-wrap-inner {
        width: 100% !important;
    }

    .letras-boda-container select {
        width: 100%;
        position: relative;
        z-index: 100;
    }
}



/* ===== MÓVIL MUY ESTRECHO (≤ 369px) ===== */
@media (max-width: 369px) {

    /* Ajustamos un poco las proporciones y márgenes */

    /* Campo 1 (Letra 1) */
    .letras-boda-container .tmcp-field-wrap:nth-child(1) {
        flex-basis: 37.5%; /* un pelín más ancho para que quepa el texto */
        margin-right: clamp(1px, 3vw, 25px);
    }

    /* Campo 2 (&) */
    .letras-boda-container .tmcp-field-wrap:nth-child(2) {
        flex-basis: 25%; /* más estrecho aún */
        margin-left:  clamp(1px, 2vw, 8px);
        margin-right: clamp(1px, 2vw, 8px);
    }

    /* Campo 3 (Letra 2) */
    .letras-boda-container .tmcp-field-wrap:nth-child(3) {
        flex-basis: 37.5%;
        margin-left: clamp(1px, 3vw, 25px);
    }

    /* Si quieres apretar un poco la tipografía dentro del select: */
    .letras-boda-container select {
        font-size: 0.9rem;
    }
}






/* Móviles ANCHOS dentro del rango móvil:
   por ejemplo ≥ 430px y < 768px */
@media (min-width: 410px) and (max-width: 767px) {

    /* Aquí solo afinamos márgenes, el resto viene del bloque anterior */

    .letras-boda-container .tmcp-field-wrap:nth-child(1) {
        margin-right: clamp(4px, 8vw, 35px) !important;
    }

    .letras-boda-container .tmcp-field-wrap:nth-child(2) {
        margin-left:  clamp(2px, 4vw, 10px) !important;
        margin-right: clamp(2px, 4vw, 10px) !important;
    }

    .letras-boda-container .tmcp-field-wrap:nth-child(3) {
        margin-left: clamp(4px, 8vw, 35px) !important;
    }
}