/* =========================================================
   FERPRACA.SK – METODIKA
   CSS pre existujúci HTML obsah
   ========================================================= */

.ferpraca-methodology {
  --fp-text: #181818;
  --fp-muted: #626262;
  --fp-light: #f5f5f3;
  --fp-border: #e4e4e1;
  --fp-dark: #111111;

  max-width: 960px;
  margin: 0 auto;
  padding: 80px 24px 100px;

  color: var(--fp-text);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.7;
}


/* =========================================================
   ÚVOD
   ========================================================= */

.methodology-intro {
  max-width: 780px;
  margin-bottom: 80px;
}

.methodology-label {
  display: inline-block;
  margin-bottom: 18px;

  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;

  color: var(--fp-muted);
}

.methodology-intro h1 {
  margin: 0 0 28px;

  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: 1.08;
  letter-spacing: -0.04em;

  color: var(--fp-dark);
}

.methodology-intro p {
  margin: 0 0 18px;
  color: var(--fp-muted);
}

.methodology-intro .methodology-lead {
  margin-bottom: 28px;

  font-size: 1.25rem;
  line-height: 1.65;

  color: #333;
}


/* =========================================================
   SEKcie
   ========================================================= */

.methodology-section {
  padding: 56px 0;
  border-top: 1px solid var(--fp-border);
}

.methodology-section h2 {
  max-width: 760px;
  margin: 0 0 24px;

  font-size: clamp(1.65rem, 3vw, 2.15rem);
  line-height: 1.25;
  letter-spacing: -0.025em;

  color: var(--fp-dark);
}

.methodology-section h3 {
  margin: 0 0 8px;

  font-size: 1.15rem;
  line-height: 1.35;

  color: var(--fp-dark);
}

.methodology-section p {
  max-width: 760px;
  margin: 0 0 18px;

  color: var(--fp-muted);
}


/* =========================================================
   ZOZNAMY
   ========================================================= */

.methodology-section ul {
  max-width: 760px;
  margin: 22px 0 26px;
  padding: 0;

  list-style: none;
}

.methodology-section li {
  position: relative;

  margin: 0 0 10px;
  padding-left: 26px;

  color: #4b4b4b;
}

.methodology-section li::before {
  content: "";

  position: absolute;
  left: 4px;
  top: 0.75em;

  width: 7px;
  height: 7px;

  border-radius: 50%;
  background: var(--fp-dark);

  transform: translateY(-50%);
}


/* =========================================================
   5 KROKOV
   ========================================================= */

.methodology-steps {
  position: relative;
  margin-top: 38px;
}

.methodology-steps::before {
  content: "";

  position: absolute;
  left: 27px;
  top: 28px;
  bottom: 28px;

  width: 2px;
  background: var(--fp-border);
}

.methodology-step {
  position: relative;

  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 28px;

  padding: 0 0 42px;
}

.methodology-step:last-child {
  padding-bottom: 0;
}

.step-number {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 56px;
  height: 56px;

  border: 2px solid var(--fp-dark);
  border-radius: 50%;

  background: #fff;

  font-size: 1rem;
  font-weight: 700;

  color: var(--fp-dark);
}

.methodology-step h3 {
  margin-top: 3px;
}

.methodology-step p {
  margin-bottom: 16px;
}


/* =========================================================
   ČO SLEDUJEME
   ========================================================= */

.methodology-watch {
  max-width: 700px;

  margin-top: 20px;
  padding: 18px 20px;

  border-left: 3px solid var(--fp-dark);
  background: var(--fp-light);
}

.methodology-watch strong {
  display: block;
  margin-bottom: 5px;

  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;

  color: var(--fp-dark);
}

.methodology-watch p {
  margin: 0;

  font-size: 0.94rem;
  line-height: 1.6;

  color: #555;
}


/* =========================================================
   DVE / TRI KOLÓNY
   ========================================================= */

.methodology-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;

  max-width: 820px;
  margin: 30px 0;
}

.methodology-columns > div {
  padding: 25px;

  border: 1px solid var(--fp-border);
  border-radius: 10px;

  background: #fff;
}

.methodology-columns p {
  margin: 0;
  font-size: 0.95rem;
}


/* =========================================================
   PRÍKLAD
   ========================================================= */

.methodology-example {
  max-width: 700px;

  margin: 30px 0;
  padding: 26px 28px;

  border-radius: 10px;
  background: var(--fp-light);
}

.methodology-example p {
  margin: 0;

  font-size: 1.05rem;
  font-style: italic;

  color: #333;
}


/* =========================================================
   HLAVNÉ ZVÝRAZNENIE
   ========================================================= */

.methodology-highlight {
  display: flex;
  flex-direction: column;
  gap: 5px;

  max-width: 760px;

  margin: 30px 0;
  padding: 25px 28px;

  border-radius: 10px;

  background: var(--fp-dark);
  color: #fff;
}

.methodology-highlight strong {
  font-size: 1.05rem;
  color: #fff;
}

.methodology-highlight span {
  font-size: 0.95rem;
  color: #cfcfcf;
}

.methodology-highlight-soft {
  background: var(--fp-light);
  color: var(--fp-text);

  border: 1px solid var(--fp-border);
}

.methodology-highlight-soft strong {
  color: var(--fp-dark);
}

.methodology-highlight-soft span {
  color: var(--fp-muted);
}


/* =========================================================
   CITÁCIE / VÝROKY
   ========================================================= */

.methodology-quote {
  max-width: 700px;

  margin: 18px 0;
  padding: 18px 24px;

  border-left: 3px solid var(--fp-dark);

  font-size: 1.1rem;
  font-weight: 600;

  color: #333;
}


/* =========================================================
   ZÁVEREČNÁ ČASŤ
   ========================================================= */

.methodology-final {
  margin-top: 40px;
  padding: 55px 50px;

  border-radius: 14px;

  background: var(--fp-dark);
  color: #fff;
}

.methodology-final .methodology-label {
  margin-bottom: 16px;
  color: #aaa;
}

.methodology-final h2 {
  max-width: 700px;

  margin: 0 0 18px;

  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.15;
  letter-spacing: -0.035em;

  color: #fff;
}

.methodology-final p {
  max-width: 700px;
  margin: 0 0 12px;

  color: #c9c9c9;
}

.methodology-final .methodology-final-strong {
  margin-top: 25px;

  font-size: 1.15rem;
  font-weight: 600;

  color: #fff;
}


/* =========================================================
   MOBIL
   ========================================================= */

@media (max-width: 700px) {

  .ferpraca-methodology {
    padding: 50px 18px 70px;
    font-size: 15px;
  }

  .methodology-intro {
    margin-bottom: 55px;
  }

  .methodology-intro h1 {
    font-size: 2.35rem;
  }

  .methodology-intro .methodology-lead {
    font-size: 1.1rem;
  }

  .methodology-section {
    padding: 42px 0;
  }

  .methodology-section h2 {
    font-size: 1.6rem;
  }

  .methodology-steps {
    margin-top: 30px;
  }

  .methodology-step {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 17px;
    padding-bottom: 34px;
  }

  .methodology-step h3 {
    font-size: 1.05rem;
  }

  .step-number {
    width: 48px;
    height: 48px;
  }

  .methodology-steps::before {
    left: 23px;
    top: 24px;
    bottom: 24px;
  }

  .methodology-columns {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .methodology-columns > div {
    padding: 21px;
  }

  .methodology-example {
    padding: 22px;
  }

  .methodology-highlight {
    padding: 22px;
  }

  .methodology-final {
    margin-top: 20px;
    padding: 38px 25px;
  }

  .methodology-final h2 {
    font-size: 2rem;
  }
}


/* =========================================================
   VEĽMI MALÉ MOBILY
   ========================================================= */

@media (max-width: 400px) {

  .ferpraca-methodology {
    padding-left: 15px;
    padding-right: 15px;
  }

  .methodology-intro h1 {
    font-size: 2rem;
  }

  .methodology-step {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 14px;
  }

  .step-number {
    width: 42px;
    height: 42px;
    font-size: 0.9rem;
  }

  .methodology-steps::before {
    left: 20px;
  }
}