/* ==========================================================================
   SLID Media — Article Page Styles
   Figma: iFbFpxME72YfNJuEA2n13x / node 339-1991 (Article page)
   ========================================================================== */

/* -------------------------------------------------------------------------
   ARTICLE PAGE WRAPPER
   Figma: left-wrapper-gap36px — column, gap:36px, padding:44px 0, width:860
   ------------------------------------------------------------------------- */
.article-page-wrapper {
  max-width: var(--slid-container-fluid);
  margin: 0 auto;
  padding: var(--slid-padding-page);
  display: flex;
  flex-direction: column;
  gap: 36px;
  align-items: center;
}

.article-page-wrapper__content {
  max-width: 880px;
  width: 100%;
}

/* -------------------------------------------------------------------------
   ARTICLE HEADER CARD (card-long)
   Figma: card-long (layout_BNWCG5) — height:260px, background:#5FABE6
         art-title-text (layout_3C0LTX) — column, justify-content:space-between
         info-bar (layout_4SOZ0L) — row, justify-content:space-between, padding:4px 20px
   ------------------------------------------------------------------------- */
.article-header-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #5FABE6;
  /* Figma: fill_QKN4F4 = #5FABE6 */
  min-height: 260px;
  /* Figma: layout_BNWCG5 height:260 */
  width: 100%;
}

.article-header-card__top {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  padding: 20px;
  /* Figma: layout_3C0LTX padding:20px */
  gap: 12px;
}

/* Tags row inside the header card */
.article-header-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Individual tag pill in article header (same as slid-card__tag but with specific BG) */
.article-header-card__tags .category,
.article-header-card__tags .slid-card__tag,
.article-header-card__tags a {
  display: inline-block;
  padding: 4px 10px;
  /* Figma: layout_6FB01C padding:4px 10px */
  background-color: #D9EEFF;
  /* Figma: fill_J0NEE2 = #D9EEFF */
  font-family: var(--slid-font-heading, "Forma DJR Cyrillic Text", serif);
  font-weight: 700;
  font-size: 14px;
  /* Figma: style_KR32I4 fontSize:14 fontWeight:500 (Forma DJR) */
  line-height: 1.2;
  text-transform: lowercase;
  /* Figma: textCase:LOWER */
  color: #000000 !important;
  text-decoration: none !important;
  border: none;
  outline: none;
  box-shadow: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
  white-space: nowrap;
}

.article-header-card__tags .category:hover,
.article-header-card__tags a:hover {
  opacity: 0.8;
}

/* Article H1 title */
.article-header-card__title {
  font-family: var(--slid-font-heading, "Forma DJR Cyrillic Text", serif);
  font-weight: 700;
  font-size: 36px;
  /* Figma: H1 fontSize:36 fontWeight:700 */
  line-height: 1.2;
  color: #FFFFFF;
  /* Figma: fill_P3O6S8 = #FFFFFF */
  margin: 0;
}

.article-header-card__title a {
  color: inherit !important;
  text-decoration: none !important;
}

/* -------------------------------------------------------------------------
   INFO-BAR (author + date + read time)
   Figma: info-bar (layout_4SOZ0L) — row, justify-content:space-between,
         padding:4px 20px, background fill_0596HI (= transparent on blue card)
         height appears ~38px
   ------------------------------------------------------------------------- */
.article-header-card__infobar {
  position: relative;
  height: 38px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  background-color: #EDF7FF;
  /* Light blue bar per main page cards */
  z-index: 10;
  margin-top: auto;
}

.article-header-card__author-wrap {
  display: flex;
  align-items: center;
  color: #000000;
  flex-wrap: wrap;
}

.article-header-card__author,
.article-header-card__author-wrap .author-name,
.article-header-card__author-wrap a {
  font-family: var(--slid-font-body, "Montserrat", sans-serif);
  font-weight: 500;
  font-size: 16px;
  color: #000000 !important;
  text-decoration: none !important;
  transition: color 0.3s ease;
}

.article-header-card__author-wrap .author-name {
  max-width: none;
  overflow: visible;
  text-overflow: clip;
}

.article-header-card__author-wrap .author-ava {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 6px;
}

.article-header-card__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  flex-shrink: 0;
}

.article-header-card__date,
.article-header-card__read-time {
  font-family: var(--slid-font-body, "Montserrat", sans-serif);
  font-weight: 500;
  font-size: 16px;
  color: #000000;
  white-space: nowrap;
}

.article-header-card__read-time {
  display: flex;
  align-items: center;
  gap: 4px;
  /* Figma: layout_FS889U gap:4px */
}

.article-header-card__read-time svg {
  flex-shrink: 0;
  color: #666666;
}

/* -------------------------------------------------------------------------
   ARTICLE SECTION TITLES (Більше по тегам, Автор, Схожі публікації)
   Figma: H3 — fontSize:28, fontWeight:500, Forma DJR
   ------------------------------------------------------------------------- */
.article-section-title {
  font-family: var(--slid-font-heading, "Forma DJR Cyrillic Text", serif);
  font-weight: 500;
  font-size: 28px;
  /* Figma: H3 fontSize:28 fontWeight:700 */
  line-height: 1.2;
  color: #000000;
  margin: 0 !important;
}

/* -------------------------------------------------------------------------
   TAGS BLOCK
   Figma: Frame 10 (layout_U9VF68) — column, gap:36px, padding-bottom:44px
          tag-bar (layout_X1VLS2) — row, gap:10px
          tag — layout_6FB01C: padding:4px 10px, bg:#FFFFFF, border:1px solid #000
   ------------------------------------------------------------------------- */
.article-tags-block {
  display: flex;
  flex-direction: column;
  gap: 36px;
  width: 100%;
}

.article-tags-block__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  /* Figma: layout_X1VLS2 gap:10px */
}

.article-tag {
  display: inline-block;
  padding: 4px 10px;
  /* Figma: layout_6FB01C padding:4px 10px */
  font-family: var(--slid-font-heading, "Forma DJR Cyrillic Text", serif);
  font-weight: 700;
  font-size: 14px;
  /* Figma: 'tag text' fontSize:14 fontWeight:500 */
  line-height: 1.2;
  text-transform: lowercase;
  /* Figma: textCase:LOWER */
  color: #000000 !important;
  background-color: #FFFFFF;
  border: 1px solid #000000;
  /* Figma: strokes fill_0596HI, strokeWeight:1px */
  text-decoration: none !important;
  transition: background-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

.article-tag:hover {
  background-color: #000000;
  color: #FFFFFF !important;
}

/* -------------------------------------------------------------------------
   AUTHORS BLOCK
   Figma: author-card (layout_PFSWGC) — column, gap:10px, padding-top:20px,
          width:1024 (full width), height:140
   ------------------------------------------------------------------------- */
.article-authors-block {
  display: flex;
  flex-direction: column;
  gap: 36px;
  width: 100%;
}

/* Override author-card styles for article page context */
.article-authors-block .author-card {
  background-color: #5FABE6;
  /* Figma: fill_QKN4F4 = #5FABE6 */
  padding: 0 !important;
  width: 100%;
  color: #FFFFFF !important;
}

.author-card-mobile-link {
  display: none;
}

.article-authors-block .author-info {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 22px 0 !important;
  margin-bottom: 0 !important;
}

.article-authors-block .author-profile-wrapper {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
  padding-left: 20px;
  /* Figma: layout_8YMA6X padding-left:20px, gap:10px */
}

.article-authors-block .author-image-img,
.article-authors-block .author-image img {
  width: 96px !important;
  height: 96px !important;
  border-radius: 48px !important;
  object-fit: cover;
  flex-shrink: 0;
  background-color: #FFFFFF;
}

.article-authors-block .author-details {
  display: flex;
  flex-direction: column;
  padding-top: 8px;
  gap: 4px;
}

.article-authors-block .author-details .profile-author-name {
  font-family: var(--slid-font-heading, "Forma DJR Cyrillic Text", serif);
  font-weight: 500;
  font-size: 28px;
  color: #FFFFFF;
  margin: 0;
}

.article-authors-block .author-role {
  font-family: var(--slid-font-body, "Montserrat", sans-serif);
  font-size: 14px;
  color: #FFFFFF;
  opacity: 0.9;
}

.article-authors-block .author-profile-link {
  font-family: var(--slid-font-body, "Montserrat", sans-serif);
  font-size: 14px;
  color: #FFFFFF;
  text-decoration: underline;
}

.article-authors-block .author-profile-link:after {
  content: "";
}

.article-authors-block .author-profile-link:hover {
  opacity: 0.8;
}

.article-authors-block .author-links {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  padding-right: 20px;
}

.article-authors-block .author-links-heading {
  font-family: var(--slid-font-body, "Montserrat", sans-serif);
  font-size: 14px;
  color: #FFFFFF;
  margin-bottom: 4px;
}

.article-authors-block .author-socials {
  display: flex;
  gap: 12px;
}

.article-authors-block .user-social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
}

.article-authors-block .author-bio {
  display: block;
  padding: 0 20px 20px 132px; /* 20px card padding + 96px avatar + 16px gap */
  font-family: var(--slid-font-body, "Montserrat", sans-serif);
  font-size: 16px;
  line-height: 1.4;
  color: #FFFFFF;
}

.article-authors-block .user-social img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Apply white color filter for dark bg */
  filter: brightness(0) invert(1);
  transition: opacity 0.2s ease;
}

.article-authors-block .user-social:hover img {
  opacity: 0.7;
}

.article-authors-block .author-bio {
  display: none;
  /* Bio not shown on article page per design */
}

/* -------------------------------------------------------------------------
   SIMILAR PUBLICATIONS BLOCK
   Figma: Container (layout_4E3E8G) — row, justify-content:space-between
          Cards grid (layout_PNRBGR) — row, gap:24px, width:1024
   ------------------------------------------------------------------------- */
.article-related-block {
  display: flex;
  flex-direction: column;
  gap: 36px;
  width: 100%;
}

.article-related-block__header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  /* Figma: layout_4E3E8G — row, justify-content:space-between */
}

.article-related-block__more-link {
  font-family: var(--slid-font-body, "Montserrat", sans-serif);
  font-weight: 500;
  font-size: 16px;
  /* Figma: Body small */
  line-height: 1.2;
  color: #000000;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.article-related-block__more-link:hover {
  opacity: 0.6;
}

.article-related-block__grid {
  display: grid;
  grid-template-columns: repeat(2, var(--slid-card-width-desktop));
  justify-content: space-between;
  gap: 24px;
  /* Figma: layout_PNRBGR gap:24px */
}

@media (max-width: 719px) {
  .article-related-block__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* -------------------------------------------------------------------------
   ARTICLE BODY CONTENT
   (Post content styles already exist in post-content.css)
   Hide old share panel (not needed per new design)
   ------------------------------------------------------------------------- */
.post-share-container:not(.in-content) {
  display: none;
}

.post-subscribe {
  width: 100%;
}

/* -------------------------------------------------------------------------
   RESPONSIVE — Mobile (≤ 768px)
   ------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .article-page-wrapper {
    padding: 0 16px 22px;
    gap: 18px;
  }
}

@media (max-width: 768px) {
  .article-header-card {
    min-height: auto;
    margin-top: 24px;
  }

  .article-header-card__top {
    justify-content: flex-start;
    gap: 14px;
    padding: 14px;
  }

  .article-header-card__title {
    font-size: 24px;
  }

  .article-header-card__infobar {
    height: auto !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 8px 16px;
  }

  .article-header-card__infobar .icon-views:before {
    background-image: url("/img/metrics/views-01.svg");
  }

  .article-header-card__infobar .icon-read-time:before {
    background-image: url("/img/metrics/time-01.svg");
  }

  .article-header-card__meta {
    gap: 8px;
  }

  .article-header-card__date,
  .article-header-card__read-time {
    font-size: 14px;
  }

  .article-section-title {
    font-size: 20px;
  }

  .article-related-block__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .article-authors-block .author-card {
    padding: 10px 0;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
  }

  .article-authors-block .author-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 0;
    margin-bottom: 0 !important;
  }

  .article-authors-block .author-profile-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
    gap: 10px;
    width: 100%;
  }

  .article-authors-block .author-details {
    padding-top: 0;
    margin-top: 0;
    justify-content: center;
  }

  .article-authors-block .author-details .profile-author-name {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.1;
    margin-bottom: 4px;
  }

  .article-authors-block .author-role {
    font-size: 12px;
    line-height: 1.3;
  }

  .article-authors-block .author-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 10px;
    gap: 10px;
    width: 100%;
  }

  .article-authors-block .author-profile-link {
    display: none;
    /* Hidden on mobile, as the whole card becomes clickable */
  }

  .author-card-mobile-link {
    display: block !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
  }

  .article-authors-block .author-links-heading {
    font-size: 12px;
    text-align: center;
    margin-bottom: 0;
    line-height: 1.4;
  }

  .article-authors-block .author-socials {
    justify-content: center;
    gap: 20px;
  }

  .article-section-title {
    font-size: 20px;
    margin: 0 !important;
  }

  .article-related-block__header {
    align-items: baseline;
  }

  .article-related-block__more-link {
    font-size: 12px;
  }

  .article-authors-block .author-bio {
    padding: 10px 20px;
    text-align: center;
    font-size: 14px;
    color: #FFFFFF;
  }
}

@media (max-width: 480px) {
  .article-header-card__top {
    padding: 14px;
  }

  .article-header-card__title {
    font-size: 24px;
  }

  .article-header-card__infobar {
    padding: 8px 16px;
  }
}