:root 
{
  --main-background: #154283;
  --main-color: #154283;
  --main-text: #000000;
  --secundary-text: #ffffff;
  --style-text: #154283;
}


* 
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background: linear-gradient(
        45deg ,
        #154283 ,
        #1a4a8f ,
        #0f3a75 ,
        #1e4e95
    );
    background-size: 400% 400%;
    animation: gradientMove 10s ease-in-out infinite;
}

@keyframes gradientMove 
{
    0% 
    {
        background-position: 0% 50%;
    }
    50% 
    {
        background-position: 100% 50%;
    }
    100% 
    {
        background-position: 0% 50%;
    }
}

body 
{
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-template-rows: 4fr 30fr 2.5fr;
    grid-template-areas: 
        "header1 header2"
        "body1 body2"
        "footer footer";
    height: 100vh;
    gap: 0;
    font-family: Arial, sans-serif;
}

/* 
=========================================================
                DESKTOP/TABLET (768px+)
========================================================= 
*/
@media screen and (min-width: 768px) 
{
    header
    {
        grid-area: header1;
        display: grid;
        place-items: center;
    }

    header h1
    {
        background: none;
        color: var(--secundary-text);
        font-weight: bold;
        font-size: 4.2vw;
        letter-spacing: 0.5em;
    }

    main
    {
        grid-area: body1;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 5vw;
        background-image: url('./Images/freamunde.jpg');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        isolation: isolate;
    }

    main::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5); /* Preto com 30% de opacidade */
        z-index: 0;
    }

    .bodyBackground
    {
        background: linear-gradient(
            to bottom,
            rgb(90, 174, 239) 18%,
            rgb(93, 178, 242) 20%,
            rgb(96, 182, 245) 22%,
            rgb(99, 186, 248) 24%,
            rgb(100, 188, 250) 26%,
            rgb(101, 190, 252) 28%,
            rgb(100, 192, 255) 30%,
            rgb(100, 192, 255) 70%,
            rgb(101, 190, 252) 72%,
            rgb(100, 188, 250) 74%,
            rgb(99, 186, 248) 76%,
            rgb(96, 182, 245) 78%,
            rgb(93, 178, 242) 80%,
            rgb(90, 174, 239) 82%
        );
    }

    .body2 
    {
        grid-area: body2;
    }

    /* ---------------------------------------------------
    Card Style
    --------------------------------------------------- */

    .bodyCard *
    {
        background: transparent;
    }

    .bodyCard 
    {
        width: 100%;
        max-width: 31vw;
        height: 70vh;
        border-radius: 15px;
        background: linear-gradient(
            to bottom,
            rgba( 255 , 255 , 255 , 0.7 ) 0%,
            rgba( 255 , 255 , 255 , 0.6 ) 20%,
            rgba( 255 , 255 , 255 , 0.5 ) 40%,
            rgba( 255 , 255 , 255 , 0.4 ) 60%,
            rgba( 255 , 255 , 255 , 0.3 ) 100%
        );
        backdrop-filter: blur( 5px );
        box-shadow: 0 4px 10px rgba( 0 , 0 , 0 , 0.1 );
        color: #333;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        padding: 2vh;
    }

    .cardText h2 
    {
        background: transparent;
        margin-bottom: 15px;
        font-size: 1.8rem;
        color: #1a4a8f;
    }

    .cardText p 
    {
        line-height: 1.6;
        color: #555;
    }

    /* ---------------------------------------------------
    Slide Style
    --------------------------------------------------- */

    .slider-vertical 
    {
        background: transparent;
        flex: 1;
        overflow-y: auto;
        margin: 10px 0;
        padding: 0 15px;
        scrollbar-width: thin;
        scrollbar-color: rgba( 0 , 0 , 0 , 0.3 ) transparent;
    }

    .slider-vertical::-webkit-scrollbar 
    {
        width: 6px;
    }

    .slider-vertical::-webkit-scrollbar-thumb 
    {
        background-color: rgba( 0 , 0 , 0 , 0.3 );
        border-radius: 3px;
    }

    .slide-vertical 
    {
        background: transparent;
        scroll-snap-align: start;
        padding: 15px 0;
        border-bottom: 1px solid rgba( 255 , 255 , 255 , 0.1 );
    }

    .slide-vertical p 
    {
        font-size: 1rem;
        line-height: 1.7;
        color: #333;
        text-align: justify;
    }

    .slide-vertical h3 
    {
        color: var( --style-text );
        margin-bottom: 10px;
        font-size: 1.4rem;
    }

    .slide-vertical h4
    {
        color: var( --style-text );
        margin-bottom: 10px;
    }

    .slide-vertical h5 
    {
        margin-bottom: 10px;
    }

    .slider-controls-vertical 
    {
        display: flex;
        justify-content: center;
        gap: 15px;
        margin: 10px 0;
        background: transparent;
        padding: 5px;
    }

    .slider-controls-vertical button 
    {
        background: rgba( 21 , 66 , 131 , 0.7 );
        border: none;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        color: white;
        cursor: pointer;
        font-size: 1.2rem;
        transition: all 0.3s ease;
    }

    .slider-controls-vertical button:hover 
    {
        background: var( --style-text );
        transform: translateY( -2px );
    }

    /* ---------------------------------------------------
    Card Table Style
    --------------------------------------------------- */

    .table-header 
    {
        margin-bottom: 5px;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .table-row 
    {
        display: flex;
        width: 100%;
        padding: 10px 0;
    }

    .table-header .table-row 
    {
        border-bottom: 2px solid rgba(255, 255, 255, 0.2);
        padding: 12px 0;
    }

    .header-content 
    {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .table-header h4 
    {
        color: var(--main-color);
        font-size: 1rem;
        font-weight: 600;
        margin: 0;
    }

    .table-body 
    {
        border-radius: 0 0 8px 8px;
        overflow: hidden;
        margin-top: 0;
    }

    .body-row 
    {
        display: flex;
        padding: 10px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        transition: all 0.2s ease;
    }

    .body-row:hover 
    {
        background: rgba(255, 255, 255, 0.05);
    }

    .table-cell 
    {
        padding: 0 10px;
        display: flex;
        align-items: center;
    }

    .time-column 
    {
        width: 25%;
        justify-content: center;
    }

    .description-column 
    {
        width: 50%;
        flex-direction: column;
        align-items: flex-start;
    }

    .location-column 
    {
        width: 25%;
        justify-content: flex-end;
    }

    .time-badge 
    {
        background: var(--style-text);
        color: white;
        padding: 4px 8px;
        border-radius: 15px;
        font-size: 0.8rem;
        font-weight: 500;
        text-align: center;
        min-width: 50px;
    }

    .all-day 
    {
        background: rgba(21, 66, 131, 0.7);
    }

    .event-title 
    {
        color: var(--secundary-text);
        font-weight: 500;
        font-size: 0.9rem;
        margin-bottom: 2px;
        width: 100%;
    }

    .event-category 
    {
        color: rgba(255, 255, 255, 0.6);
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .location-name 
    {
        color: rgba(255, 255, 255, 0.8);
        font-size: 0.85rem;
        text-align: right;
    }

    .slide-vertical 
    {
        padding: 5px 0;
    }

    .slider-controls-vertical 
    {
        margin-top: auto;
    }

    /* ---------------------------------------------------
    Footer
    --------------------------------------------------- */

    footer
    {
        background: #2c3e50;
        grid-area: footer;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 11vw;
        padding-right: 25.3vw;
    }

    footer *
    {
        background: inherit;
    }

    footer a
    {
        text-decoration: none;
    }

    footer .card
    {
        display: flex;
        width: 15.2vw;
        height: 5vh;
        justify-content: center;
        align-items: center;
        gap: 1vw;
        background-color: rgba(190, 190, 190, 0.1);
        border-radius: 0.5vh;
    }

    footer .card p
    {
        color: white;
        text-align: center;
        font-size: 2.0vh;
        background: transparent;
    }
}