/* Lucie Lacinová — /kalkulacky, styl specifický pro tuto stránku.
   Vzor: paycalceu.com embed karty z kramolisova.cz a martinavahalova.cz,
   re-tónováno do palety konceptu 6 (indigo pozadí, mátová #5fe3c0 + fialová #8b7bff).
   Sdílené proměnné (--bg-0, --ink, --mint, --line, --radius…) přichází z ../style.css. */

.simple-page h1 em{color:var(--mint);font-style:normal;}

.calc-groups{display:flex;flex-direction:column;gap:clamp(3rem,6vw,4.5rem);}
.group-head{max-width:60ch;}

.embed-grid{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1.6rem;}

/* Karta nemá vlastní výplň — kalkulačka má bg=transparent a barvy zvenčí (viz
   EMBED_THEME v assets/js/kalkulacky.js), takže sedí přímo na podkladu stránky. */
details.embed-card{
  background:transparent;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;position:relative;isolation:isolate;transition:border-color .25s ease;
}
/* Rotate the gradient angle, not the element: rotating the masked ring spun the whole rectangle. */
@property --calc-angle{syntax:"<angle>";inherits:false;initial-value:0deg;}
details.embed-card::before{
  content:"";position:absolute;inset:0;padding:2px;border-radius:inherit;z-index:-1;
  background:conic-gradient(from var(--calc-angle),var(--mint),var(--violet),var(--mint-deep),var(--mint));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .35s ease;
  animation:calc-bspin 14s linear infinite;animation-play-state:paused;
}
details.embed-card[open]::before{opacity:1;animation-play-state:running;}
@keyframes calc-bspin{to{--calc-angle:360deg;}}
@media (prefers-reduced-motion:reduce){ details.embed-card::before{animation:none!important;} }

details.embed-card summary{
  list-style:none;cursor:pointer;padding:1.15rem 1.4rem;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;
}
details.embed-card summary::-webkit-details-marker{display:none;}
details.embed-card summary h3{font-size:1rem;font-weight:600;color:var(--ink);}
details.embed-card .chev{width:20px;height:20px;flex-shrink:0;transition:transform .3s ease;color:var(--mint);}
details.embed-card[open] .chev{transform:rotate(180deg);}
details.embed-card summary:focus-visible{outline:none;box-shadow:inset 0 0 0 3px var(--mint);}
details.embed-card .desc{padding:0 1.4rem 1rem;color:var(--ink-dim);font-size:.9rem;max-width:62ch;}

details.embed-card iframe{
  width:100%;border:0;display:block;opacity:0;transition:opacity .4s ease;
  background:transparent;color-scheme:dark;
}
details.embed-card iframe.ready{opacity:1;}
details.embed-card .embed-loading{padding:1rem 1.4rem;font-size:.85rem;color:var(--ink-faint);}
details.embed-card .src{padding:.9rem 1.4rem 1.3rem;font-size:.78rem;color:var(--ink-faint);}
details.embed-card .src a{color:var(--mint);border-bottom:1px solid currentColor;text-decoration:none;}

/* Maximalizace přes celé okno — host režim pro prohlížeče, kde iframu chybí
   Fullscreen API (typicky iPhone). Widget si o to řekne přes postMessage. */
details.embed-card iframe.maxi{
  position:fixed;inset:0;z-index:600;height:100% !important;max-width:none;
  border-radius:0;background:var(--bg-0);
}
section.maxi-vrstva{z-index:700;}
body.maxi-open{overflow:hidden;}

.calc-disclaimer{margin-top:2.4rem;font-size:.86rem;color:var(--ink-faint);max-width:70ch;}

@media (max-width:560px){
  details.embed-card summary{padding:1rem 1.1rem;}
  details.embed-card .desc{padding:0 1.1rem 1rem;}
  details.embed-card .src{padding:.8rem 1.1rem 1.1rem;}
}