/* Infinit — component styles recreated from the solidpixels core.css of step/sen/maximus/www.infinit.cz.
   Every colour, font and length comes from tokens.css; the branch is the data-theme. */

.inf-root, .inf-root * { box-sizing: border-box; }
.inf-root {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.75;
  color: var(--brand);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

:root { --inf-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80.9 45.3'%3E%3Cpath fill='%23565658' d='M40.3 45.1c-1.3 0-2.6-.5-3.5-1.5-2-2-2-5.1 0-7.1l35-35c2-2 5.1-2 7.1 0s2 5.1 0 7.1l-35 35a4.99 4.99 0 0 1-3.6 1.5z'/%3E%3Cpath fill='%23565658' d='M40.3 45.1c-1.3 0-2.6-.5-3.5-1.5L2.3 9.2C.4 7.3.1 4.3 1.8 2.2 3.7 0 7.2-.1 9.2 1.9l34.4 34.5c2 2 2.2 5.5 0 7.4-.9.9-2.1 1.3-3.3 1.3z'/%3E%3C/svg%3E"); }

/* ---------- Buttons (.btn) ---------- */
.inf-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--space-button-y) var(--space-button-x);
  font-family: var(--font-sans); font-weight: 300;
  font-size: 14px; line-height: 1.75; letter-spacing: 2.8px; text-transform: uppercase;
  border: var(--border-width) solid var(--brand);
  border-radius: var(--radius-none);
  background: transparent; color: var(--brand);
  text-decoration: none; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.inf-btn:hover, .inf-btn.is-hover { background: var(--brand-hover); color: var(--on-brand-hover); border-color: var(--btn-hover-border); }
.inf-btn--primary { font-weight: 500; background: var(--btn-primary-bg); color: var(--btn-primary-ink); border-color: var(--btn-primary-bg); }
.inf-btn--primary:hover, .inf-btn--primary.is-hover { background: var(--btn-primary-hover-bg); color: var(--btn-primary-hover-ink); border-color: var(--btn-primary-hover-bg); }
.inf-btn--inverse { background: transparent; color: var(--on-brand); border-color: var(--on-brand); }
.inf-btn--inverse:hover, .inf-btn--inverse.is-hover { background: var(--btn-inverse-hover-bg); color: var(--btn-inverse-hover-ink); border-color: var(--on-brand); }
.inf-btn--sm { font-size: 11.2px; }
.inf-btn--lg { font-size: 16.8px; }
.inf-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---------- Headings ---------- */
.inf-eyebrow {
  margin: 0; font-family: var(--font-sans); font-weight: 700;
  font-size: 14px; line-height: 1.3; letter-spacing: 2.8px; text-transform: uppercase;
  color: var(--brand); text-align: center;
}
.inf-h1 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 12vw; line-height: .9; color: var(--brand); }
.inf-h2 { margin: 0; font-family: var(--font-sans); font-weight: 300; font-size: 31px; line-height: 1.5; color: var(--brand); }
.inf-h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 36px; line-height: 1.1; color: var(--brand); }

/* ---------- Header + branch switcher ---------- */
.inf-header {
  display: flex; align-items: center; gap: 28px;
  height: var(--header-height); padding: 0 20px;
  background: var(--surface);
}
.inf-header__logo { height: 44px; width: auto; display: block; }
.inf-branch {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 500; color: var(--brand); text-decoration: none;
}
.inf-branch__chev {
  width: 12px; height: 6px; background-color: var(--brand);
  -webkit-mask: var(--inf-chevron) center / contain no-repeat; mask: var(--inf-chevron) center / contain no-repeat;
}
.inf-nav { display: flex; gap: 0; margin-left: auto; list-style: none; padding: 0; }
.inf-nav a {
  position: relative; display: block; padding: 9px 14px;
  font-size: 16px; line-height: 1.4; font-weight: 300; color: var(--brand); text-decoration: none;
}
.inf-nav a span { position: relative; }
.inf-nav a span::after {
  content: ''; position: absolute; left: 0; bottom: -4px; height: var(--underline-height); width: 0;
  background: currentColor; transition: width .3s ease-in-out;
}
.inf-nav a:hover span::after, .inf-nav a.is-active span::after { width: 100%; }
.inf-header__lang { font-size: 16px; text-transform: uppercase; color: var(--brand); }

.inf-branchmenu {
  display: flex; justify-content: space-between; gap: 24px;
  max-width: 45rem; margin: 0 auto; padding: 40px 32px;
  background: var(--surface); box-shadow: var(--shadow-menu);
}
.inf-branchmenu a { display: flex; flex-direction: column; align-items: center; text-decoration: none; }
.inf-branchmenu img { width: 2rem; height: 2rem; margin-bottom: 10px; }
.inf-branchmenu span { font-size: 16px; font-weight: 400; text-transform: uppercase; letter-spacing: 0; }
.inf-branchmenu a:hover span { text-decoration: underline; }

/* ---------- Info bar ---------- */
.inf-infobar { background: var(--brand); color: var(--on-brand); text-align: center; padding: 14px 20px; }
.inf-infobar .inf-eyebrow { color: var(--on-brand); }
.inf-infobar p { margin: 8px 0 0; font-size: 18px; line-height: 1.6; }

/* ---------- Hero ---------- */
.inf-hero {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
  min-height: 360px; padding: 50px 20px; overflow: hidden; text-align: center;
  background: var(--ink);
}
.inf-hero::after { content: ''; position: absolute; inset: 0; background: var(--overlay-image); }
.inf-hero > * { position: relative; z-index: 1; }
.inf-hero .inf-h1 { color: var(--on-brand); font-size: 128px; }
.inf-hero p { margin: 0; max-width: 34em; color: var(--on-brand); font-size: 18px; line-height: 1.6; }

/* ---------- Service tile ---------- */
.inf-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.inf-tile {
  position: relative; display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3; overflow: hidden; text-decoration: none; background: var(--brand);
}
.inf-tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: filter .3s ease; }
.inf-tile::before { content: ''; position: absolute; inset: 0; background: transparent; transition: background .3s ease; z-index: 1; }
.inf-tile:hover::before, .inf-tile.is-hover::before { background: var(--overlay-card); }
.inf-tile:hover .inf-tile__img, .inf-tile.is-hover .inf-tile__img { filter: blur(10px); }
.inf-tile__label { position: relative; z-index: 2; color: var(--on-brand); font-size: 20px; font-weight: 300; line-height: 1.4; text-align: center; }

/* ---------- News card (entries) ---------- */
.inf-news { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.inf-entry { padding: 1.5rem; display: flex; flex-direction: column; }
.inf-entry__meta { order: -1; margin: 0 0 1rem; font-size: 14px; line-height: 1.65; letter-spacing: 2.8px; color: var(--brand); }
.inf-entry__title { margin: 0 0 1rem; font-family: var(--font-sans); font-weight: 300; font-size: 20.7px; line-height: 1.1; }
.inf-entry__title a { color: var(--brand); text-decoration: underline; text-underline-offset: .24em; text-decoration-thickness: 1px; }
.inf-entry__text { margin: 0; font-size: 14px; line-height: 1.65; color: var(--brand); }

/* ---------- Hours / price table ---------- */
.inf-table { width: 100%; border-collapse: collapse; font-size: 18px; line-height: 1.6; color: var(--brand); }
.inf-table td, .inf-table th { padding: 8px 10px; border-top: 1px solid var(--line); text-align: left; font-weight: 300; }
.inf-table tr:first-child td, .inf-table tr:first-child th { border-top: 0; background: var(--surface); }
.inf-table tr:not(:first-child) { background: var(--table-row); }
.inf-table tr:nth-child(2) td { border-top-color: transparent; }
.inf-table td:nth-child(2) { font-weight: 700; text-align: center; width: 20%; }
.inf-table td:last-child { text-align: right; width: 20%; }

/* ---------- Form fields ---------- */
.inf-field { display: flex; flex-direction: column; gap: 6px; }
.inf-field__label { font-size: 16px; font-weight: 700; letter-spacing: .2em; color: var(--brand); text-transform: uppercase; }
.inf-input {
  font-family: var(--font-sans); font-size: 16px; font-weight: 300; line-height: 1.5;
  padding: .9em .9em; color: var(--brand);
  background: transparent; border: var(--border-width) solid var(--brand); border-radius: var(--radius-none);
}
.inf-input::placeholder { color: var(--ink); opacity: 1; }
.inf-input:focus { outline: none; border-color: var(--brand-hover); background: var(--surface); }
.inf-input--underline { border-width: 0 0 var(--border-width) 0; padding: .6em 0; }
.inf-check { display: flex; align-items: center; font-size: 16px; font-weight: 300; color: var(--brand); cursor: pointer; }
.inf-check__box { position: relative; width: 23px; height: 23px; margin-right: 30px; border: 1px solid; border-radius: var(--radius-checkbox); flex: none; }
.inf-check__box--radio { border-radius: var(--radius-round); }
.inf-check__box.is-on::after { content: ''; position: absolute; left: 7px; top: 2px; width: 6px; height: 12px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.inf-check__box--radio.is-on::after { left: 50%; top: 50%; width: 13px; height: 13px; border: 0; border-radius: 50%; background: currentColor; transform: translate(-50%, -50%); }

/* ---------- Toggle accordion (circle +) ---------- */
.inf-toggle {
  position: relative; width: 62px; height: 62px; margin: auto;
  border: var(--border-width) solid var(--brand); border-radius: var(--radius-round);
  background: transparent; cursor: pointer; display: block;
}
.inf-toggle::before, .inf-toggle::after { content: ''; position: absolute; left: 50%; top: 50%; background: var(--brand); }
.inf-toggle::before { width: 20px; height: 1px; transform: translate(-50%, -50%); }
.inf-toggle::after { width: 1px; height: 20px; transform: translate(-50%, -50%); }
.inf-toggle:hover, .inf-toggle.is-hover { background: var(--brand); }
.inf-toggle:hover::before, .inf-toggle:hover::after, .inf-toggle.is-hover::before, .inf-toggle.is-hover::after { background: var(--on-brand); }
.inf-toggle.is-open::after { display: none; }

/* ---------- Divider ---------- */
.inf-divider { height: 1px; border: 0; background: var(--brand); margin: 0; }
.inf-divider--sm { width: 120px; margin: 0 auto; }

/* ---------- Footer ---------- */
.inf-footer { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; padding: 50px 20px; font-size: 15px; color: var(--brand); text-align: center; }
.inf-footer h4 { margin: 0 0 12px; font-family: var(--font-sans); font-weight: 700; font-size: 14px; letter-spacing: 2.8px; text-transform: uppercase; color: var(--footer-heading); }
.inf-footer a { color: var(--brand); text-decoration: none; }
.inf-footer a:hover { color: var(--brand-hover); }
.inf-footer p { margin: 0; line-height: 1.75; }
.inf-footer__legal { grid-column: 1 / -1; font-size: 12px; }

/* ---------- Capacity scale ---------- */
.inf-capacity { display: flex; width: 100%; }
.inf-capacity div { flex: 1; height: 20px; }
.inf-capacity__head { display: flex; padding-top: 10px; font-size: 14px; font-weight: 700; color: var(--brand); }
.inf-capacity__head span { width: 50%; }
.inf-capacity__head span:last-child { text-align: right; }