*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

button {
  outline: transparent;
  text-box: trim-both cap alphabetic;
  padding: .5em .75em;
}

:root {
  color-scheme: light;
  interpolate-size: allow-keywords;

  /* Fonts */
  --font-base: system-ui, sans-serif;

  /* Typography */
  --fs-base: clamp(18px, calc(16px + 0.25vw), 20px);
  --line-base: 1.7;

  /* Widths */
  --max-page-width: 1200px;
  --width-page: 1000px;
  --width-wide: 1160px;
  --width-content-narrow: 66ch;
  --width-content: 72ch;
  --width-content-medium: 80ch;

  /* Spacing */
  --space-xs: 0.4rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 3rem;

  /* Radius */
  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 26px;
  --radius-pill: 999px;

  /* Colors */
    /* Primary */
    --base-color:       oklch(.45 0.14 180);
    --base-color:       oklch(.54 0.23 146);
    --base-color-hover: oklch(from var(--accent-bg) calc(l + .15) c h);
    /* --base-color-dark:  oklch(.35 0.14 148); */

    /* Accent */
    /* --accent-bg:    oklch(.7 0.17 59); */
    --accent-bg:    oklch(from var(--base-color) .8 calc(c + .08) calc(h - 120));
    --accent-fg:    oklch(from var(--base-color) l calc(c + .06) calc(h + 150));

    /* Text */
    --text-normal:   oklch(.18 0.04582 275);
    --text-inverse:  oklch(.98 0 0);

    /* Surfaces */
    --color-bg:            45 30% 97%;
    --color-surface:       0 0% 100%;
    --color-surface-soft:  145 25% 95%;
    --color-border:        145 12% 86%;

    --soft-shadow: 8px 8px 8px oklch(from var(--base-color) l c h / 0.12);
    --medium-shadow: 8px 8px 8px oklch(from var(--base-color) calc(l - .2) c h / 0.12);

  /* Z-index */
  --z-nav: 100;
  --z-dropdown: 200;
  --z-modal: 1000;
}

[data-theme="dark"] {
  color-scheme: dark;
    --color-brand:         148 38% 40%;
    --color-brand-hover:   148 42% 48%;
    --color-brand-dark:    150 45% 25%;

    --color-accent:        28 100% 65%;
    --color-accent-strong: 28 82% 58%;

    --color-text:          45 25% 94%;
    --color-text-muted:    45 12% 70%;
    --color-text-inverse:  150 20% 10%;

    --color-bg:            150 18% 10%;
    --color-surface:       150 16% 14%;
    --color-surface-soft:  150 14% 18%;
    --color-border:        150 10% 27%;
}

html {
  font-family: var(--font-base);
  color: var(--color-text);
  background: var(--color-bg);
  scroll-behavior: smooth;
}

body {
  color: var(--color-text);
  background: var(--color-bg);
}

h1, h2, h3 {
  line-height: 1.2;
  text-wrap: balance;
}

p {
  margin-block: 0 1rem;
}

a {
  color: var(--color-brand);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Varataan tila vierityspalkille, jo siinä vaiheessa, kun sitä ei vielä tarvita */

html {
    scrollbar-gutter: stable;
}

/* Tehdään mobiiliystävällinen oletus viewportin koosta */

/* Varataan tila headerille, sisällölle ja footerille */

/* Asetetaan joitain globaaleja tyylejä. */

body {
    min-block-size: 100svh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    background-color: oklch(0.97 0.03816 80 / 0.2);
    font-size: 1rem;
    line-height: 1.7;
}

[class|="container"], .page-top {
    --inline-padding: 0;
    --margin-top: 0;
    --margin-bottom: 1rem;

    container-type: inline-size;
    position: relative;
    width: 100%;
    max-width: var(--max-page-width);
    margin-inline: auto;
    margin-block: var(--margin-top) var(--margin-bottom);
    padding-inline: var(--inline-padding);
}

.page-top {
    container-name: page-top;
}

.container {
    container-name: container;
}

.container-padding_inline {
    --inline-padding: 8px;
}

[class|="grid"] {
    container-type: inline-size;
    container-name: grid-auto;
    --grid-min-col-size: 260px;
    --margin-top: 0;
    --margin-bottom: 1rem;

    display: grid;
    gap: 1rem;
    height: fit-content;
    margin-block: var(--margin-top) var(--margin-bottom);
}

.grid-auto-fit {
    grid-template-columns:
        repeat(auto-fit, minmax(min(var(--grid-min-col-size), 100%), 1fr));
}

.grid-auto-fill {
    grid-template-columns:
        repeat(auto-fill, minmax(min(var(--grid-min-col-size), 100%), 1fr));
}

.auto-rows-10px {
    grid-auto-rows: 10px; }

.auto-rows-20px {
    grid-auto-rows: 20px; }

/* Jos tarvii erilevyisiä, niin tämänkaltainen luokka html:ssä ed. luokan perään */

.min_col_size_190 {
    --grid-min-col-size: 190px;
}

.min_col_size_200 {
    --grid-min-col-size: 200px;
}

.min_col_size_300 {
    --grid-min-col-size: 300px;
}

.min_col_size_360 {
    --grid-min-col-size: 360px;
}

.min_col_size_400 {
    --grid-min-col-size: 400px;
}

.margin_top-1rem {
    margin-top: 1rem;
}

.margin_top-2rem {
    margin-top: 2rem;
}

.skip-link {
    display: block;
    text-align: center;
    background-color: black;
    color: white;
    text-box: trim-both cap alphabetic;
    padding: .75em;
    position: fixed;
    inset-inline: 0;
    top: 0;
    transform: translateY(-100%);
    transition: transform .15s ease-in-out;
}

/* @import './utilities/wrapper.css'; */

/* @import './utilities/section.css'; */

/* @import './utilities/text.css'; */

/* @import './utilities/spacing.css'; */

nav {
    background-color: var(--base-color);
    color: var(--text-inverse);
    display: flex;
    justify-content: start;
    padding-inline: .5rem;
    gap: .5rem;
}

nav button {
        border: none;
        background-color: transparent;
        color: var(--text-inverse);
        padding-block: 2px 0;
    }

nav > :nth-child(2) {
    margin-left: auto;
}

.navbar  {
    display: flex;
    gap: 1rem;
    padding: 0;
    list-style: none;
    font-size: 1.1rem;
    line-height: 1.7;
}

.icon {
    height: 2rem;
    width: 2rem;
}

.navbar__icon {
    padding-inline: .5rem;
    border-radius: .5rem;
}

.navbar__item {
    min-width: 13ch;
    padding-block-start: 4px;
    border-radius: 1rem;
    text-align: center;
    font-size: .9rem;
    font-weight: 600;
}

.navbar__item:hover,
.navbar__item:focus-visible,
.navbar__icon:hover,
.navbar__icon:focus-visible {
    background-color: hsl(var(--color-brand-hover));
}

.nav_link:hover {
    text-decoration-style: dashed;
    text-underline-offset: 6px;
}

@container page-top (width < 465px) {
    .navbar {
        display: none;
    }
}

.popover_menu {
    transform: translateY(100%);
    border: 2px solid oklch(from var(--base-color) l c h);
    border-radius: var(--radius-m);
    background-color: color-mix(in oklch, var(--base-color) 15%, white);
    color: color-mix(in oklch, black 65%, white);
	  width: 30ch;
    padding-block: 2rem;
    margin-inline: auto;
    opacity: 0;

    font-size: 1.2rem;
    font-weight: 600;
    text-align: center;
}

.popover_menu::backdrop {
        opacity: 0;
        background-color: rgba( 0 0 0 / 25% );
    }

.popover_menu:popover-open { opacity: 1;}

.popover_menu:popover-open::backdrop {
        background-color: rgba( 0 0 0 / 25% );
        opacity: 1;
    }

/* Transitions */

[popover],
[popover]::backdrop {
  transition: 
    display .5s,
    overlay .5s, /* <= !important */
    opacity .5s;
  transition-behavior: allow-discrete;
}

/* On open, starting-style */

@starting-style {
  [popover]:popover-open {
    opacity: 0;
  }
  [popover]:popover-open::backdrop {
    opacity: 0;
  }
}

/* Perusta */

[class|="btn"] {
  --button_background: color-mix(in oklch, var(--base-color) 25%, white);
  --button_color: var(--text-normal);
  /* outline: 2px solid pink; */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;

  padding: 0.55rem 1.1rem;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);

  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;

  background-color: var(--button_background);
  color: var(--button_color);

  text-box: trim-both cap alphabetic;
  padding: .7rem .95rem;

  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;

}

[class|="btn"]:hover {
      text-decoration: none;
      background-color: oklch(from var(--button_background) calc(l - .05) c h);
  }

.btn__primary {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--color-text-inverse);
}

.btn__primary:hover {
  background: var(--color-brand-hover);
  border-color: var(--color-brand-hover);
  transform: translateY(-2px);
}

.btn__secondary {
  background: transparent;
  border-color: var(--color-brand);
  color: var(--color-brand);
}

.btn__secondary:hover {
  background: var(--color-brand);
  color: var(--color-text-inverse);
}

.btn__ghost {
  background: transparent;
  border-color: transparent;
  color: var(--color-brand);
}

.accordion {
  border-radius: var(--radius-m);
}

.accordion__toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.accordion__title {
  display: block;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  text-align: center;
  padding: var(--space-md);
  cursor: pointer;
  font-weight: 600;
}

.kal_more::after {
  content: "Näytä lisää tapahtumia +";
}

.accordion__toggle:checked + .kal_more::after {
  content: "Näytä vähemmän tapahtumia –";
}

.accordion__icon::after {
  content: "+";
  font-size: 1.2rem;
}

.accordion__content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.1s ease;
}

.accordion__inner {
  overflow: hidden;
  background: var(--color-surface);
  border-radius: 0 0 var(--radius-m) var(--radius-m);
  /* padding-inline: var(--space-m); */
}

.accordion__toggle:checked + .accordion__title {
  border-radius: var(--radius-m) var(--radius-m) 0 0;
}

.accordion__toggle:checked + .accordion__title .accordion__icon::after {
  content: "–";
}

.accordion__toggle:checked + .accordion__title + .accordion__content {
  grid-template-rows: 1fr;
}

.accordion__toggle:checked + .accordion__title + .accordion__content .accordion__inner {
  padding-block: var(--space-md);
}

.tapahtumakalenteri {
    /* margin-block-start: 1rem; */
    padding-left: .5rem;
}

.tapahtumakalenteri h2 {
        color: oklch(from var(--base-color) calc(l - 10%) c h);
        margin-block: 0 .5rem;
    }

.tapahtumakalenteri p {
        color: oklch(from var(--text-normal) l c h / .7);
        font-weight: 500;
        font-size: 1.1rem;
    }

#kalenteri {
    border-radius: var(--radius-m);
    box-shadow: var(--medium-shadow);
    padding-bottom: 1rem;
}

#kalenteri div:last-child {
    border-bottom: none;
}

.kalenteri {
    display: flex;
    flex-direction: column;
    gap: .3em;
}

.kal_viikko, .kal_more {
    font-size: 1.2rem;
    font-weight: bold;
    letter-spacing: 0.5px;
    padding: .5em;
    background-color: oklch(from var(--base-color) calc(l + 0.1) calc(c + 0.05) calc(h));
    /* color: var(--text-inverse, white); */
    color: white;
}

.kal_more {
    background-color: oklch(from var(--base-color) l c h / .05);
    border: 2px solid oklch(from var(--base-color) l c h / .3);
    border-radius: var(--radius-m);
    color: var(--text-normal);
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 1rem;
    padding-block: 1rem;
    cursor: pointer;
}

.kal_more:hover, .kal_more:focus {
        background-color: oklch(from var(--base-color) l c h / .09);
        /* border: 2px solid oklch(from var(--base-color) l c h / .3); */
        /* box-shadow: var(--soft-shadow); */
    }

#extra_lines .accordion__inner {
    padding-top: 0;
}

.kal_taprivi {
    display: grid;
    grid-template-columns: 7rem 1fr;
    gap: .5rem;
    padding: .3rem .5rem;
    border-bottom: 1px solid var(--base-color);
}

.last_tap {
    border-bottom: none;
}

.kal_milloin {
    display: flex;
    align-items: center;
    gap: .2rem;
    pointer-events: none;
}

.kal_paiva {
    width: 3rem;
    font-size: 2rem;
    color: var(--text-normal);
    pointer-events: none;
}

.kal_pvmklo {
    display: flex;
    flex-direction: column;
    text-align: center;
    font-weight: bold;
    line-height: 1.3;
    pointer-events: none;
}

.kal_pvm {
    color: oklch(0.45 0 0);
    font-size: 1.1rem;
    pointer-events: none;
}

.kal_klo {
    font-size: 1.3rem;
    color:oklch(0.55 0.21095 30);
    pointer-events: none;
}

.kal_info {
    line-height: 1.5;
}

.bibtextrow {
    margin-bottom: 1rem;
    background-color: oklch(from var(--base-color) l c h / .05);
    border: 2px solid oklch(from var(--base-color) l c h / .3);
    border-radius: var(--radius-m);
    color: oklch(from var(--text-normal) calc (l + .15) c h);
}

.texttitle {
    padding: .5rem 1rem;  
    cursor: pointer;
    border-radius: var(--radius-m);
}

.bibtext-open {
    background-color: oklch(from var(--base-color) l c h / .1);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.bibtextrow .texttitle span {
    font-size: 1.25rem;
    font-weight: 600;
    color: oklch(from var(--text-normal) calc(l + .32) c h);
}

.bibtextrow:hover {
    background-color: oklch(from var(--base-color) l c h / .09);
    /* box-shadow: var(--soft-shadow); */
}

.bibtextrow .texttitle span:first-child {
    margin-right: 1rem;
}

.bibtext {
    padding-top: 1rem;
    padding-inline: 1rem;
}

.bibtext div sub {
    font-size: 13px;
    font-weight: 600;
    color: oklch(from red calc(l - .1) c h);
    margin-right: 5px;
}

.bibtext p {
   font-size: .95rem;
   line-height: 1.7;
}

.bversion {
    text-align: right;
}

.cut-off {
    display: none;
}

.bib-quote {
    display: block;
    font-style: italic;
    font-weight: 500;
    font-size: 1.1rem;
    color: oklch(from red calc(l - .3) c h);
    margin-bottom: 0;
}

.bib-quote + cite {
    display: block;
    text-align: right;
    margin-block: 0 1.5rem;
    padding-right: 2rem;
    font-weight: 600;
    color: oklch(from blue calc(l - .5) c h / .7);
    line-height: 1;

}

.bib-quote + cite::before {
    content: "–";
    margin-right: 4px;
}

/* @import './components/card.css'; */

[class|="article"] {
  max-width: var(--width-content);
  margin-inline: auto;
  margin-bottom: 2rem;
  padding-inline: .5rem;
  color: oklch(from var(--text-normal) calc(l + .2 ) c h);
}

.article-left-align {
  margin-inline: 0;
}

.article-left-align h1 {
    color: oklch(from var(--text-normal) calc(l + .2 ) c h);
    font-weight: 500;
  }

.article-about-video {
  margin-top: 1rem;  
}

.article-about-video h2 {
    margin-bottom: 1rem;
  }

.article-header {
  margin-block-end: var(--space-md);
}

.article-header::after, .ingressi::after {
    content: "";
    display: block;
    height: 3px;
    margin: 0 auto 1.6rem;
    background: linear-gradient(90deg, transparent, oklch(from var(--base-color) l c h / .2), transparent);
  }

.ingressi::after {
  margin-top: var(--space-lg);
}

.article-header__title {
  color: oklch(from var(--text-normal) calc(l + .2 ) c h);
  /* color: oklch(from var(--accent-fg) calc(l) c h); */
  font-weight: 500;
  text-align: center;
  margin-block: 1rem;
}

.article-header__meta {
  color: var(--color-text-muted);
  text-align: center;
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
}

.article-content > h2 {
  color: oklch(from var(--text-normal) calc(l + .2 ) c h);
  font-weight: 500;
  /* color: red; */
  margin-block: var(--space-lg) var(--space-md);
}

.article-content > p {
  line-height: calc(var(--line-base) + .2);
  font-size: 1.05rem;
}

.ingressi {
  position: relative;
  padding-inline-start: var(--space-md);
  margin-bottom: var(--space-md);
  font-size: 1.1rem;
  font-weight: 500;
}

.kommentti {
  background: var(--color-surface-soft);
  border-left: 4px solid var(--color-brand);
  padding: var(--space-md);
  margin-block: var(--space-lg);
}

.paragraph-center {
  text-align: center;
}

.center-content {
  display: grid;
  justify-content: center;
  /* align-content: center; */
}

.info-button {
    text-align: center;
    text-wrap: balance;
    text-box: trim-both cap alphabetic;
    padding: 1rem 1.5rem;
    font-size: 1.1rem;
    text-decoration: none;

    background-color: oklch(from var(--base-color) calc(l + 0.1) c h / .2);
    color: var(--text-normal);

    border: 2px solid oklch(from var(--base-color) calc(l - .15) c h / .3);
    border-radius: var(--radius-l);

  }

.info-button:hover {
        background-color: oklch(from var(--base-color) calc(l + 0.2) c h / .2);
        text-decoration: none;
    }

/* @import './components/cta.css'; */

.image-block {
  margin-block: var(--space-lg);
}

.image-block__image {
  width: auto;
  max-width: 100%;
  height: auto;
}

.image-block--left {
  float: left;
  max-width: 45%;
  margin: 0.4rem 1.5rem 1rem 0;
}

.image-block--right {
  float: right;
  max-width: 45%;
  margin: 0.4rem 0 1rem 1.5rem;
}

.video-card {
  display: grid;
  gap: var(--space-md);
  margin-block: var(--space-lg);
}

.video-card__frame {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.video-card__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 600px) {
  .image-block--left,
  .image-block--right {
    float: none;
    max-width: 100%;
    margin: var(--space-lg) 0;
  }
}

.youtube-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    margin: 1rem 0;
    outline: 1 px solid pink;
}

.youtube-card__video {
    aspect-ratio: 16/9;
    position: relative; 
    cursor: pointer;
}

.youtube-card__video iframe,
.youtube-card__video img {
    border: 0;
    display: block;
    object-fit: cover;
    object-position: center;
}

.yt-kuva {
    width: 100%;           /* Kuva täyttää aina sille varatun leveyssuuntaisen tilan */
    /* max-width: 480px; */
    aspect-ratio: 16 / 9;  /* Pakottaa kuvan näyttöalueen puhtaaseen 16:9 laajakuvamuotoon */
    object-fit: cover;     /* Venyttää kuvan täyttämään 16:9 alueen ja leikkaa mustat palkit pois */
    object-position: center; /* Pitää huolen, että leikkaus tapahtuu tasan ylä- ja alareunasta */
    height: auto;          /* Kumotaan mahdollinen HTML:n kiinteä korkeus */
}

.youtube-card__text {
    padding-block: .5rem 0;
    padding-inline: 1rem;
}

.youtube-card h3 {
    margin: .5rem;
}

/* --- UUDET LISÄYKSET: Play-nappi kuvan päälle --- */

.youtube-card__video .play-nappi {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 48px;
    background-color: rgba(33, 33, 33, 0.8);
    border-radius: 12px;
    transition: background-color 0.2s, transform 0.2s translate;
}

/* YouTuben punainen hover-efekti */

.youtube-card__video:hover .play-nappi {
    background-color: #ff0000;
}

/* Valkoinen kolmio napin sisälle */

.youtube-card__video .play-nappi::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 10px 0 10px 18px;
    border-color: transparent transparent transparent #fff;
}

/* @import './components/testimonial.css'; */

.related {
  border-top: 1px solid var(--color-border);
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-md);
}

.related__title {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.related__list {
  list-style: none;
  padding: 0;
  margin: var(--space-sm) 0 0;
}

.related__item {
  margin-block: 0.4rem;
}

header {
    display: flex;
    justify-content: space-between;
    border-bottom: 3px solid oklch(from var(--base-color) l c h / .4);
    margin-top: .5rem;
}

header h1 {
        color: oklch(from var(--base-color) calc(l - .08) c h);
        padding-inline: .5rem;
    }

header .site-header {
        font-size: 2rem;
        line-height: 1.2;
        font-weight: 600;
        color: oklch(from var(--base-color) calc(l - .08) c h);
        padding-inline: .5rem;

    }

header p {
        margin: 0;
        padding-right: .5rem;
        position: relative;
        color: oklch(from var(--text-normal) l c h / .7);
        font-size: 18px;
        font-weight: 500;
        padding-top: 10px;
    }

@media (max-width: 549px) {
    header {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
        header p {
            padding-block: 0 10px;
        }
}

footer {
    text-align: center;
    padding-block: 1rem;
    border-top:  2px solid hsla(0, 0%, 0%, .4);
}

[class|="box"] {
    --box-bg-color: transparent;
    --box-text-color: var(--text-normal);
    min-height: 15px;
    padding: 1rem .7rem;
    margin-inline: 5px;
    background-color: oklch(from var(--box-bg-color) l c h);
    border: 2px solid oklch(from var(--box-bg-color) calc(l - .1) c h);
    border-radius: 1rem;
    box-shadow: var(--medium-shadow);
}

.box-yellow {
    --box-bg-color: oklch(.99 0.039 107);
}

.box-blue {
    --box-bg-color: oklch(.99 0.00697 220);
}

.box-green {
    --box-bg-color: oklch(.99 0.01842 146);
}

.box h2 {
    color: hsla(var(--color-text) / .8);
    margin-bottom: .5rem;
    font-size: 1.1rem;    
}

.box p {
    font-size: .95rem;
    line-height: 1.5;
}

.box-soitto_alue {
    --box-bg-color: oklch(from var(--base-color) calc(l + 0.1) c h);
    background-color: oklch(from var(--box-bg-color) calc(l + 0.2) c h / .1);
    border: 2px solid oklch(from var(--box-bg-color) calc(l - .1) c h / .4);
    color: var(--text-normal);
    text-align: center;
    font-weight: 500;
    padding-top: .5rem;
}

/* Tyylin perusta on button.css tiedostossa */

.btn-read-more {
    --button_background: oklch(from var(--box-bg-color) calc(l - .05) c h / .5);
    border: 2px solid oklch(from var(--box-bg-color) calc(l - .2) c h);
}

.btn-contact {
    --button_background: oklch(from var(--base-color) l c h / .05);
    border: 3px solid oklch(from var(--box-bg-color) l c h / .2);
    margin-block: .5rem;
}

.btn-contact .icon {
        width: 1.2rem;
        height: 1.2rem;
    }

.btn-contact:hover {
        background-color: oklch(from var(--base-color) l c h / .2);
    }

.gridspan_two {
    grid-column: span 2;
}

[class|="yhteyskortti"] {
    --box-bg-color: oklch(from var(--base-color) l c h / .08);
    display: flex;
    gap: .2rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-block: 1em .5em;
    background-color: var(--box-bg-color);
    border-radius: var(--radius-m);
    box-shadow: var(--medium-shadow);
    font-size: 1.2rem;
}

.yhteyskortti-2 {
    --box-bg-color: oklch(from var(--base-color) l c h / .13);
}

.yhteyskortti-3 {
    --box-bg-color: oklch(from var(--base-color) l c calc(h + 60) / .08);
}

.yhteyskortti-4 {
    --box-bg-color: oklch(from var(--base-color) l c calc(h + 60) / .17);
}

.yhteyskortti-srk {
    --box-bg-color: oklch(from var(--base-color) l c calc(h + 90) / .17);
}

.yhteyskortti-otsikko {
    --box-bg-color: oklch(from var(--base-color) l c h);
    background-color: oklch(from var(--box-bg-color) calc(l + 0.4) c h / .03);
    border: 3px solid oklch(from var(--box-bg-color) l c h / .2);
    color: hsl(var(--base-color));
    font-size: 1.4rem;
    padding-block: 2rem;
    align-content: center;
}

.yhteyskortti-artikkeli {
    --box-bg-color: oklch(from var(--base-color) l c h / 0.05);
    /* max-width: fit-content; */
    margin-bottom: 1rem;
    padding-inline: var(--space-md);
}

/* Käytetään yhteyskortti-srk:n kanssa */

.yhteysinfo {
    --box-bg-color: oklch(from var(--base-color) l c calc(h + 90) / .08);
}

.yhteys-kuva {
    max-width: 150px;
    width: 50%;
    margin-bottom: 1rem;
    border-radius: 999px;
}

.yhteys-nimi {
    color: var(--text-normal);
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
}

.yhteys-tehtava {
    color: var(--text-normal);
    hyphens: auto;
    text-align: center;
}

.yhteyslinkit {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: .5em;
}

.btn-yhteys {
    --button_background: oklch(from var(--box-bg-color) calc(l + 0.4) c h / .9);
    border: 2px solid oklch(from var(--box-bg-color) calc(l - .15) c h / .3);
    margin-block: .5rem;
}

.btn-yhteys .icon {
        width: 1.2rem;
        height: 1.2rem;
    }

/* Käytetään email-painikkeen kanssa */

.srk {
    background-color: oklch(from var(--base-color) l c calc(h + 90) / .07);
    border: 3px solid oklch(from var(--base-color) l c calc(h + 90) / .1);
}

.srk:hover {
        background-color: oklch(from var(--base-color) l c calc(h + 90) / .13);
    }

.vanhimmat {
    background-color: oklch(from var(--base-color) l c h / .08);
    border: 3px solid oklch(from var(--base-color) l c h / .2);
}

.vanhimmat:hover {
        background-color: oklch(from var(--base-color) l c h / .2);
    }

.vastuu {
    background-color: oklch(from var(--base-color) l c calc(h + 60) / .13);
    border: 3px solid oklch(from var(--base-color) calc(l) c calc(h + 60) / .2);
}

.vastuu:hover {
        background-color: oklch(from var(--base-color) l c calc(h + 60) / .2);
    }

.artikkelissa {
    background-color: oklch(from var(--base-color) l c h / .05);
    border: 3px solid oklch(from var(--base-color) l c h / .2);

}

.artikkelissa:hover {
        background-color: oklch(from var(--base-color) l c h / .2);
    }

.vastuu-border {
    border: 3px solid oklch(from var(--base-color) calc(l + .1) c calc(h + 60) / .2);
}

/* @import './pages/article-page.css'; */