/* Perusasetukset */
body {
  margin: 0;                        /* Poistaa selaimen oletusmarginaalit sivun reunoilta */
  color: #6f7268;                   /* Perustekstin väri (tummanvihreäharmaa) */
}

/* Pääcontainer kahdelle sarakkeelle */
.container {
  display: flex;          /* Asettaa flexboxin → lapset asettuvat vierekkäin */
  height: 100vh;          /* Vie koko selainikkunan korkeuden */
  max-width: 2000px;      /* Estää sisällön venymisen erittäin leveillä näytöillä */
  margin: 0 auto;         /* Keskittää containerin vaakasuunnassa */
}

/*
   VASEN PUOLI (TEKSTI)
*/
.left {
  flex: 1;                          /* Vie puolet containerin leveydestä */
  padding: clamp(5px, 4vw, 60px);  /* Sisäinen tila: pienin 20px, kasvaa näytön mukaan, max 60px */
  display: flex;                    /* Tekee vasemmasta puolesta myös flexboxin */
  flex-direction: column;           /* Asettaa lapset pystysuoraan */
  justify-content: center;          /* Keskittää sisällön pystysuunnassa */
}

/* Sivun nimi ylhäällä */
.brand {
  font-size: clamp(1rem, 2vw, 1.8rem); /* isompi */
  margin-bottom: 40px;
  color: #6f7468;
  font-family: "Abhaya Libre", serif;
}

/* Pääotsikko */
h1 {
  font-size: clamp(1rem, 6vw, 6rem); /* Skaalautuva koko: min 1rem, kasvaa näytön mukaan, max 6rem */
  line-height: 0.95;                   /* Pieni riviväli → rivit lähellä toisiaan */
  margin: 0 0 70px 0;                  /* Tila otsikon alapuolelle, ei muita marginaaleja */
  letter-spacing: 2px;                 /* Lisää väliä kirjainten väliin */
  color: #818479;                      /* Hieman vaaleampi harmaaviher kuin perusteksti */
  font-family: "Lexend Giga", sans-serif;
}

/* Sisältöosio (esim. Email, Contact through site) */
.section {
  margin-bottom: 40px; /* Tila osioiden väliin */
  
}

/* Osion otsikkoteksti (lihavoitu) */
.section strong {
  display: block;                        /* Tekee elementistä lohkon → omalle rivilleen */
  font-size: clamp(1.5rem, 2.5vw, 2rem); 
  margin-bottom: 8px;                    /* Pieni tila otsikon ja sisällön väliin */
  color: #818479;                        /* Sama väri kuin pääotsikossa */
  font-family: open-sauce, sans-serif;
}

/* Kaikki linkit sivulla */
a {
   color: #4aa3a3;
  text-decoration: none;
  border-bottom: 1px solid #4aa3a3;
  font-size: clamp(1rem, 2vw, 1.6rem); 
  font-family: "abhaya libre", serif;
}

/* Linkin hover-tila */
a:hover {
  opacity: 0.7; /* Himmennys kun hiiri on linkin päällä */
}

/* Pienempi teksti (esim. "Click here to fill...") */
.small-text {
  font-size: clamp(1rem, 2vw, 1.6rem); /* isompi skaalautuva pikkuteksti */
  margin-top: 5px;                         /* Pieni tila yläpuolelle */
  font-family: "abhaya libre", serif;
}

/* Chat-tila teksti (CHAT CLOSED) */
.chat {
  margin-top: 40px;    /* Tila yläpuolelle */
  font-size: clamp(1rem, 2vw, 1.3rem); /* isompi, skaalautuva */
  letter-spacing: 1px;
  font-family: "Open Sauce", sans-serif;
}

/* Takaisin-linkki alaosassa */
.back a {
    color: #818479;
    margin-top: 50px;
    font-size: clamp(1rem, 2vw, 1.3rem);
    text-align: right;
    display: block;
    border-bottom: none;
}

/*
   OIKEA PUOLI (KUVA)
*/
.right {
  flex: 1;                   /* Vie puolet containerin leveydestä */
  display: flex;             /* Flexbox kuvan asetteluun */
  align-items: flex-end;     /* Kuva asettuu alareunaan */
  justify-content: left;     /* Kuva asettuu vasemmalle */
}

/* Kuva oikealla puolella */
.right img {
  height: 100%;         /* Kuva vie koko containerin korkeuden */
  object-fit: contain;  /* Kuva skaalautuu säilyttäen kuvasuhteen, ei leikkaudu */
}



/*
   RESPONSIIVISUUS - mobiili ja tabletti
*/
@media (max-width: 768px) {
    .container {
        flex-direction: column;
        height: auto;
    }

    .left {
        padding: 30px 20px;
    }

    .right {
        position: relative; /* ← varmistaa ettei kellu */
        width: 100%;
        height: 350px;
    }

    .right img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top;
    }

    h1 {
        font-size: 8vw;
        margin-bottom: 20px;
    }

    a {
        font-size: 1rem !important;
    }

    .section strong {
        font-size: 1.2rem !important;
    }

    .small-text,
    .chat {
        font-size: 1rem !important;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 10vw;
    }

    .section strong {
        font-size: 1.2rem;
    }
}


/* ===== TESTI 150% SKAALALLE ===== */

@media (max-width: 1280px) {  /* vastaa 1920px / 150% */
    h1 {
        font-size: clamp(1rem, 5vw, 4rem);
    }
    .section strong {
        font-size: clamp(1rem, 2vw, 1.5rem);
    }
}

@media (min-width: 2000px) {
    h1 {
        font-size: clamp(4rem, 5vw, 7rem);
    }
    .section strong {
        font-size: clamp(1.5rem, 2vw, 2.5rem);
    }
    a {
        font-size: clamp(1.2rem, 1.5vw, 2rem);
    }
    .back a {
        font-size: clamp(1.2rem, 1.5vw, 2rem); /* lisätty */
    }
    .container {
        max-width: 2800px;
    }
}