/* ======================================
   Rampaga article-page.css — v3.1
   one-column article layout
   ====================================== */

body.page--entry {
  background: var(--page-background-color, #eef2f6);
  color: var(--text-color, #20262d);
}

/* ===== Page shell ===== */

.article-page {
  --article-shell-width: 960px;
  --article-shell-gap: 0.875rem;
  --article-shell-radius: 1.125rem;
  --article-shell-padding: 1.5625rem;

  --article-content-width: var(--layout-content-width, 720px);
  --article-flow-space: 1.375rem;
  --article-flow-space-lg: calc(var(--article-flow-space) * 1.5);

  padding: clamp(1.25rem, 2vw, 2rem) 0 clamp(2.5rem, 4vw, 4.5rem);
}

/* ===== Breadcrumbs card ===== */

.article-breadcrumbs {
  width: min(100% - 2rem, var(--article-shell-width));
  margin: 0 auto var(--article-shell-gap);
  padding: 0.9375rem var(--article-shell-padding);
  border-radius: var(--article-shell-radius);
  background: var(--surface-color, #f7f9fb);

  & .article-breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--text-muted-color, #6b7280);
    font-size: 0.8125rem;
    line-height: 1.4;
    opacity: 0.85;
  }

  & .article-breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    min-width: 0;

    &:not(:last-child)::after {
      content: "›";
      margin-left: 0.75rem;
      color: #9aa4ae;
    }
  }

  & a {
    color: inherit;
    text-decoration: none;

    &:hover,
    &:focus-visible {
      color: var(--accent-color, #1677c8);
    }
  }
}

/* ===== Main article card ===== */

.article-main {
  width: min(100% - 2rem, var(--article-shell-width));
  min-width: 0;
  margin: 0 auto;
  padding: var(--article-shell-padding) 0;
  border-radius: var(--article-shell-radius);
  background: var(--surface-color, #f7f9fb);
}

/* ===== Article head ===== */

.article-head {
  margin-bottom: 1.5rem;
  padding-inline: var(--article-shell-padding);
}

.article-head__meta-top {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
}

.article-head__section {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding-inline: 0.625rem;
  border-radius: var(--radius-pill, 999px);
  background: color-mix(in srgb, var(--surface-subtle-color, #e8eef3) 88%, white);
  color: #42505f;
  font-size: 0.75rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;

  &:hover,
  &:focus-visible {
    background: #dce5ec;
    color: var(--text-strong-color, #181c22);
  }
}

.article-title {
  max-width: 32ch;
  margin: 0 auto 1rem;
  color: var(--text-strong-color, #181c22);
  font-size: clamp(1.625rem, 2vw, 2.25rem);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-align: center;
  hyphens: auto;
  word-break: normal;
  overflow-wrap: break-word;
  /* text-wrap: balance; */
}

.article-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;

  & .article-meta__main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 0.75rem;
    color: var(--text-muted-color, #6b7280);
    font-size: 0.8125rem;
    line-height: 1.4;
  }

  & .article-meta__author-wrap {
    display: inline-flex;
    align-items: center;
  }

  & .article-meta__author {
    color: var(--text-strong-color, #181c22);
    font-weight: 600;
    text-decoration: none;

    &:hover,
    &:focus-visible {
      color: var(--accent-hover-color, #0f6f8f);
    }
  }

  & .article-meta__separator,
  & .article-meta__reads,
  & .article-meta__date {
    color: var(--text-muted-color, #6b7280);
  }

}

/* ===== Hero ===== */

.article-hero {
  margin: 0 0 1.5rem;
  overflow: hidden;
  background: var(--surface-strong-color, #dde5ea);

  & img {
    display: block;
    /* width: 100%; */
    max-width: 100%;
    /* aspect-ratio: 16 / 9; */
    object-fit: cover;
  }
}

/* ===== Article content ===== */

.article-content {
  max-width: calc(var(--article-content-width) + calc(var(--layout-padding-inline) * 2));
  margin: 0 auto;
  padding-inline: var(--layout-padding-inline);
  color: var(--article-text-color, #1f2933);
  font-family: var(--font-family-base, sans-serif);
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.25rem);
  line-height: 1.65;
  font-weight: 385;
  letter-spacing: 0.01em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  word-break: normal;

  & > * {
    margin-block: 0 var(--article-flow-space);
  }

  & > :first-child {
    margin-top: 0;
  }

  & > :last-child {
    margin-bottom: 0;
  }

  & > p:first-of-type {
    font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
    line-height: 1.7;
    color: #3a4552;
  }

  & p:empty {
    display: none;
  }

  & p,
  & ul,
  & ol,
  & blockquote,
  & pre,
  & figure,
  & table,
  & hr {
    margin-block: 0 var(--article-flow-space);
  }

  & h1,
  & h2,
  & h3,
  & h4,
  & h5,
  & h6 {
    margin: 0;
    color: var(--article-title-color, rgba(22, 21, 21, 0.92));
    font-weight: 700;
    letter-spacing: -0.02em;
  }

  & h1 {
    font-size: clamp(1.75rem, 1.55rem + 1vw, 2.5rem);
    line-height: 1.12;
    margin-bottom: calc(var(--article-flow-space) * 0.85);
  }

  & h2 {
    font-size: clamp(1.375rem, 1.25rem + 0.65vw, 1.75rem);
    line-height: 1.22;
    margin-top: calc(var(--article-flow-space) * 1.6);
    margin-bottom: calc(var(--article-flow-space) * 0.6);
    text-wrap: balance;
  }

  & h3 {
    font-size: 1.1875rem;
    line-height: 1.3;
    margin-top: calc(var(--article-flow-space) * 1.2);
    margin-bottom: calc(var(--article-flow-space) * 0.5);
  }

  & h4 {
    font-size: 1.0625rem;
    line-height: 1.35;
    margin-top: calc(var(--article-flow-space) * 1);
    margin-bottom: calc(var(--article-flow-space) * 0.45);
  }

  & h5,
  & h6 {
    font-size: 1rem;
    line-height: 1.35;
    margin-top: calc(var(--article-flow-space) * 0.9);
    margin-bottom: calc(var(--article-flow-space) * 0.4);
  }

  & strong,
  & b {
    font-weight: 600;
  }

  & em,
  & i {
    font-style: italic;
  }

  & small,
  & .muted {
    color: var(--article-muted-color, rgba(64, 72, 82, 0.72));
  }

  & a {
    color: var(--article-link-color, #1677c8);
    text-decoration: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
    transition:
      color var(--transition-fast, 150ms ease),
      text-decoration-thickness var(--transition-fast, 150ms ease);

    &:visited {
      color: var(--article-link-visited-color, #5f6fd9);
    }

    &:hover,
    &:focus-visible {
      text-decoration-thickness: 0.12em;
    }
  }

  & ul,
  & ol {
    padding-left: 1.2em;
  }

  & li {
    margin: 0.35em 0;

    &::marker {
      color: rgba(64, 72, 82, 0.55);
    }
  }

  & hr {
    border: 0;
    border-top: 1px solid var(--article-rule-color, rgba(68, 66, 66, 0.12));
    margin-block: calc(var(--article-flow-space) * 1.4);
  }

  & blockquote {
    padding: 0.875rem 1rem;
    border-left: 3px solid rgba(31, 41, 55, 0.18);
    border-radius: 0 0.75rem 0.75rem 0;
    background: var(--article-card-background-color, rgba(31, 41, 55, 0.035));
    color: rgba(45, 45, 45, 0.82);

    & > *:last-child {
      margin-bottom: 0;
    }
  }

  & code,
  & kbd,
  & samp {
    padding: 0.15em 0.35em;
    border-radius: 0.5rem;
    background: var(--article-code-background-color, rgba(31, 41, 55, 0.05));
    font-family: var(--font-family-mono, monospace);
    font-size: 0.92em;
  }

  & pre {
    overflow-x: auto;
    padding: 0.875rem 1rem;
    border: 1px solid rgba(31, 41, 55, 0.08);
    border-radius: 0.875rem;
    background: var(--article-code-background-color, rgba(31, 41, 55, 0.05));

    & code {
      padding: 0;
      border-radius: 0;
      background: transparent;
    }
  }

  & img,
  & video {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 1rem;
  }

  & figure {
    width: 100%;

    & img {
      width: 100%;
    }
  }

  & figcaption {
    margin-top: 0.625rem;
    color: var(--article-muted-color, rgba(64, 72, 82, 0.72));
    font-size: var(--font-size-caption, 0.875rem);
    line-height: 1.45;
  }

  & table {
    width: 100%;
    overflow: hidden;
    border: 1px solid rgba(31, 41, 55, 0.08);
    border-radius: 0.875rem;
    border-collapse: collapse;
    border-spacing: 0;
    background: rgba(255, 255, 255, 0.55);
    font-size: 0.9375rem;
    line-height: 1.5;
  }

  & th,
  & td {
    padding: 0.75rem 0.875rem;
    border-bottom: 1px solid rgba(31, 41, 55, 0.08);
    text-align: left;
    vertical-align: top;
  }

  & tr:last-child td {
    border-bottom: 0;
  }

  & th {
    background: rgba(31, 41, 55, 0.035);
    font-weight: 600;
  }

  & iframe {
    display: block;
    max-width: 100%;
    border: 0;
  }
}

/* ===== Video ===== */

.article-content {
  & .fr-video,
  & .video {
    position: relative;
    display: block;
    margin: 0 0 var(--article-flow-space);
    margin-top: var(--article-flow-space-lg);
    overflow: hidden;
    border: 1px solid var(--border-color, rgba(17, 24, 39, 0.08));
    border-radius: 1.125rem;
    background: #e9eef2;

    &::before {
      content: "Загрузка видео…";
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-muted-color, #6b7280);
      font-size: 0.8125rem;
      letter-spacing: 0.03em;
      background: linear-gradient(90deg, #e9eef2 0%, #f6f9fb 50%, #e9eef2 100%);
      background-size: 400px 100%;
      animation: article-video-skeleton 1.6s linear infinite;
    }

    & iframe {
      position: relative;
      z-index: 1;
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 16 / 9;
      background: transparent;
    }
  }
}

@keyframes article-video-skeleton {
  from {
    background-position: -400px 0;
  }

  to {
    background-position: 400px 0;
  }
}

/* ===== Gallery ===== */

.gallery {
  display: grid;
  gap: 0.75rem;
  overflow: hidden;
  margin-block: var(--article-flow-space);

  & .gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    background: #e9eef2;

    & img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: inherit;
    }
  }

  &.gallery--size-1 {
    grid-template-columns: 1fr;
  }

  &.gallery--size-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  &.gallery--size-3 {
    grid-template-columns: 1.75fr 1fr;
    grid-template-rows: 1fr 1fr;

    & .gallery-item:nth-child(1) {
      grid-column: 1;
      grid-row: 1 / span 2;
    }

    & .gallery-item:nth-child(2) {
      grid-column: 2;
      grid-row: 1;
    }

    & .gallery-item:nth-child(3) {
      grid-column: 2;
      grid-row: 2;
    }
  }

  &.gallery--size-4 {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }

  &.gallery--size-5 {
    grid-template-columns: 2fr 1fr 1fr 2fr;
    grid-template-rows: 1.5fr 1fr;

    & .gallery-item:nth-child(1) {
      grid-column: 1 / span 2;
      grid-row: 1;
    }

    & .gallery-item:nth-child(2) {
      grid-column: 3 / span 2;
      grid-row: 1;
    }

    & .gallery-item:nth-child(3) {
      grid-column: 1;
      grid-row: 2;
    }

    & .gallery-item:nth-child(4) {
      grid-column: 2 / span 2;
      grid-row: 2;
    }

    & .gallery-item:nth-child(5) {
      grid-column: 4;
      grid-row: 2;
    }
  }

  &.gallery--size-6 {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }

  &.gallery--size-7 {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);

    & .gallery-item:nth-child(1) {
      grid-column: 1;
      grid-row: 1 / span 2;
      aspect-ratio: 2 / 3;
    }

    & .gallery-item:nth-child(2) {
      grid-column: 2;
      grid-row: 1;
    }

    & .gallery-item:nth-child(3) {
      grid-column: 3;
      grid-row: 1;
    }

    & .gallery-item:nth-child(4) {
      grid-column: 4;
      grid-row: 1;
    }

    & .gallery-item:nth-child(5) {
      grid-column: 2;
      grid-row: 2;
    }

    & .gallery-item:nth-child(6) {
      grid-column: 3;
      grid-row: 2;
    }

    & .gallery-item:nth-child(7) {
      grid-column: 4;
      grid-row: 2;
    }
  }

  &.gallery--size-9 {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
  }
}

/* ===== Tags ===== */

.article-tags {
  max-width: calc(var(--article-content-width) + calc(var(--layout-padding-inline) * 2));
  padding-inline: var(--layout-padding-inline);
  margin: 2rem auto 0;
  padding-top: 1.125rem;
  border-top: 1px solid var(--border-color, rgba(17, 24, 39, 0.08));
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0;

  &::before {
    content: "Теги";
    display: block;
    width: 100%;
    margin-bottom: 0.25rem;
    color: var(--text-muted-color, #6b7280);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  & .entAllCats {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.375rem 0.625rem;
    border-radius: var(--radius-pill, 999px);
    background: #e9eef2;
    color: #4b5563;
    font-size: 0.8125rem;
    text-decoration: none;
    transition:
      background-color var(--transition-fast, 150ms ease),
      color var(--transition-fast, 150ms ease),
      transform var(--transition-fast, 150ms ease);

    &:hover,
    &:focus-visible {
      background: #dfe8ef;
      color: var(--text-strong-color, #181c22);
      transform: translateY(-1px);
    }
  }
}

/* ===== Latest / related ===== */

.related-posts {
  max-width: calc(var(--article-content-width) + calc(var(--layout-padding-inline) * 2));
  margin: 2.25rem auto 0;
  padding: 1.5625rem;
  padding-inline: var(--layout-padding-inline);
  border-top: 1px solid var(--border-color, rgba(17, 24, 39, 0.08));

  & .related-posts__head {
    margin-bottom: 1.125rem;
  }

  & .related-posts__title {
    margin: 0;
    color: var(--text-strong-color, #181c22);
    font-size: clamp(1.625rem, 1.45rem + 0.4vw, 2.125rem);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }

  & .related-posts__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }
}

.related-card {
  min-width: 0;

  & .related-card__link {
    display: block;
    color: inherit;
    text-decoration: none;
  }

  & .related-card__media {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin-bottom: 0.625rem;
    border-radius: 0.875rem;
    background: #e9eef2;

    & img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform var(--transition-fast, 150ms ease);
    }
  }

  & .related-card__body {
    min-width: 0;
  }

  & .related-card__meta {
    margin-bottom: 0.375rem;
    color: var(--text-muted-color, #6b7280);
    font-size: 0.6875rem;
    line-height: 1.25;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  & .related-card__title {
    margin: 0;
    color: #111111;
    font-size: 0.9375rem;
    line-height: 1.35;
    font-weight: 600;
  }

  & .related-card__link:hover .related-card__title,
  & .related-card__link:focus-visible .related-card__title {
    color: var(--accent-hover-color, #0f6f8f);
  }

  & .related-card__link:hover .related-card__media img,
  & .related-card__link:focus-visible .related-card__media img {
    transform: scale(1.03);
  }
}

/* ===== Comments ===== */

.article-comments {
  margin-top: 2.5rem;
  padding: 1.5rem var(--article-shell-padding) 0;
  border-top: 1px solid var(--border-color, rgba(17, 24, 39, 0.08));
}

/* ===== Responsive ===== */

@media (max-width: 800px) {
  .article-title {
    max-width: none;
  }

  .article-meta {
    flex-direction: column;
    align-items: center;
  }

  .related-posts {
    & .related-posts__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .gallery {
    &.gallery--size-5,
    &.gallery--size-7,
    &.gallery--size-9 {
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: auto;

      & .gallery-item {
        grid-column: auto !important;
        grid-row: auto !important;
        aspect-ratio: auto;
      }
    }
  }
}

@media (max-width: 640px) {
  .article-page {
    --article-shell-gap: 0.75rem;
    --article-shell-padding: 1rem;
    --article-flow-space: 1.25rem;

    padding-top: 0.875rem;
  }

  .article-breadcrumbs,
  .article-main {
    width: min(100% - 1.25rem, var(--article-shell-width));
    border-radius: 0.875rem;
  }

  .article-title {
    /* font-size: clamp(1.75rem, 8vw, 2.5rem); */
    line-height: 1.06;
  }

  .article-content {
    font-size: 1rem;
    line-height: 1.62;

    & img,
    & video,
    & figure img,
    & .fr-video,
    & .video,
    & table,
    & pre {
      border-radius: 0.75rem;
    }
  }

  .related-posts {
    padding-inline: 1rem;

    & .related-posts__grid {
      grid-template-columns: 1fr;
    }
  }

  .related-card__media,
  .gallery .gallery-item {
    border-radius: 0.75rem;
  }

  .gallery {
    &.gallery--size-2,
    &.gallery--size-3,
    &.gallery--size-4,
    &.gallery--size-6 {
      grid-template-columns: 1fr;
      grid-template-rows: auto;
    }

    &.gallery--size-3 .gallery-item,
    &.gallery--size-4 .gallery-item,
    &.gallery--size-6 .gallery-item {
      grid-column: auto !important;
      grid-row: auto !important;
    }
  }
}