/* 80 Deployment (#nasazeni): tiles over a scroll-snap gallery; figures keep their natural width (no crop)
   unless that is wider than the viewport between the gutters (phones): then the picture is cropped to fit. */

.ar-deploy .ar-h2 { font-size: var(--wp--preset--font-size--heading-xl); }
.ar-deploy .ar-h2 span { display: block; }

/* Tiles: 1 column, 2 x 2 from 480 px, 4 across from 1100 px */
.ar-deploy__tiles { display: grid; gap: var(--wp--preset--spacing--30); margin: var(--wp--preset--spacing--50) 0 0; padding: 0; list-style: none; }

.ar-deploy__tile {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1rem;
  min-height: 5.5rem; padding: 1rem 3.5rem 1rem 1.25rem;
  border: 1px solid var(--ar-line); background-color: var(--wp--preset--color--ink);
}

.ar-deploy__no { position: absolute; top: 1rem; right: 1.25rem; }
.ar-deploy__icon { width: 44px; height: 44px; fill: none; stroke: var(--ar-fg-soft); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

@media (min-width: 480px) {
  .ar-deploy__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ar-deploy__tile { grid-template-columns: minmax(0, 1fr); align-content: space-between; gap: 2.5rem; min-height: 11rem; padding: 1.25rem; }
}

@media (min-width: 1100px) {
  .ar-deploy__tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--wp--preset--spacing--40); }
}

/* Gallery: full-bleed strip, first figure on the text column (--ar-edge) */
.ar-gallery {
  --ar-edge: max(var(--ar-gutter), calc((100% - var(--ar-container)) / 2 + var(--ar-gutter)));
  display: flex; gap: var(--wp--preset--spacing--30); margin-block-start: var(--wp--preset--spacing--60);
  padding-inline: var(--ar-edge); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-padding-inline: var(--ar-edge); scroll-snap-type: x mandatory;
}

.js .ar-gallery { scrollbar-width: none; }
.ar-gallery:focus-visible { outline-offset: -3px; }
.ar-gallery figure { flex: none; height: clamp(12.5rem, 4rem + 26vw, 26rem); background-color: var(--wp--preset--color--ink); scroll-snap-align: start; }
/* A figure never outgrows the strip's snap view (100vw: a percentage would refer to the figure itself). */
.ar-gallery img { width: auto; max-width: calc(100vw - 2 * var(--ar-gutter)); height: 100%; object-fit: cover; }

/* Under the strip: position hairline (--ar-pos, --ar-size from the script), caption, buttons */
.ar-deploy__bar {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem;
  margin-block-start: var(--wp--preset--spacing--30); padding-block-start: 0.75rem;
}

.js .ar-deploy__bar::before {
  content: ""; position: absolute; inset: 0 var(--ar-gutter) auto; height: 2px;
  background:
    linear-gradient(var(--ar-fg-muted), var(--ar-fg-muted)) calc(var(--ar-pos, 0) * 100%) 0 / calc(var(--ar-size, 1) * 100%) 100% no-repeat,
    var(--ar-line);
}

.ar-deploy__nav { display: flex; gap: 0.75rem; margin-inline-start: auto; }
.no-js .ar-deploy__nav { display: none; }

.ar-deploy__arrow {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid var(--ar-line-strong); border-radius: 50%; color: var(--ar-fg);
  transition: border-color var(--ar-hover);
}

.ar-deploy__arrow:hover { border-color: color-mix(in srgb, var(--ar-fg) 45%, transparent); }
.ar-deploy__arrow:disabled { opacity: 0.35; pointer-events: none; }
.ar-deploy__arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }