/* =============================================================
   SECTION: Conviction (Why Us · How to Order · Telegram CTA · FAQ)
   Owner: Agent D
   Partials: 05-why-us · 06-how-to-order · 08-telegram-cta · 09-faq
   Mobile-first. Token values only. No hex literals. No gradients. No shadows.
   ============================================================= */


/* =============================================================
   SHARED CONTAINER HELPER
   Each section has its own __container to allow per-section
   max-widths while keeping the pattern consistent.
   ============================================================= */
.why__container,
.how__container,
.tg-cta__container,
.faq__container {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--space-6); /* 24px gutter on mobile */
}


/* =============================================================
   05 — WHY US  (section#zastoMi.why)
   Background: var(--color-surface)   Padding: 56px (mobile) / 80px (desktop)
   ============================================================= */

.why {
  background-color: var(--color-surface);
  padding-block: var(--space-12); /* 48px on mobile */
}

.why__container {
  max-width: var(--max-content); /* 1100px */
}

.why__heading {
  font-size: var(--fs-h2-mobile);  /* 24px */
  font-weight: 700;
  color: var(--color-text-primary);
  margin-block-end: var(--space-10); /* 40px */
  text-align: center;
}

.why__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.why__card {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.why__card-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-accent-soft);
  border-radius: var(--radius-md);
  color: var(--color-accent);
  flex-shrink: 0;
}

.why__card-heading {
  font-size: var(--fs-h3-mobile);
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
  line-height: 1.2;
}

.why__card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.why__card-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--fs-body-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.why__card-list svg {
  flex-shrink: 0;
  margin-block-start: 3px;
  color: var(--color-accent);
}

@media (min-width: 480px) {
  .why__cards { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  /* 4 cards: keep 2×2 grid up to 1100px so no orphaned single card at 3-col */
  .why__cards { grid-template-columns: repeat(2, 1fr); }
  .why__card-heading { font-size: var(--fs-h3); }
}

@media (min-width: 1100px) {
  /* 4-column row on wide viewports */
  .why__cards { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1024px) {
  .why {
    padding-block: var(--space-20); /* 80px */
  }

  .why__heading {
    font-size: var(--fs-h2); /* 32px */
    margin-block-end: var(--space-12); /* 48px */
  }
}


/* =============================================================
   06 — HOW TO ORDER  (.how)
   Background: var(--color-white)   Padding: 56px (mobile) / 80px (desktop)
   ============================================================= */

.how {
  background-color: var(--color-white);
  padding-block: var(--space-12); /* 48px on mobile */
}

.how__container {
  max-width: var(--max-content); /* 1100px */
}

.how__heading {
  font-size: var(--fs-h2-mobile); /* 24px */
  font-weight: 700;
  color: var(--color-text-primary);
  margin-block-end: var(--space-10); /* 40px */
  text-align: center;
}

/* Mobile: stacked single column */
.how__steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-8); /* 32px */
  position: relative;
}

/* Connector — hidden on mobile */
.how__connector {
  display: none;
}

.how__step {
  display: flex;
  flex-direction: column;
  gap: var(--space-3); /* 12px */
}

.how__num {
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-accent);
  margin: 0;
}

.how__h {
  font-size: var(--fs-h3-mobile); /* 18px */
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.3;
  margin: 0;
}

.how__body {
  font-size: var(--fs-body-sm); /* 14px */
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin: 0;
}

@media (min-width: 768px) {
  .how {
    padding-block: var(--space-20); /* 80px */
  }

  .how__heading {
    font-size: var(--fs-h2); /* 32px */
    margin-block-end: var(--space-12); /* 48px */
  }

  /* 3-column grid: step · connector · step · connector · step */
  .how__steps {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: start;
    gap: 0;
    column-gap: var(--space-4); /* 16px between columns */
  }

  /* Connector — thin horizontal rule between steps, vertically centered at num level */
  .how__connector {
    display: block;
    align-self: start;
    margin-block-start: 48px; /* aligns with midpoint of .how__num */
    width: 100%;
    height: 1px;
    background-color: var(--color-border);
  }

  .how__h {
    font-size: var(--fs-h3); /* 20px */
  }
}


/* =============================================================
   08 — TELEGRAM CTA  (section#telegram-cta.tg-cta)
   Background: var(--color-navy)   Padding: 64px (mobile) / 96px (desktop)
   All text: white / rgba(255,255,255,0.8) / rgba(255,255,255,0.55)
   ============================================================= */

.tg-cta {
  background-color: var(--color-navy);
  padding-block: var(--space-16); /* 64px */
  text-align: center;
}

.tg-cta__container {
  max-width: var(--max-narrow); /* 580px */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5); /* 20px */
}

.tg__h {
  font-size: var(--fs-h2-mobile); /* 24px */
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.2;
  margin: 0;
}

/* Body paragraphs inside .tg-cta */
.tg-cta p {
  font-size: var(--fs-body-lg-mobile); /* 16px */
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

/* Override heading paragraph — it gets full white */
.tg__h + p {
  margin-block-start: 0;
}

/* CTA button overrides: 48px height, full-width on mobile */
.tg__cta {
  min-height: 48px;
  width: 100%;
  max-width: 320px;
  font-weight: 600;
  margin-block-start: var(--space-3); /* 12px extra breathing room */
}

.tg__micro {
  font-size: var(--fs-micro); /* 13px */
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.5;
  margin-block-start: var(--space-3); /* 12px */
}

@media (min-width: 768px) {
  .tg-cta {
    padding-block: var(--space-24); /* 96px */
  }

  .tg__h {
    font-size: var(--fs-h2); /* 32px */
  }

  .tg-cta p {
    font-size: var(--fs-body-lg); /* 18px */
  }

  /* Button reverts to auto-width on wider viewports */
  .tg__cta {
    width: auto;
    min-width: 260px;
    max-width: none;
  }
}


/* =============================================================
   09 — FAQ  (section#faq.faq)
   Background: var(--color-white)   Padding: 56px (mobile) / 80px (desktop)
   ============================================================= */

.faq {
  background-color: var(--color-white);
  padding-block: var(--space-12); /* 48px on mobile */
}

.faq__container {
  max-width: var(--max-faq); /* 720px */
}

.faq__heading {
  font-size: var(--fs-h2-mobile); /* 24px */
  font-weight: 700;
  color: var(--color-text-primary);
  margin-block-end: var(--space-10); /* 40px */
  text-align: center;
}

.faq__list {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .faq {
    padding-block: var(--space-20); /* 80px */
  }

  .faq__heading {
    font-size: var(--fs-h2); /* 32px */
  }
}


/* =============================================================
   ACCORDION — <details>/<summary> progressive-enhancement layer
   Overrides the JS-driven max-height: 0 from components.css so
   that content is visible when <details> carries [open] natively.
   ============================================================= */

/* Hide the browser's default disclosure triangle */
details.accordion__item > summary.accordion__trigger {
  list-style: none;
}

details.accordion__item > summary.accordion__trigger::-webkit-details-marker {
  display: none;
}

/* Reveal panel when <details> is open */
details[open] > .accordion__panel {
  max-height: none;
  overflow: visible;
}

/* Body text inside FAQ panels */
.faq .accordion__panel p {
  padding-block-end: var(--space-5); /* 20px — mirrors .accordion__panel-inner */
  color: var(--color-text-secondary);
  font-size: var(--fs-body);
  line-height: 1.6;
  margin: 0;
}

/* =============================================================
   COMPARISON TABLE  (section#usporedba.compare)
   Background: var(--color-white)   Padding: 48px (mobile) / 80px (desktop)
   ============================================================= */

.compare {
  background-color: var(--color-white);
  padding-block: var(--space-12);
}

.compare__container {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--space-6);
  max-width: var(--max-content);
}

.compare__heading {
  font-size: var(--fs-h2-mobile);
  font-weight: 700;
  color: var(--color-text-primary);
  margin-block-end: var(--space-4);
  text-align: center;
}

.compare__lead {
  text-align: center;
  color: var(--color-text-secondary);
  font-size: var(--fs-body);
  max-width: var(--max-text);
  margin-inline: auto;
  margin-block-end: var(--space-10);
  line-height: 1.6;
}

.compare__scroll-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.compare__table {
  width: 100%;
  border-collapse: collapse;
}

.compare__caption {
  /* Visually hidden — provides accessible table description */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── Header row ── */
.compare__head-row {
  border-bottom: 2px solid var(--color-border);
}

.compare__th {
  padding: var(--space-5) var(--space-4);
  text-align: center;
  vertical-align: bottom;
  background-color: var(--color-surface);
  border-right: 1px solid var(--color-border);
}

.compare__th:last-child {
  border-right: none;
}

.compare__th--criterion {
  text-align: left;
  width: 50%;
}

.compare__th--us {
  background-color: var(--color-accent-soft);
  border-top: 3px solid var(--color-accent);
  border-right: 1px solid var(--color-border);
}

.compare__col-brand {
  display: block;
  font-size: var(--fs-body-sm);
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.3;
  margin-block-end: var(--space-1);
}

.compare__th--us .compare__col-brand {
  color: var(--color-accent);
}

.compare__col-region {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 400;
  color: var(--color-text-secondary);
  line-height: 1.4;
}

/* ── Body rows ── */
.compare__row {
  border-bottom: 1px solid var(--color-border);
}

.compare__row:last-child {
  border-bottom: none;
}

.compare__row:nth-child(even) {
  background-color: var(--color-surface);
}

.compare__row:nth-child(even) .compare__cell--us {
  background-color: var(--color-accent-soft);
}

/* Criterion cell — sticky so it stays visible while scrolling */
.compare__criterion {
  padding: var(--space-4) var(--space-5);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.4;
  vertical-align: middle;
  border-right: 1px solid var(--color-border);
  background-color: inherit;
  position: sticky;
  left: 0;
  z-index: 1;
}

.compare__row:nth-child(odd) .compare__criterion {
  background-color: var(--color-white);
}

.compare__row:nth-child(even) .compare__criterion {
  background-color: var(--color-surface);
}

.compare__criterion-sub {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 400;
  color: var(--color-text-secondary);
  margin-block-start: var(--space-1);
  line-height: 1.4;
}

/* Data cells */
.compare__cell {
  padding: var(--space-4) var(--space-4);
  text-align: center;
  vertical-align: middle;
  border-right: 1px solid var(--color-border);
}

.compare__cell:last-child {
  border-right: none;
}

.compare__cell--us {
  background-color: var(--color-accent-soft);
}

/* ── Status icons ── */
.compare__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  margin-inline: auto;
}

.compare__icon--yes {
  color: var(--color-accent);
  background-color: var(--color-accent-soft);
  /* Override for the "us" column — slightly stronger tint */
}

.compare__cell--us .compare__icon--yes {
  background-color: rgba(15, 118, 110, 0.15);
}

.compare__icon--no {
  color: var(--color-text-secondary);
  background-color: var(--color-muted);
}

.compare__icon--partial {
  color: var(--semantic-warning);
  background-color: #FEF3C7; /* amber tint — only for partial/unclear status */
}

.compare__note {
  display: block;
  font-size: var(--fs-micro);
  color: var(--color-text-secondary);
  line-height: 1.4;
  margin-block-start: var(--space-2);
  max-width: 160px;
  margin-inline: auto;
}

/* ── Footnote ── */
.compare__footnote {
  margin-block-start: var(--space-6);
  font-size: var(--fs-micro);
  color: var(--color-text-secondary);
  line-height: 1.6;
  max-width: var(--max-text);
  margin-inline: auto;
  text-align: center;
}

@media (min-width: 1024px) {
  .compare {
    padding-block: var(--space-20);
  }

  .compare__heading {
    font-size: var(--fs-h2);
    margin-block-end: var(--space-5);
  }

  .compare__lead {
    font-size: var(--fs-body-lg);
    margin-block-end: var(--space-12);
  }
}


/* Accordion icon — "+" rotates 45° to approximate "×" when open */
.accordion__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  font-size: 20px;
  line-height: 1;
  color: var(--color-text-secondary);
  transition: transform var(--t-base) ease;
  font-style: normal;
}

details[open] > summary > .accordion__icon {
  transform: rotate(45deg);
}