/* Runda 2: justeringar per sektion */

/* ===== Runda 2 ===== */

/* Start: porträtten är gänget, med pratbubblor */
.team-photo{
  cursor: default;   /* porträtten går inte att klicka på, de visar bara en pratbubbla */
  box-shadow: 0 0 0 3px #fff, 0 8px 22px rgba(34,30,27,.22);
  transition: box-shadow .3s ease, scale .45s cubic-bezier(.34,1.8,.5,1);
}
.team-photo:hover,
.team-photo:focus-visible{
  z-index: 6;
  scale: 1.14;
  outline: none;
  box-shadow: 0 0 0 3px var(--orange), 0 14px 30px rgba(34,30,27,.3);
}
.photo-say{
  position: absolute;
  left: 50%;
  bottom: calc(100% + 14px);
  width: 168px;
  padding: 14px 16px;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 10px 22px rgba(34,30,27,.14);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  color: var(--ink);
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 8px) scale(.9);
  transform-origin: 50% 100%;
  transition: opacity .2s ease, transform .35s cubic-bezier(.34,1.8,.5,1);
}
.photo-say::after{
  content: "";
  position: absolute;
  left: 50%; top: 100%;
  width: 12px; height: 12px;
  background: #fff;
  transform: translate(-50%, -6px) rotate(45deg);
  border-radius: 0 0 3px 0;
}
.team-photo:hover .photo-say,
.team-photo:focus-visible .photo-say{ opacity: 1; transform: translate(-50%, 0) scale(1); }

/* Andra som du: karusellen i mitten, rubriken tätt ovanför mittkortet */
.work-section .curve-carousel{
  position: absolute;
  left: 0;
  width: 100%;
  top: 50%;
  margin: 0;
  transform: translateY(calc(-50% - 28px));
}
.work-section{ --cc-info-h: 100px; }
.work-section .curve-carousel{ --cc-info-h: 100px; }
.work-section .section-head{
  position: absolute;
  left: 0; right: 0;
  bottom: calc(50% + 28px + var(--cc-center-h, 280px) / 2 + 30px);
  z-index: 7;
  pointer-events: none;
}

/* Säg hej: formuläret i samma formspråk som resten av sidan */
.cf-layout{ grid-template-columns: minmax(0, 1fr) 360px; column-gap: 80px; }
.cf-card{
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}
.cf-headline{ margin-bottom: 34px; }
.cf-chip span{ background: rgba(255,255,255,.7); }
.cf-more{
  height: 46px;
  min-height: 0;
  margin-top: 30px;
  padding: 10px 0;
  resize: none;
  overflow: hidden;
  background: transparent;
  border: 0;
  border-bottom: 2px solid rgba(34,30,27,.25);
  border-radius: 0;
  font-size: 18px;
}
.cf-more::placeholder{ color: rgba(107,101,95,.7); }
.cf-more:hover{ border-bottom-color: rgba(34,30,27,.5); }
.cf-more:focus{ background: transparent; box-shadow: none; border-bottom-color: var(--orange); }
.cf-footer{ margin-top: 40px; }

/* Kontaktkortet: en lapp på snöret, precis som polaroiderna */
.cf-info{
  margin: 40px 0 0;
  padding: 50px 36px 34px;
  background: #FFFDF9;
  color: var(--ink);
  border: 1px solid rgb(34 30 27 / 12%);
  border-radius: 10px;
  box-shadow: 0 14px 28px rgba(34,30,27,.2);
  transform: rotate(var(--r, 0deg));
  transform-origin: 50% -22px;
}
.cf-info:hover{ animation: polaroidSwing 1.6s cubic-bezier(.3,.6,.4,1) both; }
.cf-info h3{ color: var(--ink); }
.contact-section .cf-info p.cf-info-lead{ color: var(--ink-soft); }
.cf-person{ background: var(--sand); }
.cf-person img{ box-shadow: 0 0 0 3px var(--sand), 0 0 0 5px var(--orange); }
.cf-person-name{ color: var(--ink); }
.cf-person-status{ color: var(--ink-soft); }
.cf-person-status::before{ background: #1FA56A; }
.cf-info-list a, .cf-info-list div{ color: var(--ink); }
.cf-info-list strong{ color: var(--ink); }
.cf-info-list small{ color: var(--ink-soft); }
.cf-social{ border-top-color: var(--border); }
.cf-social a{ color: var(--ink); border-color: rgba(34,30,27,.18); }
.cf-social a:hover{ color: #fff; }

@media (max-width: 980px){
  .cf-layout{ grid-template-columns: 1fr; }
  .cf-card{ padding: 0; }
  .cf-info{ margin: 60px 12px 0; }
}
@media (max-width: 560px){
  .cf-card{ padding: 0; }
  .cf-info{ margin: 50px 6px 0; padding: 44px 24px 28px; }
}
@media (prefers-reduced-motion: reduce){
  .cf-info:hover{ animation: none; }
}

/* Igenkänning: en medarbetare tittar upp när man klickar på en tanke */
#sec-problem{ overflow: hidden; }
.peek{
  position: absolute;
  left: 56px;
  bottom: 0;
  z-index: 20;
  width: 380px;
  height: 300px;
  pointer-events: none;
}
.peek-face{
  position: absolute;
  left: 0;
  bottom: 32px;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 4px #fff, 0 12px 30px rgba(34,30,27,.2);
  transform: translateY(calc(100% + 60px));
  transition: transform .55s cubic-bezier(.5,0,.75,0);
}
.peek.is-up .peek-face{
  transform: translateY(0);
  transition: transform .7s cubic-bezier(.34,1.56,.64,1);
  animation: peekWiggle 3.2s ease-in-out .9s infinite;
}
@keyframes peekWiggle{
  0%, 100%{ rotate: 0deg; }
  8%{ rotate: -7deg; }
  16%{ rotate: 5deg; }
  24%{ rotate: 0deg; }
}
.peek-bubble{
  position: absolute;
  left: 100px;
  bottom: 150px;
  width: 264px;
  padding: 18px 20px 16px;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 16px 34px rgba(34,30,27,.16);
  text-align: left;
  opacity: 0;
  transform: translateY(10px) scale(.9);
  transform-origin: 0% 100%;
  transition: opacity .2s ease, transform .3s ease;
}
.peek-bubble::after{
  content: "";
  position: absolute;
  left: 18px;
  top: 100%;
  width: 14px; height: 14px;
  background: #fff;
  transform: translate(0, -7px) rotate(45deg);
  border-radius: 0 0 3px 0;
}
.peek.is-up .peek-bubble{
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition: opacity .25s ease .35s, transform .45s cubic-bezier(.34,1.8,.5,1) .35s;
}
.contact-section p.peek-text, .peek-text{
  margin: 0 18px 12px 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}
.peek-cta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--orange);
  text-decoration: none;
}
.peek-cta svg{ width: 16px; height: 16px; transition: transform .35s cubic-bezier(.34,1.8,.5,1); }
.peek-cta:hover svg{ transform: translateX(4px); }
.peek-close{
  position: absolute;
  top: 8px; right: 10px;
  width: 24px; height: 24px;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.peek-close:hover{ background: var(--sand); color: var(--ink); }
@media (max-width: 640px){
  .peek{ left: 16px; width: calc(100% - 32px); }
  .peek-face{ width: 88px; height: 88px; bottom: 24px; }
  .peek-bubble{ left: 76px; bottom: 116px; width: calc(100% - 86px); }
}
@media (prefers-reduced-motion: reduce){
  .peek.is-up .peek-face{ animation: none; }
}

/* Bärbara datorer / låga fönster: lite tätare så att allt ryms ovanför scrollpilen */
@media (max-height: 720px) and (min-width: 641px){
  .work-section{ --cc-info-h: 84px; }
  .work-section .curve-carousel{ --cc-info-h: 84px; transform: translateY(calc(-50% - 40px)); }
  .work-section .section-head{ bottom: calc(50% + 40px + var(--cc-center-h, 280px) / 2 + 26px); }
  .bouncing-arrow-wrapper{ bottom: 4px; }
}

/* Lösningen: en rad under rubriken, som under "Här är gänget". Rubriken sitter fast nedtill
   (bottom ovan), så raden skjuter rubriken uppåt i stället för karusellen nedåt. */
.work-section .work-headline{ margin-bottom: 14px; }
.work-lead{ margin-bottom: 0; }