/* ==========================================================
   THE SALTY FLY
   COMPONENTS
   Version 1.0
   ========================================================== */


/* ==========================================================
   HERO
========================================================== */

.hero{

    position:relative;

    overflow:hidden;

    background:var(--color-background);
	
}

.hero picture{

    display:block;

}

.hero img{

    display:block;

    width:100%;

    height:auto;

}

.hero-half{

    position:relative;

    overflow:hidden;

    background:var(--color-background);

}

.hero-half picture{

    display:block;

}

.hero-half img{

    display:block;

    width:100%;

    height:auto;

}


/* ==========================================================
   SECTION INTRO
   ========================================================== */

.section-title{

    margin-bottom:var(--space-l);

}

.section-intro{

    max-width:var(--text-width);

}


/* ==========================================================
   DOORS
   ========================================================== */

.door{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:flex-start;

}

.door.reverse{

    direction:rtl;

}

.door.reverse>*{

    direction:ltr;

}


/* ----------------------------------------------------------
   Door Image
---------------------------------------------------------- */

.door-image{

    overflow:hidden;

}

.door-image img{

    transition:transform .7s ease;

}

.door-image:hover img{

    transform:scale(1.03);

}


/* ----------------------------------------------------------
   Door Text
---------------------------------------------------------- */

.door-content{

    max-width:38rem;

}


/* ==========================================================
   BUTTON
   ========================================================== */

.button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 36px;

    border:1px solid var(--color-primary);

    color:var(--color-primary);

    background:transparent;

    transition:

        color var(--transition),

        background var(--transition);

}

.button{

    transition:
        color var(--transition),
        border-color var(--transition),
        transform var(--transition);

}

.button:hover{

    color:var(--color-primary);

    border-color:var(--color-primary);

    background:#EFEFF5;

    transform:translateY(-1px);

}

}


/* ==========================================================
   GALLERY
   ========================================================== */

.gallery{

    display:grid;

    gap:32px;

}

.gallery-2{

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

}

.gallery-3{

    grid-template-columns:repeat(3,1fr);

}

.gallery-4{

    grid-template-columns:repeat(4,1fr);

}


/* ==========================================================
   FIGURE
   ========================================================== */

figure{

    margin:0;

}

figcaption{

    margin-top:18px;

}


/* ==========================================================
   FOOTER
========================================================== */

.footer{

    padding-top:72px;

    padding-bottom:48px;

}

.footer-inner{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;

}

.footer-copyright{

    margin:0;

    font-size:14px;

    color:var(--color-primary);

}

.footer-nav{

    display:flex;

    align-items:center;

    gap:32px;

}

.footer-nav a{

    font-family:var(--font-sans);

    font-size:14px;

    color:var(--color-primary);

    transition:color var(--transition);

}

.footer-nav a:hover{

    color:var(--color-primary-light);

}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width:900px){

    .door{

        grid-template-columns:1fr;

        gap:48px;

    }

    .door.reverse{

        direction:ltr;

    }

    .gallery-4{

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

    }

}


@media (max-width:640px){

    .gallery-2,
    .gallery-3,
    .gallery-4{

        grid-template-columns:1fr;

    }

    .button{

        width:100%;

    }

}

/* ==========================================================
   Selection Quantity Controls
   ========================================================== */

.selection-quantity {

    display: flex;

    align-items: center;

    gap: 10px;

}

/* Checkout Hinweis */

.checkout-note {

    font-size: 0.85rem;
    line-height: 1.5;
    margin-top: 20px;

}


.checkout-note strong {

    font-weight: 600;

}