/*
 * article-body.css — scoped styles for freeform Joomla article markup rendered
 * verbatim from api::article.bodyHtml via dangerouslySetInnerHTML in `.article-body`.
 *
 * Semantic classes (article_image_polaroid, article_quote, article_psy_comment,
 * youtube_container, dima-button-bitrix, centering) are 1:1 replicas of the live
 * freud.online rules (tmp/joomla-migration/freud/live-custom.css). Bootstrap 5 grid /
 * alert / button / table are a minimal subset — the live site runs stock BS5, no
 * article-specific overrides. Everything is scoped under `.article-body` so it never
 * leaks into the rest of the app.
 *
 * Heading typography is forced to inherit (Open Sans from the article wrapper) with
 * !important: unlayered !important beats the layered !important Playfair rules in
 * globals.css, and `.article-body h2` (0,1,1) outranks `article h2` (0,0,2).
 */

/* ---- Base typography (inherits Open Sans/16px/#333 from the article wrapper) ---- */
.article-body {
  overflow-wrap: break-word;
}
.article-body p {
  margin: 0 0 25.6px;
  line-height: 25.6px;
}
.article-body a {
  color: #2f7d32;
  text-decoration: underline;
  transition: color 200ms;
}
.article-body a:hover {
  color: #379137;
}
.article-body img {
  max-width: 100%;
  height: auto;
}
/* Tailwind preflight resets list-style/padding to none — restore native markers so
   article <ul>/<ol> render with bullets/numbers like live (notes: same fix as .sppb-addon-content). */
.article-body ul,
.article-body ol {
  margin: 0 0 25.6px;
  padding-left: 40px;
}
.article-body ul { list-style: disc outside; }
.article-body ol { list-style: decimal outside; }
.article-body ul ul { list-style: circle outside; }
.article-body ul ul ul { list-style: square outside; }
.article-body ol ol { list-style: lower-alpha outside; }
.article-body li {
  display: list-item;
  margin: 0 0 8px;
  line-height: 25.6px;
}

/* Headings — inherit article font, defeat the global Playfair !important override. */
.article-body h1,
.article-body h2,
.article-body h3,
.article-body h4,
.article-body h5,
.article-body h6 {
  font-family: inherit !important;
  font-weight: 400 !important;
  font-style: normal !important;
  color: #111111;
  margin: 30px 0 10px;
  line-height: 1.3 !important;
}
.article-body h1 { font-size: 30px !important; }
.article-body h2 { font-size: 24px !important; }
.article-body h3 { font-size: 20px !important; }
.article-body h4 { font-size: 18px !important; }
.article-body h5 { font-size: 16px !important; }
.article-body h6 { font-size: 14px !important; }

/* ---- Semantic article classes (verbatim from live-custom.css) ---- */

/* фотки в статьях */
.article-body .article_image_polaroid {
  display: inline-block;
  max-width: 100%;
  padding: 10px;
  border: 1px solid rgba(204, 204, 204, 1);
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 3px 3px rgba(204, 204, 204, 1);
  margin: 0;
}
.article-body .article_image_figure {
  position: relative;
  text-align: center;
  margin: 0 auto;
  max-width: 100%;
  max-height: 100%;
}

/* рамки комментариев в статьях о знакомствах */
.article-body .article_psy_comment {
  border-top-left-radius: 20px;
  border-bottom-right-radius: 20px;
  background-color: #ff7e7517;
  padding: 10px;
}
.article-body .article_psy_comment p {
  margin-bottom: 0;
}

/* цитаты в статьях */
.article-body .article_quote {
  color: #555 !important;
  padding: 10px 20px !important;
  margin: 0 0 20px !important;
  border-left: 5px solid #eee !important;
  vertical-align: unset !important;
  border-radius: 0 !important;
}
.article-body .article_quote:before {
  display: none !important;
}
.article-body .article_quote p {
  font-size: 16px;
  line-height: 1.25;
  margin-bottom: 0.8em;
}
.article-body .article_quote p + cite {
  display: block;
  margin-top: 0;
}

/* вставка видео YouTube (responsive 16:9) */
.article-body .youtube_container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 0;
  height: 0;
  overflow: hidden;
  margin: 0 0 25.6px;
}
.article-body .youtube_container iframe,
.article-body .youtube_container object,
.article-body .youtube_container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* центрирование блока (кнопки в таблицах Personalities) */
.article-body .centering {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  align-items: center;
}

/* всплывающая зелёная кнопка */
.article-body .dima-button-bitrix {
  display: inline-block;
  background-color: #379137;
  color: #fff !important;
  padding: 8px 15px !important;
  font-weight: bold;
  border-radius: 5px;
  font-size: 20px;
  border: none;
  cursor: pointer;
  text-decoration: none;
}
.article-body .dima-button-bitrix:hover {
  background-color: #4caf50;
  color: #fff !important;
  transform: scale(1.1, 1.1);
  transition: transform 0.5s ease-in-out;
}

/* ---- Bootstrap 5 subset (stock defaults; live runs unmodified BS5) ---- */

/* grid */
.article-body .row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));
}
.article-body .row > * {
  box-sizing: border-box;
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}
.article-body .col {
  flex: 1 0 0%;
}
.article-body .col-1  { flex: 0 0 auto; width: 8.33333333%; }
.article-body .col-2  { flex: 0 0 auto; width: 16.66666667%; }
.article-body .col-3  { flex: 0 0 auto; width: 25%; }
.article-body .col-4  { flex: 0 0 auto; width: 33.33333333%; }
.article-body .col-5  { flex: 0 0 auto; width: 41.66666667%; }
.article-body .col-6  { flex: 0 0 auto; width: 50%; }
.article-body .col-7  { flex: 0 0 auto; width: 58.33333333%; }
.article-body .col-8  { flex: 0 0 auto; width: 66.66666667%; }
.article-body .col-9  { flex: 0 0 auto; width: 75%; }
.article-body .col-10 { flex: 0 0 auto; width: 83.33333333%; }
.article-body .col-11 { flex: 0 0 auto; width: 91.66666667%; }
.article-body .col-12 { flex: 0 0 auto; width: 100%; }

@media (min-width: 768px) {
  .article-body .col-md-1  { flex: 0 0 auto; width: 8.33333333%; }
  .article-body .col-md-2  { flex: 0 0 auto; width: 16.66666667%; }
  .article-body .col-md-3  { flex: 0 0 auto; width: 25%; }
  .article-body .col-md-4  { flex: 0 0 auto; width: 33.33333333%; }
  .article-body .col-md-5  { flex: 0 0 auto; width: 41.66666667%; }
  .article-body .col-md-6  { flex: 0 0 auto; width: 50%; }
  .article-body .col-md-7  { flex: 0 0 auto; width: 58.33333333%; }
  .article-body .col-md-8  { flex: 0 0 auto; width: 66.66666667%; }
  .article-body .col-md-9  { flex: 0 0 auto; width: 75%; }
  .article-body .col-md-10 { flex: 0 0 auto; width: 83.33333333%; }
  .article-body .col-md-11 { flex: 0 0 auto; width: 91.66666667%; }
  .article-body .col-md-12 { flex: 0 0 auto; width: 100%; }
}

.article-body .float-start { float: left !important; }
.article-body .float-end { float: right !important; }

/* alerts */
.article-body .alert {
  position: relative;
  padding: 1rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.375rem;
}
.article-body .alert-success { color: #0f5132; background-color: #d1e7dd; border-color: #badbcc; }
.article-body .alert-info    { color: #055160; background-color: #cff4fc; border-color: #b6effb; }
.article-body .alert-warning { color: #664d03; background-color: #fff3cd; border-color: #ffecb5; }
.article-body .alert-danger  { color: #842029; background-color: #f8d7da; border-color: #f5c2c7; }

/* buttons */
.article-body .btn {
  display: inline-block;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  border-radius: 0.375rem;
  border: 1px solid transparent;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}
.article-body .btn-lg { padding: 0.5rem 1rem; font-size: 1.25rem; border-radius: 0.5rem; }
.article-body .btn-sm { padding: 0.25rem 0.5rem; font-size: 0.875rem; border-radius: 0.25rem; }
.article-body .btn-success { color: #fff; background-color: #198754; border-color: #198754; }
.article-body .btn-success:hover { color: #fff; background-color: #157347; border-color: #146c43; }
.article-body .btn-warning { color: #000; background-color: #ffc107; border-color: #ffc107; }
.article-body .btn-warning:hover { color: #000; background-color: #ffca2c; border-color: #ffc720; }
.article-body .btn-info { color: #000; background-color: #0dcaf0; border-color: #0dcaf0; }
.article-body .btn-info:hover { color: #000; background-color: #31d2f2; border-color: #25cff2; }
.article-body .btn-primary { color: #fff; background-color: #0d6efd; border-color: #0d6efd; }
.article-body .btn-primary:hover { color: #fff; background-color: #0b5ed7; border-color: #0a58ca; }
.article-body .btn-danger { color: #fff; background-color: #dc3545; border-color: #dc3545; }
.article-body .btn-danger:hover { color: #fff; background-color: #bb2d3b; border-color: #b02a37; }
/* btn-default / btn-basic are BS3 legacy — render as a neutral light button */
.article-body .btn-default,
.article-body .btn-basic { color: #333; background-color: #fff; border-color: #ccc; }
.article-body .btn-default:hover,
.article-body .btn-basic:hover { background-color: #f2f2f2; }
.article-body .btn:hover { text-decoration: none; }

/* tables */
.article-body table {
  width: 100%;
  margin-bottom: 1rem;
  border-collapse: collapse;
  vertical-align: top;
}
.article-body table.table-bordered,
.article-body table.table-bordered th,
.article-body table.table-bordered td {
  border: 1px solid #dee2e6;
}
.article-body table th,
.article-body table td {
  padding: 0.5rem;
}
.article-body table.table-condensed th,
.article-body table.table-condensed td { padding: 0.25rem; }
.article-body table.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(0, 0, 0, 0.03); }
.article-body table.table-hover tbody tr:hover { background-color: rgba(0, 0, 0, 0.06); }