/* Baltic Agro Koduaed – blog list "Aiandusnõuanded" (design F) and article (G + K).
   archive.php / home.php / single.php; handle ba-blog (depends on ba-core). */

/* ---------- Header band (list and article) ---------- */
.ba-blog-head__inner { padding-top: 52px; padding-bottom: 44px; }
.ba-blog-head .ba-crumbs__nav, .ba-article-head .ba-crumbs__nav { margin-bottom: 18px; }
.ba-page-title.ba-blog-head__title { font-size: 34px; line-height: 1.2; margin: 0 0 14px; }
.ba-blog-head__sub { color: var(--ba-green); }
.ba-blog-head__intro { font-size: 16.5px; line-height: 1.6; color: var(--ba-text-2); max-width: 620px; margin: 0; }

/* ---------- List ---------- */
.ba-blog-body { padding-top: 36px; padding-bottom: var(--ba-section-inner-bottom); }
.ba-blog-chips { margin-bottom: 40px; }
.ba-blog-chips .ba-chips { gap: 10px; }
.ba-blog-chips li { margin: 0; }
/* "Kõik teemad (16)" (panel P-120): phones with JavaScript only (see the media query below). */
.ba-blog-chips .ba-chips__toggle { display: none; }
.ba-design-new .ba-chips__more { border-style: dashed; color: var(--ba-green-deep); background: var(--ba-surface); }
.ba-blog-grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: var(--ba-gap);
	list-style: none; margin: 0; padding: 0;
}
.ba-blog-grid > li { display: flex; margin: 0; min-width: 0; }
.ba-bcard { flex: 1; }
.ba-card__media.ba-bcard__media { aspect-ratio: auto; height: 190px; background: #eef0e4; }
.ba-bcard__body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 22px 24px 24px; }
.ba-bcard__tag { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ba-green); margin: 0; }
.ba-bcard__title { font-size: 18.5px; line-height: 1.3; font-weight: 700; color: var(--ba-text-strong); margin: 0; }
.ba-design-new .ba-bcard__title a { color: inherit; }
.ba-bcard__excerpt { font-size: 14px; line-height: 1.6; color: var(--ba-text-2); margin: 0; flex: 1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.ba-blog-empty { padding: 24px 0; font-size: 17px; }

/* Pagination */
.ba-pagination { margin-top: 56px; }
.ba-pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; list-style: none; margin: 0; padding: 0; }
.ba-pagination li { margin: 0; }
.ba-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 8px 14px;
	border: 1px solid var(--ba-control); border-radius: var(--ba-r-xs); background: #fff;
	font-size: 15px; font-weight: 700; line-height: 1.2; color: var(--ba-text-2);
}
.ba-design-new .ba-pagination a.page-numbers { color: var(--ba-text-2); }
.ba-design-new .ba-pagination a.page-numbers:hover { border-color: var(--ba-green); color: var(--ba-green-deep); }
.ba-pagination .page-numbers.current { background: var(--ba-green); border-color: var(--ba-green); color: #fff; }
.ba-pagination .page-numbers.dots { border-color: transparent; background: none; min-width: 24px; padding: 8px 4px; }

/* ---------- Article header ---------- */
.ba-article-head__inner { padding-top: 44px; padding-bottom: 40px; }
.ba-page-title.ba-article-head__title { max-width: 880px; margin: 0 0 18px; }
.ba-article-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.ba-article-tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.ba-article-tags li { margin: 0; }
.ba-tagpill {
	display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1.3;
	color: var(--ba-green); background: #fff; border: 1px solid var(--ba-border-green-2); padding: 6px 13px; border-radius: var(--ba-r-xs);
	transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.ba-design-new a.ba-tagpill { color: var(--ba-green); }
.ba-design-new a.ba-tagpill:hover { background: var(--ba-green); border-color: var(--ba-green); color: #fff; }
.ba-article-head__time { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--ba-text-muted); }

/* ---------- Hero image: content width 21/9 (large images) or top of the text column (old 600×300 images) ---------- */
.ba-article-hero { padding-top: 48px; }
.ba-site .ba-article-hero:not(.ba-article-hero--col) .ba-article-hero__img {
	display: block; width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--ba-r-lg); background: #eef0e4;
}
.ba-article-hero--col { padding-top: 0; margin: 0 0 32px; }
.ba-site .ba-article-hero--col .ba-article-hero__img { display: block; width: 100%; height: auto; border-radius: var(--ba-r-lg); background: #eef0e4; }

/* ---------- Article grid: text 720 + sticky sidebar 320 ---------- */
.ba-article-grid {
	display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 64px; align-items: start;
	padding-top: 48px;
}
.ba-article-main { min-width: 0; max-width: 720px; }
.ba-article-lede { font-size: 21px; line-height: 1.55; font-weight: 600; color: var(--ba-green-deep); margin: 0 0 28px; text-wrap: pretty; }

.ba-article-aside { position: sticky; top: var(--ba-sticky-top); display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.ba-article-aside__title { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.4; color: var(--ba-green-deep); margin: 0 0 16px; }
.ba-article-products { border: 1px solid var(--ba-border); border-radius: var(--ba-r-lg); padding: 24px; }
.ba-article-products__list { display: flex; flex-direction: column; gap: 14px; list-style: none; margin: 0; padding: 0; }
.ba-mini { position: relative; display: flex; gap: 14px; align-items: center; margin: 0; border-radius: var(--ba-r-md); }
.ba-mini__thumb { width: 56px; height: 56px; flex-shrink: 0; border-radius: var(--ba-r-md); border: 1px solid var(--ba-divider); overflow: hidden; background: #fff; display: flex; }
.ba-site .ba-mini__thumb img { width: 100%; height: 100%; object-fit: contain; }
.ba-mini__text { display: flex; flex-direction: column; min-width: 0; }
.ba-design-new .ba-mini__name { font-size: 13px; font-weight: 700; line-height: 1.35; color: var(--ba-text-strong); }
.ba-mini__cta { font-size: 12px; font-weight: 700; color: var(--ba-green); margin-top: 3px; }
.ba-mini:hover .ba-mini__name { color: var(--ba-green-hover); }
.ba-mini:has(.ba-card__link:focus-visible) { outline: 3px solid var(--ba-green); outline-offset: 2px; }
.ba-mini .ba-card__link:focus-visible { outline: none; }

.ba-readnext { border-radius: var(--ba-r-lg); }
.ba-readnext:hover, .ba-readnext:has(.ba-card__link:hover) { transform: translateY(-3px); }
.ba-card__media.ba-readnext__media { aspect-ratio: auto; height: 120px; background: #eef0e4; border-bottom: 0; }
.ba-readnext__body { padding: 18px 20px 20px; }
.ba-readnext__label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ba-text-muted); margin: 0 0 6px; }
.ba-readnext__title { font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--ba-text-strong); margin: 0; }
.ba-design-new .ba-readnext__title a { color: inherit; }

/* ---------- Prev / all / next ---------- */
.ba-article-nav {
	display: flex; justify-content: space-between; align-items: center; gap: 20px;
	position: relative; margin-top: 64px; padding-top: 40px; padding-bottom: 80px;
}
.ba-article-nav::before { content: ""; position: absolute; top: 0; left: var(--ba-gutter); right: var(--ba-gutter); border-top: 1px solid var(--ba-divider); }
.ba-article-nav__item { flex: 1; min-width: 0; }
.ba-article-nav__item a { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 600; line-height: 1.4; }
.ba-article-nav__item--next a { text-align: right; align-items: flex-end; }
.ba-article-nav__label { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ba-text-muted); }
.ba-article-nav__all { flex-shrink: 0; font-size: 13.5px; padding: 12px 24px; white-space: nowrap; }

/* ---------- Article body (K): typography for the existing WPBakery / classic content ---------- */
.ba-article-body { font-size: 17px; line-height: 1.8; color: var(--ba-text); }
.ba-article-body p { margin: 0 0 20px; text-wrap: pretty; }
.ba-article-body h2 { font-size: 23px; line-height: 1.25; font-weight: 800; color: var(--ba-text-strong); margin: 44px 0 14px; }
.ba-article-body h3 { font-size: 18px; line-height: 1.35; font-weight: 700; color: var(--ba-text-strong); margin: 34px 0 14px; }
.ba-article-body h4, .ba-article-body h5, .ba-article-body h6 { font-size: 17px; line-height: 1.4; font-weight: 700; color: var(--ba-text-strong); margin: 28px 0 10px; }
.ba-article-body h2 strong, .ba-article-body h3 strong, .ba-article-body h4 strong { font-weight: inherit; }
.ba-article-body ul, .ba-article-body ol { margin: 0 0 26px; padding-left: 22px; }
.ba-article-body li { margin: 0 0 6px; padding-left: 2px; }
.ba-article-body ul li::marker { color: var(--ba-green); }
.ba-article-body ol li::marker { color: var(--ba-green); font-weight: 800; }
.ba-article-body img { max-width: 100%; height: auto; border-radius: 10px; }
.ba-article-body iframe { max-width: 100%; }
.ba-article-body hr { border: 0; border-top: 1px solid var(--ba-divider); margin: 36px 0; }
.ba-article-body > :first-child, .ba-article-body .vc_row:first-child .wpb_wrapper > :first-child { margin-top: 0; }
.ba-article-body sup { font-size: .7em; }

/* Classic editor alignment and captions */
.ba-article-body .alignleft { float: left; margin: 6px 24px 16px 0; max-width: 50%; }
.ba-article-body .alignright { float: right; margin: 6px 0 16px 24px; max-width: 50%; }
.ba-article-body .aligncenter { display: block; margin: 32px auto; }
.ba-article-body .wp-caption { max-width: 100%; margin: 32px 0 36px; }
.ba-article-body .wp-caption-text, .ba-article-body figcaption { font-size: 14px; line-height: 1.5; color: var(--ba-text-muted); margin-top: 10px; }

/* WPBakery rows/columns are stacked in the 720 px text column; spacers are replaced by the type rhythm. */
.ba-article-body .vc_row, .ba-article-body .vc_row.vc_inner, .ba-article-body .vc_row-fluid { display: block; margin: 0 !important; padding: 0 !important; left: auto !important; width: auto !important; background: none !important; border: 0 !important; }
.ba-article-body .vc_row::before, .ba-article-body .vc_row::after { display: none; }
.ba-article-body .wpb_column, .ba-article-body .vc_column_container { width: 100% !important; float: none !important; padding: 0 !important; margin: 0 !important; }
.ba-article-body .vc_column-inner { padding: 0 !important; }
.ba-article-body .vc_column_container > .vc_column-inner { width: auto; }
.ba-article-body .vc_empty_space { display: none !important; }
.ba-article-body .wpb_content_element, .ba-article-body .wpb_text_column { margin-bottom: 0 !important; }
.ba-article-body .wpb_wrapper:empty { display: none; }
/* Text pasted with WPBakery wrappers inside a text block: keep the paragraph gap after it. */
.ba-article-body .wpb_wrapper > .wpb_text_column, .ba-article-body .wpb_wrapper > div:not([class]) { margin-bottom: 20px !important; }

/* Images (vc_single_image): figure with caption */
.ba-article-body .wpb_single_image { margin: 32px 0 36px !important; text-align: left !important; }
.ba-article-body .wpb_single_image .vc_figure { display: block; margin: 0; }
.ba-article-body .wpb_single_image .vc_single_image-wrapper { display: block; max-width: 100%; }
.ba-article-body .wpb_single_image img { display: block; border-radius: 10px; width: auto; max-width: 100%; height: auto; box-shadow: none; }
.ba-article-body .vc_figure-caption { font-size: 14px; line-height: 1.5; color: var(--ba-text-muted); margin-top: 10px; text-align: left; }

/* Separator */
.ba-article-body .vc_separator { display: block; height: 0; border-top: 1px solid var(--ba-divider); margin: 36px 0 !important; }
.ba-article-body .vc_separator > * { display: none; }

/* Tip boxes: WPBakery message boxes and paragraphs the author marked "NIPP!" / "Совет!" (design: AEDNIKU NIPP) */
.ba-article-body .vc_message_box, .ba-article-body p[data-ba-tip] {
	position: static; display: block; background: var(--ba-surface); color: var(--ba-text);
	border: 0; border-left: 3px solid var(--ba-green); border-radius: 0 var(--ba-r-md) var(--ba-r-md) 0;
	padding: 20px 24px !important; margin: 0 0 32px !important; font-size: 15px; line-height: 1.7; overflow: hidden;
}
.ba-article-body .vc_message_box-icon { display: none !important; }
.ba-article-body .vc_message_box > :last-child { margin-bottom: 0; }
.ba-article-body .vc_message_box p { margin: 0 0 10px; }
.ba-article-body .vc_message_box :is(h2, h3, h4) { font-size: 16px; line-height: 1.45; font-weight: 800; color: var(--ba-green-deep); margin: 0 0 8px; }
.ba-tip__label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.4; color: var(--ba-green); margin-bottom: 6px; }

/* MEELESPEA: numbered key points ([ba_remember], former Ultimate Addons info lists) */
.ba-remember { background: var(--ba-surface); border: 1px solid var(--ba-divider); border-radius: var(--ba-r-lg); padding: 26px 28px; margin: 28px 0 34px; }
.ba-remember__label { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; line-height: 1.4; color: var(--ba-green); margin: 0 0 14px !important; }
.ba-article-body .ba-remember__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ba-article-body .ba-remember__list > li { display: flex; gap: 14px; align-items: baseline; margin: 0; padding: 0; }
.ba-remember__n { font-size: 17px; font-weight: 800; color: var(--ba-green); min-width: 26px; flex-shrink: 0; }
.ba-remember__text { font-size: 16px; line-height: 1.6; min-width: 0; }
.ba-remember__text p { margin: 0 0 6px; }
.ba-article-body .ba-remember__text :is(h2, h3, h4, h5) { font-size: 16px; line-height: 1.6; font-weight: 700; color: var(--ba-text); margin: 0 0 4px; }
.ba-remember__text > :last-child { margin-bottom: 0; }

/* Lists with dividers (former The7 list element, converted to a text block with class ba-list ba-list--dividers) */
.ba-article-body .ba-list--dividers ul, .ba-article-body .ba-list--dividers ol { list-style: none; margin: 0 0 26px; padding: 0; border-top: 1px solid var(--ba-divider); }
.ba-article-body .ba-list--dividers li { margin: 0; padding: 10px 0 10px 22px; border-bottom: 1px solid var(--ba-divider); position: relative; }
.ba-article-body .ba-list--dividers li::before { content: ""; position: absolute; left: 4px; top: 1.15em; width: 7px; height: 7px; border-radius: 50%; background: var(--ba-green); }
.ba-article-body .ba-list--numbered ol { list-style: decimal; padding-left: 22px; border-top: 0; }
.ba-article-body .ba-list--numbered li { padding-left: 2px; border-bottom: 0; }
.ba-article-body .ba-list--numbered li::before { content: none; }

/* Images (WPBakery's CSS is not loaded) */
.ba-article-body .vc_single_image-img { display: block; }
.ba-article-body .vc_hidden, .ba-article-body .vc_hidden-lg { display: none; }

/* Product grids in the text ([products], [ba_products] → new product cards) */
.ba-inline-products { margin: 28px 0 36px; }
.ba-inline-products__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); gap: 16px; list-style: none; margin: 0 !important; padding: 0 !important; }
.ba-inline-products__list > li { display: flex; margin: 0; padding: 0; min-width: 0; }
.ba-inline-products__list > li::marker { content: none; }
.ba-pcard { flex: 1; }
.ba-pcard .ba-card__media img { border-radius: 0; }
.ba-pcard .ba-card__body { padding: 12px 14px 14px; gap: 4px; }
.ba-pcard__title { font-size: 14.5px; line-height: 1.35; margin: 0; }
.ba-design-new .ba-article-body .ba-pcard a { text-decoration: none; font-weight: 700; }
.ba-pcard .ba-card__cta { font-size: 12.5px; margin-top: 4px; }
.ba-pack-tile {
	width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center;
	background: var(--ba-surface-chip); color: var(--ba-green); font-size: 20px; font-weight: 800; line-height: 1.1; padding: 8px;
}
.ba-pack-tile--sm { font-size: 12px; padding: 4px; }

/* Videos, buttons, call-to-action boxes and other builder elements (styled by wpb.css when the post uses them). */
.ba-article-body .wpb_video_widget, .ba-article-body .vc_grid-container-wrapper, .ba-article-body .vc_cta3-container { margin: 28px 0 32px !important; }
.ba-article-body .vc_btn3-container { margin: 20px 0 28px !important; }
.ba-article-body .ba-msg__body > :last-child { margin-bottom: 0; }
/* Site elements (balticagro-site): info boxes and tables in the article column */
.ba-article-body .ba-infobox, .ba-article-body .ba-infotable { margin: 28px 0 32px; }

/* ---------- Tablet / mobile (L) ---------- */
@media (max-width: 1024px) {
	.ba-article-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
	.ba-article-main { max-width: 720px; }
	.ba-article-aside { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); align-items: start; max-width: 720px; }
}
@media (max-width: 760px) {
	.ba-blog-head__inner { padding-top: 28px; padding-bottom: 32px; }
	.ba-page-title.ba-blog-head__title { font-size: var(--ba-fs-page-title); }
	.ba-article-head__inner { padding-top: 28px; padding-bottom: 28px; }
	.ba-article-hero { padding-top: 28px; }
	.ba-article-grid { padding-top: 28px; }
	.ba-article-lede { font-size: 18px; }
	.ba-article-body { font-size: 16.5px; }
	.ba-article-body h2 { font-size: 21px; margin-top: 36px; }
	.ba-article-body .alignleft, .ba-article-body .alignright { float: none; margin: 24px 0; max-width: 100%; }
	.ba-blog-chips { margin-bottom: 28px; }
	/* 16 topic chips (regressions #16) wrap into compact rows on phones; only "Kõik" + 5 topics + the active one show
	   until "Kõik teemad (16)" is pressed (panel P-120: 4–6 rows pushed the first article below the screen). */
	.ba-blog-chips .ba-chips { gap: 6px; }
	.ba-blog-chips .ba-chip { padding: 6px 12px; font-size: 14px; }
	.ba-js .ba-blog-chips .ba-chips__toggle { display: block; }
	.ba-js .ba-blog-chips:not(.is-open) .ba-chips__extra { display: none; }
	.ba-pagination { margin-top: 40px; }
	.ba-article-nav { flex-direction: column; align-items: stretch; margin-top: 48px; padding-bottom: 56px; }
	.ba-article-nav__item--next a { text-align: left; align-items: flex-start; }
	.ba-article-nav__all { order: 3; align-self: flex-start; }
}

/* .ba-view keeps transform: matrix(…) with fill-mode "both", which makes <main> the containing block of fixed
   descendants (e.g. the reCAPTCHA badge → horizontal overflow). Only the start state is needed. (Reported to A.) */
.ba-main.ba-view { animation-fill-mode: backwards; }