/* =========================================================
   MUUTTUJAT
   ========================================================= */

:root {
    --pink-bg: #f7dde0;
    --card-bg: rgba(255,255,255,0.75);
    --accent: #a23644;
}

/* =========================================================
   RESET & PERUSASETUKSET
   ========================================================= */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Alegreya Sans", sans-serif;
    background: var(--pink-bg) url(body-bg.jpg) center / cover fixed;
    color: #444;
    line-height: 1.3;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    font-size: clamp(1.2rem, 1.8vw, 1.375rem);
}

/* =========================================================
   SIVURAKENNE
   ========================================================= */

.sivu {
    max-width: 1300px;
    margin: auto;
    padding: 1rem 3rem 4rem 3rem;
}

/* =========================================================
   TYPOGRAFIA & OTSIKOT
   ========================================================= */

h1 {
    font-family: "Alegreya", serif;
    font-size: clamp(3.2rem, 5vw, 4rem);
    color: var(--accent);
    margin: 0.5rem 0 1rem 0;
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    justify-self: end;
}

h2 {
    font-size: clamp(1.5rem, 2vw, 1.875rem);
}

.kortti h2 {
    margin-right: 2rem;
    text-align: center;
}

h2,
h3 {
    font-family: "Alegreya", serif;
    color: var(--accent);
    margin-top: 1.5rem;
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
}

h4 {
    margin: 2rem 0 -1rem 0;
}

.alku-ylateksti {
    letter-spacing: 2px;
    font-size: clamp(1.6rem, 3vw, 2rem);
    font-family: "Alegreya", serif;
    margin: 0;
}

/* =========================================================
   LINKIT
   ========================================================= */

a:link,
a:visited {
    color: #a23644;
    text-decoration: underline;
}

a:hover {
    text-decoration: none;
}

.etusivu-linkki {
    position: absolute;
    top: 8px;
    right: 1%;
    z-index: 10;
    font-family: "Alegreya", serif;
    color: #a23644;
    font-size: clamp(1.125rem, 2vw, 1.3rem);
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
}

.etusivu-linkki,
.etusivu-linkki:link,
.etusivu-linkki:visited,
h1 a,
h1 a:link,
h1 a:visited {
    text-decoration: none;
}


h1 a:hover, .etusivu-linkki:hover {
    color: rgba(162, 54, 68, 0.7);
}

/* =========================================================
   PAINIKE
   ========================================================= */

.painike {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    text-decoration: none;
    padding: 0.7rem 1.9rem 0.5rem 1.9rem;
    margin: 0rem 0 1.5rem 0;
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
}

.painike,
.painike:link,
.painike:visited {
    color: #fff;
    text-decoration: none;
}

.painike:hover {
    background: rgba(162, 54, 68, 0.7);
}

/* =========================================================
   ALKUOSIO
   ========================================================= */

.alku {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 3rem;
    align-items: center;
    position: relative;
}

.alku-teksti {
    z-index: 2;
}

.alku-laatikko {
    background: var(--card-bg);
    padding: 0.5rem 1.5rem 1rem 2.7rem;
    max-width: 600px;
    margin-right: -200px;
    position: relative;
    z-index: 3;
}

.alku-laatikko2 {
    background: var(--card-bg);
    padding: 0.5rem 1.5rem 1rem 2.7rem;
    max-width: 660px;
    margin-right: -100px;
    position: relative;
    z-index: 3;
}

.alku-kuva {
    position: relative;
    z-index: 1;
}

.alku-kuva img {
    border: 15px solid var(--card-bg);
    margin-top: 60px;
    width: 100%;
}

/* =========================================================
   HOIDOT & HINNAT
   ========================================================= */

.hoidot {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    margin: 3rem 0 -2rem 0;
    text-align: left;
}

.hinnat {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 3rem;
    margin: 5rem 0 -1rem 0;
    text-align: center;
}

.hinnat .kortti h2 {
    margin-right: 0rem;
    text-align: center;
}

.kortti {
    background: var(--card-bg);
    padding: 1.5rem 3.5rem 1.5rem 2em;
}

.kauno {
    color: rgba(162, 54, 68, 0.2);
    font-family: "Great Vibes", cursive;
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    margin-bottom: -1rem;
    margin-top: -3.6rem;
    margin-right: 2rem;
    -webkit-font-smoothing: antialiased;
    text-align: center;
}

.kortti img {
    vertical-align: top;
    margin-top: 0rem;
}


/* =========================================================
   ESITTELY (ABOUT)
   ========================================================= */

.esittely {
    display: grid;
    grid-template-columns: 1fr 2.2fr;
    gap: 4rem;
    margin: 5rem 0 -2rem 0;
}

.esittely-kuva {
    text-align: center;
}

.esittely-teksti h2 {
    margin-top: 0;
}

.esittely-kuva img.paakuva {
    width: 100%;
    margin: 0 0 0 3px;
    border: 15px solid var(--card-bg);
}

.merkki {
    margin-top: 0.5rem;
    width: 267px;
    height: auto;
    border: 0;
}


/* =========================================================
   HOITOKUVAUKSET
   ========================================================= */
   

.hoitokuvaus {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 2rem;
    margin: 1.5rem 0 -2.5rem 0;
}

.hoitokuvaus .kortti.levea {
    grid-column: 1 / -1; /* vie koko leveys */
    text-align: left;
    padding: 1.5rem 3.5rem;
}

.hoitokuvaus .kortti.puoli {
    text-align: left;
    padding: 1.5rem 3.5rem;
}

/* =========================================================
   ALATUNNISTE
   ========================================================= */

.alatunniste {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 3rem;
    margin-top: 4rem;
    text-align: center;
}

.alatunniste img {
    width: 100%;
    border: 15px solid var(--card-bg);
}

.alatunniste a {
    font-size: clamp(1rem, 2vw, 1.166rem);
}

/* =========================================================
   RESPONSIIVISUUS (MOBIILI)
   ========================================================= */

@media (max-width: 900px) {

.sivu {
    padding: 0 1rem 2rem 1rem;
    margin-top: 0rem;
}

.alku,
.esittely,
.hinnat,
.hoidot {
    grid-template-columns: 1fr;
    gap: 2rem;
    margin: 3rem 0 -1rem 0;
}

.alatunniste {
    grid-template-columns: 1fr;
    gap: 0.2rem;
    margin: 3rem 0 -1rem 0;
}

.alku-laatikko, .alku-laatikko2 {
    max-width: 100%;
    margin-right: 0;
    padding: 0.5rem 1rem;
}

.alku-kuva img {
    margin-top: 0px;
}

.alku-teksti {
    text-align: center;
}

h1 {
    justify-self: normal;
}

.kauno {
    margin-bottom: -0.8rem;
    margin-top: -2.7rem;
}


.kortti {
    padding: 1rem 1rem 1rem 1em;
}

.esittely-teksti {
    padding: 0 1.5rem;
}

.esittely-teksti h2 {
    text-align: center;
    margin-left: -1rem;
    margin-top: -0.8rem;
}

.esittely-kuva .merkki {
    display: none;
}

.esittely-teksti::after {
    content: "";
    display: block;
    width: 267px;
    margin: -5rem auto -5.5rem -0.5rem;
    background: url("hermoratahieronnanmestarit.png") no-repeat center;
    background-size: contain;
    aspect-ratio: 1 / 1;
}

    .hoitokuvaus {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin: 2rem 0 -1.5rem 0;
    }

    .hoitokuvaus .kortti.levea,
    .hoitokuvaus .kortti.puoli {
        grid-column: 1 / -1; /
    }
    
    .hoitokuvaus .kortti.levea {
    padding: 0.5rem 1.5rem;
}

.hoitokuvaus .kortti.puoli {
    padding: 0.5rem 1.5rem;
}

.etusivu-linkki {
    position: relative;
    top: -10px;
   	margin: 0 auto;
   	margin-bottom: -10px;
}

}