/* =========================================
   AnnaHotels — site.css
   Base + layout + components
   (Theme overrides live in brand.css)
   ========================================= */

/* =========================
   TOKENS
   ========================= */
:root{
  --max: 1180px;
  --gap: clamp(12px, 2.0vw, 18px);
  
  /* ===== Fluid layout (desktop + laptop) ===== */
  --pad-x: clamp(14px, 2.0vw, 26px);     /* boční padding kontejneru */
  --container-mt: clamp(22px, 3.2vw, 40px);
  --container-mb: clamp(22px, 3.2vw, 40px);
  
  /* city hero rhythm */
  --author-overlap: clamp(64px, 5.5vw, 90px);   /* jak moc se fotka vytahuje do hero */
  --hero-meta-mb:  clamp(105px, 9vh, 140px);    /* min spacing mezi meta a author blokem */

  --layout-gap: clamp(16px, 2.4vw, 28px);
  --sidebar-w: clamp(260px, 26vw, 340px); /* sidebar bude mít rozumnou šířku i na laptopu */

  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* themeable */
  --bg: var(--ah-bg, #ffffff);              /* page background (brand.css overrides) */
  --paper: #ffffff;           /* card background */
  --paper-soft: var(--ah-paper, #fffaf4);      /* warm paper */
  --paper-border: var(--ah-border, #e8dccf);

  --text: var(--ah-text, #2e2e2e);
  --text-2: var(--ah-muted, #7a726c);

  --link: var(--ah-link, inherit);
  --link-hover: var(--ah-link-hover, inherit);

  --sky: #7f95a1;
  --sky-2: #4e6572;

  /* chips */
  --chip-bg: #f0e8df;
  --chip-border: #e2d6cb;
  --chip-text: #7a6f66;

  /* rank badge */
  --rank-bg: #e8dccf;
  --rank-border: #ddcfc2;
  --rank-text: #6b5f55;

  /* “cloud” two-tone system used for meta (brand.css may override) */
  --cloud-dark: #031c37;
  --cloud-light: #f6efe6; /* light neutral (avoid brown chips) */

  /* spacing hooks */
  --listing-mt: 18px;
  --listing-gap: var(--gap);
  --section-mb: 0;

  /* shadows */
  --shadow-card: 0 1px 2px rgba(0,0,0,.04);
  --shadow-hotel: var(--ah-shadow, 0 8px 24px rgba(0,0,0,.04));
}

/* =========================
   BASE
   ========================= */
*{ box-sizing: border-box; }
body{ margin:0; line-height:1.55; background: var(--bg); color: var(--text); }

a{ color: var(--link); }
a:hover{ color: var(--link-hover); }

.container{
   width: min(var(--max), 100% - (var(--pad-x) * 2));
  margin: var(--container-mt) auto var(--container-mb);
  padding: 0; /* padding řeší width výše */
}

h1{ font-size: var(--h1-size, 40px); margin: var(--h1-margin, 16px 0 12px); line-height: var(--h1-lh, normal); text-align: var(--h1-align, left); }

.explore-grid{ list-style: disc; padding-left: 22px; }
.explore-grid li{ margin: 6px 0; }

section{ margin-bottom: var(--section-mb); }

/* =========================
   LISTING
   ========================= */
.listing{
  display:grid;
  grid-template-columns: 1fr;
  gap: var(--listing-gap);
  margin-top: var(--listing-mt);
}

/* =========================
   GENERIC CARD
   ========================= */
.card{
  border:1px solid #e7e7e7;
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  box-shadow: var(--shadow-card);
}
.card img{ width:100%; height:auto; display:block; }

/* rating badge on images */
.card .badge{
  position:absolute;
  right:10px;
  top:10px;
  background:#111;
  color:#fff;
  padding:4px 8px;
  border-radius:999px;
  font-weight:600;
  font-size:12px;
  z-index:2;
}

/* =========================
   LAYOUT / SIDEBAR
   ========================= */
.layout{
  display:grid;
  grid-template-columns: 1fr;
  gap: var(--layout-gap);
  align-items:start;
}

/* 2 sloupce až na větších šířkách (typicky mimo laptop) */
@media (min-width: 1200px){
  .layout{
    grid-template-columns: minmax(0, 1fr) var(--sidebar-w);
  }
}

.sidebar{
  position: sticky;
  top:16px;
  margin-top: 10px;
  margin-bottom: 4px;
  padding: 18px 18px 14px;
}

@media (max-width: 1366px){
  .sidebar{ padding: 16px 16px 12px; }
}

.sidebar-sub{
  margin: -15px 0 14px;
  font-size: 14px;
  line-height: 1.45;
  opacity: .75;
}

.sidebar-links{
  list-style:none;
  padding:0;
  margin:8px 0 0;
}
.sidebar-links li{ margin:0; }
.sidebar-links a{
  text-decoration:none;
  display:block;
  padding:4px 0;
  line-height:1.15;
}
.sidebar-links small{ opacity:.7; }

.intro{ margin:8px 0 6px; max-width:720px; }
.updated{ margin:0 0 16px; font-size:.9em; opacity:.7; }

/* =========================
   FOOTER
   ========================= */
.site-footer{
  margin-top: 48px;
  background: #4f362f47;
  text-align: center;
  padding: 34px 16px 38px;
  border-top: 1px solid var(--ah-border);
}

.site-footer__inner{
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  gap: 10px;
  justify-items: center;
}

.site-footer__brand{
  font-family: "Playfair Display", serif;
  font-size: 26px;
  letter-spacing: .22em;
  color: var(--ah-text);
}

.site-footer__nav{
  font-size: 14px;
  color: #222;
}

/* dot separators (your HTML uses plain <span>·</span>) */
.site-footer__nav span{
  margin: 0 6px;
  opacity: .65;
}

.site-footer__nav a{
  color: #222;
  text-decoration: none;
}

.site-footer__nav a:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

.affiliate-disclosure{
  font-size: 13px;
  line-height: 1.5;
  color: #222;
  max-width: 85ch;
  margin: 6px 0 0;
}



/* =========================
   COOKIE CONSENT
   ========================= */
.ah-consent{
  position: fixed;
  left:16px;
  right:16px;
  bottom:16px;
  z-index:9999;
}
.ah-consent__inner{
  max-width:980px;
  margin:0 auto;
  background:#111;
  color:#fff;
  border-radius:14px;
  padding:12px 14px;
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.ah-consent__text{
  font-size:13px;
  line-height:1.35;
}
.ah-consent__text a{ color:#fff; text-decoration:underline; }
.ah-consent__btns{
  display:flex;
  gap:10px;
  flex-shrink:0;
}
.ah-btn{
  border:1px solid #fff;
  background:#fff;
  color:#111;
  padding:9px 12px;
  border-radius:10px;
  font-weight:700;
  font-size:13px;
  cursor:pointer;
}
.ah-btn--ghost{ background:transparent; color:#fff; }


/* =========================
   HOTEL CARD (v2)
   ========================= */
.card.hotel.hotel-v2{
  background: var(--paper);
  border: 1px solid var(--paper-border);
  border-radius:16px;
  padding: clamp(16px, 2.2vw, 22px);
  box-shadow: var(--shadow-hotel);
}

.hotel-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 14px;
}
.hotel-rank{
  width:34px;
  height:34px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-weight:600;
  font-size:20px;
  flex:0 0 auto;
  background: var(--rank-bg);
  color: var(--rank-text);
  border: 1px solid var(--rank-border);
}

.hotel-title{
  margin:0;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height:1.15;
}

.hotel-title a{
  color: var(--text);
  text-decoration:none;
}
.hotel-title a:hover,
.hotel-more:hover{
  text-decoration: underline;
}
/* MEDIA ROW */
.hotel-media{
  display:grid;
  grid-template-columns: 66.6% 33.4%;
  gap:0;
  overflow:visible;
  background:#fff;
  margin:0 0 16px;
  aspect-ratio: 16 / 9;
}

/* reset radiusů – ať se nic “nepřeleje” z inherit */
.hotel-media .hotel-img{
  border-radius: 0;
}

/* HERO (levý velký) */
.hotel-media .hotel-img.hotel-hero{
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
}

/* stack vpravo */
.hotel-img-stack{
  display:grid;
  grid-template-rows: 1fr 1fr;
  gap:0;
}

/* horní pravý thumb = jen top-right */
.hotel-media .hotel-img-stack .hotel-img.thumb:not(.has-count){
  border-top-right-radius: 15px;
}

/* spodní pravý thumb = jen bottom-right */
.hotel-media .hotel-img-stack .hotel-img.thumb.has-count{
  border-bottom-right-radius: 15px;
}

/* sizing */
.hotel-img,
.hotel-img-stack,
.hotel-hero{
  height:100%;
  min-height:0;
}

.hotel-img{
  display:block;
  overflow:hidden;
  background:#eee;
  position:relative;
}

/* obrázek vždy pod overlay vrstvami */
.hotel-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  position:relative;
  z-index:0;
  border-radius: inherit;
}

/* OVERLAY jen pro has-count (spodní thumb) */
.hotel-img.has-count::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1; /* důležité */
  background:linear-gradient(to top, rgba(0,0,0,.58), rgba(0,0,0,0));
}

/* COUNT text nad overlayem */
.hotel-count{
  position:absolute;
  inset:0;
  z-index:2;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  flex-direction:column;
  gap:2px;
  pointer-events:none;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}

.hotel-count .n{
  font-size:44px;
  font-weight:700;
  line-height:1;
}

.hotel-count .t{
  font-size:16px;
  font-weight:600;
  opacity:.95;
}

/* description */
.hotel-desc{
  margin:0 0 14px;
  font-size:16px;
  line-height:1.55;
  color:#222;
}
.hotel-desc strong{ font-weight:800; }

.hotel-more{
  color: var(--sky);
  text-decoration:none;
  font-weight:700;
}
/* CTA */
.hotel-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 18px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
  background: #3b78a3;
  color: #ffffff;
  border: 1px solid rgba(33,56,79,.18);
}
.hotel-btn:hover{
  border-color: #bfcfd7;
  text-decoration: underline;
background: #518fb5;
color: #ffffff;
}



/* ===== Hotel description: SEO-safe toggle ===== */
/* ===== Hotel description: toggle ===== */
.hotel-desc--toggle .hotel-desc__text{ position: relative; }

/* default: show SHORT only */
.hotel-desc--toggle .hotel-desc__full{ display: none; }
.hotel-desc--toggle .hotel-desc__toggle .t-less{ display: none; }

/* clamp the SHORT block (the wrapper) */
.hotel-desc--toggle .hotel-desc__text{
  max-height: 8.4em;
  overflow: hidden;
}

.hotel-desc--toggle .hotel-desc__text::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: 2.4em;
  pointer-events:none;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
}

/* open: show FULL, hide SHORT + swap labels */
.hotel-desc.is-open .hotel-desc__short{ display: none; }
.hotel-desc.is-open .hotel-desc__full{ display: inline; }

.hotel-desc.is-open .hotel-desc__toggle .t-more{ display: none; }
.hotel-desc.is-open .hotel-desc__toggle .t-less{ display: inline; }

.hotel-desc.is-open .hotel-desc__text{ max-height: none; }
.hotel-desc.is-open .hotel-desc__text::after{ display:none; }

.hotel-desc__toggle{
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
  color: #4e6572;
  cursor: pointer;
}
.hotel-desc__toggle:hover{
  color: #3f5661;
  text-decoration: underline;
}
.hotel-desc__toggle .chev{
  color: currentColor;
  display: inline-flex;
  transition: transform .25s ease;
}
.hotel-desc.is-open .hotel-desc__toggle .chev{ transform: rotate(180deg); }


/* =========================
   META (row1 + row2)
   ========================= */
.hotel-meta{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
  align-items: center;
  column-gap: 14px;
  width: 100%;
  padding: 0 0 10px;
  margin: 0;
  font-size: 14px;
  color: var(--text);
}
.hotel-meta__row{
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  min-width: 0;
}
.hotel-meta__row--main{
  overflow: hidden;
  text-overflow: ellipsis;
}
.hotel-meta__row--amen{
  justify-content: flex-end;
  justify-self: end;
  overflow: hidden;
  min-width: 0;
}

/* base shapes (same sizing) */
.meta-item,
.pill,
.chip{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:7px;
  font-size:13px;
  line-height:1;
}

/* LEFT: Rating meta-item — dark bg + light text (works even without --main modifier) */
.hotel-meta__row:not(.hotel-meta__row--amen) .meta-item{
  background: var(--cloud-dark);
  color: var(--cloud-light);
  border: 1px solid rgba(3,28,55,.25);
  font-weight: 600;
}

.hotel-meta__row:not(.hotel-meta__row--amen) .meta-item b{
  color: inherit;
  font-weight: 800;
}

/* RIGHT: amenities chips */
.hotel-meta__row--amen .chip,
.hotel-meta__row--amen .pill{
  background: var(--cloud-light);
  color: var(--cloud-dark);
  border: 1px solid rgba(3,28,55,.18);
  font-weight: 600;
}


/* =========================
   DateBox (Booking dates)
   ========================= */

.ah-datebox{
  background: #4f362f47;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  padding: 12px 14px;
  margin: 0 0 16px;
}

.ah-datebox__sub{
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.4;
  color: #222;
  font-weight: 400; /* žádné tučné písmo */
}

.ah-datebox__grid{
  display: grid;
  grid-template-columns: 0.95fr 0.95fr 150px 130px; /* guests širší */
  gap: 10px;
  align-items: center;
}

.ah-datebox__input{
  width: 100%;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.14);
  padding: 0 12px;
  background: #fff;
  font-size: 14px;
  color: #222;
  min-width: 0;
}

.ah-datebox__input.is-empty{
  color: #222; /* placeholder text musí být vidět */
}

.ah-datebox__guests{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 44px;                 /* stejné odsazení jako u date ikonky */
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px;

  /* caret icon */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%23222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.ah-datebox__apply{
  height: 40px;
  border-radius: 10px;
  white-space: nowrap;
  background: #3b78a3;
  color: #fff;
  border: 1px solid rgba(0,0,0,.14);
  cursor: pointer;
  transition: transform .08s ease, opacity .15s ease;
  font-size: 14px;
}

.ah-datebox__apply:hover{ opacity: .92; text-decoration: underline;  }
.ah-datebox__apply:active{ transform: translateY(1px); }

.ah-datebox__apply.is-saved{ opacity: .9; }

.ah-datebox,
.ah-datebox input,
.ah-datebox select,
.ah-datebox button {
  font-family: inherit;
}

/* =========================
   MOBILE (<= 640px)
   City page components only
   ========================= */
@media (max-width: 640px){

  .container{
    padding: 0 12px;
    margin-top: 18px;
    margin-bottom: 26px;
  }

  /* datebox: 2 rows, guests next to button */
  .ah-datebox{
    padding: 12px;
    border-radius: 14px;
  }
  .ah-datebox__grid{
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  #ah-checkin{ grid-column: 1; }
  #ah-checkout{ grid-column: 2; }
  #ah-guests{ grid-column: 1; }
  .ah-datebox__apply{
    grid-column: 2;
    white-space: nowrap;
  }

  /* cards: a bit tighter */
  .listing{ gap: 14px; margin-top: 14px; }
  .card.hotel.hotel-v2{ padding: 14px; border-radius: 16px; }

  .hotel-title{ font-size: 22px; }
  .hotel-rank{ width: 35px; height: 35px; font-size: 16px; }

  /* MOBILE PHOTOS: luxury corners (hero top corners, bottom-left, bottom-right) */
.hotel-media{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  gap: 0;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: auto;
  background: #fff;
}

/* prevent CLS from 100% heights on mobile (mobile uses aspect-ratio blocks) */
.hotel-img,
.hotel-img-stack,
.hotel-hero{
  height: auto;
}

/* HERO: only top corners */
.hotel-media .hotel-img.hotel-hero{
  aspect-ratio: 4 / 3;
  border-top-left-radius: 14px !important;
  border-top-right-radius: 14px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* thumbs row glued under hero */
.hotel-img-stack{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: none !important;   /* <-- KLÍČ: zabije desktop 1fr 1fr */
  grid-auto-rows: auto !important;       /* <-- pojistka */
  gap: 0;
}

/* thumbs: keep ratio, radius set per-tile below */
.hotel-img-stack .hotel-img.thumb{
  aspect-ratio: 4 / 3;
  border-radius: 0 !important; /* important: cancels any inherited/desktop radius */
}

/* LEFT bottom thumb: only bottom-left */
.hotel-media .hotel-img-stack .hotel-img.thumb:not(.has-count){
  border-top-right-radius: 0 !important;   /* kills desktop rule */
  border-bottom-left-radius: 14px !important;
  border-bottom-right-radius: 0 !important;
}

/* RIGHT bottom thumb (count): only bottom-right */
.hotel-media .hotel-img-stack .hotel-img.thumb.has-count{
  border-bottom-right-radius: 14px !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}


/* overlay count */
.hotel-img.has-count::after{
  background: rgba(0,0,0,.38);
}
.hotel-count .n{ font-size: 40px; }
.hotel-count .t{ font-size: 14px; }


  /* CTA full width on mobile */
  .hotel-btn{
    width: 100%;
    padding: 13px 16px;
    font-size: 14px;
  }

  /* sidebar not sticky on mobile */
  .sidebar{
    position: static;
    padding-left: 18px;
    margin-top: 0px;
  }
  
  /* MOBILE: meta rows must stack (no collision) */
.hotel-meta{
  grid-template-columns: 1fr !important;
  row-gap: 8px;
  column-gap: 0;
  align-items: start;
}

.hotel-meta__row{
  white-space: normal !important;
  flex-wrap: wrap;
  gap: 8px;
}

.hotel-meta__row--amen{
  justify-content: flex-start !important;
  justify-self: start !important;
}

/* společné chování pro všechny meta řádky */
.hotel-meta__row{
  max-height: calc(2 * 28px);   /* max 2 řádky */
  overflow: hidden;
  flex-wrap: wrap;
}

/* hlavní meta (rating, starts, apod.) */
.hotel-meta__row--main{
  max-height: calc(2 * 28px);
  overflow: hidden;
}

/* amenities chips */
.hotel-meta__row--amen{
  max-height: calc(2 * 30px);
  overflow: hidden;
}

 .content {
    margin-bottom: 10px;
}

.meta-item,.pill,.chip{
	line-height: 1.176;
}
}

.policy-page{
  padding-top: 50px;
}

.policy-back{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-weight: 600;
  margin-bottom: 12px;
}

.policy-back:hover{
  text-decoration: underline;
}

.policy{ 
  max-width: 720px;
  margin: 50px auto;   
  line-height: 1.5;
}

.policy p {
  margin-bottom: 1.2em;  /* lepší rytmus textu */
}

.about-profile{
  width: 96px;
  height: 96px;
  margin: 8px auto 30px;
}

.about-profile img{
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
    background: var(--ah-bg);
}

.policy-page h1{
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1.15;
  margin-bottom: 24px;
}

.contact-form{
  margin-top: 16px;
  display: grid;
  gap: 12px;
}

.contact-form label{
  display: grid;
  gap: 6px;
  font-weight: 600;
}

.contact-form input,
.contact-form textarea{
  font: inherit;
  padding: 10px 12px;
  border: 1px solid var(--paper-border);
  border-radius: 12px;
  background: #fff;
}

.contact-form textarea{ resize: vertical; }

.hp{ display:none; } /* honeypot */

.contact-note--ok{ font-weight: 600; }
.contact-note--err{ font-weight: 600; }

.contact-alt{
  margin-top: 16px;
}

.contact-submit{
  display: flex;
  justify-content: center;
  margin-top: 18px;
}

/* accessibility helper: visually hidden but still available to screen readers */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.showmore-wrap{display:flex;justify-content:center;margin:24px 0 8px}

#showMore{
  height:40px;padding:0 50px;border-radius:10px;white-space:nowrap;
  background:#4f362f47;color:var(--ah-text);
  border:1px solid rgba(0,0,0,.12);cursor:pointer;
  font-size:14px;font-weight:500;
  transition:transform .08s ease,opacity .15s ease
}

#showMore:hover{opacity:.9}
#showMore:active{transform:translateY(1px)}
#showMore:focus{outline:3px solid rgba(0,0,0,.15);outline-offset:2px}

/* Sidebar Guide pill CTA */
.ah-sideCta { margin: 0 0 14px 0; }

.ah-sideCta__pill{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.03);
  text-decoration: none;
  font-weight: 600;
  line-height: 1;
}

.ah-sideCta__pill:hover{
  background: rgba(0,0,0,.06);
  border-color: rgba(0,0,0,.18);
}

.ah-sideCta__icon{ font-size: 16px; }
.ah-sideCta__text{ white-space: nowrap; }