/* ═══════════════════════════════════════════════════
   BIOGRAFOUN.CZ — Custom design
   Načítáno přes head.hbs po style.css.
   Font Inter je načítán přes <link> v head.hbs.
   ═══════════════════════════════════════════════════ */

/* ── CUSTOM PROPERTIES ── */
:root {
  --accent: #d4a843;
  --accent-glow: rgba(212, 168, 67, 0.15);
  --accent-hover: #e6bf5a;
  --bg: #0a0a0c;
  --bg-card: #111114;
  --bg-elevated: #161619;
  --border: rgba(255, 255, 255, 0.06);
  --border-hover: rgba(255, 255, 255, 0.12);
  --text: #eaeaed;
  --text-secondary: #8a8a96;
  --text-muted: #4a4a56;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --font-body: 'Inter', 'DM Sans', system-ui, -apple-system, sans-serif;
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── BASE ── */
body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: var(--font-body) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: var(--accent) !important;
  color: var(--bg) !important;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--text-muted); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }

/* ── HEADER ── */
.header {
  background: rgba(10, 10, 12, 0.85) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--border) !important;
  transition: all var(--transition-smooth);
}

.header.is-visible {
  box-shadow: 0 1px 40px rgba(0, 0, 0, 0.5) !important;
}

.logo {
  color: var(--text) !important;
  font-family: var(--font-body) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  transition: color var(--transition-fast);
}

.logo:hover { color: var(--accent) !important; }

/* ── HERO (skryjeme na všech stránkách kromě autora) ── */
.page:not(.page--author) .hero {
  display: none !important;
}

/* ── NAVIGATION ── */
.navbar .navbar__menu li a,
.navbar .navbar__menu li span[role="button"] {
  color: var(--text-secondary) !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.02em !important;
  transition: color var(--transition-fast) !important;
}

.navbar .navbar__menu li a:hover,
.navbar .navbar__menu li span[role="button"]:hover {
  color: var(--accent) !important;
}

.navbar .navbar__menu > li.active a,
.navbar .navbar__menu > li.active span {
  color: var(--accent) !important;
}

.navbar .navbar__submenu {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4) !important;
  padding: 8px !important;
}

.navbar .navbar__submenu li a {
  border-radius: var(--radius-sm) !important;
  padding: 8px 14px !important;
}

.navbar .navbar__submenu li a:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--accent) !important;
}

/* ── MOBILE NAV ── */
.navbar_mobile_overlay,
.navbar_mobile_sidebar {
  background: var(--bg) !important;
}

.navbar_mobile_overlay .navbar__menu li a,
.navbar_mobile_sidebar .navbar__menu li a {
  color: var(--text) !important;
  font-family: var(--font-body) !important;
}

.navbar_mobile_overlay .navbar__menu li a:hover,
.navbar_mobile_sidebar .navbar__menu li a:hover {
  color: var(--accent) !important;
}

/* ── CONTAINER ── */
.container {
  background: var(--bg) !important;
}

/* ── FILTER BUTTONS ── */
.filter__button-group {
  list-style: none !important;
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  padding: 0 !important;
  margin: -0.5rem auto 2rem !important;
  justify-content: center !important;
}

.filter__item {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--text-muted) !important;
  border-radius: 100px !important;
  padding: 6px 16px !important;
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  cursor: pointer !important;
  transition: all var(--transition-fast) !important;
}

.filter__item:hover {
  border-color: var(--border-hover) !important;
  color: var(--text-secondary) !important;
  background: rgba(255, 255, 255, 0.03) !important;
}

.filter__item.is-active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--bg) !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 12px var(--accent-glow);
}

/* ── CARD GRID ── */
.l-col { gap: 0 !important; }
.l-col:before { border-top-color: var(--accent) !important; }

/* ── CARDS ── */
.c-card {
  background: transparent !important;
  border: none !important;
}

.c-card__header {
  border-radius: var(--radius-md) !important;
  overflow: hidden !important;
  border: 1px solid var(--border) !important;
  transition: all var(--transition-smooth) !important;
  position: relative;
}

.c-card__header::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 10, 12, 0.6) 0%, transparent 50%);
  opacity: 0;
  transition: opacity var(--transition-smooth);
  pointer-events: none;
  border-radius: var(--radius-md);
}

.c-card:hover .c-card__header {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 1px var(--accent), 0 8px 32px rgba(0, 0, 0, 0.3);
}

.c-card:hover .c-card__header::after { opacity: 1; }

.c-card__header img {
  display: block !important;
  width: 100% !important;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.c-card:hover .c-card__header > img {
  transform: scale(1.05) !important;
}

/* ── CARD TEXT ── */
.c-card__body {
  background: transparent !important;
  padding: 12px 4px 4px !important;
}

.c-card__text { padding: 0 !important; }

.c-card__text h2 {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
  margin: 0 !important;
  line-height: 1.4 !important;
  transition: color var(--transition-fast) !important;
}

.c-card:hover .c-card__text h2 { color: var(--accent) !important; }

.c-card__text time,
.c-card__text > span {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  color: var(--text-muted) !important;
  display: block !important;
  margin-top: 4px !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
}

/* ── CARD LINK ── */
.c-card__link { color: var(--text) !important; }
.c-card__link:hover { color: var(--accent) !important; }
.c-card__link:hover .c-card__text { opacity: 1 !important; transform: none !important; }

/* ── COMPACT CARD ── */
.c-card__body--compact {
  background: rgba(10, 10, 12, 0.9) !important;
  backdrop-filter: blur(8px);
}

.c-card__text--compact > h2 { color: var(--text) !important; }
.c-card--featured:before { background-color: var(--accent) !important; }

/* ── PAGINATION / BUTTONS ── */
.pagination > a,
.pagination > span {
  font-family: var(--font-body) !important;
}

.btn,
[type="button"],
[type="submit"],
button {
  background: var(--accent) !important;
  border: 1px solid var(--accent) !important;
  color: var(--bg) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  transition: all var(--transition-fast) !important;
}

.btn:hover,
[type="button"]:hover,
[type="submit"]:hover,
button:hover {
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
  color: var(--bg) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px var(--accent-glow);
}

/* ── CONTENT ── */
.content__entry { color: var(--text) !important; }
.content__entry a { color: var(--accent) !important; }
.content__entry a:hover { color: var(--accent-hover) !important; }

.content__nav {
  border-top-color: var(--border) !important;
  color: var(--text-muted) !important;
}

.content__tag li > a { color: var(--text-muted) !important; }
.content__tag li > a:hover { color: var(--accent) !important; }

.content__bio {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border);
  border-radius: var(--radius-md) !important;
}

.content__related { border-top-color: var(--border) !important; }
.content__related__wrap figure a > img { border-radius: var(--radius-sm) !important; }

/* ── SEARCH ── */
.search__overlay {
  background-color: var(--bg-elevated) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5) !important;
}

.search__input { color: var(--text) !important; }
.search__btn > svg { fill: var(--text-secondary) !important; transition: fill var(--transition-fast); }
.search__btn:hover > svg { fill: var(--accent) !important; }

/* ── FORMS ── */
[type="email"],
[type="number"],
[type="search"],
[type="tel"],
[type="text"],
[type="url"],
select,
textarea {
  background-color: var(--bg-elevated) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: var(--radius-sm) !important;
}

[type="email"]:focus,
[type="text"]:focus,
textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-glow) !important;
  outline: none !important;
}

/* ── FOOTER ── */
.footer {
  background: var(--bg) !important;
  border-top: 1px solid var(--border) !important;
  padding: 2rem 0 !important;
}

.footer__nav ul li a {
  color: var(--text-muted) !important;
  font-family: var(--font-body) !important;
  transition: color var(--transition-fast) !important;
}

.footer__nav ul li a:hover { color: var(--accent) !important; }
.footer__social .icon { fill: var(--text-muted) !important; transition: fill var(--transition-fast); }
.footer__social a:hover .icon { fill: var(--accent) !important; }
.footer__copyright { color: var(--text-muted) !important; font-family: var(--font-body) !important; }

/* ── TYPOGRAFIE ── */
hr, .separator { color: var(--text-muted) !important; }
hr::before, .separator::before { color: var(--text-muted) !important; }

blockquote {
  color: var(--text) !important;
  border-left: 3px solid var(--accent);
  padding-left: 1.5rem !important;
}

blockquote::before { color: var(--text-muted) !important; }

code { background-color: var(--bg-elevated) !important; color: var(--accent) !important; }
pre { background-color: var(--bg-elevated) !important; border: 1px solid var(--border); border-radius: var(--radius-md) !important; }
pre > code { color: var(--text) !important; }

table th { border-bottom-color: var(--border) !important; color: var(--text) !important; }
table tr:nth-child(2n) { background: var(--bg-elevated) !important; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--text) !important;
  font-family: var(--font-body) !important;
}

/* ── OBRÁZKY ── */
img[loading] { opacity: 0; }
img.is-loaded { opacity: 1; transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1); }

/* ── GALERIE ── */
.gallery__item a::after {
  background: linear-gradient(to top, rgba(10, 10, 12, 0.5) 0%, transparent 60%) !important;
}

/* ── ZPRÁVY ── */
.msg--highlight {
  background-color: rgba(212, 168, 67, 0.1) !important;
  border: 1px solid rgba(212, 168, 67, 0.2);
  border-radius: var(--radius-sm);
  color: var(--text) !important;
}

.msg--info {
  background-color: rgba(59, 130, 246, 0.1) !important;
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: var(--radius-sm);
  color: var(--text) !important;
}

.msg--success {
  background: rgba(34, 197, 94, 0.1) !important;
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: var(--radius-sm);
  color: var(--text) !important;
}

.pec-overlay {
  background-color: var(--bg-elevated) !important;
  color: var(--text) !important;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

/* ── ANIMACE KARET ── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.l-col.is-visible .c-card { animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) both; }
.l-col.is-visible .c-card:nth-child(1)  { animation-delay: 0s; }
.l-col.is-visible .c-card:nth-child(2)  { animation-delay: 0.05s; }
.l-col.is-visible .c-card:nth-child(3)  { animation-delay: 0.1s; }
.l-col.is-visible .c-card:nth-child(4)  { animation-delay: 0.15s; }
.l-col.is-visible .c-card:nth-child(5)  { animation-delay: 0.2s; }
.l-col.is-visible .c-card:nth-child(6)  { animation-delay: 0.25s; }
.l-col.is-visible .c-card:nth-child(7)  { animation-delay: 0.3s; }
.l-col.is-visible .c-card:nth-child(8)  { animation-delay: 0.35s; }
.l-col.is-visible .c-card:nth-child(9)  { animation-delay: 0.4s; }
.l-col.is-visible .c-card:nth-child(10) { animation-delay: 0.45s; }
.l-col.is-visible .c-card:nth-child(11) { animation-delay: 0.5s; }
.l-col.is-visible .c-card:nth-child(12) { animation-delay: 0.55s; }

/* ═══════════════════════════════════════════════════
   POST DETAIL — rozložení stránky příspěvku
   ═══════════════════════════════════════════════════ */

main.post {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 3rem var(--page-margin) 2rem;
  box-sizing: border-box;
  background: var(--bg);
}

main.post article.content.wrapper {
  max-width: 100%;
}

/* Hero: zarovnání vlevo, bez dekorační linky */
main.post .hero {
  text-align: left;
  margin-bottom: 0.5rem;
}

main.post .hero:after {
  display: none;
}

/* Meta — autor a datum bez verbose prefixu */
main.post .content__meta {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-top: 0.5rem;
  font-size: 0.8rem;
}

main.post .meta__author a {
  color: var(--text-secondary);
  text-decoration: none;
}

main.post .meta__author a:hover {
  color: var(--accent);
}

main.post .meta__date {
  color: var(--text-muted);
}

/* Desktop: obrázek 1:1 vlevo, text obtéká vpravo */
@media all and (min-width: 37.5em) {
  main.post .content__featured-image {
    float: left;
    width: 42%;
    aspect-ratio: 1 / 1;
    margin: 0 2.5rem 2rem 0;
    border-radius: var(--radius-md);
    overflow: hidden;
  }

  main.post .content__featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    max-width: none;
  }

  /* BFC: hero sedí napravo od floatu, nepodtéká pod obrázek */
  main.post .hero {
    overflow: hidden;
  }

  /* Highlight a ostatní msg bloky taky nesmí přetékat pod float */
  main.post .content__entry .msg {
    overflow: hidden;
  }

  main.post .content__footer {
    clear: both;
  }
}

/* Mobil: bez floatu, obrázek na plnou šířku s omezenou výškou */
@media all and (max-width: 37.4375em) {
  main.post .content__featured-image {
    aspect-ratio: unset;
    max-height: 45vh;
    overflow: hidden;
    margin: 0 0 1.5rem;
    border-radius: var(--radius-md);
  }

  main.post .content__featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    max-width: none;
  }
}