/* █████████████████████████████████████████████████████████████████
JOOMLA 5 • HELIX • CLEAN GARDEN MAGAZINE STYLE v2.4
FIXED: SYNTAX • VARIABLES • DS BLOCKS • JCE • JSPEED • MOBILE • A11Y
█████████████████████████████████████████████████████████████████ */

/* ===== 🎨 CORE VARIABLES ===== */
:root {
  --primary-green: #bfdbaa;
  --secondary-green: #9fbe8a;
  --dark-green: #324a32;
  --light-green-bg: #eef6e7;
  --list-bg: #e6f0dd;
  --bg-main: #fcf8f1;
  --bg-card: #ffffff;
  --text-primary: #2c2a29;
  --text-secondary: #5f5b56;
  --border-light: #e9e1d6;
  --accent-red: #e07a5f;
  --accent-green: #8fbf7f;
  --accent-warm: #d9b55a;
  --shadow-sm: 0 2px 8px rgba(0,0,0,.04);
  --shadow-md: 0 10px 24px rgba(0,0,0,.08);
  --shadow-lg: 0 18px 40px rgba(0,0,0,.10);
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 26px;
  --font-serif: Georgia, "Times New Roman", serif;
  --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --card-padding: 1.15rem 1.35rem;
  --transition-fast: .2s ease;
  --transition-normal: .25s ease;
}

/* ===== 🌍 GLOBAL RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg-main);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Joomla/Helix layout fixes */
#sp-main-body, #sp-component {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ===== 🔗 LINKS & TYPOGRAPHY ===== */
a {
  color: var(--dark-green);
  text-decoration: none;
  background-image: linear-gradient(transparent calc(100% - 1px), rgba(50,74,50,.2) 0);
  transition: var(--transition-fast);
}
a:hover, a:focus {
  color: var(--secondary-green);
  background-image: linear-gradient(transparent calc(100% - 1px), rgba(159,190,138,.4) 0);
  outline: none;
}
a:focus-visible {
  outline: 2px solid var(--accent-green);
  outline-offset: 2px;
}

p { margin-bottom: 1.35rem; }
ul, ol { margin: 1.3rem 0; padding-left: 1.5rem; }
li { margin-bottom: .55rem; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  color: var(--dark-green);
  line-height: 1.2;
  font-weight: 700;
  margin: 1.5rem 0 .8rem;
}
h1 { font-size: clamp(1.9rem, 4vw, 3rem); margin-bottom: 1rem; }
h2 {
  font-size: clamp(1.45rem, 3vw, 2.1rem);
  margin: 2rem 0 1.2rem;
  padding: .7rem 1rem .5rem 1.2rem;
  background: linear-gradient(90deg, var(--light-green-bg) 0%, transparent 100%);
  border-left: 5px solid var(--dark-green);
  border-radius: 0 12px 12px 0;
}
h3 {
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  margin: 1.7rem 0 .8rem;
  padding-left: .8rem;
  border-left: 3px solid var(--primary-green);
}
h4 { font-size: 1.1rem; }

/* ===== 📄 ARTICLE AREA ===== */
.article-content, .entry-content, .com-content-article, [itemprop="articleBody"] {
  max-width: 860px;
  margin: 0 auto;
  padding: 24px;
}
.article-body { padding: 24px; }
.article-header, .article-info, .entry-header { padding: 24px 24px 0; }

/* ===== 🗂️ ARTICLE CARDS (blog/list) ===== */
.article-list .article, .blog-item, .article-full, .item,
.sidebar .module, #sp-left .module, #sp-right .module {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-normal);
  margin-bottom: 28px;
}
.article-list .article:hover, .blog-item:hover,
.article-full:hover, .item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

/* ===== 🖼️ IMAGES ===== */
.article-content img, .entry-content img, .blog-item img,
.article-full img, .com-content-article img, [itemprop="articleBody"] img {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  margin: 1.4rem auto;
  border-radius: 18px;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-normal);
}
.article-content img:hover, .entry-content img:hover,
.blog-item img:hover, .article-full img:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.article-content img.alignleft, .entry-content img.alignleft {
  float: left;
  max-width: 42%;
  margin: 0 18px 12px 0 !important;
}
.article-content img.alignright, .entry-content img.alignright {
  float: right;
  max-width: 42%;
  margin: 0 0 12px 18px !important;
}
.jspeed-img-lazyload { max-width: 100% !important; height: auto !important; }

/* ===== 🧩 DS BLOCKS SYSTEM v2.4 ===== */
.ds-card, .ds-story, .ds-grandma, .ds-buy, .ds-fast, .ds-budget,
.ds-calendar, .ds-moon, .ds-recipe, .ds-tools, .ds-save,
.ds-checklist, .ds-compare, .ds-sticky, .tips-block,
.ds-fact, .ds-season, .ds-tip, .ds-quote, .ds-note, .ds-steps {
  display: block;
  margin: 1.8rem 0;
  padding: var(--card-padding);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  background: var(--bg-card);
  font-family: var(--font-sans);
  line-height: 1.7;
  overflow: hidden;
}
.ds-card { background: linear-gradient(180deg, #fff, #fcfaf6); }
.ds-story, .ds-note { background: #fff7f8; border-left: 5px solid #d98c9b; }
.ds-grandma { background: #fdf4ee; border-left: 5px solid #b98762; }
.ds-buy, .ds-fact, .ds-season { background: var(--light-green-bg); border-left: 5px solid var(--primary-green); }
.ds-recipe { background: #f2fbf6; border-left: 5px solid #8dbb96; }
.ds-tools { background: #faf8f2; border-left: 5px solid #c9b28f; }
.ds-steps, .ds-budget { background: #f1f8f2; border-left: 5px solid var(--accent-green); }
.ds-fast, .ds-tip { background: #fff8e9; border-left: 5px solid var(--accent-warm); }
.ds-calendar, .ds-quote { background: #f5f3ff; border-left: 5px solid #9c93d6; }
.ds-moon { background: #eef1fb; border-left: 5px solid #7f88c7; }
.ds-quote { font-style: italic; }
.ds-save {
  background: linear-gradient(135deg, #fff8ef, #fbeee9);
  border: 1px dashed #d7c89f;
  text-align: center;
  font-weight: 700;
}
.ds-break {
  background: transparent;
  border: none;
  box-shadow: none;
  text-align: center;
  padding: .8rem 0;
  color: var(--accent-green);
  font-size: .9rem;
}
.ds-sticky {
  position: sticky;
  bottom: 16px;
  z-index: 10;
  box-shadow: var(--shadow-md);
}
.ds-checklist, .tips-block { background: var(--light-green-bg); }
.tips-block { border-left: 5px solid var(--primary-green); }
.ds-checklist ul, .ds-checklist ol { margin: 0; padding-left: 0; list-style: none; }
.ds-checklist li {
  background: #fff;
  border-radius: 10px;
  padding: .7rem .95rem;
  margin-bottom: .55rem;
  border-left: 3px solid var(--primary-green);
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.ds-steps { counter-reset: step; }
.ds-steps p {
  position: relative;
  padding-left: 2.8rem;
  margin-bottom: 1rem;
}
.ds-steps p::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0; top: 0;
  width: 32px; height: 32px;
  line-height: 32px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--primary-green);
  color: var(--dark-green);
  font-weight: 700;
  font-size: .9rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
/* Безопасный сброс потомков DS-блоков */
.ds-card > *, .ds-story > *, .ds-grandma > *, .ds-buy > *, .ds-fast > *,
.ds-budget > *, .ds-calendar > *, .ds-moon > *, .ds-recipe > *, .ds-tools > *,
.ds-save > *, .ds-checklist > *, .tips-block > *, .ds-compare > *, .ds-sticky > * {
  background: unset !important;
  box-shadow: none !important;
}
/* Исключения для интерактивных элементов */
.ds-card table, .ds-story table, .ds-buy table,
.ds-card button, .ds-story button, .ds-buy button,
.ds-card .btn, .ds-story .btn, .ds-buy .btn {
  background: initial !important;
  box-shadow: initial !important;
  border: initial !important;
}
[class^="ds-"] > *:first-child, .tips-block > *:first-child { margin-top: 0 !important; }
[class^="ds-"] > *:last-child, .tips-block > *:last-child { margin-bottom: 0 !important; }

/* ===== 📊 TABLES ===== */
.ds-table-wrap {
  width: 100%;
  overflow-x: auto;
  margin: 1.6rem 0;
  -webkit-overflow-scrolling: touch;
}
table {
  width: 100%;
  min-width: 600px;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  font-size: .95rem;
}
th, td {
  border: 1px solid var(--border-light);
  padding: .82rem .95rem;
  text-align: left;
}
th {
  background: linear-gradient(180deg, #f8f5f0, #f3f0ea);
  font-weight: 700;
  color: var(--dark-green);
}
.article-content td:first-child, .entry-content td:first-child {
  font-weight: 600;
  background: rgba(191,219,170,.08);
}

/* ===== 🔘 BUTTONS ===== */
.ds-button, .readmore a, .btn, .button, button, input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .8rem 1.5rem;
  border-radius: 999px;
  background: var(--primary-green);
  color: var(--dark-green) !important;
  border: 0;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
  cursor: pointer;
}
.ds-button:hover, .readmore a:hover, .btn:hover,
.button:hover, button:hover, input[type="submit"]:hover {
  background: var(--secondary-green);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.ds-button:focus-visible, .btn:focus-visible, button:focus-visible {
  outline: 2px solid var(--dark-green);
  outline-offset: 2px;
}

/* ===== 🧭 HEADER / FOOTER ===== */
#sp-header {
  background: rgba(252,248,241,.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(233,225,214,.85);
  box-shadow: 0 2px 12px rgba(0,0,0,.03);
}
#sp-footer {
  background: var(--bg-card);
  border-top: 1px solid var(--border-light);
  margin-top: 44px;
}

/* ===== 📱 RESPONSIVE ===== */
@media (max-width: 991px) {
  .article-content, .entry-content, .article-body,
  .article-header, .article-info, .entry-header { padding: 18px; }
  [class^="ds-"], .tips-block { padding: 1rem 1.2rem; }
}
@media (max-width: 768px) {
  h1 { font-size: 1.7rem; } h2 { font-size: 1.4rem; } h3 { font-size: 1.2rem; }
  .ds-button, .readmore a, .btn, .button, button, input[type="submit"] { width: 100%; }
  .article-content img.alignleft, .article-content img.alignright,
  .entry-content img.alignleft, .entry-content img.alignright {
    float: none; max-width: 100% !important; margin: 18px auto !important;
  }
  table { min-width: 520px; font-size: .88rem; }
  th, td { padding: .65rem .75rem; }
  .article-content, .entry-content, .com-content-article, [itemprop="articleBody"] {
    background: var(--bg-card) !important; border-radius: 16px; padding: 18px !important;
  }
  [class^="ds-"], .tips-block { margin: 1.2rem 0; border-radius: 16px; }
  .blog-item .article-title, .blog-item .article-title a,
  .article-list .article-title, .article-list .article-title a {
    font-size: 14px !important; line-height: 1.5 !important;
  }
  .blog-items { padding: 12px !important; gap: 16px !important; }
  .blog-item { margin-bottom: 16px !important; padding: 14px !important; }
  .blog-item .article-introtext, .blog-item p { font-size: 13.5px !important; line-height: 1.6 !important; }
  .blog-item img { margin-bottom: 10px !important; }
}
@media (min-width: 769px) {
  .blog-item .article-title, .blog-item .article-title a,
  .article-list .article-title, .article-list .article-title a {
    font-size: 16px !important; line-height: 1.45 !important;
  }
}
@media (max-width: 480px) {
  h1 { font-size: 1.4rem !important; } h2 { font-size: 1.25rem !important; }
  th, td { font-size: .86rem; padding: .62rem; }
  .blog-item .article-title, .blog-item .article-title a,
  .article-list .article-title, .article-list .article-title a { font-size: 13.5px !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== 🔧 LAYOUT FIXES ===== */
#sp-main-body, #sp-component, .blog, .blog-items,
.items-row, .item-column, .article-list { background: var(--bg-card) !important; }
.items-row { margin-bottom: 16px !important; }
.blog-item img { width: 100% !important; aspect-ratio: 1/1 !important; object-fit: cover !important; display: block; }

/* ===== 📝 CONTENT ENHANCEMENTS ===== */
.article-content > p:first-of-type, .entry-content > p:first-of-type {
  font-size: 1.15rem; font-style: italic; color: var(--text-secondary);
  padding: 1rem 1.2rem; border-left: 4px solid var(--accent-green);
  background: linear-gradient(90deg, var(--light-green-bg), transparent);
  border-radius: 0 12px 12px 0; margin: 1.5rem 0 2rem;
}
.article-content h3 + ol, .entry-content h3 + ol {
  counter-reset: variety; list-style: none; padding-left: 0;
}
.article-content h3 + ol li, .entry-content h3 + ol li {
  counter-increment: variety; position: relative; padding-left: 2.2rem; margin: .8rem 0;
}
.article-content h3 + ol li::before, .entry-content h3 + ol li::before {
  content: counter(variety); position: absolute; left: 0; top: 0;
  width: 28px; height: 28px; line-height: 28px; border-radius: 50%;
  background: var(--primary-green); color: var(--dark-green);
  font-weight: 700; font-size: .9rem; text-align: center; box-shadow: var(--shadow-sm);
}
.article-content h4 + ul, .entry-content h4 + ul,
.article-content h4 + ol, .entry-content h4 + ol {
  background: var(--bg-card); border: 1px dashed var(--border-light);
  border-radius: 14px; padding: 1rem 1.2rem .5rem; margin: .5rem 0 1.5rem;
}
.article-content h4 + ul li strong, .entry-content h4 + ol li strong {
  color: var(--dark-green); font-weight: 700;
}
.article-content > p:last-of-type, .entry-content > p:last-of-type {
  background: linear-gradient(135deg, #f9f7f2, #f1f4e9);
  border: 1px solid var(--border-light); border-left: 5px solid var(--accent-green);
  border-radius: 16px; padding: 1.2rem 1.4rem; margin: 2.5rem 0 1rem; font-weight: 500;
}
.ps-tip {
  background: #fff8e9; border: 1px dashed var(--accent-warm);
  border-radius: 12px; padding: 1rem 1.2rem; margin: 1.5rem 0; font-size: .98rem;
}
.ps-tip strong { color: var(--dark-green); }
.article-content h2, .entry-content h2 { position: relative; }
.article-content h2::after, .entry-content h2::after {
  content: ""; display: block; height: 1px;
  background: linear-gradient(90deg, var(--border-light), transparent); margin: 1.2rem 0 0;
}

/* ===== 🖨️ PRINT STYLES ===== */
@media print {
  *, *::before, *::after { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; }
  .article-content, .entry-content { max-width: 100% !important; padding: 0 !important; }
  a { text-decoration: underline !important; }
  a[href]::after { content: " (" attr(href) ")"; font-size: .9em; color: #666; }
  .ds-card, table { break-inside: avoid; }
  #sp-header, #sp-footer, .no-print { display: none !important; }
}

/* ===== 📦 SAL INNER ITEM ===== */
.sal-inner-item {
  background: #fff !important; border: 1px solid var(--border-light) !important;
  border-radius: var(--radius-lg) !important; overflow: hidden !important;
  box-shadow: var(--shadow-sm) !important; padding: 12px !important;
  transition: var(--transition-normal) !important; margin-bottom: 16px !important;
}
.sal-inner-item:hover { transform: translateY(-2px) !important; box-shadow: var(--shadow-md) !important; }
.sal-inner-item figure { margin: 0 !important; border-radius: 14px !important; overflow: hidden !important; }
.sal-inner-item img {
  border-radius: 14px !important; margin: 0 !important; width: 100% !important;
  aspect-ratio: 1 / 1 !important; object-fit: cover !important;
}
.sal-inner-item h3 {
  margin: 12px 0 0 !important; padding: 0 !important; border-left: none !important;
  font-size: 15px !important; line-height: 1.4 !important;
}
.sal-inner-item h3 a { color: var(--dark-green) !important; font-weight: 600 !important; text-decoration: none !important; }
.sal-inner-item h3 a:hover { color: var(--secondary-green) !important; }
@media (max-width: 768px) {
  .sal-inner-item { padding: 10px !important; border-radius: 16px !important; }
  .sal-inner-item h3 { font-size: 14px !important; margin: 10px 0 0 !important; }
}

/* ===== 📐 HELIX MOBILE IMAGES ===== */
#sp-component img, .article img, .blog img, .item-page img {
  max-width: 100% !important; height: auto !important; display: block;
  border-radius: 18px; margin: 22px auto; object-fit: cover;
  box-sizing: border-box; box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.jspeed-img-lazyload, .lazyload, img[data-src] { max-width: 100% !important; height: auto !important; display: block; }
figure, .article-image, .item-image { margin: 0; padding: 0; }
.sppb-addon img, .sp-page-builder img { max-width: 100%; height: auto; }
@media (max-width: 768px) {
  #sp-component img, .article img, .blog img, .item-page img {
    border-radius: 14px; margin: 18px auto;
  }
}

/* ===== 📋 DS TABLE ===== */
.ds-table-wrap { overflow-x: auto; margin: 20px 0; border-radius: 16px; background: #fffdf8; box-shadow: 0 4px 14px rgba(0,0,0,0.06); }
.ds-table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.ds-table th { background: #6b8f71; color: #fff; padding: 14px; text-align: left; font-size: 15px; }
.ds-table td { padding: 14px; border-bottom: 1px solid #ece7dc; vertical-align: top; background: #fff; }
.ds-table tr:nth-child(even) td { background: #faf7f1; }
@media (max-width: 768px) {
  .ds-table { font-size: 14px; min-width: 560px; }
  .ds-table th, .ds-table td { padding: 12px; }
}
}