@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@300;400;500;600&display=swap');

:root{

    --blue-night:#17263B;
    --blue:#243B5A;
    --gold:#D7B77A;
    --ivory:#F7F3EA;
    --text:#455367;

}

/* RESET */

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:"Inter",sans-serif;

    background:var(--ivory);

    color:var(--text);

    line-height:1.9;

}

img{

    display:block;

    max-width:100%;

}

.container{

    width:min(1062px,92%);

    margin:auto;

}

/* PAGE */

#versohnungskirche-page{

    padding:126px 0 81px;

}

/* HEADER */

.page-header{

    text-align:center;

    margin-bottom:90px;

}

.page-header h1{

    margin:22.5px 0;

    font-family:"Cormorant Garamond",serif;

    font-size:clamp(2.7rem,5vw,4.32rem);

    font-weight:600;

    color:var(--blue-night);

    line-height:1.1;

}

.title-divider{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:16.2px;

}

.title-divider span{

    width:90px;

    height:0.9px;

    background:rgba(215,183,122,.6);

}

.ornament{

    color:var(--gold);

    font-size:0.9rem;

}

/* MAIN CONTENT */

.orgues-content{

    width:min(1062px,92%);

    margin:auto;

    display:flex;

    flex-direction:column;

    gap:63px;

}

.orgues-history{

    display:grid;

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

    gap:45px;

    align-items:start;

}

/* TEXT BLOCK */

.orgues-text{

    display:flex;

    flex-direction:column;

    gap:27px;

}

.orgues-block{

    position:relative;

}

.orgues-block::before{

    content:"";

    position:absolute;

    left:-31.5px;

    top:4.5px;

    height:calc(100% - 9px);

    width:1.8px;

    background:linear-gradient(
        to bottom,
        var(--gold),
        transparent
    );

}

.orgues-block h3{

    font-family:"Cormorant Garamond",serif;

    font-size:2.52rem;

    font-weight:600;

    color:var(--blue-night);

    line-height:1.15;

    margin-bottom:31.5px;

}

.orgues-block h3::after{

    content:"";

    display:block;

    width:58.5px;

    height:1.8px;

    background:var(--gold);

    margin-top:18px;

}

.orgues-block p{

    font-size:0.945rem;

    color:var(--text);

    text-align:justify;

    margin-bottom:22.5px;

}

.orgues-block p:last-child{

    margin-bottom:0;

}

/* IMAGE */

.orgues-image{

    position:relative;
    height:auto;
    align-self:start;
    max-width:324px;
    justify-self:end;
    margin-top:25.2px;

}

.orgues-image img{

    position:relative;
    z-index:2;

    width:100%;
    max-height:684px;
    height:auto;

    object-fit:contain;

    border-radius:16.2px;

    box-shadow:
        0 22.5px 54px rgba(0,0,0,.18);

}

.image-frame{

    position:absolute;

    z-index:1;

    top:18px;

    left:18px;

    width:100%;

    height:100%;

    border:0.9px solid rgba(215,183,122,.6);

    border-radius:16.2px;

}

/* TABLE DE COMPOSITION */

#orgueTable-container {
    width: min(1062px, 92%);
    margin: 99px auto 0;
    overflow-x: auto;
}

#orgueTable-container table {
    width: 100%;
    min-width: 630px;
    border-collapse: collapse;
    background: #fff;
    border-radius: 16.2px;
    overflow: hidden;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .08);
}

#orgueTable-container thead {
    background: var(--blue-night);
}

#orgueTable-container th,
#orgueTable-container td {
    padding: 18px;
    text-align: left;
}

#orgueTable-container thead th {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.26rem;
    font-weight: 600;
    color: var(--ivory);
    border-bottom: 1.8px solid var(--gold);
}

#orgueTable-container tbody td {
    font-size: 0.9rem;
    color: var(--text);
    border-bottom: 0.9px solid rgba(23, 38, 59, .08);
    transition: background .25s ease;
}

#orgueTable-container tbody tr:nth-child(even) {
    background: #fcfaf6;
}

#orgueTable-container tbody tr:hover {
    background: rgba(215, 183, 122, .12);
}

#orgueTable-container tbody tr:last-child td {
    border-bottom: none;
}

/* ANIMATION */

.page-header,
.orgues-content,
#orgueTable-container{

    animation:fadeUp .9s ease both;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(31.5px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

/* RESPONSIVE TABLETTE */

@media(max-width:990px){

    #versohnungskirche-page{

        padding-top:108px;

    }

    .orgues-content{

        gap:63px;

    }

    .orgues-history{

        grid-template-columns:1fr;

        gap:27px;

    }

    .orgues-image{

        max-width:585px;

        width:100%;

        margin:auto;

    }

    .orgues-image img{

        min-height:540px;

        height:540px;

    }

    .image-frame{

        top:13.5px;

        left:13.5px;

    }

    .orgues-block::before{

        display:none;

    }

}

/* RESPONSIVE MOBILE */

@media(max-width:630px){

    #versohnungskirche-page{

        padding:90px 0 54px;

    }

    .page-header{

        margin-bottom:63px;

    }

    .page-header h1{

        font-size:2.25rem;

    }

    .title-divider span{

        width:54px;

    }

    .orgues-content{

        width:88%;

        gap:45px;

    }

    .orgues-text{

        gap:54px;

    }

    .orgues-block h3{

        font-size:1.98rem;

        margin-bottom:22.5px;

    }

    .orgues-block p{

        font-size:0.882rem;

        text-align:left;

    }

    .orgues-image img{

        min-height:378px;

        height:378px;

    }

}