/* =========================================================
   BASE — reset, typografické utility třídy, kontejner, tlačítka
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-heading);
  color: var(--color-dark);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* --- Typografická škála (názvy 1:1 podle Figma tokenů) --- */
.h-xxl { font-size: var(--fs-heading-xxl); line-height: var(--lh-heading-xxl); font-weight: 400; margin: 0; }
.h-xl  { font-size: var(--fs-heading-xl);  line-height: var(--lh-heading-xl);  font-weight: 400; margin: 0; }
.h-l   { font-size: var(--fs-heading-l);   line-height: var(--lh-heading-l);   font-weight: 400; margin: 0; }
.h-m   { font-size: var(--fs-heading-m);   line-height: var(--lh-heading-m);   font-weight: 400; margin: 0; }

.text-xl        { font-size: var(--fs-text-xl); line-height: var(--lh-text-xl); font-weight: 400; margin: 0; }
.text-xl-medium { font-size: var(--fs-text-xl); line-height: var(--lh-text-xl); font-weight: 500; margin: 0; }
.text-l         { font-size: var(--fs-text-l);  line-height: var(--lh-text-l);  font-weight: 400; margin: 0; }
.text-m         { font-size: var(--fs-text-m);  line-height: var(--lh-text-m);  font-weight: 400; margin: 0; }
.text-m-medium  { font-size: var(--fs-text-m);  line-height: var(--lh-text-m);  font-weight: 500; margin: 0; }
.text-s         { font-size: var(--fs-text-s);  line-height: var(--lh-text-s);  font-weight: 400; margin: 0; }
.text-s-medium  { font-size: var(--fs-text-s);  line-height: var(--lh-text-s);  font-weight: 500; margin: 0; }
.text-s-bold    { font-size: var(--fs-text-s);  line-height: var(--lh-text-s);  font-weight: 700; margin: 0; }

/* Jednorázová velikost mimo formální škálu — použito jen u "Pred týždňom" v testimonial kartě */
.text-14-medium { font-size: 14px; line-height: 26px; font-weight: 500; margin: 0; }

/* --- Tlačítka --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 50px;
  padding: 18px 36px;
  font-size: var(--fs-text-m);
  line-height: var(--lh-text-m);
  font-weight: 500;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.btn:hover { opacity: 0.85; }

.btn--gold {
  background: var(--color-gold);
  color: var(--color-cta-text);
}

.btn--gold-soft {
  background: var(--color-gold-70);
  color: var(--color-cta-text);
}

.btn--outline {
  background: transparent;
  border: 1px solid currentColor;
}

.btn--outline-dark {
  background: var(--color-white);
  color: var(--color-dark);
  border: 1px solid var(--color-dark);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.link-arrow .arrow { color: var(--color-gold); }

/* Placeholder pro obrázky, dokud nedorazí reálné assety z Figmy */
.img-placeholder {
  background: repeating-linear-gradient(
    45deg,
    #e9edf1,
    #e9edf1 10px,
    #f5f7f9 10px,
    #f5f7f9 20px
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9aa5b1;
  font-size: 13px;
  text-align: center;
  border-radius: inherit;
}