/*
 * Senigallia Language Exchange
 *
 * VERSIONE DESKTOP
 *
 * Questo file viene caricato solamente quando
 * il viewport è largo almeno 769px.
 *
 * Inserire qui le future personalizzazioni
 * specifiche della grafica desktop.
 */


/*
 * Carousel desktop.
 *
 * La dimensione rimane al 70% come stabilito.
 */

.carousel {
    width: 70%;
    max-width: 1344px;
}


/*
 * Spazio disponibile per future regole desktop.
 */




/* ========================================================
 * SLE DESKTOP NAVIGATION
 * ======================================================== */

.site-header {
    position: relative;
}


.navigation-container {
    min-height: 82px;
}


/* ========================================================
 * CONTROLLI CAROUSEL SU HOVER
 * ======================================================== */

/*
 * Frecce e indicatori sono normalmente invisibili.
 */

.carousel-arrow,
.carousel-indicators {
    opacity: 0;
    transition: opacity 0.3s ease;
}


/*
 * Quando il mouse entra nel carousel,
 * i controlli diventano visibili.
 */

.carousel:hover .carousel-arrow,
.carousel:hover .carousel-indicators {
    opacity: 1;
}

/* SLE DESKTOP HEADER BRAND - START */

/*
 * Header desktop:
 *
 * Senigallia Language Exchange
 * - a.k.a. Caffè delle Lingue -
 *
 * Il sottotitolo rimane sotto al titolo
 * ed utilizza un carattere più piccolo.
 */

.site-brand {
    display: flex;

    flex-direction: column;

    align-items: flex-start;
    justify-content: center;

    line-height: 1;

    white-space: nowrap;
}


.site-brand .brand-title {
    display: block;

    font-size: 34px;
    font-weight: 600;

    line-height: 1.1;

    white-space: nowrap;
}


.site-brand .brand-subtitle {
    display: block;

    margin-top: 4px;

    font-size: 13px;
    font-weight: 400;

    line-height: 1.1;

    white-space: nowrap;
}

/* SLE DESKTOP HEADER BRAND - END */

/* SLE ACCOUNT DESKTOP - START */

.account-profile {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1.5fr)
        minmax(120px, 0.45fr);

    align-items: center;

    gap: 28px;
}

.account-profile-item {
    min-width: 0;
}



/* SLE ACCOUNT DESKTOP - END */

/* SLE ACCOUNT LANGUAGES DESKTOP - START */

.language-row {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 18px;
}

.language-row > form:first-child {
    display: grid;

    grid-template-columns:
        minmax(150px, 1fr)
        150px
        auto;

    align-items: center;

    gap: 12px;
}

.account-inline-form {
    display: grid;

    grid-template-columns:
        minmax(220px, 1fr)
        180px
        auto;

    align-items: center;

    gap: 12px;
}

/* SLE ACCOUNT LANGUAGES DESKTOP - END */

/* SLE ACCOUNT TYPOGRAPHY DESKTOP - START */

.account-page h1 {
    font-size: 56px;
}

.account-page .account-section > h2 {
    font-size: 38px;
}

.account-page .account-card > h3 {
    font-size: 29px;
}

/* SLE ACCOUNT TYPOGRAPHY DESKTOP - END */

/* SLE ACCOUNT FINAL DESKTOP - START */

.internal-page.account-page {
    padding-top: 30px;
}

.account-page h1 {
    font-size: 56px;
}

.account-page .account-section > h2 {
    font-size: 38px;
}

.account-page .account-card > h3 {
    font-size: 29px;
}

/* SLE ACCOUNT FINAL DESKTOP - END */

/* SLE ACCOUNT DASHBOARD DESKTOP - START */


/*
 * Profilo a sinistra.
 * Lingue a destra.
 */

.account-dashboard {
    display: grid;

    grid-template-columns:
        minmax(300px, 0.8fr)
        minmax(520px, 1.5fr);

    gap: 18px;

    align-items: start;
}


/*
 * Profilo e lingue hanno la stessa altezza
 * della riga della dashboard.
 */

.account-dashboard >
.account-panel {
    height: 100%;
}


/*
 * Eventi e prenotazioni sono rettangoli
 * a tutta larghezza sotto la dashboard.
 */

.account-page >
.account-events-panel,
.account-page >
.account-bookings-panel {
    width: 100%;
}


/* SLE ACCOUNT DASHBOARD DESKTOP - END */

/* SLE ACCOUNT 50 DESKTOP - START */


/*
 * Due rettangoli identici per riga.
 *
 * 1fr + 1fr significa 50% dello spazio
 * disponibile per ciascuna colonna,
 * sottratto il gap centrale.
 */

.account-dashboard {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;

    align-items: stretch;

    width: 100%;
}


.account-dashboard >
.account-panel {
    width: 100%;

    height: auto;

    margin: 0;

    align-self: start;
}


.account-dashboard-secondary {
    margin-top: 18px;
}


/* SLE ACCOUNT 50 DESKTOP - END */