@font-face {
  font-family: 'Cormorant';
  src: url('/fonts/cormorant.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Cormorant upright';
  src: url('/fonts/cormorant-upright.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}


:root {
    /* Ruudukon vakiot */
    --grid-gap: 16px; 
    --grid-cols: 12; 
    --grid-cols-tablet: 8;
    --grid-cols-phone: 4;

    --max-width: 1200px;
    --width: var(--max-width);

    /* LASKETTU ARVO: Yhden sarakkeen (1/12) */
    --grid-col-width: calc((var(--width) / var(--grid-cols)) - (var(--grid-gap) * (var(--grid-cols) - 1) / var(--grid-cols)));
    --padding: calc(var(--grid-col-width) * 2 + (var(--grid-gap)) * 2); /* Kahden sarakkeen leveys + yksi väli */
    /* ======================== VÄRIPALETTI ======================== */
    
    /* MAIN COLORS */
    --color-main:           #0C0B08;
    --color-secondary:      #DCCA87;
    --color-tertiary:       #F5EFDB;
    --color-hero-image:     #010101;

    --color-main-light:     #f9f7f1; /*  F5F1E6*/
    --color-secondary-light:#282427; 
    
    /* FONTS AND ADDITIONAL COLORS*/
    --color-accent-1:         #aaaaaa;
    --color-text-white:     #ffffff;
    
    --color-border:         rgba(220, 202, 135, 0.2);
    --color-hover:          #fff9e5;

    /* Fonttiperheet */
    --font-main: 'Cormorant', serif;           /* Ensisijainen otsikkofontti */
    --font-body: Arial, sans-serif;            /* Selkeä leipätekstifontti */
    --font-accent: 'Cormorant Upright', serif; /* Koristeellinen fontti */

    /* Fonttikoot (fs = font-size) */
    --fs-h1-l: 4.5rem;   /* Suurin (Etusivu) */
    --fs-h1-m: 3.5rem;   /* Keskikoko (Alasivut) */
    --fs-h1-s: 3rem;     /* Pienin h1 (Palvelut/Tuotteet) */
    
    --fs-h2: 2.75rem;
    --fs-h3: 1.75rem;
    --fs-h4: 1.25rem;
    
    --fs-body: 1rem;
    --fs-label: 1.2rem;   /* Koristeellinen/pieni teksti */
}

/* TABLET-NÄKYMÄ (1000px ja alle) */

@media (max-width: 1264px) {
    :root {
        --width: calc(100vw - 4rem);
    }
}

@media (max-width: 1000px) {
    :root {
        /* PÄIVITÄ PÄÄSARAKEMÄÄRÄ (12 -> 8) */
        --grid-cols: var(--grid-cols-tablet); 
        --padding: calc(var(--grid-col-width));
    }
}

/* PUHELIN-NÄKYMÄ (650px ja alle) */
@media (max-width:650px) {
    :root {
        /* PÄIVITÄ PÄÄSARAKEMÄÄRÄ (8 -> 4) */
        --grid-cols: var(--grid-cols-phone);
        --padding: 1rem;
        --width: calc(100vw - 2rem);
    }
}


.bg-image-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
    overflow: hidden;
}

.bg-image-wrapper__img {
    width: 100%;
    height: 100%;
    /* TÄMÄ ON SE TÄRKEIN RIVI: */
    object-fit: cover; 
    /* Ja tämä pitää huolen, että kuva on keskellä (kuten background-position: center) */
    object-position: center; 
    
    display: block;
}

/* Media query mobiilille */
@media (max-width: 768px) {
    .bg-image-wrapper {
        background-image: url('../bg-mobile.webp');
    }
}


#image-section {
    padding: 0;
    height: 550px;
    width: 100vw;
    overflow: hidden;
    margin: 0;
    position: relative; /* Mahdollistaa sisäisten elementtien asettelun */
}


#map-section .container {
    overflow: hidden; /* Piilottaa sisällön, joka menee sectionin ulkopuolelle */
    border: solid 1px var(--color-border); /* Poistaa oletusreunuksen */
    height: 500px; /* Rajoittaa näkyvän alueen korkeuden, säädä tarpeen mukaan */
}

.barbershop-map {
    width: 100%;
    height: 100%;
    filter: grayscale(100%) invert(98%); /* Säilytetään halutut värit */
    position: relative; /* Mahdollistaa siirtymän */
    border: 0; /* Poistaa reunukset */
    display: block; /* Estää ylimääräiset marginaalit */
}




body {
    margin: 0;
    padding: 0;
    background-color: var(--color-main);
    overflow-x: hidden; /* Prevents horizontal scrolling */
}

/*----------------------- NAV-MENU SCROLL LOCK ----------------------*/

/* Estää sivun vierityksen, kun .header__nav-list.active on auki */
body.nav-open {
    overflow: hidden;
    /* Kriittinen: Lukitsee näkymän, jotta sivu ei hypähdä scrollbarin poistuessa */
    position: fixed; 
    width: 100%;
    /* Estää vierityspalkin aiheuttaman sisällön hypähdyksen */
    top: 0;
    left: 0;
}




.dark {
    background-color: var(--color-main);
}

.light{
    background-color: var(--color-main-light); /* tai #f9f7f1 */
}

.section {
    padding: 4rem 0;
    position: relative;
    z-index: 10; /* Varmistaa, että osiot ovat taustakuvan päällä */
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

.container--narrow {
    max-width: 900px;
    margin: 0 auto;
}


@media (max-width: 1264px) {
    .section {
        padding: 4rem 2rem;
    }

    .header__container {
        padding: 0 2rem;
    }


}

.section-header__icon {
    height: 2rem;
    width: auto;
    rotate: -90deg;
}

.is-flipped {
    transform: scaleY(-1);
}


li {
    font-family: Arial, sans-serif;
    font-size: 1rem;
}




p {
    color: var(--color-accent-1);
}



p, address {
    font-family: Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.75rem;
    letter-spacing: 0.04rem;
    margin: 0px;
}

h2, .font__large-text {
    font-size: 2.75rem;
    line-height: 3rem;
    letter-spacing: 0.02rem;
    font-family: 'Cormorant', 'Cormorant upright', serif; /* KORJATTU: Käytetään Cormorant */
    font-weight: 600;
    font-variant-ligatures: none;
    font-feature-settings: "liga" 0, "dlig" 0;
    color: var(--color-secondary);
    margin: 0 0 0.75rem 0;
}

h3 {
    font-size: 1.75rem;
    line-height: 2.6rem;
    letter-spacing: 0.04rem;
}

h4 {
    font-size: 1.25rem;
    line-height: 1.75rem;
    letter-spacing: 0.002rem;
}

.font__large-header { font-size: var(--fs-h1-l); }
.font__medium-header { font-size: var(--fs-h1-m); }
.font__small-header { font-size: var(--fs-h1-s); }

/* --- KORISTE (Accent) --- */
/* Tämä on se "Headerin päällä oleva koriste" */



h1 {
    font-family: 'Cormorant', 'Cormorant upright', serif; /* KORJATTU: Käytetään Cormorant (ei-Upright) fonttia */
    font-variant-ligatures: none;
    font-feature-settings: "liga" 0, "dlig" 0;
}

h2, h3, h4{
    font-family: 'Cormorant', 'Cormorant upright', serif; /* KORJATTU: Käytetään Cormorant */
    font-weight: 600;
    font-variant-ligatures: none;
    font-feature-settings: "liga" 0, "dlig" 0;
}


h1, 
h2,
h3,
h4 {
    color: var(--color-secondary);
    margin: 0 0 0.75rem 0;
}


h3, h4 {
    margin: 0 0 0.25rem 0;
}

.font__small-accent, small {
    font-family: 'Cormorant upright', serif; /* KORJATTU: Käytetään Cormorant (ei-Upright) fonttia */
    font-weight: 600; /* SemiBold weight */
    color: var(--color-tertiary);
    display: block;
    font-variant-ligatures: none;
    font-feature-settings: "liga" 0, "dlig" 0; 
    font-size: 1.2rem;
    line-height: 1.5rem;
    letter-spacing: -0.01rem;
    margin-bottom: -0.2rem;
}

.triple-column-card h2, .triple-column-card h3 {
    font-size: 2.25rem;
    line-height: 2.7rem;
    letter-spacing: 0.02rem;
}

.reservation__form h2, #info-container h2 {
    margin-bottom: 0.25rem;
}

.light h1, 
.light h2, 
.light h3, 
.light h4,
.light p {
    color: var(--color-secondary-light);
}


.menu__category-header {
    color: var(--color-tertiary);
    text-align: center;
}

a {
    font-family: Arial;
    font-size: 1rem;
    color: var(--color-accent-1);
}


.button-group {
    gap: 1rem;
    margin-top: 0.75rem;
}

.button {
    display: inline-block;
    padding: 0.75rem 2rem;
    text-align: center;
    font-weight: bold;
    border-radius: 2px;
    text-decoration: none;
    font-size: 1rem;
    transition: background-color 0.3s ease;
    color: var(--color-main);
    font-family: 'Cormorant', serif; /* KORJATTU: Käytetään Cormorant (ei-Upright) fonttia */
    font-weight: 700;
    font-variant-ligatures: none;
    font-feature-settings: "liga" 0, "dlig" 0;
    font-variant-numeric: lining-nums; 
    font-variant-ligatures: none;
    font-feature-settings: "liga" 0, "dlig" 0, "lnum" 1; /* Lisätty myös lnum-asetus varmuuden vuoksi */
    cursor: pointer;
}

.button-main {
    background-color: var(--color-tertiary);
}

.button-main:hover {
    background-color: var(--color-hover);
}

.light .button-secondary{
    color: var(--color-secondary-light);
    padding: 0px;
}


.button-secondary {
    color: var(--color-tertiary);
}


.button-secondary::after {
    content: '⟩'; /* Nuolen symboli */
    margin-left: 0.5rem;
}


/*------------------- YLEINEN DOUBLE-COLUMN ASETTELU ----------------------*/


    .double-column-layout {
        display: flex;
        justify-content: space-between; /* Asettaa 10% gäpin välille: (100% - 45% - 45%) = 10% */
        width: 100%; /* Täyttää containerin leveyden */
    }

    /* Määrittelee lapsielementtien (kolumnien) koon */
    .double-column-layout > * {
        flex-basis: calc(50% - (var(--grid-gap) / 2));
        box-sizing: border-box;
    }


    .double-column-content {
        display: flex;
        justify-content: space-between; /* Asettaa 10% gäpin välille: (100% - 45% - 45%) = 10% */
        width: 100%; /* Täyttää containerin leveyden */
    }

    .double-column-content > * {
        flex-basis: calc(50% - (var(--grid-gap) / 2));
        box-sizing: border-box;
    }


    


.column-reverse-layout {
    display: flex;
    gap: 2rem;
    flex-direction: column-reverse;
}

.half-width-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: calc(50% - (var(--grid-gap) / 2));
}

.blog {
    display: flex;
    flex-direction: row;
    gap: var(--grid-gap);
}

.service-page__img {
    min-height: 210px;
}

.blog-content {
    width: calc(100% - 4 * (var(--grid-col-width)) - 4 * (var(--grid-gap)));
}


.blog-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.blog-additional-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex-basis: calc(4 * (var(--grid-col-width)) + 3 * (var(--grid-gap)));
}

.blog-additional-image {
    width: calc(4 * (var(--grid-col-width)) + 3 * (var(--grid-gap)));
}

@media (max-width: 1000px) {

    .blog-content {
        width: 100%;
    }

    .blog {
        display: flex;
        flex-direction: column;
    }

    .blog-additional-content {
        display: none;
    }


    .blog-additional-image {
        width: calc(3 * (var(--grid-col-width)) + 3 * (var(--grid-gap)));
    }

}

.blog-box {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    height: fit-content;
    background-color: rgb(30, 30, 30);
    padding: 1.5rem;
    box-sizing: border-box;
}

.stack-text {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.header-link {
    text-decoration: none;
}

.blog-social-icons {
    display: flex;
    gap: 1rem;
}

.social-icon-blog {
    display: inline-block;
    height: 2rem;
    width: 2rem;
    background-color: var(--color-accent-1); /* Ikonin väri */
    transition: background-color 0.3s ease;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Polut eri ikoneille */
.instagram {
    -webkit-mask-image: url('../instagram.svg');
    mask-image: url('../instagram.svg');
}

.facebook {
    -webkit-mask-image: url('../facebook.svg');
    mask-image: url('../facebook.svg');
}

.tiktok {
    -webkit-mask-image: url('../tiktok.svg');
    mask-image: url('../tiktok.svg');
}


.blog-phone {
    -webkit-mask-image: url('../phone.svg');
    mask-image: url('../phone.svg');
}

.blog-contact {
    display: inline-flex;    /* Mahdollistaa pystysuuntaisen keskityksen */
    align-items: center;     /* Keskittää ikonin ja tekstin pystysuunnassa */
    text-decoration: none;   /* Poistetaan oletus-alleviivaus, joka menee ikonin alle */
    gap: 1rem;                /* Sopiva väli ikonin ja numeron väliin */
}

.blog-contact:hover .blog-number {
    color: var(--color-hover);
    text-decoration: underline;
}

.blog-contact:hover .blog-phone {
    background-color: var(--color-hover);
}


/* Hover-efekti: voit esim. kirkastaa väriä */
.social-icon-blog:hover {
    background-color: var(--color-hover); /* Tai jokin muu korostusväri */
}

.right {
    align-self: flex-end;
}

.icon-image {
    margin-top: 4rem;
    height: 4rem;
    width: auto;
}


@media (max-width: 1000px) {
    .half-width-content {
        width: calc(100% - (var(--grid-gap) * 2) - (var(--grid-col-width) * 2));
    }

    


}

@media (max-width: 650px) {
    .browser-visual {
        display: none;
    }

    .column-reverse-layout {
        flex-direction: column;
        gap: 0;
        width: 100%;
    }

    .double-column-content {
        flex-direction: column;
        row-gap: 1rem;
    }


    .half-width-content {
        width: 100%;
    }

    .double-column-content > * {
        flex-basis: 100%;
    }
}

/*------------------- YLEINEN DOUBLE-COLUMN ASETTELU ----------------------*/


/*------------------- UUSI TRIPLE-COLUMN ASETTELU ----------------------*/



/*------------------- TRIPLE-COLUMN ASETTELU (4/12, 4/8, 4/4) ----------------------*/

/* KAIKKI NÄKYMÄT (Default: Desktop 12 kolumnia -> 3 korttia rinnakkain) */
.triple-column-layout {
    display: flex;
    gap: 1.5rem var(--grid-gap); /* Ottaa globaalin 16px välin korttien väliin */
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.triple-column-card {
    /* TYÖPÖYTÄ (4/12 = 1/3 leveys): Laske 3 korttia rinnakkain (2 * gap väliä) */
    width: calc(4 * var(--grid-col-width) + 3 * var(--grid-gap));
    height: 450px;
    border: 1px solid rgba(220, 202, 135, 0.2);
    flex-grow: 0;                    /* Älä anna korttien venyä turhaan */
    box-sizing: border-box;
    display: flex;
    flex-direction: column-reverse;
    overflow: hidden;                /* ← tärkeä: piilottaa kuvan ylivuodon */
}

.service-card-content {
    box-sizing: border-box;
    position: relative;
    padding: 1rem 0.5rem;
    width: 100%;
    
    /* UUDET SÄÄNNÖT – pakottaa tarkan 50 % korkeuden */
    height: 50%;
    display: flex-start;
    flex-direction: column;
    justify-content: center;     /* teksti nätisti keskellä pystysuunnassa */
}

.service-card-content .button {
    position: absolute;
    bottom: 2rem;
}

.service-image {
    width: 100%;
    height: 50%;
    object-fit: cover;               /* täyttää koko alueen ja rajaa kauniisti */
    object-position: center center;  /* aina täydellisesti keskellä vaakatasossa */
    display: block;
}


/*------------------- DOUBLE-COLUMN ASETELU (6/12, 4/8, 4/4) ----------------------*/

/* KAIKKI NÄKYMÄT (Default: Desktop 12 kolumnia -> 2 korttia rinnakkain) */
.double-column-cards {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    gap: calc(2 * var(--grid-gap)) var(--grid-gap);
    justify-content: flex-start;
}

.double-column-cards > .double-column-card {
    /* TYÖPÖYTÄ (6/12 = 1/2 leveys) */
    /* Laske tasan kaksi korttia rinnakkain, huomioiden yhden gap-välin. */
    flex-basis: calc((100% - var(--grid-gap)) / 2);
    
    /* Varmistaa, että kortti ei veny eikä kutistu. */
    flex-grow: 0;
    flex-shrink: 0;

    /* Aiemmin määritellyt kuvasuhde ja koko säilytetään. */
    box-sizing: border-box;
    display: flex;
    flex-direction: column-reverse;
    overflow: hidden; 
}





/* PUHELIN-NÄKYMÄ (ALLE 700px) */
@media (max-width: 650px) {
    
    
    .double-column-cards > .double-column-card {
        /* PUHELIN (100% leveys) */
        flex-basis: 100%; 
        /* Salli kortin venyä hieman, jotta se täyttää mobiiliruudun leveyden */
        flex-grow: 1; 
        max-width: 100%;
    }
}




.image-container {
    position: relative;
    box-sizing: border-box;
    justify-content: center; 
    align-items: center; 
    }

.image-container img {
    width: 100%; /* Laitetaan kuva täyttämään containerin */
    height: auto;
    object-fit: cover; 
}

.container__img {
    width: 100%; /* Laitetaan kuva täyttämään containerin */
    height: auto;
    object-fit: cover; 
}

.image-edges {
    position: relative; /* Ensure this is the anchor */
    padding: 0 1rem;
    display: block;    /* Prevents extra bottom whitespace from inline images */
    line-height: 0;    /* Removes the 'descender' gap below images */
}

.image-edges::before {
    content: "";
    position: absolute;
    top: -1rem;
    right: 0;
    width: 50%;
    height: 50%;
    border-top: 1rem solid var(--color-secondary);
    border-right: 1rem solid var(--color-secondary);
    pointer-events: none;
    z-index: 2;
}

/* Bottom left corner border */
.image-edges::after {
    content: "";
    position: absolute;
    bottom: -1rem;
    left: 0;
    width: 50%;
    height: 50%;
    border-bottom: 1rem solid var(--color-secondary);
    border-left: 1rem solid var(--color-secondary);
    pointer-events: none;
    z-index: 2;
}

/* Screens 900px and smaller */
@media (max-width: 900px) {
    .image-edges {
    padding: 0 0.8rem;
}

    .image-edges::before {
        top: -0.8rem;
        border-top-width: 0.8rem;
        border-right-width: 0.8rem;
    }

    .image-edges::after {
        bottom: -0.8rem;
        border-bottom-width: 0.8rem;
        border-left-width: 0.8rem;
    }
}



.service-page-image {
    min-height: 550px;
}

@media (max-width: 650px) {
    .service-page-image {
        min-height: 400px;
    }
}
    

/*----------------------- nav ----------------------*/
header {
    position: absolute;
    width: 100%;
    z-index: 100;
    padding: 1rem 0;
}

.header__container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}


.logo__img {
    width: auto;
    height: 2.25rem;
}

.logo__img:hover {
    cursor: pointer;
}

.header__nav {
    display: flex;
    align-items: center;
}

.header__nav-list {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.header__nav-item {
    margin: 0 1rem;
}

.header__nav-link {
    color: var(--color-secondary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.header__nav-link:hover {
    color: var(--color-hover);
    text-decoration: underline;
}

.header__number {
    color: var(--color-tertiary);
}



/* Kohdistetaan koko listajäseneen */
.nav-item__has-dropdown {
    display: flex;
    flex-direction: row;
    gap: 0.25rem;
    position: relative;
    align-items: center;
}


/* Dropdown-valikko: linkit ilmestyvät takaisin */
.header__dropdown-menu {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    top: 100%;
    visibility: hidden;
    opacity: 0;
    z-index: 1000;
    list-style: none;
    margin: 0;
    padding: 1.5rem 1.5rem 1rem;
    background-color: var(--color-hero-image);
    width: max-content;
    white-space: nowrap;
}


.dropdown__nav-link {
    padding: 0.5rem 1rem;
    color: var(--color-accent-1);
    text-decoration: none;
    transition: color 0.3s ease;
    min-width: 200px;
    display: block;
}
.dropdown__nav-link:hover {
    color: var(--color-hover);
    text-decoration: underline;
}


/* HOVER: Aktivoi näkyvyyden */
.nav-item__has-dropdown:hover .header__dropdown-menu {
    visibility: visible;
    opacity: 1;
}

/* NUOLI: Pienennetään kokoa ja määritetään kääntyminen */
.header__dropdown-icon {
    display: inline-flex;
    width: 1rem;  /* Säädetty pienemmäksi */
    height: auto;
    cursor: pointer;
    color: var(--color-secondary);
}



/* MOBIILI: Korjaus, ettei riko mobiilinäkymää */
@media (max-width: 700px) {
    .header__nav-list.active .header__dropdown-menu {
        position: static;
        visibility: visible;
        opacity: 1;
        display: none; /* Pidetään piilossa kunnes avataan */
        border: none;
    }

    .header__dropdown-icon {
        display: none;
    }
    
    .nav-item__has-dropdown.is-open .header__dropdown-menu {
        display: block;
    }
}






.nav-toggle {
    display: none; 
    background: none;
    border: none;
    padding: 0;
        height: 2.25rem;      
        width: 2.25rem;
}

@media (max-width: 900px) {
    .header__nav-list {
        position: static; /* Poistaa absoluuttisen sijoittelun */
        transform: none;  /* Poistaa keskityksen */
        display: flex;    /* Varmistaa, että linkit ovat rinnakkain */
    }

    .header__container {
        justify-content: flex-start;
        gap: 3rem;
    }
}

/* Media queries for responsiveness (Mobiilityylit) */
@media (max-width: 700px) {
    
    .nav-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 9999; 
    }

    .nav-toggle__icon {
        height: 80%;
        width: auto;
        display: block;
    }
    
    /* 2. Piilota navigaatiolinkit oletuksena */
    .header__nav-list {
        display: none; 
    }
    
    /* 3. AKTIIVINEN TILA: KOKO RUUDUN PEITTO JA KESKITYS (.active luokka) */
    .header__nav-list.active {
        /* Position: fixed koko ruudun peittoon */
        display: flex;
        flex-direction: column;
        
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw; 
        height: 100%; 
        z-index: 999; /* Peittää kaiken paitsi nav-toggle:n */
        background-color: var(--color-main); /* Teeman musta tausta */
        
        /* Keskitys */
        justify-content: center; /* Pystysuora keskitys */
        align-items: center; /* Vaakasuora keskitys */
        
        /* Nollaa työpöydän position-tyylit */
        transform: none; 
        left: 0; 
    }

    /* Linkkien muotoilu aktiivisessa tilassa */
    .header__nav-list.active li {
        margin: 1rem 0; /* Lisää pystysuoraa väliä */
        text-align: center;
    }
    
    .header__nav-list.active a {
        font-size: 1.5rem;
        color: var(--color-secondary); 
        font-family: 'Cormorant', serif;
    }
    
    /* Varmista, että .header__containerin asettelu säilyy mobiilissa */
    .header__container {
        justify-content: space-between; 
        display: flex;
    }
}


/*------------------- Hero Section ----------------------*/


.hero__image-wrapper {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%; 
    height: 100%;
    background-color: var(--color-hero-image);
    z-index: 1; 
    -webkit-mask-image: linear-gradient(var(--color-main) 30%, transparent 100%);
    mask-image: linear-gradient(var(--color-main) 30%, transparent 100%);

}


.hero__container {
    display: flex;
    justify-content: space-between;
    align-items: center; 
    min-height: max(80vh, 550px);
}

/* Varsinainen kuvatiedosto */
.hero__image {
    width: 55%;
    height: 100%;
    float: right;
    object-fit: cover;
    object-position: left;
}


@media (min-width: 1000px) {

    .hero__image {
        width: 60%;
}

}

@media (max-width: 650px) {
    .hero__container {
        min-height: max(75lvh, 400px);
        align-items: flex-start;
    }

    .hero__image-wrapper {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%; /* Pitää maskin ylhäältä alas saakka */
    }

    .hero__image {
        position: absolute; /* Otetaan kuva irti normaalista virrasta wrapperin sisällä */
        bottom: 0;          /* TÄMÄ pakottaa kuvan nimenomaan pohjalle */
        right: 0;           /* Ja oikeaan reunaan */
        width: 100%;
        max-width: 450px;
        height: auto;       /* Säilyttää neliön/alkuperäisen suhteen */
        display: block;
        object-fit: contain;
    }

}

.hero__content {
    z-index: 2;
}

/*------------------- Hero Section ----------------------*/



.services {
    padding-top: 0;
}


/*------------------- Menu section ----------------------*/

.service-menu {
    width: 100%;
}

.service-menu__column-left, .service-menu__column-right, .service-menu__single-column{
    display: flex;
    flex-direction: column;
    text-align: left; 
    gap: 1.25rem;
    /* flex-basis: 45%; ja muut flex-asetukset tulevat yleisestä .double-column-layoutista */
}

.menu-item {
    display: flex;
    flex-direction: column;
}

.menu-item__content {
    display: flex;
    align-items: center;
    color: var(--color-text-white);
    width: 100%;
    box-sizing: border-box;
}

.menu-item__name {
    flex: 1;
    position: relative;
    padding-right: 16px;
    overflow: hidden;
    font-size: 1.3rem;
    
}
.menu-item__price-wrapper {
    flex-shrink: 0; /* Prevents shrinking */
    flex-grow: 0; /* Prevents growing */
    width: calc(var(--grid-col-width) + var(--grid-gap)); /* Explicit width */
    min-width: 101px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
}


@media (max-width: 650px) {
    .menu-item__price-wrapper {
        width: calc((1 *var(--grid-col-width)) + var(--grid-gap)); /* Explicit width */
    }

}

.menu-item__price-wrapper::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background-color: var(--color-accent-1);
    transform: translateY(-50%);
}

.menu-item__price {
    position: relative;
    z-index: 1;
    background-color: var(--color-main);
    padding-left: 8px;
}



/*------------------- Menu section ----------------------*/




/*------------------- About Section ----------------------*/

.about__container {
    display: flex;
    justify-content: space-between; 
    position: relative;
    align-items: center;
    min-height: 36cap;
}

.about__content-left {
    flex-basis: calc(50% - var(--grid-col-width) - (var(--grid-gap) / 2));
    color: var(--color-text-white);
    z-index: 10;
    text-align: right;
}

.about__content-right {
    flex-basis: calc(50% - var(--grid-col-width) - (var(--grid-gap) / 2));
    color: var(--color-text-white);
    z-index: 10;
    text-align: left;
}

.about__content-p {
    color: var(--color-text-white);
}

.about__brand-decorator {
    /* DESKTOP: Absolute, jotta ei vie vaakasuuntaista tilaa */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-51% + 0.3rem));
    font-family: serif; 
    font-size: 35rem; 
    line-height: 1; 
    color: var(--color-text-white); 
    opacity: 0.5; 
    
    z-index: 0;
    user-select: none;
    pointer-events: none;
}


.about__button-left {
    justify-content: flex-end;
}

.about__button-right {
    justify-content: flex-start;
}



.about__narrow-br {
    display: none;
}
@media (min-width: 1032px) {
    .about__wide-br {
        display: none;
    }
}

@media (max-width: 990px) {
    .about__wide-br {
        display: none;
    }
    
}

@media (max-width: 907px) {
    .about__narrow-br {
        display: block;
    }
    
}

@media (max-width: 735px) {
    .about__container {
        flex-direction: column;
        align-items: center;
        min-height: 0;
    }

    .about__content-left {
        text-align: left;
        flex-basis: 100%;
        margin-bottom: 0.5rem;
    }
    .about__button-left {
        justify-content: flex-start;
    }

    .about__content-right {
        text-align: right;
        flex-basis: 100%;
    }
    .about__button-right {
        justify-content: flex-end;
    }

    .about__content-p {
    color: var(--color-accent-1);
    }

    /* MOBIILI: Palautetaan R osaksi virtaa (position: static), kuten vanhassa koodissa oli. */
    .about__brand-decorator {
        position: static;
        top: auto;
        left: auto;
        transform: none;
        line-height: 0.625;
        display: block;
    }

    .about__wide-br, .about__narrow-br {
        display: none;
    }
}

@media (max-width: 4000px) {
    .about__brand-decorator {
        font-size: 29rem; 
    }

}

@media (max-width: 831px), (min-width: 956px) {
    #about__barber-br {
        display: none;
    }
}



/*------------------- About container ----------------------*/


/*------------------- Gallery Section ----------------------*/

.gallery__container {
    /* Pitää vanhempielementin (container) flexboxina, jotta teksti ja galleria ovat rinnakkain */
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}

.gallery__section {
    border-bottom: 1px solid var(--color-border);
    border-top: 1px solid var(--color-border);
}

.gallery__text-content {
    flex-basis: calc((var(--grid-col-width) * 3) + (var(--grid-gap) * 3));
    flex-shrink: 0; 
}

.gallery {
    position: relative; 
    margin-right: calc(50% - 50vw);
    flex-grow: 1; 
    width: auto;
    overflow-x: hidden; 
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

.gallery::-webkit-scrollbar, .gallery__grid::-webkit-scrollbar  {
  display: none;
}

.gallery__grid {
    overflow-x: scroll;
    display: flex;
    flex-wrap: nowrap; 
    justify-content: flex-start; 
    align-items: center;
    gap: 1rem; 
    width: 100%;
    /* Piilotetaan scrollbar täältä, koska scrollaus on tässä elementissä */
    -ms-overflow-style: none; 
    scrollbar-width: none; 
}


.gallery__controls {
    /* Nuolet pysyvät .gallery-elementin pohjalla */
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    bottom: 0px;
    /* KRITIIKINEN MUUTOS 1: Lisää paddingin */
    padding: 1rem;
    /* KRITIIKINEN MUUTOS 2: Estää paddingia kasvattamasta kokonaisleveyttä yli 100% */
    box-sizing: border-box;
}

.gallery__arrow {
    width: 2rem; 
    height: 2rem; 
    border-radius: 2px;
    fill: var(--color-secondary); 
    background-color: var(--color-main); 
    cursor: pointer;
}

.gallery__arrow:hover {
    fill: var(--color-hover);
}

.gallery__arrow-left, .gallery__arrow-right {
    background: none;
    border: none;
    padding: 0;
}

.gallery__item {
    position: relative; 
    width: 300px; 
    height: 400px; 
    
    border: 1px solid var(--color-border);
    /* Tärkeä scrollauksessa: estää kutistumisen */
    flex-shrink: 0; 
    
    /* Asettaa smoothin siirtymän tummennukselle */
    transition: filter 0.4s ease; 
    transform: translateZ(0);
    
    /* Estää kuvia menemästä ulkopuolelle, jos ne ovat isompia kuin säiliö */
    overflow: hidden; 
}

.gallery__item:hover {
    cursor: pointer;
    filter: brightness(0.8); /* 1.0 = normaali, 0.8 = hieman tummempi */
}

.gallery__item:hover .gallery__social-icon {
    /* Tulee näkyviin, kun hiiri on säiliön päällä */
    opacity: 1;
}

.gallery__image {
    height: 100%;
    width: auto; 
    position: absolute;
    left: 50%; 
    transform: translateX(-50%); 
}


.gallery__social-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    z-index: 2; 
}


/* Mobiilityylit (Säilytetty ennallaan) */
@media (max-width: 650px) {
    .gallery__container {
        display: flex;
        flex-direction: column; 
        align-items: flex-start;
        gap: 2rem;
    }
    
    .gallery__text-content {
        /* HUOM: Tämä on korjattu mobiilissa, joten flex-shrink: 0 ei estä sen menemistä 100%:iin */
        flex-basis: 100%; 
        flex-shrink: 1; /* Salli kutistuminen takaisin mobiilissa */
    }

    .gallery {
        width: calc(100vw - 1rem);
        margin-right: 0; /* Palautetaan normaali marginaali mobiilissa */
    }

    .gallery__grid {
        flex-direction: column;
        flex-wrap: wrap; 
    }
    
}

/*------------------- Gallery Section ----------------------*/


/*------------------- Find us Section ----------------------*/


/*------------------- Find us Section ----------------------*/





/*------------------- Reservation Form Section ----------------------*/

.reservation__form {
    display: flex;
    flex-direction: column;
    background-color: var(--color-main);
    border: 1px solid var(--color-border);
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 1rem var(--padding) 3rem;
    box-sizing: border-box;
}

.reservation__contact {
    width: 100%;
    box-sizing: border-box;
}

.reservation-form__row{
    text-align: left;
    width: 100%;
}


.reservation-form__input {
    padding: 1rem;
    background-color: var(--color-main);
    border: 1px solid var(--color-tertiary);
    width: 100%;
    font-family: Arial, sans-serif;
    font-size: 1rem;
    border-radius: 0px;
    color: var(--color-text-white);
    box-sizing: border-box;
    display: block; /* Tämä poistaa tyhjän tilan alta ja "halaa" diviä */
}

.reservation-form__input {
    resize: none;            /* Poistaa venytysnurkan */
    field-sizing: content;    /* Valinnainen: takaa ettei se ole alussa liian matala */
}

.reservation-form__input:focus {
    outline: none; /* Poistaa selaimen oman sinisen */
    background-color: rgb(21, 21, 21);
}

.reservation-form__input::-webkit-contacts-auto-fill-button,
.reservation-form__input::-webkit-credentials-auto-fill-button {
    background-color: white;
}


.reservation-form__button {
    padding: 1rem;
    border: none;
    width: 100%;
}

@media (max-width: 850px) {
    .reservation-form__input {
        padding: 0.75rem;
    }
}

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

.footer__container {
    display: flex;
    flex-direction: column;
    gap: 5rem;
}

.footer__top {
    display: grid;
    /* Luodaan 3 saraketta: laidat vievät saman verran tilaa (1fr), keskiosa vain tarvittavan (auto) */
    grid-template-columns: 1fr auto 1fr;
    width: 100%;
    align-items: flex-start;
}

.footer__column {
    display: flex;
    flex-direction: column;
}

/* Vasen reuna: sisältö keskellä saraketta, mutta sarake alkaa reunasta */
.footer__column-left {
    align-items: center;
    text-align: center;
    justify-self: start; /* Pakottaa koko sarakkeen vasempaan laitaan */
}

/* Keskikohta: aina tasan sivun keskellä */
.footer__column-center {
    align-items: center;
    text-align: center;
    gap: 1rem;
}

/* Oikea reuna: sisältö keskellä saraketta, mutta sarake loppuu reunaan */
.footer__column-right {
    align-items: center;
    text-align: center;
    justify-self: end; /* Pakottaa koko sarakkeen oikeaan laitaan */
}



.footer__address {
    color: var(--color-accent-1);
    text-decoration: none;
}

.footer__phone {
    color: var(--color-accent-1); 
}

.footer__social-icons {
    display: flex;
    justify-content: center;
    gap: 16px;
}

.social-icon {
    height: 1.5rem;
    width: auto;
    display: block;
}

.footer__bottom {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between; 
    align-items: center; 
    color: var(--color-accent-1);
    width: 100%;
}

.footer__links {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}


.footer__copyright {
    margin: 0;
}

@media (max-width: 850px) {
    .footer__top {
        display: flex; /* Vaihdetaan grid takaisin flexiin mobiilissa */
        flex-direction: column;
        align-items: center;
        gap: 2.5rem;
    }


    .footer__bottom {
        display: flex;
        flex-direction: column;/* Kaikki keskelle */
        gap: 2rem;
        width: 100%;
    }

    .footer__links {
        display: grid;
        gap: 1rem;
        width: 100%;
    }

    .footer__copyright {
        order: 2; 
        width: 100%;
    }
}


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


.centered {
    align-items: center;
    text-align: center;
}


/* Media queries for responsiveness (Mobiilityylit) */
@media (max-width: 650px) {
    
    .double-column-layout {
        flex-direction: column;
        gap: 2rem;
    }

    .double-column-layout > * {
        flex-basis: 100%; /* Laita elementit täyteen leveyteen */
    }

    
    .hero__content {
        width: 100%;
        margin-top: 6rem;
    }

    .section {
        padding: 2.5rem 1rem; /* Vähennetään paddingia mobiilissa */
    }

    .reservation {
        padding: 2.5rem 0.25rem;
    }

    .header__container {
        padding: 0 1rem;
    }
    
    
    .main-text {
        font-size: 32px;
    }

    .hero__container .image-container {
        width: 100%;
        margin: 0 auto;
    }

    .menu-content {
        flex-direction: column;
    }

    .menu-column {
        flex: 0 0 100%; 
        padding: 4px;
        margin-bottom: 20px;
    }

    .menu-row-title .price {
        flex-shrink: 0; 
    }

    .text-content {
        width: 100%;
        text-align: left !important; /* Varmistetaan mobiilissa vasen tasaus */
    }


    
    .gallery__grid {
        width: 100%;
        flex-direction: row;
        flex-wrap: nowrap; /* Estää kuvia menemästä allekkain */
    }

    #map-section .container {
    height: 400px; /* Rajoittaa näkyvän alueen korkeuden, säädä tarpeen mukaan */
    }



}



.header__container, .hero {
    padding-top: 0;
    padding-bottom: 0;
}


.portfolio-list {
    width: 100%;
    padding: 0 var(--grid-col-width);
    box-sizing: border-box;
}


@media (max-width: 1100px) {
    .portfolio-list {
        padding: 0px;
    }
}






.is_centered {
    align-items: center; 
}


.text-content-p {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.stack-centered {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center; /* Keskittää otsikot, kuvan ja napin vaakasuunnassa */

}

.find-us__img {
    max-height: 600px;
    min-height: 425px;
}



@media (max-width: 650px) {
    .br-wide {
        display: none;
    }
}


/* 2. SLIDERIN RUNKO - Lukitsee kuvasuhteen */
.before-after-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    user-select: none;
    touch-action: pan-y;
    display: flex; /* Poistaa välit elementtien väliltä */
}

/* 3. KUVAT - Estetään venyminen */
.slider-img {
    width: 100%;
    height: 100%; 
    display: block; /* TÄMÄ poistaa tyhjän tilan kuvan alta */
    pointer-events: none;
    object-fit: cover;
}

/* 4. PÄÄLLYSMERKKI (AFTER-KUVA) */
.after-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: inset(0 50% 0 0); /* JS päivittää tätä */
    z-index: 2;
    overflow: hidden;
}

/* 5. SÄÄDIN (INPUT) - Korjattu korkeus */
.slider-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    cursor: col-resize;
    z-index: 10;
    margin: 0;
    outline: none;
}

/* TÄMÄ OLI SE VIRHE: height 100vh -> height 100% tai iso PX-arvo */
.slider-input::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 80px; 
    height: 800px; /* Riittävän suuri, mutta ei vh-yksikköä */
    background: transparent;
    opacity: 0; 
    cursor: col-resize;
}

.slider-input::-moz-range-thumb {
    width: 80px;
    height: 800px;
    background: transparent;
    opacity: 0;
    border: 0;
    cursor: col-resize;
}

/* 6. VISUAALINEN VIIVA */
.slider-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: white;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
    z-index: 5;
    pointer-events: none;
    transform: translateX(-50%);
}

.slider-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--color-secondary-light);
    font-size: 14px;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.flex-column {
        display: flex;
        flex-direction: column;
        gap: 1rem;

    }

@media (max-width: 1000px) {

    .flex-column-md {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;

    }
}

.flex-center-y {
    display: flex;
    justify-content: center; /* Keskittää pystysuunnassa, kun direction on column */
    align-items: flex-start; /* Pakottaa tekstin vasempaan reunaan (x-akseli) */
    height: 100%; /* Vaatii korkeuden, jotta pystysuuntainen tila voidaan jakaa */
}

@media (min-width: 1000px) {

    .small-screen-visual {
        display: none;
    }
}


@media (max-width: 650px) {
    .section__gallery {
        order: 1; /* Nousee ylemmäksi */
    }

    .section__find-us {
        order: 2; /* Siirtyy alemmaksi */
    }

}

@media (max-width: 650px) {
    .mobile-reverse-column {
        display: flex;
        flex-direction: column-reverse;
    }
}

.faq {
    border-bottom: 1px solid var(--color-accent-1);
    padding: 2rem 2rem 2rem 0;
}