@font-face {
  font-family: 'Alumni Sans';
  src: url('/assets/fonts/AlumniSans-Regular.woff2') format('woff2'),
       url('/assets/fonts/AlumniSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Alumni Sans';
  src: url('/assets/fonts/AlumniSans-Bold.woff2') format('woff2'),
       url('/assets/fonts/AlumniSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mirdaine';
  src: /*url('./mirdane-style/WOFF/Mirdane-Regular.woff') format('woff'),
       url('./mirdane-style/TTF/Mirdane-Regular.ttf') format('truetype'),*/
       /*url('./mirdane-style/OTF/Mirdane-Regular.otf') format('opentype'),*/
       url('./mirdane-style/OTF/Mirdane.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Mirdaine';
  src: /*url('./mirdane-style/WOFF/Mirdane-Regular.woff') format('woff'),*/
       url('./mirdane-style/WOFF/Mirdane_OTF.woff2') format('woff2'),
       url('./mirdane-style/WOFF/Mirdane_TTF.woff2') format('woff2');
  font-weight: 700;        /* tahle váha se použije pro font-weight: bold */
  font-style: normal;
}

/* Design tokens (merged) */
:root{
  --max-width:1200px;
  --gap:16px;
  --color-bg:#070707;
  --color-surface:#0f0f10;
  --color-muted:#9aa0a6;
  --color-text:#efefef;
  --radius:12px;
  --container-padding:24px;

  /* DL tokens */
  --dl-color-default-red: rgba(245, 31, 60, 1);
  --dl-layout-size-large: 144px;
  --dl-layout-size-small: 48px;
  --dl-layout-space-unit: 16px;
  --dl-color-default-grey: rgba(34, 40, 49, 1);
  --dl-layout-size-medium: 96px;
  --dl-layout-size-xlarge: 192px;
  --dl-layout-size-xsmall: 16px;
  --dl-color-default-black: rgba(0, 0, 0, 1);
  --dl-color-default-white: rgba(255, 255, 255, 1);
  --dl-color-theme-accent1: #FFFFFF;
  --dl-color-theme-accent2: #F5D1B0;
  --dl-layout-radius-round: 50%;
  --dl-layout-size-xxlarge: 288px;
  --dl-color-default-black2: rgba(9, 10, 12, 1);
  --dl-color-theme-primary1: #BF4408;
  --dl-color-theme-primary2: #E65103;
  --dl-layout-size-maxwidth: 1400px;
  --dl-color-default-darkred: rgba(171, 22, 42, 1);
  --dl-color-default-midgrey: rgba(57, 62, 70, 1);
  --dl-layout-radius-radius2: 2px;
  --dl-layout-radius-radius4: 4px;
  --dl-layout-radius-radius8: 8px;
  --dl-layout-space-halfunit: 8px;
  --dl-layout-space-sixunits: 96px;
  --dl-layout-space-twounits: 32px;
  --dl-color-theme-secondary1: #FFFFFF;
  --dl-color-theme-secondary2: #FBF1EB;
  --dl-layout-space-fiveunits: 80px;
  --dl-layout-space-fourunits: 64px;
  --dl-color-default-darkbeige: rgba(148, 137, 121, 1);
  --dl-color-default-lightgrey: rgba(85, 94, 106, 1);
  --dl-layout-space-threeunits: 48px;
  --dl-color-default-lightbeige: rgba(223, 208, 184, 1);
  --dl-color-theme-neutral-dark: #191818;
  --dl-layout-radius-cardradius: 8px;
  --dl-color-default-caldarkgrey: rgba(16, 18, 22, 1);
  --dl-color-default-lightyellow: rgba(250, 235, 146, 1);
  --dl-color-theme-neutral-light: #000000;
  --dl-layout-radius-imageradius: 8px;
  --dl-layout-radius-inputradius: 24px;
  --dl-layout-radius-buttonradius: 24px;
  --dl-layout-space-oneandhalfunits: 24px;
  --dl-color-default-calmidgreystroke: rgba(28, 31, 38, 1);

  /* ESCAPERS button colors */
  --esc-btn-text: #C8B28A;
  --esc-btn-hover: #C30000;
  --esc-btn-shadow: rgba(0, 0, 0, 0.15);
}

/* ==================== TYPOGRAPHIC CLASSES ==================== */

/* BODY TEXT STYLES */
.esc-body-text{
  font-family: "Alumni Sans", sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--dl-color-default-midgrey);
  text-decoration: none;
}

.esc-body-text-light{
  font-family: "Alumni Sans", sans-serif;
  font-size: 24px;
  font-weight: 300;
  line-height: 1.1;
  color: var(--dl-color-default-midgrey);
  text-decoration: none;
}

.esc-body-text-large{
  font-family: "Alumni Sans", sans-serif;
  font-size: 32px;
  font-weight: 300;
  line-height: 1.1;
  color: var(--dl-color-default-midgrey);
  text-decoration: none;
}

.esc-body-text-white{
  font-family: "Alumni Sans", sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.1;
  color: #FFFFFF;
  text-decoration: none;
}

.esc-body-text-white-large{
  font-family: "Alumni Sans", sans-serif;
  font-size: 32px;
  font-weight: 300;
  line-height: 1.1;
  color: #FFFFFF;
  text-decoration: none;
}

/* DISPLAY HEADING STYLES */
.esc-heading-hero{
  font-family: 'Mirdaine', serif;
  font-size: clamp(96px, 18vw, 220px);
  font-weight: 400;
  line-height: 1.0;
  color: var(--dl-color-default-lightbeige);
  text-align: center;
  letter-spacing: 0.04em;
  margin: 0;
}

.esc-heading-hero-small{
  font-family: 'Mirdaine', serif;
  font-size: 96px;
  font-weight: 400;
  line-height: 1.05;
  color: #FFFFFF;
  text-align: center;
  letter-spacing: 0.04em;
  margin: 0;
}

.esc-heading-section{
  font-family: 'Mirdaine', serif;
  font-size: clamp(48px, 8vw, 65px);
  font-weight: 400;
  line-height: 1.1;
  color: var(--dl-color-default-lightbeige);
  text-align: center;
  letter-spacing: 0.04em;
  margin: 0 0 24px 0;
}

.esc-heading-section-dark{
  font-family: 'Mirdaine', serif;
  font-size: clamp(48px, 8vw, 65px);
  font-weight: 400;
  line-height: 1.1;
  color: var(--dl-color-default-darkbeige);
  text-align: center;
  letter-spacing: 0.04em;
  margin: 0 0 24px 0;
}

/* SECTION TITLE & CTA STYLES */
.esc-heading-cta{
  font-family: 'Mirdaine', serif;
  font-size: 48px;
  font-weight: 400;
  line-height: 1.0;
  color: var(--dl-color-default-darkbeige);
  text-align: center;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 0.35s ease;
  margin: 0;
  text-decoration: none;
}

.esc-heading-cta:hover{
  color: var(--dl-color-default-red);
}

/* SUBTITLE STYLES */
.esc-subtitle{
  font-family: "Alumni Sans", sans-serif;
  font-size: 32px;
  font-weight: 300;
  line-height: 1.1;
  color: var(--dl-color-default-midgrey);
  text-decoration: none;
  margin: 0;
}

.esc-subtitle-white{
  font-family: "Alumni Sans", sans-serif;
  font-size: 32px;
  font-weight: 300;
  line-height: 1.1;
  color: #FFFFFF;
  text-decoration: none;
  margin: 0;
}

.esc-subtitle-small{
  font-family: "Alumni Sans", sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--dl-color-default-midgrey);
  text-decoration: none;
  margin: 0;
}

.esc-subtitle-small-white{
  font-family: "Alumni Sans", sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.1;
  color: #FFFFFF;
  text-decoration: none;
  margin: 0;
}

/* LABEL STYLES */
.esc-label{
  font-family: "Alumni Sans", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.0;
  color: #FFFFFF;
  text-align: center;
  text-decoration: none;
  margin: 0;
}

/* Base reset and layout */
*{box-sizing:border-box}
html,body{height:100%;}
body{
  margin:0;
  font-family: "Alumni Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:var(--color-bg);
  color:var(--color-text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.1;
}
img{display:block;max-width:100%;height:auto}
.container{width:100%;max-width:var(--max-width);margin:0 auto;padding:0 var(--container-padding)}

/* HEADINGS - Global */
.title, h2, h3, h4, h5, h6{
  font-family: 'Mirdaine', serif;
}
/* UNIVERSAL SVG UNDERLINE — for all section titles except hero */
.esc-underline {
  position: relative;
  display: inline-block;
  padding-bottom: 14px;
}

.esc-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;

  width: 100%;
  height: 6px;

  background-image: url("public/line18223-wp5.svg");
  /*background-size: 100% 100%;
  background-repeat: no-repeat;*/
  background-position: left center;
}

/* NAVBAR */
.navbar{position:sticky;top:0;z-index:60;background:linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.25));backdrop-filter: blur(4px);width: 100%;margin: 0 auto;}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.logo{font-weight:800;letter-spacing:2px;font-size:20px;text-transform:uppercase;height:50px;width:auto;display:flex;align-items:center}
.nav-links{display:flex;gap:20px;align-items:center}
.nav-links a{color:var(--color-text);text-decoration:none;font-weight:600;padding:8px 10px;border-radius:8px;transition:all .18s ease;font-size:24px}
.nav-links a:hover{background:rgba(255,255,255,0.03);transform:translateY(1px)}
.burger{display:none;background:transparent;border:0;color:var(--color-text);font-size:22px;padding:6px 10px}

/* HERO - keep pixel-accurate centerpiece but responsive */
.hero {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.36);
  transform-origin: center;
}

.hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 64px 12px;
}

.hero-content .title {
  font-family: 'Mirdaine', serif;
  font-size: clamp(48px, 12vw, 220px);
  line-height: 1.0;
  margin: 0;
  color: var(--dl-color-default-lightbeige);
  letter-spacing: clamp(-0.03em, 0.2vw, 0.01em);
  text-align: center;
  text-transform: uppercase;
}

/* základní text v hero (ale ne podtitulek) */
.hero-content p:not(.hero-subtitle) {
  margin-top: 8px;
  color: var(--color-muted);
  font-weight: 300;
  font-size: clamp(14px, 2.2vw, 20px);
}

/* Hero Subtitle - matches original .desktop1920-mainpage-text11 */
.hero-subtitle {
  font-family: "Alumni Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
  font-size: clamp(18px, 6vw, 96px);
  line-height: 1.0;
  color: var(--dl-color-default-white);
  text-align: center;
  margin: 0;
  text-decoration: none;
  margin-top: 16px;
}

.btn-primary {
  margin-top: 20px;
  background: transparent;
  color: var(--dl-color-theme-secondary1);
  border: 1px solid var(--dl-color-theme-primary2);
  padding: 10px 14px;
  border-radius: var(--dl-layout-radius-radius4);
  font-weight: 800;
  cursor: pointer;
  font-family: "STIX Two Text";
  text-decoration: none;
  display: inline-block;
  font-size: clamp(18px, 2.6vw, 24px);
  transition: color .12s ease, background .12s ease, border-color .12s ease;
}

.scroll-indicator {
  margin-top: 18px;
  font-size: 20px;
  color: var(--color-muted);
  opacity: .9;
}

/* ESCAPERS Primary Button Style */
.esc-btn-primary{
  font-family: 'Mirdaine', serif;
  color: var(--esc-btn-text);
  background: transparent;
  border: none;
  padding: 48px 24px;
  font-size: 48px;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.75px;
  cursor: pointer;
  box-shadow: 0px 4px 0px var(--esc-btn-shadow);
  transition: transform 0.35s ease, box-shadow 0.35s ease, color 0.35s ease;
  display: inline-block;
  text-decoration: none;
  outline: none;
}

.esc-btn-primary:hover,
.esc-btn-primary:focus{
  color: var(--esc-btn-hover);
  transform: translateY(3px);
  box-shadow: 0px 2px 0px var(--esc-btn-shadow);
}

.esc-btn-primary:active{
  transform: translateY(4px);
  box-shadow: 0px 1px 0px var(--esc-btn-shadow);
}

/* Section common */
.section{padding:48px 0}
.section.dark{background:var(--color-surface)}
.section.light{background:transparent;color:#f7f7f7}
.section h2{font-family: 'Mirdaine', serif;font-size:clamp(48px, 8vw, 65px);margin:0 0 24px;font-weight:400;text-transform:uppercase;text-align:center;letter-spacing:0.04em;color:var(--dl-color-default-lightbeige);line-height:1.1}

/* NEWS GRID */
.news-grid{display:grid;grid-template-columns:repeat(1,1fr);gap:18px}
.news-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:14px;border-radius:12px;display:flex;flex-direction:column;gap:12px}
.news-card img{border-radius:8px;object-fit:cover;height:200px;width:100%}
.news-card p{color:var(--color-muted);flex:1;font-family: "Alumni Sans", sans-serif;font-size:24px;font-weight:400;line-height:1.1}
.btn-secondary{background:transparent;border:1px solid var(--dl-color-theme-primary2);color:var(--dl-color-theme-secondary1);padding:10px 14px;border-radius:var(--dl-layout-radius-radius4);cursor:pointer;align-self:start;font-family: "STIX Two Text";font-weight:800;text-decoration:none;display:inline-block;font-size:clamp(18px,2.2vw,22px);transition:color .12s ease,background .12s ease,border-color .12s ease}

/* Animated overlay: expand from left on hover */
.btn-primary,.btn-secondary{
  position:relative;
  overflow:hidden;
  z-index:1;
  padding:10px 16px;
}
.btn-primary::before,.btn-secondary::before{
  content: "";
  position:absolute;
  top:0;
  left:-20%;
  width:200%;
  height:101%;
  background-color:var(--dl-color-theme-neutral-dark);
  border-radius:var(--dl-layout-radius-buttonradius);
  transform:scaleX(0);
  transform-origin:0 0;
  transition:transform 0.45s cubic-bezier(0.5, 1.6, 0.4, 0.7);
  z-index:1;
}
.btn-primary:hover::before,.btn-secondary:hover::before{
  transform:scaleX(1);
  z-index:-1;
}
.btn-primary:hover,.btn-secondary:hover{
  color:var(--dl-color-theme-secondary2);
  border-color:var(--dl-color-theme-primary2);
}

/* Provide DL thq button variants for reuse */
.thq-button-animated{outline:none;z-index:1;overflow:hidden;position:relative;border-width:2px}
.thq-button-filled{gap:var(--dl-layout-space-halfunit);fill:var(--dl-color-theme-secondary1);color:var(--dl-color-theme-secondary1);cursor:pointer;display:inline-flex;transition:0.3s;align-items:center;font-weight:800;padding:8px 20px;white-space:nowrap;border-color:var(--dl-color-theme-primary1);border-width:1px;border-radius:var(--dl-layout-radius-buttonradius);justify-content:center;background-color:var(--dl-color-theme-primary1)}
.thq-button-filled:hover{color:var(--dl-color-theme-secondary2);border-color:var(--dl-color-theme-primary2);background-color:var(--dl-color-theme-primary2)}
.thq-button-outline{gap:var(--dl-layout-space-halfunit);fill:var(--dl-color-theme-primary1);color:var(--dl-color-theme-primary1);border:1px solid;cursor:pointer;display:inline-flex;transition:0.3s;align-items:center;font-weight:800;padding:8px 20px;white-space:nowrap;border-color:var(--dl-color-theme-primary1);border-radius:var(--dl-layout-radius-buttonradius);justify-content:center}
.thq-button-outline:hover{color:var(--dl-color-theme-secondary2);border-color:var(--dl-color-theme-primary2);background-color:var(--dl-color-theme-primary2)}


.novinkyescapers-heading {
  font-family: 'Mirdaine', serif;
  font-weight: 400;
  font-size: clamp(32px, 5vw, 87px);
  line-height: 1.1;
  color: var(--dl-color-default-lightbeige);
  text-align: center;
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* ==================== NAŠE HRY SECTION ==================== */

.games-section {
  padding: var(--dl-layout-space-threeunits) 32px; /* ← TADY přidáno 32px od okrajů */
  width: var(--dl-layout-size-maxwidth);
  max-width: 100%;
  margin: 0;
  background: transparent;
  color: var(--dl-color-default-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
}

.games-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--dl-layout-space-twounits);

  /* NOVÉ – zajistí, že cards budou přes celou šířku */
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
}


/* Section heading "Naše hry" */
.games-heading {
  font-family: 'Mirdaine', serif;
  font-weight: 400;
  font-size: clamp(32px, 5vw, 87px);
  line-height: 1.1;
  color: var(--dl-color-default-lightbeige);
  margin: 0 0 4px 0;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Divider */
.games-divider {
  width: 120px;
  height: 2px;
  background: var(--dl-color-default-lightbeige);
  margin: 4px 0 12px 0;
}

/* Cards stacked vertically + wider */
.games-grid {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--dl-layout-space-twounits);
}

/* Individual game card */
.game-card {
  width: 100%;          /* FULL width of container */
  /*max-width: 1600px;    /* very wide cards, similar to original */
  margin: 0 auto;       /* center horizontally */

  position: relative;
  overflow: hidden;
  border-radius: var(--dl-layout-radius-cardradius);

  /* dříve: clamp(220px, 40vw, 360px) - zvýšíme šířku, snížíme výšku */
  min-height: clamp(220px, 32vw, 340px); /* širší vizuál, nižší cards */

  display: flex;
  align-items: flex-end;
  background: var(--dl-color-default-black2);
  border: 1px solid var(--Mid-Grey, #393E46);
  transition: box-shadow 0.35s ease;
}

.game-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* Image layer */
.game-card-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.game-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.55);
  transition: filter 0.35s ease;
}

.game-card:hover .game-card-image {
  filter: brightness(0.45);
}

/* Text overlay */
.game-card-content {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: var(--dl-layout-space-twounits);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: var(--dl-layout-space-twounits);
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.4) 40%,
    rgba(0, 0, 0, 0) 100%
  );
}

/* Game title */
.game-card-title {
  font-family: 'Mirdaine', serif;
  font-weight: 400;
  font-size: clamp(24px, 3.2vw, 56px);
  line-height: 1.1;
  color: var(--dl-color-default-lightbeige);
  margin: 0 0 12px 0;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  position: relative;
  display: block;
  width: fit-content;
  flex: 1 1 auto;
}

/* Left column text wrapper */
.game-card-text {
  display: flex;
  flex-direction: column;
  gap: var(--dl-layout-space-unit);
  flex: 1 1 auto;
}

/* SVG podtržení pod nadpisem */
.game-card-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 100%;
  height: 6px;
  background-image: url("public/line18223-wp5.svg");
  /*background-size: 100% 100%;
  background-repeat: no-repeat;*/
  background-position: left center;
}


/* Game description */
.game-card-description {
  font-family: "Alumni Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
  font-size: clamp(18px, 2.4vw, 32px);
  line-height: 1.1;
  color: var(--dl-color-default-white);
  margin: 8px 0 0 0;
  text-align: left;
}

/* Metadata */
.game-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-family: "Alumni Sans", sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: var(--dl-color-default-lightgrey);
  margin-top: 8px;
}

.game-meta-item::before {
  content: "•";
  margin-right: 4px;
}

/* CTA button */
.game-card-cta {
  text-decoration: none;
  flex-shrink: 0;
  white-space: nowrap;
  font-size: clamp(32px, 5vw, 64px);
  padding: clamp(12px, 3vw, 24px) clamp(24px, 6vw, 48px);
}

@media (max-width: 768px) {
  .game-card-content {
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-end;
  }
}

/* Responsive */
@media (max-width: 700px) {
  /* zmenšíme boční mezery z 32px na 16px */
  .games-section {
    padding-left: 16px;
    padding-right: 16px;
  }

  .games-heading {
    font-size: clamp(28px, 5vw, 56px);
  }

  .game-card {
    min-height: clamp(240px, 55vw, 400px);
  }

  .game-card-content {
    padding: var(--dl-layout-space-oneandhalfunits);
  }

  .game-card-title {
    font-size: clamp(20px, 2.8vw, 32px);
  }

  .game-card-description {
    font-size: clamp(16px, 2.2vw, 22px);
  }
}

/* ABOUT - two column */
.two-col{display:flex;flex-direction:column;gap:18px;align-items:center}
.two-col .about-img{max-width:420px;border-radius:12px}
.two-col p{color:var(--color-muted);font-family: "Alumni Sans", sans-serif;font-size:24px;font-weight:400;line-height:1.1}
.two-col ul{margin-top:10px;color:var(--color-muted);list-style:disc;margin-left:18px;font-family: "Alumni Sans", sans-serif;font-size:24px;font-weight:400;line-height:1.1}

/* CO JE TO ESCAPERS SECTION */
.esc-about {
  padding: var(--dl-layout-space-threeunits) var(--container-padding);
  max-width: var(--dl-layout-size-maxwidth);
  margin: 0 auto;
  background: transparent;
  color: var(--dl-color-default-white); /* základní barva textu sekce */
}

.esc-about-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dl-layout-space-twounits);
  align-items: center;
  justify-content: space-between;
}

.esc-about-text {
  flex: 1 1 50%;
  min-width: 280px;
}

.esc-about-media {
  flex: 1 1 40%;
  min-width: 260px;
  display: flex;
  justify-content: center;
}

.esc-about-heading { font-family: 'Mirdaine', serif; font-weight: 400; /* původ cca 50px → responsivně: */ font-size: clamp(32px, 4vw, 50px); line-height: 1.1; color: var(--dl-color-default-lightbeige); margin: 0 0 16px 0; text-align: left; /* na původním webu není full uppercase ani extra tracking, tak pryč: */ text-transform: none; letter-spacing: 0; }

.esc-about-body {
  font-family: "Alumni Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
  /* původní dojem ~32px → responsivně: */
  font-size: clamp(20px, 2.4vw, 32px);
  line-height: 1.2;
  color: var(--dl-color-default-white);
  margin: 0 0 16px 0;
  text-align: left;
}

.esc-about-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: "Alumni Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
  font-size: clamp(20px, 2.4vw, 32px);
  line-height: 1.2;
  color: var(--dl-color-default-white);
}

.esc-about-list li {
  margin-bottom: 8px;
}

.esc-about-list li::before {
  content: "•";
  display: inline-block;
  margin-right: 8px;
}

.esc-about-image {
  max-width: 100%;
  height: auto;
  border-radius: var(--dl-layout-radius-imageradius);
  display: block;
}

/* Co je to Escapers responsive */
@media (max-width: 900px) {
  .esc-about-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .esc-about-heading,
  .esc-about-body,
  .esc-about-list {
    text-align: left;
  }

  .esc-about-media {
    width: 100%;
    justify-content: center;
    margin-top: var(--dl-layout-space-twounits);
  }
}


/* CONTACT */
.esc-contact-section{
  width: 100%;
  background-color: var(--color-bg);
  padding: 48px 0;
  color: var(--dl-color-default-white);
  margin: 0 auto;
}

.esc-contact-inner{
  max-width: 90%;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 32px;
}

.esc-contact-map{
  flex: 1 1 60%;
  border-radius: 16px;
  overflow: hidden;
  min-height: 300px;
  order: 2;
}

.esc-contact-map img,
.esc-contact-map iframe{
  width: 100%;
  height: 100%;
  display: block;
  border: none;
}

.esc-contact-panel{
  flex: 1 1 40%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 24px;
  color: var(--dl-color-default-white);
  text-align: left;
  order: 1;
}

.esc-contact-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.esc-contact-column{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.esc-contact-item{
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.esc-contact-inline-icon{
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: block;
}

.esc-contact-text-block{
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.esc-contact-title{
  font-family: 'Mirdaine', serif;
  font-size: 48px;
  font-weight: 400;
  color: var(--dl-color-default-lightbeige);
  line-height: 1.1;
  margin: 0 0 16px 0;
  letter-spacing: 0.04em;
}

.esc-contact-info{
  display: none;
}

.esc-contact-label{
  font-family: "Alumni Sans", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--dl-color-default-white);
  line-height: 1.0;
  margin: 0;
}

.esc-contact-text{
  font-family: "Alumni Sans", sans-serif;
  font-size: 24px;
  font-weight: 300;
  line-height: 1.1;
  color: var(--dl-color-default-white);
  margin: 0;
}

.esc-contact-icons{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 32px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.esc-contact-icon-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.35s ease, fill 0.35s ease, transform 0.35s ease;
}

.esc-contact-icon-link:hover{
  transform: translateY(-2px);
}

.esc-contact-icon{
  width: 24px;
  height: 24px;
  color: var(--dl-color-default-white);
  fill: var(--dl-color-default-white);
  transition: color 0.35s ease, fill 0.35s ease;
}

.esc-contact-icon-link:hover .esc-contact-icon{
  color: var(--dl-color-default-red);
  fill: var(--dl-color-default-red);
}

/* Contact responsive */
@media (max-width: 900px){
  .esc-contact-inner{
    flex-direction: column;
    gap: 24px;
  }

  .esc-contact-map{
    flex: 1 1 100%;
    min-height: 250px;
  }

  .esc-contact-panel{
    flex: 1 1 100%;
    /* title může být uprostřed, ale samotné údaje zarovnáme doleva */
    text-align: left;
    align-items: center;
  }

  .esc-contact-title{
    text-align: center;
    margin-bottom: 24px;
  }

  .esc-contact-grid{
    grid-template-columns: 1fr;
    justify-items: center;  /* bloky budou uprostřed, obsah v nich vlevo */
  }

  .esc-contact-item{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;  /* už ne center */
    gap: 8px;                     /* menší mezera mezi ikonou a textem */
    max-width: 320px;             /* aby řádek nebyl natažený přes celou šířku */
    width: 100%;
  }

  .esc-contact-inline-icon{
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;              /* opticky zarovná s prvním řádkem textu */
  }

  .esc-contact-text-block{
    flex: 1;
  }

  .esc-contact-icons{
    justify-content: center;
  }
}
/* FOOTER */
.esc-footer {
  width: 100%;
  /* dříve: background-color: var(--dl-color-default-black2); */
  background-color: transparent;   /* background řeší wrapper */
  padding: 64px 0 24px;            /* jen vertikálně */
  margin-top: 12px;
  color: var(--dl-color-default-white);
}

.esc-footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;

  /* dříve: max-width: 1200px; padding: 0 24px; */
  max-width: 100%;
  margin: 0 auto;
  padding: 0;                      /* horizontální padding dělá wrapper */
}

.esc-footer-column{
  flex: 1;
  display: flex;
  flex-direction: column;
}

.esc-footer-column-brand{
  align-items: flex-start;
  text-align: left;
  display: none;
}

.esc-footer-column-links{
  align-items: center;
  text-align: center;
  flex-direction: row;
  gap: 12px;
  width: 100%;
  justify-content: center;
}

.esc-footer-column-contact{
  align-items: flex-start;
  text-align: left;
  display: none;
}

.esc-footer-heading{
  font-family: "Alumni Sans", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--dl-color-default-white);
  margin: 0 0 16px 0;
  text-align: left;
  line-height: 1.0;
  display: none;
}

.esc-footer-text{
  font-family: "Alumni Sans", sans-serif;
  font-size: 24px;
  font-weight: 300;
  color: var(--dl-color-default-white);
  line-height: 1.2;
  margin: 0 0 12px 0;
  text-align: left;
}

.esc-footer-link{
  font-family: "Alumni Sans", sans-serif;
  font-size: 24px;
  font-weight: 300;
  color: var(--dl-color-default-white);
  text-decoration: none;
  display: inline-block;
  margin: 0 12px;
  transition: color 0.35s ease;
  cursor: pointer;
}

.esc-footer-link:hover{
  color: var(--dl-color-default-red);
}

.esc-footer-bottom{
  max-width: 1200px;
  margin: 32px auto 0;
  padding: 16px 24px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}

.esc-footer-meta{
  font-family: "Alumni Sans", sans-serif;
  font-size: 16px;
  font-weight: 300;
  color: var(--dl-color-default-lightgrey);
  line-height: 1.2;
  margin: 0;
}

.esc-footer-logo{
  font-family: 'Mirdaine', serif;
  font-size: 32px;
  font-weight: 400;
  color: var(--dl-color-default-white);
  margin-bottom: 12px;
  letter-spacing: 0.04em;
}

.esc-footer-logo-img {
  max-width: 120px;
  height: auto;
  margin-bottom: 24px;
  display: block;
}

/* Footer responsive - tablet and mobile */
@media (max-width: 900px){
  .esc-footer{
    padding: 48px 0;
  }

  .esc-footer-inner{
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  .esc-footer-column-links{
    flex-direction: column;
    gap: 12px;
  }

  .esc-footer-link{
    display: block;
    margin: 0 0 8px 0;
    text-align: center;
  }
}

/* Small devices (>=480px) */
@media (min-width:480px){
  .hero-content{padding:64px}
  .news-grid{grid-template-columns:repeat(2,1fr)}
  .rooms-grid{grid-template-columns:repeat(2,1fr)}
}

/* Tablet / small desktop */
@media (min-width:900px){
  .nav-links{gap:28px}
  .burger{display:none}
  .hero{min-height:72vh}
  .news-grid{grid-template-columns:repeat(3,1fr)}
  .contact-grid{grid-template-columns:1fr 360px}
  .two-col{flex-direction:row;align-items:flex-start}
  .two-col > div{flex:1}
}

.nav-links.open {
    display: flex;              /* po otevření */
  }
/* Desktop large */
@media (min-width:1200px){
  .container{max-width:var(--max-width)}
  .hero-content{padding:96px 0}
}

/* Utility: hide/show burger on mobile */
@media (max-width:899px){
  .nav-links{display:none}
  .burger{display:block}
}

/* Accessibility improvements */
button:focus, a:focus{outline:2px solid rgba(255,255,255,0.06);outline-offset:2px}

/* Small tweaks for responsiveness kept from original breakpoints */
@media (min-width:480px){
  .hero-content{padding:64px}
  .news-grid{grid-template-columns:repeat(2,1fr)}
  .rooms-grid{grid-template-columns:repeat(2,1fr)}
}

@media (min-width:900px){
  .nav-links{gap:28px}
  .burger{display:none}
  .hero{min-height:72vh}
  .news-grid{grid-template-columns:repeat(3,1fr)}
  .contact-grid{grid-template-columns:1fr 360px}
  .two-col{flex-direction:row;align-items:flex-start}
  .two-col > div{flex:1}
}

@media (min-width:1200px){
  .container{max-width:var(--max-width)}
  .hero-content{padding:96px 0}
}

/* ==================== NAVBAR LAYOUT ==================== */

.navbar {
  height: 120px;
}

.navbar .nav-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.navbar .logo {
  position: absolute;
  left: 40px;
  height: calc(100% - 24px);
  width: auto;
  max-height: 80px;
}

.navbar .nav-links {
  display: flex;
  gap: 28px;
  align-items: center;
  justify-content: center;
}

.navbar .nav-links a {
  display: inline-block;
  padding: 8px 12px;
}

.navbar .burger {
  position: absolute;
  right: 20px;
  background: transparent;
  border: none;
  font-size: 1.6rem;
}

@media (max-width: 900px) {
  .navbar { height: 96px; }
  .navbar .logo { left: 12px; height: calc(100% - 18px); max-height: 76px; }
  .navbar .nav-links { gap: 16px; display: none; }
  .navbar .burger { display: block; }

  .burger { display: block; }

  .nav-links {
    display: none;              /* skryté */
    flex-direction: column;
    gap: 12px;
    position: absolute;
    right: 16px;
    top: 64px;                  /* uprav dle výšky headeru */
    background: #000;
    padding: 16px;
    border: 1px solid #222;
    border-radius: 12px;
    z-index: 9999;
  }

  .nav-links.open {
    display: flex;              /* po otevření */
  }
}

@media (max-width: 600px) {
  /* On very small screens keep a compact navbar */
  .navbar { height: 72px; }
  .navbar .logo { height: calc(100% - 12px); max-height: 56px; }
  .navbar .nav-inner { padding: 0 12px; }
  .navbar .nav-links { gap: 10px; display: none; }
  .navbar .burger { display: block; }
  .burger { display: block; }

  .nav-links {
    display: none;              /* skryté */
    flex-direction: column;
    gap: 12px;
    position: absolute;
    right: 16px;
    top: 64px;                  /* uprav dle výšky headeru */
    background: #000;
    padding: 16px;
    border: 1px solid #222;
    border-radius: 12px;
    z-index: 9999;
  }

  .nav-links.open {
    display: flex;              /* po otevření */
  }
}

/* ==================== SOCIAL MEDIA SECTION ==================== */

.esc-social-section {
  width: 100%;
  /* dříve: background-color: var(--dl-color-default-black2); */
  background-color: transparent;      /* background řeší wrapper */
  padding: 12px 0 0;                  /* žádný horizontální padding */
  color: var(--dl-color-default-white);
  text-align: center;
}

.esc-social-inner {
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.esc-social-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
}

.esc-social-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.35s ease, fill 0.35s ease, transform 0.35s ease;
  border-radius: 50%;
}

.esc-social-icon-link:hover {
  transform: translateY(-4px);
}

.esc-social-icon {
  width: 32px;
  height: 32px;
  color: var(--dl-color-default-white);
  fill: var(--dl-color-default-white);
  transition: color 0.35s ease, fill 0.35s ease;
}

.esc-social-icon-link:hover .esc-social-icon {
  color: var(--dl-color-default-red);
  fill: var(--dl-color-default-red);
}

/* Social section responsive */
@media (max-width: 900px) {
  .esc-social-icons {
    gap: 32px;
  }

  .esc-social-icon-link {
    width: 44px;
    height: 44px;
  }

  .esc-social-icon {
    width: 28px;
    height: 28px;
  }
}

@media (max-width: 600px) {
  .esc-social-section {
    padding: 32px 0 0;
  }
}
  .esc-social-icons {
    gap: 24px;
  }

  .esc-social-icon-link {
    width: 40px;
    height: 40px;
  }

  .esc-social-icon {
    width: 24px;
    height: 24px;
  }
/* ==================== FOOTER + SOCIAL WRAPPER ==================== */

/* společný background + 32px odsazení od okrajů monitoru */
.esc-footer-wrapper {
  width: 100%;
  padding: 0 32px 48px; /* 32px zleva/zprava, 48px dole */
  margin: 0;
  box-sizing: border-box;

  /* obrázek pro background – dosaď konkrétní soubor z původního webu */
  background-image: url("public/rectangle81077-4dl-500h.png"); /* TODO: nahraď správnou cestou, např. public/rectangleXXXX.png nebo svg */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}

/* na mobilech zmenšíme boční mezery na 16px */
@media (max-width: 700px) {
  .esc-footer-wrapper {
    padding-left: 16px;
    padding-right: 16px;
  }
}


@media (min-width: 1400px) {
    .navbar {
        width: var(--dl-layout-size-maxwidth);
    }
    .esc-contact-section {
        width: var(--dl-layout-size-maxwidth);
    }
}

/* slider */

.esc-partners-section {
  padding: 56px 20px 72px;
  background: #000;
  overflow: hidden;
}

.esc-links-slider-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.esc-links-slider-heading {
  margin: 0 0 12px;
  text-align: center;
  font-size: clamp(28px, 4vw, 42px);
  color: #fff;
}

.esc-links-slider-subtitle {
  max-width: 760px;
  margin: 0 auto 32px;
  text-align: center;
  color: rgba(255,255,255,.72);
  line-height: 1.65;
  font-size: 16px;
}

.esc-links-slider {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.esc-links-track {
  display: flex;
  width: max-content;
  gap: 18px;
  animation: escLinksScroll 60s linear infinite;
  will-change: transform;
}

.esc-links-slider:hover .esc-links-track,
.esc-links-slider:focus-within .esc-links-track {
  animation-play-state: paused;
}

.esc-links-group {
  display: flex;
  gap: 18px;
  flex-shrink: 0;
}

.esc-links-card {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 220px;
  min-width: 220px;
  height: 86px;
  padding: 14px 18px;
  border-radius: 20px;
  background: rgba(255,255,255,.03);
  color: #fff;
  text-decoration: none;
  box-sizing: border-box;
  overflow: hidden;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.esc-links-card img,
.esc-links-card svg {
  display: block;
  max-width: 150px;
  max-height: 34px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* vnitřní obsah v kartě */
.esc-links-card > * {
  max-width: 100%;
  max-height: 100%;
}

/* TripAdvisor widget */
.esc-links-card.TA_selfserveprop,
.TA_selfserveprop.esc-links-card {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 220px;
  min-width: 220px;
  height: 86px;
  padding: 14px 18px;
  box-sizing: border-box;
  overflow: hidden;
}

.esc-links-card.TA_selfserveprop ul,
.TA_selfserveprop.esc-links-card ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.esc-links-card.TA_selfserveprop li,
.TA_selfserveprop.esc-links-card li {
  margin: 0 !important;
  padding: 0 !important;
}

.esc-links-card.TA_selfserveprop a,
.TA_selfserveprop.esc-links-card a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.esc-links-card.TA_selfserveprop img,
.TA_selfserveprop.esc-links-card img {
  display: block;
  max-width: 140px !important;
  max-height: 28px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
}

@keyframes escLinksScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-50% - 9px));
  }
}

@media (max-width: 768px) {
  .esc-partners-section {
    padding: 44px 16px 56px;
  }

  .esc-links-card {
    width: 180px;
    min-width: 180px;
    height: 74px;
    padding: 12px 14px;
  }

  .esc-links-card img,
  .esc-links-card svg {
    max-width: 120px;
    max-height: 28px;
  }

  .esc-links-card.TA_selfserveprop,
  .TA_selfserveprop.esc-links-card {
    width: 180px;
    min-width: 180px;
    height: 74px;
    padding: 12px 14px;
  }

  .esc-links-card.TA_selfserveprop img,
  .TA_selfserveprop.esc-links-card img {
    max-width: 112px !important;
    max-height: 24px !important;
  }

  .esc-links-track,
  .esc-links-group {
    gap: 14px;
  }
}

.esc-links-card-tripadvisor img {
  max-width: 140px;
  max-height: 28px;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
}

.esc-links-card-eg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.esc-links-card-eg-badge {
  width: 42px;
  height: 42px;
  border: 2px solid #fff;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fbbd2c;
  flex-shrink: 0;
  box-sizing: border-box;
}

.esc-links-card-eg-icon {
  width: 22px;
  height: 22px;
  display: block;
}

.esc-links-card-eg-text {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.esc-links-card-slevomat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.esc-links-card-slevomat-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

.esc-links-card-slevomat-text {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.esc-links-card-lockme {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.esc-links-card-lockme-icon {
  width: 28px;
  height: 28px;
  display: block;
  flex-shrink: 0;
}

.esc-links-card-lockme-text {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.esc-links-card-escapemania {
  display: flex;
  align-items: center;
  justify-content: center;
}

.esc-links-card-escapemania-logo {
  display: block;
  max-width: 150px;
  max-height: 34px;
  width: auto;
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
}