/* SafeLagoon blog (Django): space above the footer + tablet footer layout.
   Port of the WordPress Elementor custom CSS that is live on safelagoon.com/en/blog
   (template 142 "gap" fix + footer 768-1024 add-on + archive 367 category gap v2;
   sources and WP measurements: blog-footer-gap REPORT.md, 2026-10-23).
   Scoped to blog pages only: the footer is the landing footer, so every rule
   goes through `.blog-main ~ .footer` or the blog wrappers. Landing pages,
   the blog home (/en/blog/) and <=767px footer stay as they are.
   1025-1087px is intentionally not touched (fix declined). */

/* Post pages: article end (.slb, last block = "More for parents") -> footer. */
.blog-main > .slb{padding-bottom:104px}
@media (max-width:1024px){.blog-main > .slb{padding-bottom:24px}}

/* Category pages (/tips/, /safety/, /news/ ...): last card / pagination -> footer.
   Django has numbered pagination where WP has "Load More"; the gap is measured
   from whichever is last. */
.sbi.sbi--cat{padding-bottom:104px}
@media (max-width:1024px){.sbi.sbi--cat{padding-bottom:24px}}

/* Footer, tablet 768-1024px: logo row on top (360px max), 5 equal link
   columns with 80px of gaps in total, then language list left + socials
   right-aligned on the bottom row; 32px between the rows. */
@media (min-width:768px) and (max-width:1024px){
  .blog-main ~ .footer .footer-tools{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto;row-gap:32px;grid-row-gap:32px;column-gap:20px;position:static}
  .blog-main ~ .footer .footer-tools__logo{grid-column:1/-1;grid-row:1;width:100%;padding:0;transform:none}
  .blog-main ~ .footer .footer-tools__logo img{width:360px;max-width:100%;height:auto}
  .blog-main ~ .footer .footer-tools__logo svg{display:none} /* one logo, as on WP (landing shows a 2nd small svg logo here) */
  .blog-main ~ .footer .footer-tools__navigation.services{grid-column:1/-1;grid-row:2;width:100%;margin:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:20px}
  .blog-main ~ .footer .services__element{margin:0;transform:none;min-width:0}
  .blog-main ~ .footer .footer-tools__lang-list{grid-column:1;grid-row:3}
  .blog-main ~ .footer .footer-tools__social{grid-column:2;grid-row:3;position:static;display:flex;align-items:flex-end;justify-content:flex-end;justify-self:end;padding:0}
  .blog-main ~ .footer .footer-tools__social-list{margin:0 0 0 auto;transform:none}
  /* Language block: landing nudges it left (.language translate(-4px,-3px),
     label translateX(-5px)); on the blog tablet grid it starts on the
     logo/column edge instead. */
  .blog-main ~ .footer .footer-tools__lang-list{transform:none}
  .blog-main ~ .footer .footer-tools__lang-list > span{transform:none}
  /* Bottom row: "Made with ... design by Thesis" stays right-aligned. It sits
     on the copyright line when it fits; if the row has to wrap (768-~780px)
     it drops below and still hugs the right edge, never splitting itself. */
  .blog-main ~ .footer .footer-copyright__made-by{margin-inline-start:auto;flex-shrink:0;white-space:nowrap}
}
@media (min-width:768px) and (max-width:1023px){
  .blog-main ~ .footer .footer-copyright__made-by{transform:translate(0,2px)} /* landing: translate(1px,2px) overshoots the right edge by 1px */
}