/*
 * Súbor: css/components/connections-comparison.css
 * Obsah: Porovnanie variantov cien: štvorcové ilustrácie, popisky, posuvné karty a mobilné ovládanie.
 * Použitie: sluzba-pripojky.html.
 * Zapojenie: <link rel="stylesheet" href="css/components/connections-comparison.css">; zachovaj pozíciu v hlavičke podľa css/README.md.
 * Závislosti: HTML triedy a selektory uvedené v pravidlách nižšie, css/general/base.css a farebné premenné témy stránky.
 */
/* Reuse the concrete service's pricing-example captions, leaders and colors.
   Only the image ratio differs because the connection illustrations are square. */
.connection-comparison > img {
  display: block;
  aspect-ratio: 1;
  object-fit: contain;
}

.pricing-compare__offer {
  display: block;
  min-width: 0;
}

.pricing-compare > .quality-compare {
  margin-bottom: 28px;
}

.pricing-compare__controls { display: none; }

@media (max-width: 767px) {
  #cena > .container { width: calc(100% - 24px); }

  .pricing-compare__controls {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 14px;
  }

  .pricing-compare__controls button {
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
  }

  .pricing-compare__controls button[aria-pressed="true"] {
    background: var(--palette-dark);
    color: var(--palette-light);
  }

  .pricing-compare__grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    padding-bottom: 12px;
    align-items: stretch;
  }

  .pricing-compare__offer {
    flex: 0 0 88%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    scroll-snap-align: start;
  }

  .pricing-compare__offer > .pricing-compare__card {
    min-height: 0;
    flex: 1;
    order: 0;
  }

  .pricing-compare__offer > .pricing-example { order: 1; }
}