/* =============================================================================
   CENOVÁ PONUKA - page styles

   Every colour, space, radius and easing here comes from tokens.css, which is
   copied verbatim from frontend/src/styles/tokens.css at Docker build time.
   Nothing in this file may hardcode a palette value -- if it needs a colour
   that tokens.css does not define, the token is what should change.
   ============================================================================= */

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

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;

  /* Clears the sticky summary bar so the last card is never trapped behind it. */
  padding-bottom: calc(var(--space-5xl) + var(--space-xl));
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-text);
  text-wrap: balance;
  margin: 0;
}

p {
  text-wrap: pretty;
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.shell {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.display-lg {
  font-size: var(--fs-display-lg);
  font-weight: var(--fw-medium);
}

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-relaxed);
  color: var(--color-text-soft);
  font-weight: var(--fw-light);
  max-width: var(--container-prose);
}

.overline {
  font-family: var(--font-body);
  font-size: var(--fs-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0;
}

/* -----------------------------------------------------------------------------
   MASTHEAD
   A wine-tinted radial wash rather than a flat fill, so the page opens with the
   same cinematic depth as the main site's hero.
   -------------------------------------------------------------------------- */
.masthead {
  padding-block: var(--section-pad-y-sm) var(--space-3xl);
  background:
    radial-gradient(120% 90% at 15% 0%, rgba(91, 26, 43, 0.5), transparent 62%),
    linear-gradient(180deg, var(--c-ink-1000), var(--color-bg));
  border-bottom: 1px solid var(--color-hairline-gold);
}

/* The wordmark carries "VINÁRSTVO"; the logo art has no place name, so
   Strekov stays as a separate caption rather than being dropped. */
.masthead__logo {
  display: block;
  height: clamp(20px, 2.6vw, 30px);
  width: auto;
  max-width: 100%;
}

.masthead__place {
  margin-top: var(--space-sm);
  font-size: var(--fs-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--color-accent);
}

.masthead h1 {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-lg);
}

.assumptions {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.assumptions ul {
  margin-top: var(--space-md);
  display: grid;
  gap: var(--space-xs);
  grid-template-columns: 1fr;
}

.assumptions li {
  position: relative;
  padding-left: var(--space-md);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.assumptions li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent);
  opacity: 0.75;
}

@media (min-width: 768px) {
  .assumptions ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm) var(--space-2xl);
  }
}

/* -----------------------------------------------------------------------------
   SECTIONS + CARDS
   -------------------------------------------------------------------------- */
.section {
  padding-block: var(--space-3xl) 0;
}

.section__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

/* Plain-language summary of what the section covers, before the priced items. */
.section__intro {
  max-width: var(--container-prose);
  margin-bottom: var(--space-xl);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
}

.section__num {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  color: var(--color-accent);
  line-height: 1;
}

.section__title {
  font-size: var(--fs-h2);
}

.cards {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;

  /* Cards size to their own content instead of stretching to match the
     tallest in the row -- otherwise a short item sitting beside one with a
     bullet list becomes a mostly-empty box. */
  align-items: start;
}

/* Grid children stretch, and each card fills its cell, so cards sharing a row
   are the same height and their prices line up along a common baseline.
   Cards with bullet lists deliberately do NOT span the full row -- at 1280px
   that stretched their content into two far-apart columns with a dead gulf
   between them. */
.cards > * {
  display: flex;
}

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

/* The whole card is the label, so the entire surface is a click target -- far
   easier on touch than a 20px checkbox. */
.card {
  position: relative;
  flex: 1 1 auto;

  /* Column layout so card__foot can be pushed to the bottom with margin-top:
     auto, keeping prices aligned across a row of uneven-length cards. */
  display: flex;
  flex-direction: column;
  padding: var(--space-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition:
    border-color var(--dur-base) var(--ease-standard),
    background var(--dur-base) var(--ease-standard),
    transform var(--dur-base) var(--ease-silk),
    box-shadow var(--dur-base) var(--ease-silk);
}

.card:hover {
  border-color: var(--color-border-strong);
  transform: translateY(-2px);
}

.card:has(input:focus-visible) {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.card--selected {
  background: var(--color-surface-raised);
  border-color: var(--color-hairline-gold);
  box-shadow: var(--shadow-md), var(--shadow-inset-sheen);
  transform: translateY(-2px);
}

/* The base item is permanently on; it should read as settled, not disabled. */
.card--locked {
  cursor: default;
}

.card--locked:hover {
  transform: translateY(-2px);
}

/* Checkbox + heading on the left, badge pushed to the far end. Wraps on
   narrow cards so the badge drops to its own line instead of crushing the
   title. */
.card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-md);

  /* nowrap is load-bearing: with wrap, flex chooses line breaks from each
     item's max-content width BEFORE it tries shrinking anything, so the badge
     was pushed onto its own line while the title stayed unwrapped. Forcing a
     single line makes the title wrap instead and keeps the badge at the end.
     Small screens opt back into wrapping below. */
  flex-wrap: nowrap;
}

.card__main {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  min-width: 0;
  flex: 1 1 auto;
}

.card__box {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;

  /* Centres the 22px box on the FIRST line of the title rather than on the
     whole heading block, so it stays put when a long title wraps to two
     lines. The line box is the title's font-size times its line-height. */
  margin-top: calc((var(--fs-h3) * var(--lh-snug) - 22px) / 2);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-xs);
  display: grid;
  place-items: center;
  transition:
    background var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard);
}

.card__box svg {
  width: 13px;
  height: 13px;
  opacity: 0;
  transform: scale(0.7);
  transition:
    opacity var(--dur-fast) var(--ease-out),
    transform var(--dur-base) var(--ease-silk);
}

.card--selected .card__box {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.card--selected .card__box svg {
  opacity: 1;
  transform: scale(1);
  color: var(--color-on-accent);
}

.card input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Block wrapper so the inline id + title share one line box that the
   checkbox can be measured against. */
.card__heading {
  display: block;
  min-width: 0;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
}

.card__id {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  color: var(--color-text-faint);
  margin-right: var(--space-2xs);
}

.card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
}

/* What the item means in practice, in the client's language. Sits between the
   title and the "obsahuje" bullet list. */
.card__desc {
  display: block;
  margin-top: var(--space-md);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
}

.card__bullets {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  display: grid;
  gap: var(--space-2xs);
}

.card__bullets li {
  position: relative;
  padding-left: var(--space-md);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* Gold dot, identical treatment to the Predpoklady list above, so the two
   bullet lists on the page read as the same system. */
.card__bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent);
  opacity: 0.75;
}

.card__foot {
  display: flex;
  align-items: baseline;

  /* Price is the only thing in this row now that man-days are hidden. */
  justify-content: flex-end;
  gap: var(--space-md);

  /* auto pushes the price row to the bottom of the card, so prices align
     across a row of cards with different amounts of content. */
  margin-top: auto;
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.card__price {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.card--selected .card__price {
  color: var(--color-accent-soft);
}

/* Badges: why an item is on, or what it will pull in. Sits at the far end of
   card__top via that row's space-between; shrinks before it wraps. */
.card__note {
  display: inline-block;
  flex: 0 0 auto;

  /* The badge keeps its own line-length and the TITLE wraps instead, which is
     what keeps the badge pinned to the far end rather than being bumped onto
     a line of its own. margin-left:auto right-aligns it in the rare case it
     genuinely has to wrap (very narrow cards). */
  white-space: nowrap;
  margin-left: auto;

  padding: var(--space-2xs) var(--space-xs);
  font-size: var(--fs-xs);
  line-height: 1.35;
  border-radius: var(--radius-pill);
  background: rgba(200, 162, 75, 0.1);
  border: 1px solid var(--color-hairline-gold);
  color: var(--color-accent-soft);

  /* Nudged down so the pill's optical centre matches the title's first line. */
  margin-top: calc((var(--fs-h3) * var(--lh-snug) - 1.35em - 2 * var(--space-2xs)) / 2);
}

.card__note--muted {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-text-faint);
}

/* -----------------------------------------------------------------------------
   NOTES + COLOPHON
   -------------------------------------------------------------------------- */
.notes {
  margin-top: var(--space-4xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-hairline-gold);
}

.notes ul {
  margin-top: var(--space-md);
  display: grid;
  gap: var(--space-sm);
  max-width: var(--container-narrow);
}

.notes li {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.colophon {
  margin-top: var(--space-2xl);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-text-faint);
}

/* -----------------------------------------------------------------------------
   STICKY SUMMARY
   -------------------------------------------------------------------------- */
.summary {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-sticky);
  background: rgba(20, 16, 14, 0.92);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--color-hairline-gold);
  padding-block: var(--space-md);
  padding-bottom: max(var(--space-md), env(safe-area-inset-bottom));
}

.summary__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.summary__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.summary__label {
  font-size: var(--fs-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--color-accent);
}

.summary__count {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.summary__figures {
  display: flex;
  align-items: baseline;
  gap: var(--space-lg);
}

.summary__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2xs);
}

/* tabular-nums keeps the figure from reflowing as digits change width. */
.summary__num {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.summary__price .summary__num {
  font-size: var(--fs-h1);
  color: var(--color-accent);
}

.summary__unit {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.summary__price .summary__unit {
  font-size: var(--fs-h3);
  font-family: var(--font-display);
  color: var(--color-accent);
}

/* A brief gold pulse marks that the total responded to the click. */
.summary__num--bumped {
  animation: bump var(--dur-slow) var(--ease-silk);
}

@keyframes bump {
  0% {
    transform: translateY(0);
  }
  35% {
    transform: translateY(-4px);
  }
  100% {
    transform: translateY(0);
  }
}

@media (max-width: 560px) {
  /* On a phone there is no room for title and badge side by side, so let the
     badge drop below rather than squeezing the title into a narrow column. */
  .card__top {
    flex-wrap: wrap;
  }

  .card__note {
    white-space: normal;
  }

  .summary__inner {
    align-items: flex-end;
  }

  .summary__figures {
    gap: var(--space-md);
  }

  .summary__price .summary__num {
    font-size: var(--fs-h2);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .card:hover,
  .card--selected {
    transform: none;
  }
}