/* Kalkulator procjene — loaded on top of ../index.css.
 *
 * Deliberately thin. Page shell, spacing and the inquiry form all reuse the
 * site's own system:
 *
 *   .container-large.bglight    white rounded 3rem section block
 *   .container-large            same, grey (#f8f8f8)
 *   .section-padding-large      6rem 2rem vertical rhythm
 *   .tagline-pill               green kicker pill
 *   .contact-component          two-column contact layout (text | form)
 *   .contact-form-block         GREEN rounded form panel
 *   .input-form / .is-text-area pill inputs with the green underline
 *   .button.is-form             black pill submit
 *
 * Only what the site has no equivalent for lives here.
 */

/* The navbar is fixed, so the site offsets whichever section comes first:
   .section-contact has margin-top 4rem, .section-hero-header padding-top 4rem.
   .section-projects has neither (on the homepage it never comes first), so a
   page that opens with it slides under the navbar — badly on mobile. */
.section-page-top {
  margin-top: 4rem;
}

.calc-layout {
  display: grid;
  grid-template-columns: 1fr 21rem;
  grid-column-gap: 4rem;
  align-items: start;
  margin-top: 4rem;
}

/* ---------- question groups ---------- */

.calc-step + .calc-step {
  margin-top: 3rem;
}

.calc-step-title {
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: .375rem;
}

.calc-step-hint {
  font-size: 1rem;
  color: #6b6b6b;
  margin-bottom: 1.5rem;
}

.calc-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.calc-options.is-tight {
  grid-template-columns: repeat(4, 1fr);
}

/* Grey cards on the white section — same relationship as the project cards
   on the homepage. The native input stays focusable but invisible. */
.calc-option {
  position: relative;
  display: block;
  background-color: var(--light-grey);
  border: 2px solid #0000;
  border-radius: 1rem;
  padding: 1.25rem 1.375rem;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}

.calc-option:hover {
  border-color: #d0d0d0;
}

.calc-option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.calc-option-label {
  display: block;
  font-weight: 500;
  line-height: 1.3;
}

.calc-option-note {
  display: block;
  margin-top: .375rem;
  font-size: .875rem;
  color: #6b6b6b;
  line-height: 1.45;
}

.calc-option:has(input:checked) {
  background-color: var(--green);
  border-color: var(--black);
}

.calc-option:has(input:checked) .calc-option-note {
  color: #3d4a1a;
}

.calc-option:has(input:focus-visible) {
  outline: .125rem solid #4d65ff;
  outline-offset: .125rem;
}

/* ---------- result panel ---------- */

.calc-result {
  position: sticky;
  top: 7rem;
  background-color: var(--black);
  color: var(--white);
  border-radius: 2rem;
  padding: 2.5rem 2rem;
}

.calc-result-label {
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #9a9a9a;
}

.calc-result-price {
  margin-top: .625rem;
  color: var(--green);
  font-size: 1.875rem;
  font-weight: 500;
  line-height: 1.15;
}

.calc-result-list {
  margin-top: 2rem;
}

.calc-result-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 0;
  border-bottom: 1px solid #2b2b2b;
  font-size: .9375rem;
}

.calc-result-row:last-child {
  border-bottom: 0;
}

.calc-result-row span {
  color: #9a9a9a;
}

.calc-result-row strong {
  font-weight: 500;
  text-align: right;
}

.calc-result-cta {
  display: block;
  width: 100%;
  margin-top: 2rem;
  background-color: var(--green);
  color: var(--black);
  border: 0;
  border-radius: 100rem;
  padding: .75rem 1.25rem;
  font-family: inherit;
  font-size: .875rem;
  cursor: pointer;
  transition: opacity .2s;
}

.calc-result-cta:hover {
  opacity: .85;
}

.calc-result-note {
  margin-top: 1.5rem;
  font-size: .8125rem;
  line-height: 1.55;
  color: #9a9a9a;
}

/* ---------- inquiry form extras ---------- */

/* Sits inside .contact-form-block (green), so messages are white/red cards. */
.calc-message {
  display: none;
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  font-size: .9375rem;
  line-height: 1.5;
}

.calc-message.is-success {
  background-color: var(--black);
  color: var(--white);
}

.calc-message.is-error {
  background-color: var(--white);
  color: #8a1f1f;
}

.calc-disclaimer {
  max-width: 44rem;
  margin-top: 3rem;
  font-size: .9375rem;
  line-height: 1.65;
  color: #6b6b6b;
}

.calc-disclaimer a {
  color: var(--black);
  text-decoration: underline;
  text-underline-offset: .18em;
}

/* ---------- responsive ---------- */

@media screen and (max-width: 991px) {
  .calc-layout {
    grid-template-columns: 1fr;
    grid-row-gap: 2.5rem;
    margin-top: 3rem;
  }

  /* Sticky is pointless once the panel is stacked under the questions. */
  .calc-result {
    position: static;
  }

  .calc-options.is-tight {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media screen and (max-width: 767px) {
  .calc-options {
    grid-template-columns: 1fr;
  }

  .calc-options.is-tight {
    grid-template-columns: repeat(2, 1fr);
  }

  .calc-result {
    padding: 2rem 1.5rem;
  }
}