/*
 * Premium page (premium.php). Builds on tokens.css, base.css, components.css,
 * user-page.css (the company card) and directory.css (the result rows).
 * Hero with the price, one real company card in the free state and with
 * Premium (numbered differences), the real top of the directory, the agency
 * offer and questions. Gold marks Premium, brand blue carries the action.
 * The term and view switches are CSS only: radios + :has().
 */

body.m1n-site {
  margin: 0;
  background-color: var(--color-canvas);
  background-image: var(--sky);
  background-repeat: no-repeat;
  background-size: 100% 760px;
  color: var(--color-text);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}

.pm *,
.pm *::before,
.pm *::after { box-sizing: border-box; }

.pm {
  --gut: clamp(16px, 4vw, 40px);
  display: block;
  padding-bottom: var(--section-gap);
}

.pm-wrap {
  width: min(100% - 2 * var(--gut), var(--container));
  margin-inline: auto;
}

.pm :where(p, ul, ol, dl, dd, figure) { margin: 0; }

:where(.pm-h1, .pm-h2, .pm-h3, .pm-diff h3) {
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
  text-wrap: balance;
}

.pm-h1 {
  font-size: var(--text-page-title);
  line-height: 1.04;
}

.pm-h2 {
  font-size: var(--text-display-2);
  line-height: 1.1;
}

.pm-h2--sm { font-size: var(--text-card-title); }

.pm-h3 {
  font-size: var(--text-title);
  line-height: 1.2;
}

.pm-lede {
  max-width: 44ch;
  margin-top: 16px;
  color: var(--color-muted);
  font-size: clamp(17px, 0.4vw + 15px, 20px);
  line-height: 1.5;
  text-wrap: pretty;
}

.pm-text {
  max-width: 52ch;
  color: var(--color-text);
  font-size: var(--text-md);
  line-height: 1.6;
  text-wrap: pretty;
}

.pm-small {
  color: var(--color-muted);
  font-size: var(--text-sm);
}

:is(.pm-text, .pm-buy__note, .pm-faq__a p, .pm-stage__cap, .pm-dir__cap) a {
  border-radius: var(--radius-sm);
  color: var(--color-primary);
  font-weight: var(--weight-ui-medium);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.pm-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: var(--radius-sm);
  color: var(--color-primary);
  font-weight: var(--weight-ui-medium);
  text-decoration: none;
}

.pm-link .ui-icon {
  width: 16px;
  height: 16px;
}

@media (hover: hover) {
  .pm-link:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  :is(.pm-text, .pm-buy__note, .pm-faq__a p, .pm-stage__cap, .pm-dir__cap) a:hover { color: var(--color-primary-hover); }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pm-link .ui-icon { transition: transform 0.35s var(--ease-spring); }
  .pm-link:hover .ui-icon { transform: translateX(3px); }
}

@media (pointer: coarse) {
  .pm-link { min-height: 44px; }
}

/* Numeral: the same gold circle in the list and on the example card */
.pm-num,
.pm-state--on .spec .b-cover::after,
.pm-state--on .spec .b-id::after,
.pm-state--on .spec .b-call::after,
.pm-state--off .spec .up-band::after {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-gold-soft);
  box-shadow: inset 0 0 0 1px var(--color-gold-line);
  color: var(--color-gold-strong);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: var(--weight-ui-bold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Hero: question left, price right, no plate
   ========================================================================== */

.pm-hero {
  display: grid;
  gap: var(--space-8);
  padding-top: clamp(36px, 6vw, 88px);
}

.pm-buy {
  display: grid;
  gap: 14px;
  align-content: start;
  max-width: 440px;
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-line);
}

.pm-term {
  min-width: 0;
  margin: 0 0 4px;
  padding: 0;
  border: 0;
}

.pm-term .ui-seg > label > span {
  height: 40px;
  font-size: var(--text-control);
}

@media (pointer: coarse) {
  .pm-term .ui-seg > label > span,
  .pm-view .ui-seg > label > span { height: 44px; }
}

.pm-buy__price { min-height: 84px; }

/* Term switch: 1 leto shows by default, a checked radio swaps the price */
.pm-buy__term:not([data-term="1"]) { display: none; }

.pm-buy:has(input[name="pm-term"][value="2"]:checked) .pm-buy__term[data-term="1"],
.pm-buy:has(input[name="pm-term"][value="3"]:checked) .pm-buy__term[data-term="1"] { display: none; }

.pm-buy:has(input[name="pm-term"][value="2"]:checked) .pm-buy__term[data-term="2"],
.pm-buy:has(input[name="pm-term"][value="3"]:checked) .pm-buy__term[data-term="3"] { display: block; }

.pm-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

.pm-price__net {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 2rem + 1.4vw, 3.25rem);
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}

.pm-price__old {
  color: var(--color-muted);
  font-size: var(--text-md);
  font-variant-numeric: tabular-nums;
}

.pm-price__sub {
  margin-top: 8px;
  color: var(--color-muted);
  font-size: var(--text-base);
  font-variant-numeric: tabular-nums;
}

.pm-price__sub b {
  color: var(--color-ink);
  font-weight: var(--weight-ui-bold);
}

.pm-save { font-variant-numeric: tabular-nums; }

.pm-buy .ui-btn { margin-top: 4px; }

.pm-buy__note {
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.pm-buy__note + .pm-buy__note { margin-top: -8px; }

.pm-buy .pm-link { justify-self: start; }

@media (min-width: 1024px) {
  .pm-hero {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 32px;
    align-items: start;
  }

  .pm-hero__copy { grid-column: 1 / 7; }
  .pm-buy { grid-column: 8 / 13; max-width: none; margin-top: 10px; }
}

@media (min-width: 1200px) {
  .pm-hero__copy { grid-column: 1 / 8; }
  .pm-buy { grid-column: 9 / 13; }
}

/* ==========================================================================
   The example: one company card, free and with Premium
   ========================================================================== */

.pm-stage {
  display: grid;
  gap: var(--space-6);
  padding-top: 56px;
}

.pm-view {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.pm-view .ui-seg > label > span { height: 40px; font-size: var(--text-control); }

/* Phones: one card at a time, picked with the switch (both stack without :has) */
/* With :has the switch names the card, so the label above it would repeat it */
@supports selector(:has(*)) {
  @media (max-width: 699px) {
    .pm-state__label { display: none; }
  }
}

@media (max-width: 699px) {
  .pm-stage:has(input[name="pm-view"][value="off"]:checked) .pm-state--on,
  .pm-stage:has(input[name="pm-view"][value="on"]:checked) .pm-state--off { display: none; }
}

.pm-state {
  display: grid;
  gap: 12px;
  align-content: start;
  min-width: 0;
}

.pm-state__label {
  color: var(--color-ink);
  font-size: var(--text-control);
  font-weight: var(--weight-ui-bold);
}

.pm-diff {
  display: grid;
  gap: 22px;
  padding: 0;
  list-style: none;
}

.pm-diff li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 14px;
  break-inside: avoid;
}

.pm-diff h3 {
  font-size: var(--text-name);
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.pm-diff p {
  margin-top: 4px;
  color: var(--color-muted);
  font-size: var(--text-base);
  line-height: 1.5;
}

.pm-stage__cap {
  color: var(--color-muted);
  font-size: var(--text-sm);
}

/* Phones: switch, card, caption, then the list */
.pm-stage__cap { order: 2; margin-top: calc(-1 * var(--space-3)); }
.pm-diff { order: 3; }

@media (min-width: 700px) {
  .pm-stage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "off on" "list list" "cap cap";
    column-gap: 32px;
    row-gap: var(--space-8);
  }

  .pm-view { display: none; }

  .pm-state--off { grid-area: off; }
  .pm-state--on { grid-area: on; }
  .pm-diff { grid-area: list; display: block; columns: 2; column-gap: 32px; }
  .pm-diff li + li { margin-top: 0; }
  .pm-diff li { margin-bottom: 22px; }
  .pm-stage__cap { grid-area: cap; margin-top: calc(-1 * var(--space-6)); }
}

@media (min-width: 1200px) {
  .pm-stage {
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr) minmax(300px, 360px);
    grid-template-areas: "off list on" "cap . .";
    column-gap: 48px;
    row-gap: var(--space-5);
    align-items: start;
  }

  .pm-diff { display: grid; columns: auto; padding-top: 40px; }
  .pm-diff li { margin-bottom: 0; }
  .pm-stage__cap { margin-top: 0; }
}

/* Display only copy of the company card: no motion, no sticky, no inner
   controls that need user-page.js; the text list beside it is the real content */
.spec {
  --gut: 0px;
  --wrap: 100%;
  min-width: 0;
  color: var(--color-text);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  pointer-events: none;
  user-select: none;
}

.spec *,
.spec *::before,
.spec *::after {
  animation: none !important;
  transition: none !important;
}

:where(.spec) a { color: var(--c-ink); }
:where(.spec) img { display: block; max-width: 100%; }

.spec .b-card {
  position: relative;
  top: auto;
  max-width: 100%;
}

.spec .b-like,
.spec .b-today,
.spec a.b-today.b-today--d,
.spec .b-lines,
.spec .b-social { display: none; }

/* Same card at every width (user-page.css changes it by viewport) */
.spec .b-cover { height: 150px; }
.spec .b-cover.has-img { height: 190px; }

.spec .b-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-4) 24px 24px;
}

.spec .b-do { display: grid; }

.spec .b-body > .b-who,
.spec .b-do > .b-primary { grid-column: auto; grid-row: auto; }

.spec .b-title { color: var(--color-ink); }
.spec .b-title[data-len] { font-size: 30px; }

/* The Minimum band as it looks on a phone: back to the directory, search icon */
.spec .up-band { padding-top: 0; margin-bottom: 12px; }
.spec .up-band__in { width: auto; }
.spec .up-crumbs li:not(:first-child) { display: none; }
.spec .up-crumbs__back { display: inline; margin: 0 2px 0 -4px; }
.spec .up-crumbs a { display: inline-flex; align-items: center; color: var(--color-ink); font-weight: var(--weight-medium); }
.spec .up-band__search { width: 36px; padding: 0; }
.spec .up-band__search span { display: none; }

/* Numerals on the card */
.pm-state--on .spec .b-cover::after,
.pm-state--on .spec .b-id::after,
.pm-state--on .spec .b-call::after,
.pm-state--off .spec .up-band::after {
  position: absolute;
  z-index: 3;
  box-shadow: inset 0 0 0 1px var(--color-gold-line), var(--shadow-control);
}

.pm-state--on .spec .b-cover::after { content: "1"; top: 14px; left: 14px; }
.pm-state--on .spec .b-id::after { content: "2"; top: -10px; left: 66px; }
.pm-state--on .spec .b-call { position: relative; }
.pm-state--on .spec .b-call::after { content: "3"; top: calc(50% - 13px); right: 14px; }
.pm-state--off .spec .up-band { position: relative; }
.pm-state--off .spec .up-band::after { content: "5"; top: -10px; right: -8px; }

/* ==========================================================================
   The directory: copy left, the real first rows right
   ========================================================================== */

.pm-dir {
  display: grid;
  gap: var(--space-10);
  padding-top: var(--section-gap);
}

.pm-dir__copy .pm-text { margin-top: 16px; }
.pm-dir__copy .pm-text + .pm-text { margin-top: 12px; }
.pm-dir__copy .pm-h3 { margin-top: 40px; }

.pm-rates {
  width: 100%;
  max-width: 440px;
  margin-top: 16px;
  border-collapse: collapse;
  font-size: var(--text-control);
  font-variant-numeric: tabular-nums;
}

.pm-rates th,
.pm-rates td {
  padding: 10px 0;
  border-bottom: 1px solid var(--color-line);
  text-align: left;
  vertical-align: baseline;
}

.pm-rates th {
  color: var(--color-text);
  font-weight: var(--weight-ui);
}

.pm-rates td {
  color: var(--color-ink);
  font-weight: var(--weight-ui-bold);
  text-align: right;
  white-space: nowrap;
}

.pm-rates__packs tr:first-child > * { padding-top: 22px; }

.pm-dir__copy .pm-small { margin-top: 10px; }

.pm-dir__list {
  align-self: start;
  min-width: 0;
  padding: 8px 8px 4px;
  border-radius: var(--radius-xl);
  background: var(--glass-plate);
  -webkit-backdrop-filter: var(--glass-blur-plate);
  backdrop-filter: var(--glass-blur-plate);
  box-shadow: var(--shadow-card);
}

.pm-dir__rows {
  pointer-events: none;
  user-select: none;
}

.pm-dir__rows .dir-paid { margin-top: 0; }
.pm-dir__rows .dir-paid__head { padding: 6px 14px 2px; }

.pm-dir__organic { opacity: 0.55; }

.pm-dir__cap {
  padding: 12px 12px 10px;
  border-top: 1px solid var(--color-line);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

@media (min-width: 1024px) {
  .pm-dir {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 32px;
    align-items: start;
  }

  .pm-dir__copy { grid-column: 1 / 6; }
  .pm-dir__list { grid-column: 6 / 13; margin-top: 8px; }
}

@media (min-width: 1200px) {
  .pm-dir__list { grid-column: 7 / 13; }
}

/* ==========================================================================
   Agency offer: one thin row
   ========================================================================== */

.pm-pro {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--section-gap);
  padding-top: 40px;
  border-top: 1px solid var(--color-line);
}

.pm-pro__copy .pm-text { margin-top: 12px; }

.pm-pro__buy {
  display: grid;
  gap: 6px;
  justify-items: start;
  align-content: end;
}

.pm-pro__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.pm-pro__price b {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
}

@media (min-width: 1024px) {
  .pm-pro {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 32px;
    align-items: end;
  }

  .pm-pro__copy { grid-column: 1 / 8; }
  .pm-pro__buy { grid-column: 9 / 13; }
}

/* ==========================================================================
   Questions: native details
   ========================================================================== */

.pm-faqs { padding-top: var(--section-gap); }

.pm-faqs__head { margin-bottom: var(--space-6); }
.pm-faqs__head .pm-text { margin-top: 14px; }

.pm-faq { border-top: 1px solid var(--color-line); }

.pm-faq details { border-bottom: 1px solid var(--color-line); }

.pm-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 60px;
  padding: 14px 0;
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  font-size: var(--text-md);
  font-weight: var(--weight-ui-medium);
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}

.pm-faq summary::-webkit-details-marker { display: none; }

.pm-faq summary .ui-icon {
  width: 20px;
  height: 20px;
  color: var(--color-muted);
}

.pm-faq details[open] summary .ui-icon { transform: rotate(180deg); }

@media (prefers-reduced-motion: no-preference) {
  .pm-faq summary .ui-icon { transition: transform 0.35s var(--ease-spring-soft); }
}

.pm-faq__a {
  max-width: 64ch;
  padding: 0 0 20px;
  color: var(--color-text);
  font-size: var(--text-control);
  line-height: 1.6;
}

.pm-faq__a p + p { margin-top: 8px; }

@media (min-width: 900px) {
  .pm-faqs {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-12);
    align-items: start;
  }

  .pm-faqs__head { margin: 0; }
}

@media (max-width: 699px) {
  .pm-buy { max-width: none; }
}

/* ==========================================================================
   Comparison table (Brezplačno / Premium): what is and is not included
   ========================================================================== */
.pm-cmp-sec {
  display: grid;
  gap: var(--space-6);
  padding-top: var(--section-gap);
}

.pm-nowrap { white-space: nowrap; }

/* Comparison table: rows stay readable on phones, the Premium column is
   tinted gold; values and checks are centered */
.pm-cmp {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--color-ink);
  font-size: var(--text-control);
  line-height: 1.4;
}

.pm-cmp__col { width: clamp(84px, 20vw, 220px); }

.pm-cmp th,
.pm-cmp td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-line);
  text-align: center;
  vertical-align: middle;
}

.pm-cmp tbody th {
  font-weight: var(--weight-ui);
  text-align: left;
}

.pm-cmp thead th {
  color: var(--color-ink);
  font-size: var(--text-base);
  font-weight: var(--weight-ui-bold);
}

.pm-cmp thead td,
.pm-cmp thead th { border-bottom-color: var(--color-line-strong); }

.pm-cmp .is-prem { background: color-mix(in oklab, var(--color-gold-line) 9%, var(--color-surface)); }



.pm-cmp .pm-cmp__group th {
  padding-top: 28px;
  padding-bottom: 10px;
  border-bottom-color: var(--color-line-strong);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-name);
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  text-align: left;
}

.pm-cmp .pm-cmp__group th > span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.pm-cmp__group .ui-icon {
  width: 20px;
  height: 20px;
  color: var(--color-primary);
}

.pm-cmp tbody:first-of-type .pm-cmp__group th { padding-top: 18px; }

.pm-yes,
.pm-no {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  vertical-align: middle;
}

.pm-yes {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.pm-yes--gold {
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-gold-line);
  color: var(--color-gold-strong);
}

.pm-yes .ui-icon,
.pm-no .ui-icon { width: 16px; height: 16px; stroke-width: 2; }

.pm-no { color: var(--color-placeholder); }

.pm-val {
  color: var(--color-text);
  font-size: var(--text-base);
  font-weight: var(--weight-ui-medium);
}

.pm-val--gold {
  color: var(--color-gold-strong);
  font-weight: var(--weight-ui-bold);
}

@media (max-width: 599px) {
  .pm-cmp { table-layout: fixed; font-size: var(--text-base); }
  .pm-cmp th,
  .pm-cmp td { padding: 11px 4px; }
  .pm-cmp tbody th { padding-left: 0; padding-right: 8px; }
  .pm-cmp__col { width: 76px; }
  .pm-cmp thead th { font-size: var(--text-sm); }
  .pm-val { display: block; font-size: var(--text-sm); line-height: 1.35; overflow-wrap: anywhere; }
}

/* Comparison */
.pm-cmp-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-2) var(--space-8);
}

.pm-cmp-head .pm-lede { max-width: 40ch; margin: 0; }

.pm-cmp-wrap {
  padding: 4px clamp(12px, 2.4vw, 28px) 12px;
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  overflow: clip;
}

.pm-cmp-wrap thead th,
.pm-cmp-wrap thead td {
  position: sticky;
  top: var(--header-h);
  z-index: 1;
  padding-top: 18px;
  padding-bottom: 14px;
  background: var(--color-surface);
}

.pm-cmp-wrap thead th.is-prem {
  color: color-mix(in oklab, var(--color-gold-strong) 78%, var(--color-ink));
  background: color-mix(in oklab, var(--color-gold-line) 9%, var(--color-surface));
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.pm-cmp-wrap tbody tr:last-child > * { border-bottom: 0; }
.pm-cmp-wrap tbody:not(:last-of-type) tr:last-child > * { border-bottom: 1px solid var(--color-line); }

.pm-cmp .pm-cmp__group .ui-badge {
  margin-left: 6px;
  vertical-align: 1px;
}