/* =====================================================================
   Post – detail článku.
   Vychází z designového jazyka indexu (paleta z main.css, RobotoCondensed
   pro nadpisy/meta, Rubik pro text, zaoblené rohy, růžové akcenty).
   ===================================================================== */

.post-frame {
  width: 100%;
  max-width: calc(1100px + 2 * 45px);
  box-sizing: border-box;
  padding: 0 45px 30px;
  margin: 0 auto;
}

/* Obsah pod titulním obrázkem – užší čtecí sloupec */
.post-body {
  max-width: 760px;
  margin: 0 auto;
}

/* --- Titulní obrázek --- */
/* Poměr stran místo pevné výšky – na plné šíři (šířka obsahu 1100 px)
   vyjde 500 px jako dosud, na užším viewportu se zmenšuje proporcionálně. */
.post-cover {
  width: 100%;
  height: auto;
  aspect-ratio: 2.2;
  border-radius: 12px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* --- Hlavička článku --- */
.post-head {
  margin-top: 34px;
}

.post-meta-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  font-family: 'RobotoCondensed', sans-serif;
  font-size: .95em;
}

.post-category {
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
}

.post-meta {
  color: var(--color-text-tertiary);
}

.post-title {
  margin: 16px 0 0;
  font-family: 'RobotoCondensed', sans-serif;
  font-weight: 700;
  font-size: 2.85em;
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--color-text-primary);
}

.post-subtitle {
  margin: 14px 0 0;
  font-size: 1.235em;
  line-height: 1.5;
  color: var(--color-primary);
}

.post-byline {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--color-border);
}

.post-byline-avatar {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: url('/images/misc/avatar.webp') center / cover no-repeat;
}

.post-byline-name {
  font-family: 'RobotoCondensed', sans-serif;
  font-size: 1.09rem;
  color: var(--color-text-primary);
}

.post-byline .post-share {
  margin-left: auto;
}

/* --- Perex --- */
.post-perex {
  margin-top: 30px;
  padding-left: 22px;
  border-left: 3px solid var(--color-primary);
}

.post-perex .perex p {
  margin: 0;
  font-family: Lora, serif;
  font-size: 1.09rem;
  line-height: 1.85;
  color: var(--color-text-secondary);
}

.post-perex .perex p + p {
  margin-top: .7em;
}

/* --- Tělo článku --- */
.post-text {
  margin-top: 34px;
  color: #333848;
  font-family: Lora, serif;
}

.post-text p {
  font-size: 1.09rem;
  line-height: 1.87;
  margin: 0 0 1.3em;
}

.post-text p:last-child {
  margin-bottom: 0;
}

.post-text h2 {
  margin: 1.9em 0 .6em;
  font-family: 'RobotoCondensed', sans-serif;
  font-weight: 400;
  font-size: 1.62em;
  color: var(--color-primary);
}

.post-text a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.post-text strong {
  font-weight: 700;
}

.post-text ul,
.post-text ol {
  padding-left: 1.4em;
  font-size: 1.1em;
  line-height: 1.85;
}

.post-text li {
  margin-bottom: .4em;
}

.post-text img {
  display: block;
  width: 100%;
  margin: 1.3em 0 1.43em;
}

/* YouTube embed (převzato ze zejtra.blog) */
.videoFrame {
  margin: 1.6em 0;
}

.videoFrame .videoWrapper {
  width: 100%;
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 8px;
}

.videoFrame .videoWrapper iframe,
.videoFrame .videoWrapper object,
.videoFrame .videoWrapper embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.post-text .inlineTag::before {
  content: '#';
}

.post-text .inlineTag {
  color: var(--color-primary);
  text-decoration: none;
}

.post-text .inlineTag:hover {
  text-decoration: underline;
}

.post-text .highlightedQuote {
  margin: 1.5em 0;
  padding-left: 22px;
  border-left: 3px solid var(--color-primary);
  font-family: 'RobotoCondensed', sans-serif;
  font-size: 1.5em;
  line-height: 1.4;
  color: var(--color-primary);
}

/* --- Patička článku: štítky + sdílení --- */
.post-footer-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 83px;
  padding-top: 26px;
  border-top: 1px solid var(--color-border);
}

.post-tags {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
}

.post-tag {
  padding: 7px 11px;
  background-color: var(--color-secondary);
  color: var(--color-black);
  border-radius: 5px;
  font-size: .915em;
  text-decoration: none;
  transition: all .15s ease;
}

.post-tag::before {
  content: '# ';
}

.post-tag:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.post-share {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  padding: 10.5px 14px 9.5px 18px;
  border: 1.5px solid var(--color-primary);
  border-radius: 50px;
  color: var(--color-primary);
  font-family: 'RobotoCondensed', sans-serif;
  font-size: .97em;
  line-height: 1;
  cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
}

.post-share:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.post-share-icon {
  width: 19px;
  height: 19px;
}

/* --- Spodní blok: karta autorky + „Číst dál" (50/50, šířka titulního obrázku) --- */
.post-aside {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-top: 50px;
  padding-bottom: 44px;
  border-bottom: 1px solid var(--color-border);
}

.post-author-card {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 22px;
  padding: 28px;
  border-radius: 12px;
  background: linear-gradient(-45deg, rgb(61, 103, 216), rgb(65, 80, 170), #ab47bc, #e7488a);
  background-size: 400% 400%;
  animation: gradient 90s ease infinite;
  color: var(--color-white);
}


.post-author-avatar {
  flex-shrink: 0;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: url('/images/misc/avatar.webp') center / cover no-repeat;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

.post-author-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.post-author-label {
  margin-bottom: 6px;
  font-family: 'RobotoCondensed', sans-serif;
  font-size: .85em;
  letter-spacing: .05em;
  text-transform: uppercase;
  opacity: .8;
}

.post-author-name {
  font-family: 'RobotoCondensed', sans-serif;
  font-size: 1.4em;
}

.post-author-bio {
  margin: 6px 0 0;
  font-size: 1.02em;
  line-height: 1.55;
  opacity: .92;
}

/* --- „Číst dál" – starší článek (obrázek + jemný blur, à la index) --- */
.post-readnext {
  position: relative;
  display: block;
  aspect-ratio: 2.72;
  border-radius: 12px;
  overflow: hidden;
  background-color: color-mix(in srgb, var(--color-black) 5%, var(--color-white));
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  text-decoration: none;
}

.post-readnext::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--color-black) 78%, transparent) 0%,
    transparent 72%
  );
}

.post-readnext-panel {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  height: 58%;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  mask-image: linear-gradient(to top, black 35%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, black 35%, transparent 100%);
}

.post-readnext-label {
  position: absolute;
  z-index: 2;
  top: 24px;
  left: 24px;
  font-family: 'RobotoCondensed', sans-serif;
  font-size: .85em;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-white);
  opacity: .8;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
  transition: opacity .11s ease-in;
}

.post-readnext-text {
  position: absolute;
  z-index: 2;
  left: 24px;
  right: 24px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: opacity .11s ease-in;
}

.post-readnext-title {
  font-family: 'RobotoCondensed', sans-serif;
  font-weight: 700;
  font-size: 1.5em;
  line-height: 1.2;
  color: var(--color-white);
}

.post-readnext:hover .post-readnext-label,
.post-readnext:hover .post-readnext-text {
  opacity: 0;
}

.post-readnext-overlay {
  display: grid;
  place-items: center;
  position: absolute;
  inset: 0;
  z-index: 3;
  backdrop-filter: blur(13px);
  -webkit-backdrop-filter: blur(13px);
  color: var(--color-white);
  font-size: 2.4em;
  text-shadow: 0 0 25px var(--color-black);
  transition: opacity .11s ease-in;
  opacity: 0;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.post-readnext:hover .post-readnext-overlay {
  opacity: 1;
}

/* --- Doporučené články (šířka titulního obrázku, až 3 vedle sebe) --- */
.post-recommended {
  margin-top: 50px;
}

.post-recommended .frame-title {
  margin-bottom: 28px;
}

.post-recommended-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.recommended-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
}

.recommended-card-image {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background-color: color-mix(in srgb, var(--color-black) 5%, var(--color-white));
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.recommended-card-overlay {
  display: grid;
  place-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(13px);
  -webkit-backdrop-filter: blur(13px);
  color: var(--color-white);
  font-size: 2.4em;
  text-shadow: 0 0 25px var(--color-black);
  transition: opacity .11s ease-in;
  opacity: 0;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.recommended-card:hover .recommended-card-overlay {
  opacity: 1;
}

.recommended-card-category {
  display: block;
  margin-top: 12px;
  font-family: 'RobotoCondensed', sans-serif;
  font-size: .9em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-accent);
  text-decoration: none;
}

.recommended-card-title {
  display: block;
  margin-top: 5px;
  font-family: 'RobotoCondensed', sans-serif;
  font-weight: 700;
  font-size: 1.25em;
  line-height: 1.3;
  color: var(--color-text-primary);
  text-decoration: none;
}

/* =====================================================================
   Responzivní vrstva detailu článku. Desktop na plné šíři beze změn.
   ===================================================================== */

/* Box autorky + „Další článek" – nad sebe, jakmile by ve dvou sloupcích
   začaly být zúžené a nepoměrné. Doporučené články přejdou na 2 sloupce. */
@media (max-width: 860px) {

  .post-aside {
    grid-template-columns: 1fr;
  }

  .post-recommended-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobilní zobrazení */
@media (max-width: 600px) {

  .post-frame {
    padding-left: 20px;
    padding-right: 20px;
  }

  .post-cover {
    min-height: 200px;
  }

  .post-title {
    font-size: 1.95em;
  }

  .post-subtitle {
    font-size: 1.1em;
  }

  .post-perex .perex p,
  .post-text p,
  .post-text ul,
  .post-text ol {
    font-size: 1.04em;
  }

  .post-text h2 {
    font-size: 1.4em;
  }

  .post-text .highlightedQuote {
    font-size: 1.25em;
  }

  .post-byline {
    flex-wrap: wrap;
  }

  /* Doporučené – pod sebe */
  .post-recommended-grid {
    grid-template-columns: 1fr;
  }

  .post-author-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 22px;
  }

  .post-footer-row {
    margin-top: 54px;
  }
}