/* =========================================
   AnnaHotels — brand.css (cloud editorial)
   Load AFTER /assets/site.css
   Theme + page modules (hero / cityHero / author)
   ========================================= */

/* =========================
   BRAND TOKENS + OVERRIDES
   (override site.css variables, no !important)
   ========================= */
:root{
  /* brand palette */
  --ah-bg: #f5efe9;
  --ah-paper: #fffaf4;
  --ah-border: #e8dccf;

  /* typography */
  --ah-text: #21384f;
  --ah-muted: #4F362F;

  /* “sky” links (from header) */
  --ah-link: #518fb5;
  --ah-link-hover: #4e6572;

  /* radii + shadows */
  --ah-radius: 16px;
  --ah-radius-img: 12px;
  --ah-shadow: 0 8px 24px rgba(0,0,0,.04);
  --ah-shadow-soft: 0 1px 2px rgba(0,0,0,.03);

  /* headline tuning */
  --font-head: "Playfair Display", serif;
  --h1-size: clamp(42px, 6vw, 84px);
  --h1-lh: 1.05;
  --h1-margin: 18px 0 10px;
  --h1-align: center;

  /* layout tuning */
  --container-mt: 38px;
  --listing-mt: 22px;
  --listing-gap: 38px;
  --section-mb: 120px;
  
  --hero-author-gap: 22px; /* nebo clamp(18px, 1.6vw, 26px) */
}


/* =========================
   GLOBAL ATMOSPHERE
   ========================= */
html{ background: var(--ah-bg); }
body{
  background: transparent;
  color: var(--ah-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  z-index: 1;
}


/* Editorial headings */
h1, h2, h3{
  font-family: var(--font-head);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ah-text);
}

p, .intro, .updated{ color: var(--ah-muted); }

/* Links */
body a{ color: var(--ah-link); text-decoration:none; }
body a:hover{ color: var(--ah-link-hover); text-decoration:underline; }

/* Reduce UI noise inside cards */
.card a{ text-decoration: none; }
.card a:hover{ text-decoration: underline; }

/* Sidebar links should feel calm */
.sidebar-links a{ color: var(--ah-link); }
.sidebar-links small{ opacity: .65; }

/* Meta text in cards */
.card .index,
.card .reviews{ color: var(--ah-muted); }

/* Stars: keep gold, calm it slightly */
.card .stars{ opacity: .9; }

/* Card body typography */
.card .

/* Filmstrip thumbs (if present) */
.ah-hero,
.ah-thumb{ background: rgba(0,0,0,.04); }

.ah-filmstrip{
  background: transparent;
  padding: 12px;
  gap: 12px;
}
.ah-thumb{ border: 1px solid var(--ah-border); }

.ah-overlay{ text-shadow: 0 2px 12px rgba(0,0,0,.25); }
.ah-count::after{ background: rgba(0,0,0,.28); }

/* Footer: calm */
.site-footer{ border-top-color: var(--ah-border); }
.affiliate-disclosure,
.footer-links,
.footer-links a{ color: rgba(47,47,47,.62); }
.footer-links a:hover{ color: rgba(47,47,47,.80); }

/* Cookie consent: match brand (less harsh than #111) */
.ah-consent__inner{
  background: rgb(185 166 154);
  border: 1px solid rgba(255,255,255,.12);
}
.ah-btn{
  border-radius: 999px;
  padding: 9px 14px;
}
.ah-btn--ghost{
  background: transparent;
  border: 1px solid rgba(255,255,255,.55);
  color: #fff;
}

/* Soft “cloud” overlay — moved to html::before to avoid z-index hacks */
html::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(1000px 420px at 50% -120px, rgba(255,255,255,.55), rgba(255,255,255,0) 65%),
    radial-gradient(800px 320px at 20% -80px, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(800px 320px at 80% -80px, rgba(255,255,255,.28), rgba(255,255,255,0) 60%);
  z-index: 0;
}


/* =========================
   HOMEPAGE HERO (responsive background)
   ========================= */
.hero{
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: var(--ah-bg);
}

/* mobile first */
.hero-bg{
  position: absolute;
  inset: 0;
  z-index: 1;
  /*background-image: url("/assets/img/hero-mobile.webp");*/
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


/* fade into page background */
.hero-bg::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:
    linear-gradient(
      to bottom,
      rgba(245,239,233,0) 58%,
      rgba(245,239,233,.30) 72%,
      rgba(245,239,233,.70) 86%,
      rgba(245,239,233,1) 100%
    );
}

/* soft fog texture */
.hero-bg::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  background:
    radial-gradient(1200px 420px at 50% 86%, rgba(245,239,233,.65), rgba(245,239,233,0) 70%),
    radial-gradient(900px 320px at 18% 92%, rgba(245,239,233,.45), rgba(245,239,233,0) 65%),
    radial-gradient(900px 320px at 82% 92%, rgba(245,239,233,.40), rgba(245,239,233,0) 65%);
  filter: blur(1.5px);
}

/* content */
.hero-content{
  position: relative;
  z-index: 4;

  /* desktop: hero kratší, pořád "cover" */
  min-height: min(78vh, 760px);

  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: center;

  /* místo 26vh */
  padding-bottom: clamp(44px, 7vh, 90px);
}


/* logo text */
.hero-logo{
  font-family: var(--font-head);
  font-weight: 400;
  font-size: clamp(64px, 7.5vw, 140px);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding-left: 0.18em;
  transform: none;
  color: rgba(255,255,255,.92);
  text-shadow:
    0 2px 18px rgba(255,255,255,.18),
    0 20px 60px rgba(0,0,0,.25);
  filter: drop-shadow(0 10px 30px rgba(0,0,0,.10));
}

/* =========================
   CITY HERO — photo header (editorial cover)
   ========================= */
.ah-cityHero{
  position: relative;
  min-height: 44vh;
  max-height: 520px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-bottom: 1px solid #ffffff;
  padding-bottom: var(--author-overlap);
}

/* Background image */
.ah-cityHero__bg{
    position: absolute;
  inset: 0;
  transform: scale(1.02);
}

.ah-cityHero__bg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* Soft overlay for readability */
.ah-cityHero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index: 1;
  background:
    radial-gradient(1000px 520px at 50% 28%, rgba(0,0,0,.18), rgba(0,0,0,0) 62%),
    linear-gradient(
      to bottom,
      rgba(0,0,0,.06) 0%,
      rgba(0,0,0,.22) 58%,
      rgba(0,0,0,.38) 100%
    );
}

/* Fade into page background */
.ah-cityHero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index: 1;
  background:
    linear-gradient(
      to bottom,
      rgba(245,239,233,0) 55%,
      rgba(245,239,233,.22) 72%,
      rgba(245,239,233,.55) 88%,
      rgba(245,239,233,1) 100%
    );
  pointer-events:none;
}

/* Content */
.ah-cityHero__content{
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 18px;
  max-width: 920px;
}

/* H1 inside city hero */
.ah-cityHero h1{
  color: rgba(255,255,255,.96);
  text-shadow: 0 14px 50px rgba(0,0,0,.30);
  margin: 0 0 14px;
  font-size: clamp(44px, 6vw, 75px);
  line-height: 1.02;
}

/* Lead */
.ah-cityHero__lead{
  color: rgba(255,255,255,.86);
  font-size: 18px;
  line-height: 1.6;
  max-width: 60ch;
  margin: 35px auto 14px;
}

/* Meta line */
.ah-cityHero__meta{
  color: rgba(255,255,255,.70);
  font-size: 13px;
  letter-spacing: .01em;
  margin: 24px 0 calc(var(--author-overlap) + var(--hero-author-gap));
}

/* Reduce top gap after hero so content starts nicely */
.ah-cityHero + .container{ margin-top: 22px; }


/* =========================
   AUTHOR SIGNATURE (under city hero)
   ========================= */
.ah-author{
  position: relative;
  z-index: 3;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;

  margin: calc(-1 * var(--author-overlap)) auto 18px;
  max-width: var(--max);
  padding: 0 16px;
  gap: 14px;
}

.ah-author__meta{
  font-size: 16px;
  letter-spacing: .01em;
  color: rgba(255,255,255,.78);
  text-shadow: 0 8px 26px rgba(0,0,0,.28);
}

.ah-author 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);
}


/* =========================
   HOTEL CARD — COLOR OVERRIDES
   ========================= */

/* hotel-title: tmavě modrá */
.hotel-title a{
  color: #21384f;
}
.hotel-title a:hover{
  color: #21384f;
}

/* hotel-rank: tmavě modré kolečko + světlý text */
:root{
  --rank-bg: #21384f;
  --rank-border: rgba(33,56,79,.35);
  --rank-text: #f6efe6;
}

/* META-ITEM – editorial text style */
.hotel-meta__row:not(.hotel-meta__row--amen) .meta-item{
  background: none;
  border: none;
  padding: 0;
  color: #222;
  font-size: 14px;
  font-weight: 500;
}
.hotel-meta__row:not(.hotel-meta__row--amen) .meta-item b{
  color: #222;
  font-weight: 500;
  margin-left: 0.25em;
  margin-right: 0.6em;
}

.hotel-meta__row:not(.hotel-meta__row--amen) .meta-item::after{
  content: " |";
  margin-left: 0.35em;
  margin-right: 0.15em;
  color: #222;
}
.hotel-meta__row:not(.hotel-meta__row--amen) .meta-item:last-child::after{
  content: "";
}

/* chip: #c2a79c + tmavý text */
.hotel-meta__row--amen .chip,
.hotel-meta__row--amen .pill{
  background: #f5efe9;
  color: #4F362F;
  border: 1px solid #e8dccf;
}

/* hotel-desc toggle: tmavě modrá */
.hotel-desc__toggle,
.hotel-desc__toggle:hover{
  color: #21384f;
}

/* City hero: trochu víc vzduchu shora na nízkých displejích */
@media (max-height: 820px){
  .ah-cityHero{
    padding-top: 18px;
  }
}

/* iPhone SE / extra malé šířky: ještě o chlup víc */
@media (max-width: 380px){
  .ah-cityHero{
    padding-top: 22px;
  }
}

/* =========================
   MOBILE RHYTHM (<= 640px)
   ========================= */
@media (max-width: 640px){

  .ah-cityHero{
    min-height: 44vh;
    max-height: 520px;
  }

  .ah-cityHero h1{
    margin: 0 0 40px;             /* gap after title */
    font-size: clamp(44px, 10.2vw, 62px);
    line-height: 1.08;
  }

  .ah-cityHero__lead{
    max-width: 34ch;
    margin: 0 auto 18px;          /* gap after lead */
    font-size: 18px;
  }

  .ah-cityHero__meta{
  margin: 8px auto 0;          /* už ne pod leadem daleko */
  font-size: 12px;
  opacity: 1;
  color: rgba(255,255,255,.92);
  text-shadow: 0 10px 28px rgba(0,0,0,.38);
}

.ah-cityHero__bg::before{
  background:
    linear-gradient(
      to bottom,
      rgba(245,239,233,0) 62%,
      rgba(245,239,233,.35) 75%,
      rgba(245,239,233,.78) 88%,
      rgba(245,239,233,1) 100%
    );
}

  .ah-author img{
    width: 110px;
    height: 110px;
  }

  .ah-author__meta{
    font-size: 16px;
    line-height: 1.25;
  }
  
  .ah-datebox__sub {
	text-align: center;
	}
	
}