/* ============================================================
   pricing.css — Editorial Civic layer for arak.html (pricing).
   Layered on top of main.css + components.css + editorial.css.
   Loaded only by arak.html. Uses CSS vars from main.css :root.
   ============================================================ */

/* ----- PERSONA SELECTOR (in hero, mirrors homepage proof block) ----- */

.persona-selector {
  width: 100%;
  max-width: 460px;
  background: var(--color-cream);
  border-top: 4px solid var(--color-cobalt);
  border-radius: 2px;
  padding: 2rem 2.25rem 1.75rem;
  box-shadow: 0 18px 52px rgba(3, 7, 18, 0.45);
  animation: fadeInRight 0.8s ease-out 0.2s both;
}

.persona-selector-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0f172a !important;
  margin: 0 0 1.25rem;
}

.persona-selector-link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 1rem;
  padding: 0.95rem 0;
  text-decoration: none;
  color: var(--color-ink);
  border-bottom: 1px solid rgba(15, 23, 42, 0.1);
  transition: color 0.2s ease, padding-left 0.2s ease;
}

.persona-selector-link:last-child {
  border-bottom: 0;
}

.persona-selector-link:hover {
  color: var(--color-cobalt);
  padding-left: 0.25rem;
}

.persona-selector-num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--color-cobalt);
}

.persona-selector-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: -0.005em;
  color: inherit;
  line-height: 1.2;
}

.persona-selector-arrow {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: rgba(15, 23, 42, 0.35);
  transition: transform 0.2s ease, color 0.2s ease;
}

.persona-selector-link:hover .persona-selector-arrow {
  color: var(--color-cobalt);
  transform: translateX(3px);
}

@media (max-width: 1023px) {
  .persona-selector {
    max-width: 100%;
  }
}

/* ----- PRICING PHILOSOPHY (editorial callout between hero and tables) ----- */

.pricing-philosophy {
  max-width: 800px;
  margin: 3.5rem auto 3rem;
  padding: 0 2rem;
  border-left: 3px solid var(--color-cobalt);
  text-align: left;
}

.pricing-philosophy-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-cobalt);
  margin: 0 0 0.85rem;
}

.pricing-philosophy-quote {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  line-height: 1.5;
  color: var(--color-ink);
  letter-spacing: -0.005em;
  margin: 0;
}

@media (max-width: 768px) {
  .pricing-philosophy {
    padding: 0 1.25rem;
    margin: 2.5rem auto 2rem;
  }
}

/* ----- PRICING PERSONA SECTIONS ----- */

.service-pricing {
  background: var(--color-cream);
}

.pricing-persona {
  background: var(--color-cream);
  padding: 3.5rem 0;
  margin-bottom: 0;
  scroll-margin-top: 96px;
  counter-reset: pricing-section;
}

.pricing-persona + .pricing-persona {
  border-top: 1px solid var(--color-rule);
}

.pricing-persona .section-header {
  text-align: center;
  margin-bottom: 1.75rem;
}

/* Numbered eyebrow above persona H2 (matches persona-selector numbering) */
.pricing-persona .persona-section-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-cobalt);
  margin: 0 0 0.85rem;
}

.pricing-persona .section-header h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.85rem, 3.5vw, 2.6rem);
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--color-ink);
  margin-bottom: 0.75rem;
}

.pricing-persona .section-header p {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.55;
  color: rgba(15, 23, 42, 0.72);
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
}

/* ----- PRICING NOTE (disclaimer, editorial callout) ----- */

.pricing-note {
  background: transparent;
  border-radius: 0;
  border-left: 3px solid var(--color-cobalt);
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  padding: 1rem 1.5rem;
  margin: 0 auto 1.5rem;
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgba(15, 23, 42, 0.72);
  max-width: 1100px;
}

.pricing-note strong {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--color-ink);
}

/* ----- PRICING TABLE (the editorial centerpiece) ----- */

.pricing-table-container {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  max-width: 1100px;
  margin: 0 auto;
}

/* Table sits on the cream persona section; each row is a white surface
   bordered for scannability — like a price list on a cream catalog page. */
.pricing-table {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
}

/* Column headers: mono uppercase on cream stripe at the top of the table.
   Uses !important to outrank main.css's "background: #1e40af !important" on
   `.pricing-table th`, `th:first-child`, `th:last-child`. */
.pricing-table thead th,
.pricing-table thead th:first-child,
.pricing-table thead th:last-child {
  background: var(--color-cream) !important;
  color: rgba(15, 23, 42, 0.55) !important;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.15);
  border-top: 0 !important;
  border-radius: 0 !important;
  text-align: left;
}

.pricing-table thead th.price {
  text-align: right;
  padding-right: 1.5rem;
}

/* Body rows: clear bottom border per row + subtle vertical dividers between cells */
.pricing-table tbody tr {
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  transition: background 0.2s ease;
}

.pricing-table tbody tr:last-child {
  border-bottom: 0;
}

/* Zebra striping — every other body row gets the cream tint */
.pricing-table tbody tr:nth-child(even):not(.section-header-row) {
  background: rgba(250, 248, 243, 0.55);
}

.pricing-table td {
  padding: 1.4rem 1.25rem;
  border-bottom: 0;
  vertical-align: middle;
}

/* Vertical dividers between columns */
.pricing-table tbody td:not(:last-child) {
  border-right: 1px solid rgba(15, 23, 42, 0.06);
}

.pricing-table thead th:not(:last-child) {
  border-right: 1px solid rgba(15, 23, 42, 0.08);
}

/* Hover accent — clearer scan signal */
.pricing-table tbody tr:not(.section-header-row):hover {
  background: rgba(37, 99, 235, 0.05);
  box-shadow: inset -3px 0 0 var(--color-cobalt);
}

/* Service name: editorial body */
.pricing-table .service-name {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-ink);
  text-align: left;
  line-height: 1.4;
}

/* Price = the typographic moment.
   No white-space: nowrap — long prices like "1.500 Ft/keresőszó/CPV kód"
   need to wrap rather than overflow into neighboring cells. */
.pricing-table .price {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.45rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  font-variation-settings: "opsz" 48;
  text-align: right;
  padding-right: 1.5rem;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* Details: mono small, muted ink */
.pricing-table .details {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: rgba(15, 23, 42, 0.62);
  text-align: left;
  line-height: 1.5;
}

/* Section-header row: cream stripe with cobalt top border — clear scan anchor */
.pricing-table .section-header-row {
  background: var(--color-cream) !important;
  border-top: 2px solid var(--color-cobalt);
  border-bottom: 1px solid rgba(15, 23, 42, 0.1);
}

.pricing-table .section-header-row td {
  border-bottom: 0;
  border-right: 0 !important;
  padding: 0;
  background: var(--color-cream);
}

.pricing-table .section-header {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--color-ink);
  letter-spacing: -0.01em;
  text-align: left;
  padding: 1.5rem 1.25rem 1.25rem;
  background: transparent;
  border-bottom: 0;
}

.pricing-table .section-header h3 {
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-align: inherit;
}

/* Numbered "S01 / S02" mono eyebrow above each table section heading.
   Uses a CSS counter scoped to .pricing-persona so each persona restarts. */
.pricing-table .section-header::before {
  counter-increment: pricing-section;
  content: "S" counter(pricing-section, decimal-leading-zero);
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--color-cobalt);
  margin-bottom: 0.45rem;
}

/* ============================================================
   MOBILE — pricing table collapses to card-style layout.
   main.css already does the display:block + grid trick at ≤768px.
   We extend it here for the editorial look at narrow widths.
   ============================================================ */

@media (max-width: 768px) {
  .pricing-table-container {
    padding: 0 0.75rem;
  }

  .pricing-table .section-header-row {
    border-top: 2px solid var(--color-cobalt);
    margin-top: 1rem;
  }

  .pricing-table .section-header {
    font-size: 1.1rem;
    padding: 1.25rem 0 0.75rem;
    text-align: left;
  }

  .pricing-table tbody tr {
    border-left: 2px solid var(--color-cobalt);
    padding: 0.5rem 0 0.5rem 1rem !important;
    margin-bottom: 0.5rem;
  }

  .pricing-table tbody tr.section-header-row {
    border-left: 0;
    padding: 0 !important;
  }

  .pricing-table .service-name {
    font-size: 1rem;
    font-weight: 600;
    padding-bottom: 0.4rem !important;
  }

  /* main.css adds ::before "Ár" / "Részletek" mono labels on mobile.
     Override to match our editorial register. */
  .pricing-table .price::before,
  .pricing-table .details::before {
    font-family: var(--font-mono) !important;
    font-size: 0.65rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.1em !important;
    color: rgba(15, 23, 42, 0.5) !important;
  }

  .pricing-table .price {
    font-size: 1.4rem;
    text-align: left !important;
    padding-right: 0 !important;
  }

  .pricing-table .details {
    font-size: 0.8rem;
  }

  .pricing-note {
    padding: 0.85rem 1.1rem;
    font-size: 0.88rem;
  }
}

/* ----- CTA button polish (sharper, matching homepage hero) ----- */

.cta .btn {
  border-radius: 2px;
  letter-spacing: 0.01em;
  padding: 14px 28px;
}