/* ============================================================
   ESTILS GENERALS TARGETES ASTRONOMIA
   ============================================================ */

.moon-widget,
.card-body {
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
}


/* ============================================================
   INFORMACIÓ LUNAR
   ============================================================ */

.moon-info {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}


/* ============================================================
   FILES D'INFORMACIÓ
   ============================================================ */

.moon-row {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 1rem;

    padding: 0.35rem 0.4rem;

    border-bottom: 1px solid #e0e0e0;
}

.moon-row:last-child {
    border-bottom: none;
}


/* Etiquetes */

.moon-row .label {
    font-weight: 500;
    color: #6c757d;
}


/* Valors */

.moon-row span:not(.label) {
    text-align: right;
    flex-shrink: 0;
    color: #495057;
}


/* ============================================================
   FASE LUNAR
   ============================================================ */

#moon-phase {
    font-weight: bold;
    color: #343a40;
}


.moon-illum {
    background-position: right;
}


#moon-illum,
#moon-next,
#moon-rise,
#moon-set {
    color: #495057;
}


/* ============================================================
   ALTRES DADES
   ============================================================ */

#sun-rise,
#sun-set,
#sun-max-alt,
#sun-day-length,
#sun-golden-end,
#earth-moon-dist,
#earth-sun-dist,
#julian-date,
#lst,
#zenith-const,
#next-solar-eclipse,
#next-lunar-eclipse,
#next-supermoon,
#next-meteor-shower {
    color: #495057;
}


/* ============================================================
   TARGETES
   ============================================================ */

.card {
    height: 100%;
}


/* ============================================================
   ESPAI ENTRE TARGETES
   ============================================================ */

.row > [class*="col-"] {
    margin-bottom: 1.5rem;
}


/* ============================================================
   PORTÀTILS / MACBOOK AIR
   ============================================================ */

/*
   Quan la pantalla és massa estreta per tenir
   4 targetes còmodes en una fila, passem a:

       ┌──────────┐ ┌──────────┐
       │ Targeta  │ │ Targeta  │
       └──────────┘ └──────────┘

       ┌──────────┐ ┌──────────┐
       │ Targeta  │ │ Targeta  │
       └──────────┘ └──────────┘
*/

@media (min-width: 768px) and (max-width: 1199px) {

    .row > .col-xl-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .row > .col-xl-3:nth-child(odd) {
        padding-right: 0.75rem;
    }

    .row > .col-xl-3:nth-child(even) {
        padding-left: 0.75rem;
    }

    .card {
        min-height: 100%;
    }
}


/* ============================================================
   PANTALLES DE PORTÀTIL ESTRETES
   ============================================================ */

@media (min-width: 992px) and (max-width: 1199px) {

    .row > .col-xl-3 {
        margin-bottom: 1.5rem !important;
    }

    .card-body {
        padding: 1rem;
    }

    .moon-row {
        padding: 0.35rem 0.25rem;
    }
}


/* ============================================================
   MÒBIL
   ============================================================ */

@media (max-width: 767px) {

    .moon-row {
        gap: 0.75rem;
    }

    .moon-row .label {
        max-width: 55%;
    }

    .moon-row span:not(.label) {
        max-width: 45%;
    }

    .card-body {
        padding: 1rem;
    }
}


/* ============================================================
   MÒBILS MOLT PETITS
   ============================================================ */

@media (max-width: 400px) {

    .moon-row {
        align-items: flex-start;
    }

    .moon-row .label {
        max-width: 52%;
    }

    .moon-row span:not(.label) {
        max-width: 48%;
        text-align: right;
        word-break: break-word;
    }
}