/* ==========================================================================
   Phase 9 — static and landing pages
   --------------------------------------------------------------------------
   One stylesheet for all thirteen templates, enqueued only on them
   (peptidi_is_landing_page() in functions.php). Tokens only, no hardcoded
   colors or sizes (Hard Rules 4 and 5).

   `.bento-card` carries no padding of its own — in the export that was a
   per-instance Tailwind utility — so every card component here sets its own.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared section furniture
   -------------------------------------------------------------------------- */

.section--narrow > * { max-width: 64rem; margin-inline: auto; }
.section--tight { padding-block: 0 3rem; display: grid; gap: 1rem; }
@media (min-width: 640px) { .section--tight { padding-block: 0 4rem; } }
.section--tight > * { max-width: 64rem; margin-inline: auto; width: 100%; }

.section-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

/* margin-block only: the `margin` shorthand would reset margin-inline to 0 and
   knock this out of the centred 64rem column that .section--narrow > * sets,
   leaving the lead wider and further left than the heading above it. */
.section-lead {
  margin-block: -1rem 1.5rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--muted-foreground);
}

/* A generic prose card: heading + body. Used by /ruo, /uvjeti-koristenja and
   /politika-privatnosti through peptidi_section_open()/close(). */
.prose-section { padding: 1.5rem; }
@media (min-width: 640px) { .prose-section { padding: 2rem; } }
.prose-section--accent { border-color: color-mix(in oklab, var(--primary) 30%, transparent); }

.prose-section__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
}

.prose-section__body {
  margin-top: 0.75rem;
  display: grid;
  gap: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--muted-foreground);
}

.prose-section__body strong { color: var(--foreground); }
.prose-section__body a { color: var(--primary); }
.prose-section__body a:hover { text-decoration: underline; }
.prose-section__body ul { list-style: disc; padding-left: 1.25rem; display: grid; gap: 0.25rem; }

.legal-stack { display: grid; gap: 1rem; max-width: 56rem; margin-inline: auto; }

/* The wider prose block used on the info and landing pages. */
.page-block { padding: 1.5rem; }
@media (min-width: 640px) { .page-block { padding: 2rem; } }

.page-block__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
}
@media (min-width: 640px) { .page-block__title { font-size: 1.5rem; } }

.page-block__body {
  margin-top: 1rem;
  display: grid;
  gap: 1rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--muted-foreground);
}

.page-block__body--lg { font-size: 1rem; }
.page-block__body a { color: var(--primary); font-weight: 500; }
.page-block__body a:hover { text-decoration: underline; }

.page-block__body h3 {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--foreground);
}

.page-block__fineprint { font-size: 0.75rem; }

.page-block__list {
  margin-top: 1rem;
  display: grid;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted-foreground);
  list-style: disc;
  padding-left: 1.25rem;
}

.two-cards { display: grid; gap: 1rem; margin-top: 3rem; }
@media (min-width: 1024px) { .two-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.cross-links {
  margin-top: 2rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--muted-foreground);
}
.cross-links a { color: var(--primary); font-weight: 500; }
.cross-links a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   /o-nama and /partner — the bento grid
   -------------------------------------------------------------------------- */

.about-grid,
.partner-grid { display: grid; gap: 1rem; }
@media (min-width: 1024px) {
  .about-grid,
  .partner-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .about-grid__mission,
  .partner-grid__intro { grid-column: span 2; }
  .about-grid__quality,
  .about-grid__disclaimer,
  .partner-grid__benefits,
  .partner-grid__cta { grid-column: span 3; }
}

.about-grid__mission,
.about-grid__quality,
.about-grid__disclaimer,
.partner-grid__intro,
.partner-grid__benefits,
.partner-grid__cta { padding: 2rem; }

.about-grid__mission > p {
  margin-top: 1rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--muted-foreground);
}

.about-grid__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
}
@media (min-width: 640px) { .about-grid__title { font-size: 1.5rem; } }

.about-grid__stats,
.partner-grid__stats { display: grid; gap: 1rem; align-content: start; }

.about-grid__stat { padding: 1.5rem; }

.about-grid__stat-key {
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 600;
}

.about-grid__stat-value {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.about-grid__points { margin-top: 1.25rem; display: grid; gap: 0.75rem; }
@media (min-width: 640px) { .about-grid__points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.about-grid__point {
  display: flex;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.about-grid__check {
  margin-top: 0.125rem;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  color: var(--primary);
}

/* On the ink card the body text is the inverse foreground at reduced weight. */
.about-grid__disclaimer-text,
.partner-grid__cta .about-grid__disclaimer-text {
  margin-top: 0.75rem;
  max-width: 48rem;
  font-size: 0.875rem;
  line-height: 1.7;
  opacity: 0.8;
}

.about-grid__disclaimer .btn,
.partner-grid__cta .btn { margin-top: 1.5rem; }

/* --------------------------------------------------------------------------
   /partner
   -------------------------------------------------------------------------- */

.partner-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; }
@media (min-width: 640px) { .partner-intro { flex-direction: row; align-items: center; } }

.partner-intro__logo {
  flex-shrink: 0;
  border-radius: var(--radius-2xl);
  background-color: var(--card);
  padding: 1rem;
  box-shadow: var(--shadow-soft);
}
.partner-intro__logo img { height: 3rem; width: auto; }

.partner-intro__title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; }

.partner-intro__lead {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--muted-foreground);
}

.partner-grid__intro > p {
  margin-top: 1.5rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--muted-foreground);
}

.partner-intro__cta { margin-top: 1.5rem; gap: 0.5rem; }

.partner-pillar { padding: 1.75rem; }

.partner-pillar__icon-wrap,
.kontakt-card__icon-wrap {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-lg);
  background-color: var(--primary-soft);
  flex-shrink: 0;
}

.partner-pillar__icon,
.kontakt-card__icon { width: 1.125rem; height: 1.125rem; color: var(--primary); }

.partner-pillar__title {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
}

.partner-pillar__text {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--muted-foreground);
}

.partner-grid__cta-row { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.partner-grid__cta .btn--outline { background-color: transparent; color: inherit; border-color: color-mix(in oklab, var(--ink-foreground) 25%, transparent); }

/* --------------------------------------------------------------------------
   /dostava-i-placanje — four info cards
   -------------------------------------------------------------------------- */

.info-cards { display: grid; gap: 1rem; }
@media (min-width: 640px) { .info-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.info-cards__item { padding: 1.5rem; }
.info-cards__icon { width: 1.25rem; height: 1.25rem; color: var(--primary); }

.info-cards__title {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
}

.info-cards__text {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--muted-foreground);
}

.page-dostava .info-cards + .page-block,
.page-dostava .page-block + .page-block,
.page-kontakt .kontakt-grid + .page-block { margin-top: 1rem; }

/* --------------------------------------------------------------------------
   /kontakt
   -------------------------------------------------------------------------- */

.kontakt-grid { display: grid; gap: 1rem; }
@media (min-width: 1024px) {
  .kontakt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kontakt-grid__form { grid-column: span 2; }
}

.kontakt-grid__form { padding: 1.75rem; }
.kontakt-grid__channels { display: grid; gap: 1rem; align-content: start; }
.kontakt-grid__fallback { font-size: 0.875rem; color: var(--muted-foreground); }
.kontakt-grid__fallback a { color: var(--primary); }

.kontakt-card { display: flex; align-items: flex-start; gap: 1rem; padding: 1.5rem; }
.kontakt-card__body { min-width: 0; }
.kontakt-card__title { font-family: var(--font-display); font-size: 0.875rem; font-weight: 600; }

.kontakt-card__value {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kontakt-card__value a { color: inherit; }
.kontakt-card__value a:hover { color: var(--primary); }

/* Fluent Forms renders its own markup; these rules pull it onto the design's
   inputs and button rather than shipping the plugin's default look. */
.peptidi-contact-form .ff-el-group { margin-bottom: 1rem; }

.peptidi-contact-form .ff-el-input--label label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--foreground);
  margin-bottom: 0.5rem;
  display: inline-block;
}

.peptidi-contact-form input[type="text"],
.peptidi-contact-form input[type="email"],
.peptidi-contact-form textarea {
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--input);
  background-color: var(--background);
  padding: 0.625rem 1rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--foreground);
}

.peptidi-contact-form textarea { padding: 0.75rem 1rem; }

.peptidi-contact-form input[type="text"]:focus,
.peptidi-contact-form input[type="email"]:focus,
.peptidi-contact-form textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--ring);
}

.peptidi-contact-form .ff-btn-submit {
  border-radius: var(--radius-full);
  background-color: var(--primary);
  color: var(--primary-foreground);
  border: 0;
  padding: 0.75rem 1.5rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.peptidi-contact-form .ff-btn-submit:hover { opacity: 0.9; }

.peptidi-contact-form .error-text,
.peptidi-contact-form .ff-el-is-error .text-danger { color: var(--destructive); font-size: 0.8125rem; }

.peptidi-contact-form .ff-message-success {
  border-radius: var(--radius-lg);
  border: 1px solid var(--primary);
  background-color: var(--primary-soft);
  padding: 1rem 1.25rem;
  font-size: 0.875rem;
  color: var(--accent-foreground);
}

/* --------------------------------------------------------------------------
   /kalkulator
   -------------------------------------------------------------------------- */

.calc { display: grid; gap: 1rem; }
@media (min-width: 1024px) {
  .calc { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .calc__inputs { grid-column: span 2; }
}

.calc__inputs { padding: 1.75rem; display: grid; gap: 2rem; align-content: start; }
.calc__output { display: grid; gap: 1rem; align-content: start; }

.calc-group__label { font-family: var(--font-display); font-size: 1rem; font-weight: 600; }
.calc-group__options { margin-top: 0.75rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }

.calc-pill {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background-color: var(--card);
  padding: 0.625rem 1rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted-foreground);
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.calc-pill:hover { color: var(--foreground); }
.calc-pill.is-active {
  border-color: var(--primary);
  background-color: var(--primary-soft);
  color: var(--accent-foreground);
}

.calc-manual {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background-color: var(--card);
  padding: 0.375rem 0.75rem;
}

.calc-manual__label,
.calc-manual__unit { font-size: 0.75rem; color: var(--muted-foreground); }

.calc-manual__input {
  width: 5rem;
  border: 0;
  background-color: transparent;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--foreground);
}
.calc-manual__input:focus { outline: none; }

.calc-result { padding: 1.75rem; }

.calc-result__eyebrow {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  opacity: 0.7;
}

.calc-result__units {
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 600;
}

.calc-result__units-label { margin-left: 0.25rem; font-size: 1.125rem; opacity: 0.7; }

.calc-result__sentence,
.calc-result__warning { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.7; opacity: 0.8; }

.calc-figures { padding: 1.75rem; display: grid; gap: 0.75rem; font-size: 0.875rem; }
.calc-figures__row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.calc-figures__row > span { color: var(--muted-foreground); }

.calc-disclaimer {
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border);
  background-color: var(--secondary);
  padding: 1.25rem;
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--muted-foreground);
}

/* --------------------------------------------------------------------------
   /verifikacija
   -------------------------------------------------------------------------- */

.verify-grid { display: grid; gap: 1rem; }
@media (min-width: 1024px) {
  .verify-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .verify-grid__main { grid-column: span 2; }
  .verify-grid__prose { grid-column: span 3; }
}

.verify-grid__main,
.verify-grid__side { padding: 2rem; }

.verify-form { display: grid; gap: 1rem; }
@media (min-width: 640px) { .verify-form { grid-template-columns: minmax(0, 1fr) auto; } }
.verify-form__input { min-width: 0; padding-block: 0.75rem; }
.verify-form__submit { gap: 0.5rem; flex-shrink: 0; }

.verify-result {
  margin-top: 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border);
  background-color: var(--secondary);
  padding: 1.25rem;
}
/* Nothing checked yet. `display: none` rather than the [hidden] attribute,
   because the rule above sets `display: flex` and would outrank it. */
.verify-result.is-empty { display: none; }
.verify-result.is-ok { border-color: var(--primary); background-color: var(--primary-soft); }
.verify-result.is-bad { border-color: color-mix(in oklab, var(--destructive) 40%, transparent); }

.verify-result__icon { flex-shrink: 0; margin-top: 0.125rem; }
.verify-result__icon svg { width: 1.25rem; height: 1.25rem; }
.verify-result__icon--ok svg { color: var(--primary); }
.verify-result__icon--bad svg { color: var(--destructive); }

.verify-result__body { min-width: 0; font-size: 0.875rem; }
.verify-result__title { font-weight: 600; }
.verify-result__text { margin-top: 0.25rem; color: var(--muted-foreground); line-height: 1.7; }

.verify-batch {
  margin-top: 2rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border);
  background-color: color-mix(in oklab, var(--secondary) 50%, transparent);
  padding: 1.5rem;
}

.verify-batch__icon { flex-shrink: 0; margin-top: 0.125rem; width: 1.25rem; height: 1.25rem; color: var(--primary); }
.verify-batch__body { min-width: 0; }
.verify-batch__title { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; }

.verify-batch__body p {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--muted-foreground);
}

.verify-batch__body .btn { margin-top: 1rem; gap: 0.5rem; }

.verify-channels { margin-top: 1.5rem; display: grid; gap: 0.75rem; font-size: 0.875rem; }
.verify-channels__item { display: flex; align-items: flex-start; gap: 0.5rem; opacity: 0.9; }
.verify-channels__icon { flex-shrink: 0; margin-top: 0.125rem; width: 1rem; height: 1rem; color: var(--primary); }

/* --------------------------------------------------------------------------
   Landing-page price tables
   -------------------------------------------------------------------------- */

.landing-table {
  margin-top: 1.5rem;
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}

.landing-table__table {
  width: 100%;
  min-width: 38rem;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.875rem;
}

.landing-table__table th,
.landing-table__table td { padding: 0.75rem 1rem; }

.landing-table__table thead th {
  background-color: var(--secondary);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
}

.landing-table__table tbody tr { border-top: 1px solid var(--border); }
.landing-table__table tbody td { color: var(--muted-foreground); }

.landing-table__name { font-weight: 500; color: var(--foreground); }
.landing-table__name a { color: inherit; }
.landing-table__name a:hover { color: var(--primary); }
.landing-table__price { font-weight: 600; color: var(--foreground); }