/* Pricing (step 4.14): three equal price cards and a "Dobré vědět" block about what the price includes.
   Same breakpoints as the service cards: up to 767 px one column; 768–1099 px two cards side by side and the
   third across the full width (from 900 px with its points in a second column); from 1100 px three columns.
   Hover and keyboard focus inside a card give the same lift and gradient border as the service cards. */
/* A word wider than its box (only with strongly enlarged text) breaks instead of sticking out */
.pricing { padding-block: var(--space-section); overflow-wrap: break-word; }
.pricing :is(h2, h3) { overflow-wrap: anywhere; }

.pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-top: var(--space-12); }
.pricing-grid > * { min-width: 0; }

.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-8);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #ffffff0a, #ffffff03);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s;
}
/* Same gradient ring as the service cards */
.price-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: var(--gradient-accent);
  opacity: 0;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: opacity 0.3s;
  pointer-events: none;
}
.price-card:is(:hover, :focus-within) { transform: translateY(-4px); box-shadow: 0 24px 60px -30px #8b5cf6aa; }
.price-card:is(:hover, :focus-within)::before { opacity: 1; }

.price-card h3 { font-size: var(--text-h3); }
/* The price: a small muted label above the value ("Cena od" / "12 000 Kč", "Cena" / "podle zadání"). The same
   build and size on all three cards, so the individual project does not look less important and the dividers
   below the prices line up. At the normal text size the value is capped by the card width (13cqi), so it stays on
   one line; 13cqi leaves room for the longest value ("podle zadání") also in Firefox, which sets the display font a
   little wider. Enlarged text (browser font size setting): the card's padding and the grid gaps grow with the text,
   so 13cqi alone would get smaller and the price would shrink. The cap therefore grows by as much as the root text
   is above 16 px (nothing at the normal size), and the value may wrap between words, never inside the amount. */
.price-card { container-type: inline-size; }
.price {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-4);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-line);
  font-family: var(--font-display);
  line-height: 1.15;
}
.price-from { color: var(--color-muted); font-size: var(--text-sm); font-weight: 500; letter-spacing: 0.02em; }
.price-value { font-size: min(clamp(2rem, 1.1rem + 1.6vw, 2.75rem), calc(13cqi + 1rem - 16px)); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

.price-list { display: grid; gap: var(--space-3); margin-top: var(--space-6); padding: 0; list-style: none; }
.price-list li { display: flex; align-items: flex-start; gap: var(--space-3); overflow-wrap: anywhere; }
.price-list svg { flex: none; width: 18px; height: 18px; margin-top: 4px; fill: none; stroke: var(--color-lime); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* The buttons sit at the bottom, so all cards in a row end on the same line */
.price-cta { margin-top: auto; padding-top: var(--space-8); }
/* With strongly enlarged text the longer button labels wrap between words instead of sticking out of the card.
   The label and its arrow are set as one line of text (not flex items), so the label can use the full button width;
   the arrow follows the last word with no space in the markup, so it never ends up alone on a line. */
.price-cta .btn { display: inline-block; max-width: 100%; padding-inline: min(1.5rem, 6cqi); text-align: center; }
.price-cta .btn span { margin-left: var(--space-2); }
/* A narrow card (small phones, enlarged text) gets a smaller button label, so it stays on one line where it can */
@container (width < 17rem) {
  .price-cta .btn { font-size: var(--text-sm); padding-inline: min(1rem, 5cqi); }
}

/* "Dobré vědět": what the price does and does not include, two columns of short points on wide screens */
.pricing-notes {
  margin-top: var(--space-6);
  padding: var(--space-8);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: #ffffff05;
}
.pricing-notes h3 { font-size: var(--text-h3); }
.pricing-notes ul { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-12); margin-top: var(--space-6); padding: 0; list-style: none; color: var(--color-muted); }
/* A point may shrink below its longest word (only with strongly enlarged text), which then breaks inside the block */
.pricing-notes li { position: relative; min-width: 0; padding-left: var(--space-6); }
.pricing-notes li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--color-cyan); }
.pricing-terms { margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--color-line); color: var(--color-text); }
.pricing-vat { margin-top: var(--space-2); color: var(--color-muted); font-size: var(--text-sm); }

@media (width >= 1100px) {
  .pricing-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (width < 1100px) {
  .pricing-grid > .is-project { grid-column: 1 / -1; }
}
/* The wide third card: name, price and button on the left, its points on the right */
@media (900px <= width < 1100px) {
  .price-card.is-project { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-8); }
  .price-card.is-project > :not(.price-list) { grid-column: 1; }
  .price-card.is-project > .price-list { grid-column: 2; grid-row: 1 / span 3; align-self: center; margin-top: 0; }
}
@media (width < 768px) {
  .pricing-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .price-card, .pricing-notes { padding: var(--space-6); }
  .pricing-notes ul { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .price-card:is(:hover, :focus-within) { transform: none; }
}