/* ==========================================================================
   1. Vlastní písmo
   ========================================================================== */

@font-face {
  font-display: swap;
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/dm-sans-v17-latin_latin-ext-300.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/dm-sans-v17-latin_latin-ext-regular.woff2') format('woff2'); 
}

@font-face {
  font-display: swap;
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/dm-sans-v17-latin_latin-ext-700.woff2') format('woff2'); 
}

@font-face {
  font-display: swap; 
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/archivo-v25-latin_latin-ext-300.woff2') format('woff2'); 
}

@font-face {
  font-display: swap; 
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/archivo-v25-latin_latin-ext-regular.woff2') format('woff2'); 
}

@font-face {
  font-display: swap;
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/archivo-v25-latin_latin-ext-700.woff2') format('woff2'); 
}

/* CLS - úprava šířky */
@font-face {
  font-family: 'Archivo Fallback';
  src: local(Arial);
  size-adjust: 110%;
  ascent-override: 88%;
  descent-override: 19%;
  line-gap-override: 6%;
}
@font-face {
  font-family: 'DM Sans Fallback';
  src: local(Arial);
  size-adjust: 129%;
  ascent-override: 97%;
  descent-override: 25%;
  line-gap-override: 3%;
}

/* ==========================================================================
   2. Globální tokeny
   ========================================================================== */

/* Pevné kopie palety pro prvky, které se v tmavém motivu nemají otočit.
   --tpl-text a --tpl-bg se v tmavém motivu prohazují. */

:root {
  --spl-tepla-cerna: #2b2924;
  --spl-tepla-bila: #fffaf0;
  --spl-svetla-olivova: #bcc49e;
  --spl-olivova-text: #67724f;   /* 4,9:1 na teplé bílé, 4,5:1 na krémové */
  --tpl-font-custom: "DM Sans", "DM Sans Fallback", system-ui, sans-serif;
  --spl-font-heading: "Archivo", "Archivo Fallback", var(--tpl-font-custom); /* pridana uprava sirky */
  --tpl-header-h: 84px;
}
:is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--spl-font-heading);
}

html {
  scrollbar-gutter: stable;
}

/* ==========================================================================
   3. Pruhy shora dolů
   ========================================================================== */

/* 3. Pruhy shora dolů — hlavička */

.tpl-page-head {
  --tpl-band-bg: var(--spl-tepla-cerna);
  --tpl-band-fg: var(--spl-tepla-bila);
  --tpl-band-link: var(--spl-tepla-bila);
  --tpl-band-link-hover: var(--spl-svetla-olivova);
  --tpl-head-border: none;   /* od 1.6.0; na starší verzi border-block-end: 0 */
  min-block-size: 84px;
}

.tpl-menu-bar .mod-menu {
  gap: clamp(var(--tpl-sp-2), 1.5vw, var(--tpl-sp-6));
}

/* Velikost písma menu */
.tpl-menu-bar .mod-menu > li > a {
  padding-inline: var(--tpl-sp-2);
  font-size: 1.1rem;
  font-weight: 400;
  text-decoration: none;
  border-block-end: 2px solid transparent; /* rezerva místa, ať hover/current nic neposune */
}

.tpl-menu-bar .mod-menu .current > a,
.tpl-menu-bar .mod-menu .active > a,
.tpl-menu-bar .mod-menu > li > a:hover,
.tpl-menu-bar .mod-menu > li > a:focus-visible {
  background: none;
  border-radius: 0;
  border-block-end-color: currentcolor;
  color: var(--spl-svetla-olivova);
}

/* Sociální sítě v pozici header-right */

.spl-social {
  display: flex;
  gap: var(--tpl-sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.spl-social__link {
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  color: var(--tpl-band-link);
  text-decoration: none;
  transition:
    background-color var(--tpl-transition),
    color var(--tpl-transition);
}

.spl-social__link:hover,
.spl-social__link:focus-visible {
  color: var(--spl-svetla-olivova);
}

.spl-social :is(.icon-facebook, .icon-instagram) {
  inline-size: 1.75rem;
  block-size: 1.75rem;
}

.icon-facebook {
  mask-image: url("../icons/facebook.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  background-color: currentcolor;
}

.icon-instagram {
  mask-image: url("../icons/instagram.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  background-color: currentcolor;
}
.tpl-nav-toggle {
  font-size: 1.0625rem;   /* řídí velikost textu "Menu" i ikony (ikona je 1em × 1em) */
  padding-block: var(--tpl-sp-2);
  padding-inline: var(--tpl-sp-4);
}
/* logo poměr stran */
.tpl-logo__img {
  aspect-ratio: 644 / 269;
}

/* Druhá instance ikon uvnitř vysouvacího panelu — na desktopu skrytá */
.spl-social--panel {
  display: none;
}

/* Záhlaví - titulky stránek */


.tpl-page-title {
  --tpl-band-fg: var(--spl-tepla-bila);
  --tpl-band-link: var(--spl-tepla-bila);

  position: relative;
  display: flex;
  align-items: flex-end;
  min-block-size: clamp(12rem, 25vw, 20rem);
  overflow: hidden;
  background-color: var(--spl-tepla-cerna);
  background-image:
    linear-gradient(
      to top,
      color-mix(in srgb, var(--spl-tepla-cerna) 90%, transparent) 0%,
      color-mix(in srgb, var(--spl-tepla-cerna) 35%, transparent) 60%,
      transparent 100%
    ),
    var(--spl-title-image, none);
  background-size: cover;
  background-position: center;
}

.tpl-page-title .tpl-container {
  padding-block-end: var(--tpl-sp-6);
}

.tpl-page-title__heading {
  margin-block-end: 0;
}

/* 3b. Odlišení záhlaví jednotlivých stránek */

body.aktualne .tpl-page-title {
  --spl-title-image: url("../../../../../images/layout/title-aktualne.jpg");
}

body.rezervace .tpl-page-title {
  --spl-title-image: url("../../../../../images/layout/title-rezervace.jpg");
}

body.kontakt .tpl-page-title {
  --spl-title-image: url("../../../../../images/layout/title-kontakt.jpg");
}

body.nabidka .tpl-page-title {
  --spl-title-image: url("../../../../../images/layout/title-nabidka.jpg");
}

/* ==========================================================================
   4. Postranní sloupce a moduly
   ========================================================================== */

/* .tpl-sidebar-right {} */
/* .tpl-module--card {} */

/* ==========================================================================
   5. Obsah
   ========================================================================== */

/* 5b. Sekce úvodní stránky — uvolnění obalů */

body.uvod .tpl-container:has(> .tpl-content-grid) {
  inline-size: 100%;
  max-inline-size: none;
  margin: 0;
  padding: 0;
}

body.uvod .tpl-content-grid {
  display: block;
}

body.uvod .tpl-content-grid,
body.uvod .tpl-main-body,
body.uvod .com-content-article,
body.uvod .com-content-article__body {
  inline-size: 100%;
  max-inline-size: none;
  margin: 0;
  padding: 0;
  float: none;
}

body.uvod .tpl-main-body {
  --tpl-measure: none;
}

body.uvod .tpl-sidebar,
body.uvod .tpl-page-title,
body.uvod .tpl-breadcrumbs {
  display: none;
}

body.uvod #system-message-container {
  max-inline-size: var(--ff-section-w);
  margin: 0 auto;
  padding-inline: var(--tpl-gutter);
}

/* 5b. Sekce úvodní stránky — základní systém sekcí */

.ff-section {
  --ff-bg: transparent;
  --ff-fg: var(--tpl-text);
  --ff-y: clamp(var(--tpl-sp-12), 6vw, var(--tpl-sp-20));

  padding-block: var(--ff-y);
  background: var(--ff-bg);
  color: var(--ff-fg);
}

.ff-section__inner {
  max-inline-size: var(--ff-section-w);
  margin-inline: auto;
  padding-inline: var(--tpl-gutter);
}

.ff-section--tint {
  --ff-bg: var(--tpl-tertiary);
}

.ff-section--dark {
  --ff-bg: var(--tpl-text);
  --ff-fg: var(--spl-tepla-bila);
}

.com-content-article__body p:has(+ .moduletable),
.com-content-article__body .moduletable + p {
  margin: 0;
}

/* 5b. Sekce úvodní stránky — A1: hero */

body.uvod {
  overflow-x: clip;
}

.ff-hero-splash {
  position: relative;
  inline-size: 100%;
  margin-inline: 0;
}

.ff-hero-splash img {
  display: block;
  inline-size: 100%;
  block-size: clamp(22rem, 55vw, 36rem);
  object-fit: cover;
}

.ff-hero-splash__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--spl-tepla-cerna) 82%, transparent) 0%,
    color-mix(in srgb, var(--spl-tepla-cerna) 35%, transparent) 45%,
    transparent 75%
  );
}

.ff-hero-splash__inner {
  inline-size: min(100% - 2 * var(--tpl-gutter), var(--tpl-container-w));
  padding-inline: 0;
  padding-block-end: var(--tpl-sp-10);
  margin-inline: auto;
  color: var(--spl-tepla-bila);
}

.ff-hero-splash__eyebrow {
  margin-block: 0 var(--tpl-sp-2);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ff-hero-splash__title {
  margin-block: 0;
  color: var(--spl-tepla-bila);
  font-size: clamp(2rem, 1.4rem + 3vw, 3.5rem);
  line-height: 1.05;
}
/* 5b. Sekce úvodní stránky — A2: o nás + menu odkazy */

.ff-intro .ff-section__inner {
  inline-size: min(100% - 2 * var(--tpl-gutter), var(--tpl-container-w));
  max-inline-size: none;
  padding-inline: 0;
  margin-inline: auto;
}

.ff-intro__grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--tpl-sp-12);
  align-items: start;
}

.ff-intro__title {
  margin-block: 0 var(--tpl-sp-4);
  font-size: var(--tpl-h2);
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.25rem);
}

.ff-intro .ff-section__lead {
  font-size: 1.1875rem;
}

.ff-menu-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--tpl-border);
}

.ff-menu-list li {
  border-block-end: 1px solid var(--tpl-border);
}

.ff-menu-list__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tpl-sp-4);
  padding-block: var(--tpl-sp-5);
  color: var(--tpl-text);
  font-family: var(--spl-font-heading);
  font-size: 1.125rem;
  font-weight: 500;
  text-decoration: none;
}

.ff-menu-list__arrow {
  flex-shrink: 0;
  inline-size: 1.125em;
  block-size: 1.125em;
  transform: rotate(-45deg);
  transition: transform var(--tpl-transition);
}

.ff-menu-list__link:hover .ff-menu-list__arrow,
.ff-menu-list__link:focus-visible .ff-menu-list__arrow {
  transform: rotate(-45deg) translate(0.15em, -0.15em);
}

.ff-intro__actions {
  display: flex;
  justify-content: center;
  gap: var(--tpl-sp-4);
  margin-block-start: var(--tpl-sp-10);
}
.ff-intro__actions .btn {
  border-radius: 0;
}
.ff-intro__actions .btn-primary {
  --bs-btn-bg: var(--spl-olivova-text);
  --bs-btn-border-color: var(--spl-olivova-text);
  --bs-btn-hover-bg: color-mix(in srgb, var(--spl-olivova-text) 85%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--spl-olivova-text) 85%, black);
}

.ff-intro__actions .btn-outline-primary {
  --bs-btn-color: var(--spl-olivova-text);
  --bs-btn-border-color: var(--spl-olivova-text);
  --bs-btn-hover-bg: var(--spl-olivova-text);
  --bs-btn-hover-color: var(--spl-tepla-bila);
}

/* 5b. Sekce úvodní stránky — A3: Aktuálně z bistra */


.spl-latest {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--tpl-sp-12);
  align-items: start;
}

.spl-latest--page {
  display: flex;
  justify-content: center;
}

.spl-latest--page .spl-latest__body {
  flex: 0 1 60ch;
}

.ff-latest .ff-section__inner {
  inline-size: min(100% - 2 * var(--tpl-gutter), var(--tpl-container-w));
  max-inline-size: none;
  padding-inline: 0;
  margin-inline: auto;
}

.spl-latest__eyebrow {
  margin-block: 0 var(--tpl-sp-3);
  color: var(--spl-svetla-olivova);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.spl-latest__title {
  margin-block: 0;
  font-size: var(--tpl-h2);
}

.spl-latest__accent {
  display: block;
  inline-size: 3rem;
  block-size: 2px;
  margin-block: var(--tpl-sp-5);
  background: var(--spl-svetla-olivova);
}

.spl-latest__lead {
  margin-block: 0;
  max-inline-size: 26rem;
  opacity: 0.85;
}

.spl-latest__list {
  border-block-start: 1px solid color-mix(in srgb, #fff 20%, transparent);
}

.spl-latest__item {
  display: flex;
  align-items: center;
  gap: var(--tpl-sp-6);
  padding-block: var(--tpl-sp-6);
  border-block-end: 1px solid color-mix(in srgb, #fff 20%, transparent);
}

.spl-latest__date {
  flex: 0 0 auto;
  inline-size: 3.5rem;
}

.spl-latest__day {
  display: block;
  font-family: var(--spl-font-heading);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}

.spl-latest__month {
  display: block;
  margin-block-start: var(--tpl-sp-1);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: capitalize;
  opacity: 0.7;
}

.spl-latest__body {
  flex: 1 1 auto;
  min-inline-size: 0;
}

.spl-latest__item-title {
  margin-block: 0 var(--tpl-sp-2);
  font-size: 1.125rem;
}

.spl-latest__item-title a {
  color: inherit;
  text-decoration: none;
}

.spl-latest__excerpt {
  margin-block: 0 var(--tpl-sp-3);
  font-size: 0.9375rem;
  line-height: 1.5;
  opacity: 0.8;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.spl-latest__more {
  display: inline-flex;
  align-items: center;
  gap: var(--tpl-sp-2);
  color: var(--spl-svetla-olivova);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}

.spl-latest__arrow {
  inline-size: 1.125em;
  block-size: 1.125em;
  transform: rotate(-45deg);
}

.spl-latest__image {
  flex: 0 0 auto;
  inline-size: 6rem;
  block-size: 6rem;
  border-radius: 0;
  object-fit: cover;
}
.spl-latest--page .spl-latest__image {
  inline-size: 9rem;
  block-size: 9rem;
}

.spl-latest--page .spl-latest__list {
  border-block-start-color: var(--tpl-border);
}

.spl-latest--page .spl-latest__item {
  border-block-end-color: var(--tpl-border);
}

/* 5b. Sekce úvodní stránky — A3, sdílené se stránkou Aktuálně */

body.aktualne .ff-section__inner,
body.aktualne .spl-latest {
  max-inline-size: var(--tpl-container-w);
  margin-inline: auto;
  padding-inline: var(--tpl-gutter);
}

body.aktualne .spl-latest__more {
  color: var(--spl-olivova-text);
}

.spl-latest__pagination {
  margin-block-start: var(--tpl-sp-10);
}

/* Uprava widgetu */
.com-content-article__body iframe {
  position: relative;
  display: block;
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  block-size: auto;
  border: 0;
  border-radius: var(--tpl-radius-lg);
}

.com-content-article__body [id^="hors-hydra-"] iframe {
  aspect-ratio: unset;
  block-size: 550px;
}

/* Strop widgetu */
body.rezervace .com-content-article__body {
  max-inline-size: 40rem;
  margin-inline: auto;
}
/* Zoom widgetu */
body.rezervace [id^="hors-hydra-"] {
  zoom: 1.15;
}

/* 5. Obsah — stránka MENU (accordion) */

.spl-menu {
  border-block-start: 1px solid var(--tpl-border);
}

.spl-menu__panel {
  border-block-end: 1px solid var(--tpl-border);
}

.spl-menu__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tpl-sp-6);
  inline-size: 100%;
  padding-block: var(--tpl-sp-6);
  border: 0;
  background: none;
  text-align: start;
  cursor: pointer;
}

.spl-menu__toggle-text {
  display: flex;
  flex-direction: column;
  gap: var(--tpl-sp-1);
}

.spl-menu__title {
  font-family: var(--spl-font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--tpl-text);
}

.spl-menu__subtitle {
  font-size: 0.9375rem;
  color: var(--tpl-muted, var(--tpl-text));
  opacity: 0.75;
}

.spl-menu__icon {
  position: relative;
  flex-shrink: 0;
  inline-size: 1.5rem;
  block-size: 1.5rem;
}

.spl-menu__icon-plus,
.spl-menu__icon-minus {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  background-color: var(--spl-olivova-text);
}

.spl-menu__icon-minus { display: none; }

.spl-menu__toggle[aria-expanded="true"] .spl-menu__icon-plus  { display: none; }
.spl-menu__toggle[aria-expanded="true"] .spl-menu__icon-minus { display: block; }

.spl-menu__body {
  padding-block-end: var(--tpl-sp-8);
}

.spl-menu__group + .spl-menu__group {
  margin-block-start: var(--tpl-sp-8);
}

.spl-menu__group-title {
  margin-block: 0 var(--tpl-sp-4);
  font-family: var(--spl-font-heading);
  font-size: 1.125rem;
  color: var(--spl-olivova-text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.spl-menu__list {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: var(--tpl-sp-10);
}

.spl-menu__item {
  break-inside: avoid;
  margin-block-end: var(--tpl-sp-4);
}

.spl-menu__item-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--tpl-sp-4);
}

/* Nazev jidla */
.spl-menu__item-name {
  font-weight: 400;
  font-size: 1.5rem;
}

/* Cena jidla */
.spl-menu__item-price {
  flex-shrink: 0;
  font-weight: 400;
  color: var(--spl-olivova-text);
  white-space: nowrap;
    font-size: 1.5rem;
}

/* Popis jidla */
.spl-menu__item-desc {
  margin-block: var(--tpl-sp-1) 0;
  font-size: 1.1rem;
  line-height: 1.0;
  /* opacity: 0.75; */
}

/* NAPOJE */
#napoje .spl-menu__item-name {
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.0;
}

/* 5b. Sekce úvodní stránky, sdílené s Menu */

body.nabidka .ff-section__inner,
body.nabidka .spl-menu {
  max-inline-size: var(--tpl-container-w);
  margin-inline: auto;
  padding-inline: var(--tpl-gutter);
}

/* ==========================================================================
   6. Tmavý motiv
   ========================================================================== */

/* [data-bs-theme="dark"] {} */

/* ==========================================================================
   7. Mobil (pod 992 px)
   ========================================================================== */

/* 7. Mobil */

@media (max-width: 61.999em) {

  .tpl-page-head .tpl-nav-panel {
    background: var(--spl-tepla-cerna);
  }

  .tpl-page-head__inner {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--tpl-sp-3);
  }

  .tpl-head-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1 1 auto;
    min-inline-size: 0;
    gap: var(--tpl-sp-3);
  }

  .tpl-menu-bar {
    flex: 0 0 auto;
  }
  
  /* Ikony v horní liště na mobilu skrýt — přesouvají se do panelu */
  .tpl-head-aside .spl-social {
    display: none;
  }
  
  /* Ikony uvnitř panelu, pod poslední položkou menu */
  .spl-social--panel {
    display: flex;
    gap: var(--tpl-sp-4);
    margin-block-start: var(--tpl-sp-3);
    padding-block-start: var(--tpl-sp-6);
    border-block-start: 0;
  }

  /* Velikost ikon pod menu - na mobilu */
  .spl-social--panel :is(.icon-facebook, .icon-instagram) {
  inline-size: 2.25rem;
  block-size: 2.25rem;
  }

  /* Bez textu Menu u hamburgeru (vizuálně) — ale zůstává pro čtečky obrazovky */
.tpl-nav-toggle__label {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* padding hamburger */
.tpl-nav-toggle {
  padding-inline: var(--tpl-sp-6);
  padding-block: var(--tpl-sp-6);
}

  /* Velikost hamburgeru */
  .tpl-nav-toggle__bars {
  inline-size: 1em;
  transform: scale(1.33);
  }

  /* Hero sekce A1 */
  .ff-hero-splash img {
    block-size: clamp(24rem, 110vw, 34rem);
  }

  .ff-hero-splash__inner {
    padding-block-end: var(--tpl-sp-8);
  }

  /* Další sekce A2 */
  .ff-intro__grid {
    grid-template-columns: 1fr;
    gap: var(--tpl-sp-8);
  }

  .ff-intro__actions {
    flex-direction: column;
    align-items: center;
  }

  .ff-intro__actions .btn {
  inline-size: auto;
  }

  /* Aktuálně z bistra */
  .spl-latest {
    grid-template-columns: 1fr;
    gap: var(--tpl-sp-8);
  }

  .spl-latest__excerpt,
  .spl-latest__image {
    display: none;
  }

  .spl-latest__item {
    position: relative;
    align-items: center;
    padding-inline-end: var(--tpl-sp-8);
  }

  .spl-latest__item-title {
    margin-block-end: 0;
  }

 .spl-latest__more-label {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

  .spl-latest__more {
    position: absolute;
    inset-inline-end: 0;
    inset-block: 0;
    display: flex;
    align-items: center;
  }
  /* Menu - jen 1 sloupec */
  .spl-menu__list {
    columns: 1;
  }
  
}