/* ==========================================================================
   FPNNEWS24 PRIME — article.css
   Single article styles: grid, breadcrumb, header, meta, share, featured image,
   body, tags, author box, related posts, sidebar, ad slots.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Article Grid
   -------------------------------------------------------------------------- */
.fpn-article-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fpn-stack-lg);
  max-width: var(--fpn-container-max);
  margin: 0 auto;
  padding: var(--fpn-stack-lg) var(--fpn-gutter);
}

.fpn-article-grid__main {
  min-width: 0;
}

.fpn-article-grid__sidebar {
  min-width: 0;
}

/* --------------------------------------------------------------------------
   2. Breadcrumb
   -------------------------------------------------------------------------- */
.fpn-article-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fpn-stack-xs);
  font-size: var(--fpn-text-body-sm);
  color: var(--fpn-on-surface-variant);
  margin-bottom: var(--fpn-stack-md);
}

.fpn-article-breadcrumb__link {
  color: var(--fpn-on-surface-variant);
  transition: color var(--fpn-transition-fast);
}

.fpn-article-breadcrumb__link:hover {
  color: var(--fpn-primary);
}

.fpn-article-breadcrumb__separator {
  color: var(--fpn-outline);
  font-size: var(--fpn-text-metadata);
}

.fpn-article-breadcrumb__current {
  color: var(--fpn-on-surface);
  font-weight: var(--fpn-fw-medium);
}

/* --------------------------------------------------------------------------
   3. Article Header
   -------------------------------------------------------------------------- */
.fpn-article-header {
  margin-bottom: var(--fpn-stack-lg);
}

.fpn-article-header__category {
  margin-bottom: var(--fpn-stack-sm);
}

.fpn-article-header__title {
  font-family: var(--fpn-font-heading);
  font-size: var(--fpn-text-headline-xl-mobile);
  font-weight: var(--fpn-fw-bold);
  line-height: var(--fpn-lh-headline-xl);
  color: var(--fpn-on-surface);
  margin-bottom: var(--fpn-stack-sm);
}

.fpn-article-header__subtitle {
  font-family: var(--fpn-font-heading);
  font-size: var(--fpn-text-headline-md);
  font-weight: var(--fpn-fw-semi);
  line-height: var(--fpn-lh-headline-md);
  color: var(--fpn-on-surface-variant);
  margin-bottom: var(--fpn-stack-md);
}

/* --------------------------------------------------------------------------
   4. Article Meta
   -------------------------------------------------------------------------- */
.fpn-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fpn-stack-md);
  font-size: var(--fpn-text-body-sm);
  color: var(--fpn-on-surface-variant);
  margin-bottom: var(--fpn-stack-md);
  padding-bottom: var(--fpn-stack-md);
  border-bottom: 1px solid var(--fpn-outline-variant);
}

.fpn-article-meta__author {
  display: flex;
  align-items: center;
  gap: var(--fpn-stack-sm);
  font-weight: var(--fpn-fw-medium);
  color: var(--fpn-on-surface);
}

.fpn-article-meta__author-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.fpn-article-meta__author-name {
  color: var(--fpn-primary);
  transition: color var(--fpn-transition-fast);
}

.fpn-article-meta__author-name:hover {
  color: var(--fpn-primary-container);
}

.fpn-article-meta__date {
  display: flex;
  align-items: center;
  gap: var(--fpn-stack-xs);
}

.fpn-article-meta__reading-time {
  display: flex;
  align-items: center;
  gap: var(--fpn-stack-xs);
}

.fpn-article-meta__comments {
  display: flex;
  align-items: center;
  gap: var(--fpn-stack-xs);
}

.fpn-article-meta__separator {
  width: 4px;
  height: 4px;
  background-color: var(--fpn-outline);
  border-radius: 50%;
}

/* --------------------------------------------------------------------------
   5. Share Bar
   -------------------------------------------------------------------------- */
.fpn-share-bar {
  display: flex;
  align-items: center;
  gap: var(--fpn-stack-sm);
  margin-bottom: var(--fpn-stack-md);
}

.fpn-share-bar__label {
  font-size: var(--fpn-text-metadata);
  font-weight: var(--fpn-fw-medium);
  color: var(--fpn-on-surface-variant);
  margin-right: var(--fpn-stack-xs);
}

.fpn-share-bar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--fpn-radius-full);
  color: #ffffff;
  font-size: 18px;
  transition: transform var(--fpn-transition-fast), box-shadow var(--fpn-transition-fast);
}

.fpn-share-bar__btn:hover {
  transform: scale(1.1);
  box-shadow: var(--fpn-shadow-sm);
}

.fpn-share-bar__btn:focus-visible {
  outline: 2px solid var(--fpn-primary);
  outline-offset: 2px;
}

.fpn-share-bar__btn--whatsapp  { background-color: var(--fpn-share-whatsapp); }
.fpn-share-bar__btn--facebook  { background-color: var(--fpn-share-facebook); }
.fpn-share-bar__btn--x         { background-color: var(--fpn-share-x); }
.fpn-share-bar__btn--telegram  { background-color: var(--fpn-share-telegram); }

.fpn-share-bar__btn--copy {
  background-color: var(--fpn-surface-container-high);
  color: var(--fpn-on-surface);
}

.fpn-share-bar__btn--copy:hover {
  background-color: var(--fpn-surface-variant);
}

/* WhatsApp prominent on mobile */
.fpn-share-bar__btn--whatsapp {
  order: -1;
}

/* Bottom share bar (after article) */
.fpn-share-bar--bottom {
  margin-top: var(--fpn-stack-lg);
  margin-bottom: 0;
  padding-top: var(--fpn-stack-md);
  border-top: 1px solid var(--fpn-outline-variant);
  justify-content: center;
}

.fpn-share-bar--bottom .fpn-share-bar__btn {
  width: 44px;
  height: 44px;
}

/* --------------------------------------------------------------------------
   6. Featured Image
   -------------------------------------------------------------------------- */
.fpn-article-featured {
  margin-bottom: var(--fpn-stack-lg);
}

.fpn-article-featured__img {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  border-radius: var(--fpn-radius-xl);
  aspect-ratio: 16 / 9;
}

.fpn-article-featured__caption {
  font-size: var(--fpn-text-body-sm);
  color: var(--fpn-on-surface-variant);
  margin-top: var(--fpn-stack-sm);
  text-align: center;
  font-style: italic;
}

/* --------------------------------------------------------------------------
   7. Article Body
   -------------------------------------------------------------------------- */
.fpn-article-body {
  font-family: var(--fpn-font-heading);
  font-size: var(--fpn-text-body-lg);
  line-height: 1.8;
  color: var(--fpn-on-surface);
  text-align: justify;
}

/* Paragraphs */
.fpn-article-body p {
  margin-bottom: var(--fpn-stack-lg);
}

/* Drop cap */
.fpn-article-body > p:first-of-type::first-letter {
  float: left;
  font-family: var(--fpn-font-heading);
  font-size: 3.5em;
  line-height: 0.8;
  font-weight: var(--fpn-fw-bold);
  color: var(--fpn-primary);
  margin-right: var(--fpn-stack-sm);
  margin-top: 0.05em;
}

/* Headings inside article body */
.fpn-article-body h2 {
  font-family: var(--fpn-font-heading);
  font-size: var(--fpn-text-headline-lg);
  font-weight: var(--fpn-fw-bold);
  line-height: var(--fpn-lh-headline-lg);
  color: var(--fpn-on-surface);
  margin-top: var(--fpn-stack-lg);
  margin-bottom: var(--fpn-stack-md);
}

.fpn-article-body h3 {
  font-family: var(--fpn-font-heading);
  font-size: var(--fpn-text-headline-md);
  font-weight: var(--fpn-fw-semi);
  line-height: var(--fpn-lh-headline-md);
  color: var(--fpn-on-surface);
  margin-top: var(--fpn-stack-lg);
  margin-bottom: var(--fpn-stack-md);
}

.fpn-article-body h4 {
  font-family: var(--fpn-font-heading);
  font-size: var(--fpn-text-headline-sm);
  font-weight: var(--fpn-fw-semi);
  line-height: var(--fpn-lh-headline-sm);
  color: var(--fpn-on-surface);
  margin-top: var(--fpn-stack-md);
  margin-bottom: var(--fpn-stack-sm);
}

/* Blockquote */
.fpn-article-body blockquote {
  margin: var(--fpn-stack-lg) 0;
  padding: var(--fpn-stack-md) var(--fpn-stack-lg);
  border-left: 4px solid var(--fpn-primary);
  background-color: var(--fpn-surface-container-low);
  border-radius: 0 var(--fpn-radius-lg) var(--fpn-radius-lg) 0;
  font-style: italic;
  font-size: var(--fpn-text-body-lg);
  color: var(--fpn-on-surface-variant);
}

.fpn-article-body blockquote p {
  margin-bottom: var(--fpn-stack-sm);
}

.fpn-article-body blockquote cite {
  display: block;
  font-size: var(--fpn-text-body-sm);
  font-style: normal;
  font-weight: var(--fpn-fw-medium);
  color: var(--fpn-primary);
}

/* Lists */
.fpn-article-body ul,
.fpn-article-body ol {
  margin: var(--fpn-stack-md) 0 var(--fpn-stack-lg) var(--fpn-stack-lg);
}

.fpn-article-body ul {
  list-style: disc;
}

.fpn-article-body ol {
  list-style: decimal;
}

.fpn-article-body li {
  margin-bottom: var(--fpn-stack-sm);
  line-height: 1.7;
}

/* Links inside article body */
.fpn-article-body a {
  color: var(--fpn-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--fpn-transition-fast);
}

.fpn-article-body a:hover {
  color: var(--fpn-primary-container);
}

/* Tables */
.fpn-article-body table {
  width: 100%;
  margin: var(--fpn-stack-lg) 0;
  border: 1px solid var(--fpn-outline-variant);
  border-radius: var(--fpn-radius-lg);
  overflow: hidden;
}

.fpn-article-body thead {
  background-color: var(--fpn-surface-container);
}

.fpn-article-body th {
  font-family: var(--fpn-font-heading);
  font-weight: var(--fpn-fw-semi);
  text-align: left;
  padding: var(--fpn-stack-sm) var(--fpn-stack-md);
  border-bottom: 2px solid var(--fpn-outline-variant);
}

.fpn-article-body td {
  padding: var(--fpn-stack-sm) var(--fpn-stack-md);
  border-bottom: 1px solid var(--fpn-outline-variant);
}

.fpn-article-body tr:last-child td {
  border-bottom: none;
}

/* Video embeds */
.fpn-article-body iframe,
.fpn-article-body .wp-block-embed {
  margin: var(--fpn-stack-lg) 0;
}

.fpn-article-body .fpn-video-wrapper {
  position: relative;
  width: 100%;
  margin: var(--fpn-stack-lg) 0;
}

.fpn-article-body .fpn-video-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

/* Inline images */
.fpn-article-body img {
  border-radius: var(--fpn-radius-lg);
  max-width: 100%;
  height: auto;
  margin: var(--fpn-stack-md) 0;
}

.fpn-article-body img.alignleft {
  float: left;
  margin-right: var(--fpn-stack-md);
  margin-bottom: var(--fpn-stack-sm);
  max-width: 50%;
}

.fpn-article-body img.alignright {
  float: right;
  margin-left: var(--fpn-stack-md);
  margin-bottom: var(--fpn-stack-sm);
  max-width: 50%;
}

.fpn-article-body img.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Highlight / mark */
.fpn-article-body mark {
  background-color: var(--fpn-primary-fixed);
  color: var(--fpn-on-primary-fixed);
  padding: 0 2px;
  border-radius: 2px;
}

/* Separator */
.fpn-article-body hr {
  border: none;
  height: 1px;
  background-color: var(--fpn-outline-variant);
  margin: var(--fpn-stack-lg) 0;
}

/* --------------------------------------------------------------------------
   8. Article Tags
   -------------------------------------------------------------------------- */
.fpn-article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fpn-stack-sm);
  margin-top: var(--fpn-stack-lg);
  padding-top: var(--fpn-stack-md);
  border-top: 1px solid var(--fpn-outline-variant);
}

.fpn-article-tags__label {
  font-size: var(--fpn-text-body-sm);
  font-weight: var(--fpn-fw-bold);
  color: var(--fpn-on-surface-variant);
  display: flex;
  align-items: center;
  gap: var(--fpn-stack-xs);
}

.fpn-article-tags__tag {
  display: inline-flex;
  align-items: center;
  padding: var(--fpn-stack-xs) var(--fpn-stack-sm);
  background-color: var(--fpn-surface-container-high);
  color: var(--fpn-on-surface);
  font-size: var(--fpn-text-metadata);
  font-weight: var(--fpn-fw-medium);
  border-radius: var(--fpn-radius-lg);
  transition: background-color var(--fpn-transition-fast), color var(--fpn-transition-fast);
}

.fpn-article-tags__tag:hover {
  background-color: var(--fpn-primary);
  color: var(--fpn-on-primary);
}

/* --------------------------------------------------------------------------
   9. Author Box
   -------------------------------------------------------------------------- */
.fpn-author-box {
  display: flex;
  gap: var(--fpn-stack-md);
  padding: var(--fpn-stack-lg);
  background-color: var(--fpn-surface-container-low);
  border-radius: var(--fpn-radius-xl);
  margin-top: var(--fpn-stack-lg);
}

.fpn-author-box__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.fpn-author-box__info {
  min-width: 0;
}

.fpn-author-box__name {
  font-family: var(--fpn-font-heading);
  font-size: var(--fpn-text-body-lg);
  font-weight: var(--fpn-fw-bold);
  color: var(--fpn-on-surface);
  margin-bottom: var(--fpn-stack-xs);
}

.fpn-author-box__name a {
  color: var(--fpn-primary);
  transition: color var(--fpn-transition-fast);
}

.fpn-author-box__name a:hover {
  color: var(--fpn-primary-container);
}

.fpn-author-box__bio {
  font-size: var(--fpn-text-body-sm);
  color: var(--fpn-on-surface-variant);
  line-height: 1.6;
  margin-bottom: var(--fpn-stack-sm);
}

.fpn-author-box__social {
  display: flex;
  gap: var(--fpn-stack-sm);
}

.fpn-author-box__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--fpn-on-surface-variant);
  border-radius: var(--fpn-radius-full);
  transition: color var(--fpn-transition-fast), background-color var(--fpn-transition-fast);
}

.fpn-author-box__social-link:hover {
  color: var(--fpn-primary);
  background-color: var(--fpn-surface-variant);
}

/* --------------------------------------------------------------------------
   10. Related Posts
   -------------------------------------------------------------------------- */
.fpn-related-posts {
  margin-top: var(--fpn-stack-lg);
  padding-top: var(--fpn-stack-lg);
  border-top: 1px solid var(--fpn-outline-variant);
}

.fpn-related-posts__header {
  display: flex;
  align-items: center;
  padding-left: var(--fpn-stack-md);
  border-left: 4px solid var(--fpn-primary);
  margin-bottom: var(--fpn-stack-md);
}

.fpn-related-posts__title {
  font-family: var(--fpn-font-heading);
  font-size: var(--fpn-text-headline-md);
  font-weight: var(--fpn-fw-bold);
  color: var(--fpn-on-surface);
}

.fpn-related-posts__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fpn-stack-md);
}

.fpn-related-posts__card {
  background-color: var(--fpn-surface-container-lowest);
  border-radius: var(--fpn-radius-xl);
  overflow: hidden;
  transition: box-shadow var(--fpn-transition-normal), transform var(--fpn-transition-normal);
}

.fpn-related-posts__card:hover {
  box-shadow: var(--fpn-shadow-md);
  transform: translateY(-2px);
}

.fpn-related-posts__card-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.fpn-related-posts__card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--fpn-transition-slow);
}

.fpn-related-posts__card:hover .fpn-related-posts__card-thumb img {
  transform: scale(1.03);
}

.fpn-related-posts__card-body {
  padding: var(--fpn-stack-md);
}

.fpn-related-posts__card-category {
  margin-bottom: var(--fpn-stack-xs);
}

.fpn-related-posts__card-title {
  font-family: var(--fpn-font-heading);
  font-size: var(--fpn-text-body-md);
  font-weight: var(--fpn-fw-semi);
  line-height: 1.3;
  color: var(--fpn-on-surface);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fpn-related-posts__card-title a:hover {
  color: var(--fpn-primary);
}

.fpn-related-posts__card-meta {
  font-size: var(--fpn-text-metadata);
  color: var(--fpn-on-surface-variant);
  margin-top: var(--fpn-stack-xs);
}

/* --------------------------------------------------------------------------
   11. Inline Related News
   -------------------------------------------------------------------------- */
.fpn-inline-related {
  margin: var(--fpn-stack-lg) 0;
  padding: var(--fpn-stack-md);
  background-color: var(--fpn-surface-container-low);
  border-radius: var(--fpn-radius-xl);
  border-left: 4px solid var(--fpn-primary);
}

.fpn-inline-related__label {
  font-size: var(--fpn-text-label-caps);
  font-weight: var(--fpn-fw-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fpn-primary);
  margin-bottom: var(--fpn-stack-sm);
}

.fpn-inline-related__title {
  font-family: var(--fpn-font-heading);
  font-size: var(--fpn-text-body-lg);
  font-weight: var(--fpn-fw-semi);
  line-height: 1.3;
  color: var(--fpn-on-surface);
}

.fpn-inline-related__title a:hover {
  color: var(--fpn-primary);
}

/* --------------------------------------------------------------------------
   12. Post Navigation (Prev/Next)
   -------------------------------------------------------------------------- */
.fpn-post-nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fpn-stack-md);
  margin-top: var(--fpn-stack-lg);
  padding-top: var(--fpn-stack-lg);
  border-top: 1px solid var(--fpn-outline-variant);
}

.fpn-post-nav__item {
  display: flex;
  flex-direction: column;
  gap: var(--fpn-stack-xs);
  padding: var(--fpn-stack-md);
  background-color: var(--fpn-surface-container-low);
  border-radius: var(--fpn-radius-xl);
  transition: background-color var(--fpn-transition-fast);
}

.fpn-post-nav__item:hover {
  background-color: var(--fpn-surface-variant);
}

.fpn-post-nav__label {
  font-size: var(--fpn-text-label-caps);
  font-weight: var(--fpn-fw-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fpn-primary);
}

.fpn-post-nav__title {
  font-family: var(--fpn-font-heading);
  font-size: var(--fpn-text-body-md);
  font-weight: var(--fpn-fw-semi);
  line-height: 1.3;
  color: var(--fpn-on-surface);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fpn-post-nav__item--next {
  text-align: right;
}

.fpn-post-nav__item--next .fpn-post-nav__label {
  justify-self: flex-end;
}

/* --------------------------------------------------------------------------
   13. Article Sidebar
   -------------------------------------------------------------------------- */
.fpn-article-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--fpn-stack-lg);
}

.fpn-article-sidebar__widget {
  background-color: var(--fpn-surface-container-lowest);
  border-radius: var(--fpn-radius-xl);
  padding: var(--fpn-stack-lg);
}

.fpn-article-sidebar__widget-title {
  font-family: var(--fpn-font-heading);
  font-size: var(--fpn-text-headline-sm);
  font-weight: var(--fpn-fw-bold);
  color: var(--fpn-on-surface);
  padding-left: var(--fpn-stack-md);
  border-left: 4px solid var(--fpn-primary);
  margin-bottom: var(--fpn-stack-md);
}

/* --------------------------------------------------------------------------
   14. Article Ad Slots
   -------------------------------------------------------------------------- */
.fpn-article-ad--top {
  margin: var(--fpn-stack-lg) 0;
}

.fpn-article-ad--inline {
  margin: var(--fpn-stack-lg) 0;
  text-align: center;
}

.fpn-article-ad--bottom {
  margin: var(--fpn-stack-lg) 0;
}

/* --------------------------------------------------------------------------
   15. Article Body — Special Elements
   -------------------------------------------------------------------------- */

/* Pull quote */
.fpn-article-body .fpn-pullquote {
  font-family: var(--fpn-font-heading);
  font-size: var(--fpn-text-headline-md);
  font-weight: var(--fpn-fw-bold);
  line-height: 1.4;
  color: var(--fpn-primary);
  text-align: center;
  margin: var(--fpn-stack-lg) 0;
  padding: var(--fpn-stack-lg) 0;
  border-top: 3px solid var(--fpn-primary);
  border-bottom: 3px solid var(--fpn-primary);
}

/* Info box */
.fpn-article-body .fpn-infobox {
  padding: var(--fpn-stack-md) var(--fpn-stack-lg);
  background-color: var(--fpn-tertiary-fixed);
  border-radius: var(--fpn-radius-xl);
  margin: var(--fpn-stack-lg) 0;
}

.fpn-article-body .fpn-infobox__title {
  font-family: var(--fpn-font-heading);
  font-size: var(--fpn-text-body-lg);
  font-weight: var(--fpn-fw-bold);
  color: var(--fpn-on-tertiary-fixed);
  margin-bottom: var(--fpn-stack-sm);
}

.fpn-article-body .fpn-infobox__content {
  font-size: var(--fpn-text-body-md);
  color: var(--fpn-on-tertiary-fixed-variant);
  line-height: 1.6;
}

/* Warning/Alert box */
.fpn-article-body .fpn-alertbox {
  padding: var(--fpn-stack-md) var(--fpn-stack-lg);
  background-color: var(--fpn-error-container);
  border-left: 4px solid var(--fpn-error);
  border-radius: 0 var(--fpn-radius-xl) var(--fpn-radius-xl) 0;
  margin: var(--fpn-stack-lg) 0;
}

/* Source attribution */
.fpn-article-source {
  font-size: var(--fpn-text-body-sm);
  color: var(--fpn-on-surface-variant);
  font-style: italic;
  margin-top: var(--fpn-stack-md);
}

/* Updated badge */
.fpn-article-updated {
  display: inline-flex;
  align-items: center;
  gap: var(--fpn-stack-xs);
  font-size: var(--fpn-text-metadata);
  font-weight: var(--fpn-fw-medium);
  color: var(--fpn-tertiary);
  background-color: var(--fpn-tertiary-fixed);
  padding: 2px var(--fpn-stack-sm);
  border-radius: var(--fpn-radius-default);
}

/* Reading time estimate in sidebar */
.fpn-article-sidebar__reading-time {
  display: flex;
  align-items: center;
  gap: var(--fpn-stack-sm);
  padding: var(--fpn-stack-md);
  background-color: var(--fpn-surface-container-low);
  border-radius: var(--fpn-radius-lg);
  font-size: var(--fpn-text-body-sm);
  color: var(--fpn-on-surface-variant);
}