.elementor-9305 .elementor-element.elementor-element-6d35d70 > .elementor-container > .elementor-column > .elementor-widget-wrap{align-content:center;align-items:center;}.elementor-9305 .elementor-element.elementor-element-6d35d70:not(.elementor-motion-effects-element-type-background), .elementor-9305 .elementor-element.elementor-element-6d35d70 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#7A7A7A;background-image:url("https://salonvirho.com/wp-content/uploads/2025/09/salonvirho_henkilokunta_1600x620.jpg");background-position:center center;background-repeat:no-repeat;background-size:1660px auto;}.elementor-9305 .elementor-element.elementor-element-6d35d70 > .elementor-background-overlay{background-image:url("https://salonvirho.com/wp-content/uploads/2020/09/overlay.png");background-position:center center;background-repeat:no-repeat;background-size:2560px auto;opacity:1;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-9305 .elementor-element.elementor-element-6d35d70 > .elementor-container{max-width:1140px;min-height:600px;}.elementor-9305 .elementor-element.elementor-element-6d35d70{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-9305 .elementor-element.elementor-element-835507c{text-align:center;}.elementor-9305 .elementor-element.elementor-element-835507c .elementor-heading-title{font-size:65px;text-shadow:0px 2px 10px rgba(0, 0, 0, 0.54);color:#ffffff;}.elementor-9305 .elementor-element.elementor-element-37948ec{padding:60px 0px 60px 0px;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-9305 .elementor-element.elementor-element-eb16d82 > .elementor-widget-container{padding:0px 10px 0px 10px;}.elementor-9305 .elementor-element.elementor-element-eb16d82{columns:1;text-align:center;font-size:18px;}.elementor-9305 .elementor-element.elementor-element-ba7bb69{margin-top:0px;margin-bottom:0px;}.elementor-9305 .elementor-element.elementor-element-9c115b4 > .elementor-element-populated{margin:20px 0px 40px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;}.elementor-9305 .elementor-element.elementor-element-f61c2cc > .elementor-widget-container{margin:0px 0px 20px 0px;}.elementor-9305 .elementor-element.elementor-element-f61c2cc{text-align:start;}.elementor-9305 .elementor-element.elementor-element-f61c2cc .elementor-heading-title{font-size:40px;font-weight:900;line-height:1em;color:#000000;}.elementor-9305 .elementor-element.elementor-element-c63b3fd > .elementor-widget-container{margin:40px 0px 20px 0px;}.elementor-9305 .elementor-element.elementor-element-c63b3fd{text-align:start;}.elementor-9305 .elementor-element.elementor-element-c63b3fd .elementor-heading-title{font-size:40px;font-weight:900;line-height:1em;color:#000000;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-9305 .elementor-element.elementor-element-6d35d70{padding:0px 25px 0px 25px;}.elementor-9305 .elementor-element.elementor-element-835507c .elementor-heading-title{line-height:1em;}.elementor-9305 .elementor-element.elementor-element-eb16d82{columns:1;}}@media(max-width:767px){.elementor-9305 .elementor-element.elementor-element-6d35d70:not(.elementor-motion-effects-element-type-background), .elementor-9305 .elementor-element.elementor-element-6d35d70 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://salonvirho.com/wp-content/uploads/2025/09/salonvirho_henkilokunta_1600x620.jpg");background-position:center left;background-size:cover;}.elementor-9305 .elementor-element.elementor-element-6d35d70 > .elementor-container{min-height:548px;}.elementor-9305 .elementor-element.elementor-element-6d35d70{padding:0px 20px 0px 20px;}.elementor-9305 .elementor-element.elementor-element-835507c .elementor-heading-title{line-height:1em;}.elementor-9305 .elementor-element.elementor-element-37948ec{padding:30px 0px 30px 0px;}.elementor-9305 .elementor-element.elementor-element-eb16d82 > .elementor-widget-container{padding:10px 10px 10px 10px;}.elementor-9305 .elementor-element.elementor-element-f61c2cc .elementor-heading-title{font-size:26px;}.elementor-9305 .elementor-element.elementor-element-c63b3fd .elementor-heading-title{font-size:26px;}}/* Start custom CSS for section, class: .elementor-element-ba7bb69 */.team-members-grid {
  display: grid;
  /*grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));*/
  grid-template-columns: repeat(3, 1fr); /* aina 3 saraketta */
  gap: 1.25rem;
  transition: transform 0.3s ease;
}

.team-members-grid:hover> :not(:hover){
  /*opacity: 0.5;
  transition: transform 0.3s ease;*/
}

@media (max-width: 820px) {
  .team-members-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .team-members-grid {
    grid-template-columns: 1fr;
  }
}

.team-member-card {
  position: relative;
  /*overflow: hidden;*/
  border-radius: 2px;
  /*box-shadow: 0 2px 10px rgba(0,0,0,0.1);*/
  /*background: #fff;*/
  transition: transform 0.3s ease;
  transition: box-shadow 0.3s ease;
  cursor: pointer;
  filter: grayscale(1);
}

.team-member-card:hover {
    transform: scale(1.01);
    transition: transform 0.3s ease;
    filter: grayscale(0);
}

.team-member-card.expanded {
 z-index: 1000; 
 filter: grayscale(0);
 opacity: 1;
}

/* Neliökuva */
.team-member-card .main-photo {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}



.team-member-card .main-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Hover-overlay nimi + titteli */
.team-member-card .overlay {
  position: absolute;
  min-height: 112px;
  bottom: 0;
  width: 100%;
  background: rgba(122,122,122,0.65);
  color: #fff;
  padding: 1rem;
  text-align: center;
  transition: opacity 0.3s ease;
}

.team-member-card .name {
    margin-bottom: 0;
}

.team-member-card .job-title {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Laajennettu sisältö */
.team-member-card .expanded-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  padding: 0;
  background: #fafafa;
  position: absolute;
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

/* Oletuksena avautuu alas */
.team-member-card.expanded .expanded-content {
  bottom: 0;
  top: auto;
  max-height: 1000px; /* tai muu riittävä arvo */
}

/* Jos on ensimmäisellä rivillä tai yksipalstaisena → avautuu ylös */
.team-member-card.first-row.expanded .expanded-content {
  top: 0;
  bottom: auto;
}

/* Kun kortti on expanded, asetetaan max-height scriptillä */
.team-member-card.expanded .expanded-content {
  /* Tämä rivin voi poistaa, jos scripti huolehtii max-heightista */
}

.team-member-card .additional-photo img {
  width: 100%;
  height: auto;
}

.team-member-card .details {
    padding: 0 1.5rem 1.5rem 1.5rem;
}

.team-member-card .details .name {
  font-size: 1.75rem;
  font-weight: 200;
}

.team-member-card .details .job-title {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 0.5rem;
}

.team-member-card .details .description {
  font-size: 15px;
  line-height: 22.5px;
}

.team-member-card .booking-link {
  display: inline-block;
  width: 100%;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 12px 24px;
  transition: background 0.3s ease;
  text-transform: uppercase;
  color: #d3b574;
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  border-color: #d3b574;
  border-radius: 0px 0px 0px 0px;
}

.team-member-card .booking-link:hover {
    background-color: #d3b574 !important;
    color: #515151;
}

.team-member-card .booking-link:hover {
  background: #005c8a;
}

/* Aktivoitu kortti näyttää lisätiedot */
.team-member-card.expanded .expanded-content {
  display: block;
}

.expanded-content {
  position: relative; /* jotta ::before sijoittuu sen sisälle */
}

.expanded-content::before {
  content: '×';              /* Unicode-raksin merkki */
  position: absolute;
  top: 8px;                  /* etäisyys yläreunasta */
  right: 8px;                /* etäisyys oikeasta reunasta */
  font-size: 20px;           /* kokoa voi säätää */
  color: white;              /* raksin väri */
  background: rgba(0, 0, 0, 0.5); /* tausta, jotta raksin näkee selkeästi */
  border-radius: 50%;        /* pyöreä muoto */
  width: 28px;
  height: 28px;
  line-height: 26px;
  text-align: center;
  pointer-events: none;      /* klikkaukset menevät kortille */
  z-index: 10;
}/* End custom CSS */