/* Kontakt — FAQ section, bento board.
   Photo TL · Questions 01–04 TR · Questions 05–08 BL · Green call card BR.
   Groups of 4 questions are exclusive accordions (one open at a time).
   Scoped under .page--kontakt so /usluge/ FAQ keeps its global styling. */

.page--kontakt .faq{
  background:var(--cream);
  position:relative;overflow:hidden;
  padding:88px 0 104px;
}
.page--kontakt .faq::before{
  content:"";position:absolute;bottom:-200px;right:-220px;
  width:480px;height:480px;border-radius:50%;
  background:radial-gradient(circle,var(--mint-50),transparent 70%);
  opacity:.45;pointer-events:none;z-index:0;
}
.page--kontakt .faq::after{
  content:"";position:absolute;top:-180px;left:-200px;
  width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,#dceee9,transparent 70%);
  opacity:.5;pointer-events:none;z-index:0;
}
.page--kontakt .faq .wrap{position:relative;z-index:1}
.page--kontakt .faq .sec-head{margin-bottom:40px}
.page--kontakt .faq .sec-head h2{font-size:clamp(1.9rem,3.2vw,2.6rem)}
.page--kontakt .faq .sec-head p{font-size:1rem}

/* --- Bento board --- */
.page--kontakt .faq-board{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  align-items:stretch;
}
.page--kontakt .faq-col{
  display:flex;flex-direction:column;justify-content:flex-start;gap:14px;
}

/* --- Photo cell (top-left) --- */
.page--kontakt .faq-photo{
  position:relative;border-radius:var(--r);overflow:hidden;
  box-shadow:var(--sh-md);min-height:260px;margin:0;
  background:linear-gradient(160deg,var(--sage),var(--teal));
}
.page--kontakt .faq-photo img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}
.page--kontakt .faq-photo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 60%,rgba(10,42,39,.38));
}

/* --- Green call card with photo panel (bottom-right) --- */
.page--kontakt .faq-call{
  position:relative;
  border-radius:var(--r);
  overflow:hidden;
  box-shadow:var(--sh-lg);
  display:grid;
  grid-template-columns:1.18fr .82fr;
  background:linear-gradient(165deg,var(--pine),var(--pine-deep));
  color:#cfe2dd;
  min-height:300px;
}
.page--kontakt .faq-call::before{
  content:"";position:absolute;inset:0;opacity:.08;pointer-events:none;z-index:1;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1'%3E%3Cpath d='M0 200 Q100 150 200 200 T400 200'/%3E%3C/g%3E%3C/svg%3E");
  background-size:cover;
}

/* Text panel (left) */
.page--kontakt .fc-body{
  position:relative;z-index:2;
  padding:28px 22px 28px 30px;
  display:flex;flex-direction:column;justify-content:center;
}
.page--kontakt .fc-body h3{
  color:#fff;font-weight:300;
  font-size:clamp(1.3rem,2vw,1.55rem);line-height:1.18;letter-spacing:-.015em;
  margin:10px 0 6px;
}
.page--kontakt .fc-body h3 em{color:var(--sage-300);font-weight:400}
.page--kontakt .fc-body>p{color:#aecfc9;font-size:.92rem;line-height:1.55;margin-bottom:16px;max-width:38ch}
.page--kontakt .fc-lines{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.page--kontakt .fc-line{
  display:flex;align-items:center;gap:11px;
  color:#eaf3f0;font-weight:600;font-size:.93rem;
  transition:.2s;width:fit-content;
}
.page--kontakt .fc-line svg{color:var(--sage-300);flex:none;transition:.2s}
.page--kontakt a.fc-line:hover{color:#fff;transform:translateX(3px)}
.page--kontakt a.fc-line:hover svg{color:#fff}
.page--kontakt .fc-body .btn{width:fit-content;padding:12px 24px;font-size:.92rem}

/* Photo panel (right) — portrait image fills the column; the left edge
   blends into the green panel so the card reads as one piece.
   object-position controls the crop: raise/lower the % to frame the face. */
.page--kontakt .fc-media{position:relative;min-height:100%;margin:0}
.page--kontakt .fc-media img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 30%;display:block;
}
.page--kontakt .fc-media::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,var(--pine) 0%,rgba(15,58,54,.45) 22%,rgba(15,58,54,0) 52%);
}

/* --- FAQ items --- */
.page--kontakt .faq-item summary::after{display:none;content:none}
.page--kontakt .faq-item{
  position:relative;background:var(--paper);border:1px solid var(--line);
  border-radius:15px;overflow:hidden;
  transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.page--kontakt .faq-item:hover{border-color:var(--mint);transform:translateY(-1px);box-shadow:var(--sh-sm)}
.page--kontakt .faq-item[open]{
  border-color:var(--mint);
  background:linear-gradient(180deg,var(--paper),var(--cream));
  box-shadow:var(--sh-sm);transform:none;
}
.page--kontakt .faq-item::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--teal),var(--sage));
  transform:scaleY(0);transform-origin:top;
  transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.page--kontakt .faq-item[open]::before{transform:scaleY(1)}
.page--kontakt .faq-item summary{
  padding:18px 20px 18px 24px;cursor:pointer;
  display:flex;align-items:center;gap:14px;list-style:none;
  font-family:"Hanken Grotesk",sans-serif;
}
.page--kontakt .faq-item summary::-webkit-details-marker{display:none}
.page--kontakt .faq-item summary:focus-visible{outline:2px solid var(--teal);outline-offset:-2px;border-radius:15px}
.page--kontakt .faq-num{
  flex:none;min-width:24px;line-height:1;
  font-family:"Fraunces",serif;font-size:1rem;letter-spacing:.04em;
  color:var(--sage);opacity:.55;transition:color .25s, opacity .25s;
}
.page--kontakt .faq-item[open] .faq-num,
.page--kontakt .faq-item:hover .faq-num{color:var(--teal);opacity:1}
.page--kontakt .faq-q{
  flex:1;font-size:.99rem;font-weight:600;color:var(--pine);
  line-height:1.4;letter-spacing:-.005em;transition:color .2s;
}
.page--kontakt .faq-item:hover .faq-q{color:var(--teal)}
.page--kontakt .faq-item[open] .faq-q{color:var(--pine)}
.page--kontakt .faq-toggle{
  width:33px;height:33px;border-radius:50%;
  background:var(--mint-50);color:var(--teal);
  display:flex;align-items:center;justify-content:center;
  flex:none;position:relative;
  transition:background .25s, color .25s, transform .35s cubic-bezier(.2,.7,.2,1);
}
.page--kontakt .faq-toggle::before,
.page--kontakt .faq-toggle::after{content:"";position:absolute;background:currentColor;border-radius:2px}
.page--kontakt .faq-toggle::before{width:11px;height:2px}
.page--kontakt .faq-toggle::after{width:2px;height:11px;transition:opacity .2s}
.page--kontakt .faq-item:hover .faq-toggle{background:var(--mint)}
.page--kontakt .faq-item[open] .faq-toggle{background:var(--teal);color:#fff;transform:rotate(180deg)}
.page--kontakt .faq-item[open] .faq-toggle::after{opacity:0}
.page--kontakt .faq-item .a{
  padding:14px 22px 20px 62px;color:var(--ink-soft);
  font-size:.94rem;line-height:1.65;border-top:1px dashed var(--line);
}
.page--kontakt .faq-item[open] .a{animation:faqA .34s cubic-bezier(.2,.7,.2,1)}
@keyframes faqA{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.page--kontakt .faq-item .a a{
  color:var(--teal);font-weight:600;
  border-bottom:1.5px solid transparent;transition:border-color .2s;
}
.page--kontakt .faq-item .a a:hover{border-bottom-color:var(--teal)}
.page--kontakt .faq-item .a .emerg{color:#c8761e;font-weight:700}

/* --- Responsive --- */
@media(max-width:980px){
  .page--kontakt .faq{padding:64px 0 80px}
  .page--kontakt .faq-board{grid-template-columns:1fr;gap:14px}
  .page--kontakt .faq-photo{min-height:0;aspect-ratio:16/9}
  .page--kontakt .faq-call{grid-template-columns:1fr;min-height:0}
  .page--kontakt .fc-media{order:-1;min-height:0;aspect-ratio:16/9}
  .page--kontakt .fc-media img{object-position:center 24%}
  .page--kontakt .fc-media::before{
    background:linear-gradient(0deg,var(--pine) 0%,rgba(15,58,54,.35) 20%,rgba(15,58,54,0) 50%);
  }
  .page--kontakt .fc-body{padding:24px 26px 28px}
}
@media(max-width:680px){
  .page--kontakt .faq::before{width:300px;height:300px;bottom:-120px;right:-120px}
  .page--kontakt .faq::after{width:260px;height:260px;top:-100px;left:-100px}
  .page--kontakt .faq-item summary{padding:16px 18px 16px 20px;gap:12px}
  .page--kontakt .faq-num{display:none}
  .page--kontakt .faq-toggle{width:30px;height:30px}
  .page--kontakt .faq-item .a{padding:14px 20px 18px 20px}
  .page--kontakt .fc-body .btn{width:100%;justify-content:center}
}