/**
 * Sống Lành — Responsive
 * Thiết kế riêng cho từng ngưỡng, không chỉ thu nhỏ desktop.
 * Kiểm tra ở: 1440 / 1280 / 1024 / 768 / 480 / 390 / 375.
 */

/* ---- Chặn tràn ngang trên mọi màn hình ---------------------------- */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, iframe, table { max-width: 100%; }
.container { width: 100%; }

/* ---- ≥1440: nới lề, thang chữ chạm trần -------------------------- */
@media (min-width: 1440px) {
  :root { --sl-gutter: 4.5rem; }
  .single-post .main > .container,
  .archive .main > .container { max-width: 82rem; }
}

/* ---- 1281–1439 ---------------------------------------------------- */
@media (max-width: 1439px) and (min-width: 1281px) {
  :root { --sl-gutter: 3.5rem; }
}

/* ---- 1025–1280: lưới 3 cột co lại --------------------------------- */
@media (max-width: 1280px) and (min-width: 1025px) {
  :root { --sl-gutter: 2.5rem; --sl-space-section: 6rem; }
  .posts.layout-masonry.column-3 .masonry-column { gap: 2rem; }
}

/* ---- ≤1024 (tablet ngang): bài viết + thanh bên xếp dọc ---------- */
@media (max-width: 1024px) {
  :root { --sl-space-section: 5rem; --sl-gutter: 2rem; }

  .single-post .primary.content-area,
  .single-post .sidebar.widget-area { width: 100%; float: none; margin-inline: 0; }
  .single-post .sidebar.widget-area {
    margin-top: var(--sl-space-section);
    padding-top: var(--sl-space-block);
    border-top: 1px solid var(--sl-border-soft);
  }
  .posts.layout-masonry.column-3 .posts-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- ≤768 (tablet dọc): 1–2 cột, hero thấp hơn ------------------- */
@media (max-width: 768px) {
  :root {
    --sl-space-section: 4rem;
    --sl-space-block: 2rem;
    --sl-gutter: 1.5rem;
    --sl-fs-body: 1rem;
  }

  .page-title-section.page-title-large { padding-block: clamp(4.5rem, 18vw, 7rem); }
  .page-title-section .page-title { max-width: 14ch; }

  .posts.layout-masonry .posts-wrapper,
  .posts.layout-grid .posts-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .single-post .article-footer { flex-direction: column; gap: 2rem; }
  .single-post .post-navigation .nav-links { flex-direction: column; gap: 1.5rem; }
  .single-post .post-navigation .nav-next { margin-left: 0; text-align: left; }

  .sl-marquee { --sl-marquee-duration: 32s; }
}

/* ---- ≤480 (điện thoại lớn): 1 cột ------------------------------- */
@media (max-width: 480px) {
  :root {
    --sl-space-section: 3.25rem;
    --sl-space-block: 1.75rem;
    --sl-gutter: 1.25rem;
    --sl-measure: 100%;
  }

  .posts.layout-masonry .posts-wrapper,
  .posts.layout-grid .posts-wrapper,
  .posts.layout-masonry.column-3 .posts-wrapper { grid-template-columns: 1fr; }

  .posts.layout-masonry .masonry-column { width: 100%; }

  article.post h2.post-title { font-size: 1.25rem; }
  article.post .featured-img { margin-bottom: 1rem; }

  .single-post .entry-content { font-size: 1.0625rem; }
  .single-post .sidebar-container { grid-template-columns: 1fr; }

  .sl-marquee { --sl-marquee-duration: 24s; padding-block: .75rem; }
  .sl-marquee__item { font-size: 1.0625rem; }

  .pagination .page-numbers { min-width: 2.25rem; height: 2.25rem; }
}

/* ---- ≤390 (iPhone 14/15) ----------------------------------------- */
@media (max-width: 390px) {
  :root { --sl-gutter: 1.125rem; --sl-fs-hero: 2.5rem; }
  .page-title-section .page-title { max-width: 12ch; }
  .sidemenu .menu > li > a { font-size: 1.5rem; }
}

/* ---- ≤375 (iPhone SE): giữ nhịp, không để chữ tràn --------------- */
@media (max-width: 375px) {
  :root { --sl-gutter: 1rem; --sl-fs-h2: 1.625rem; }
  article.post .post-excerpt { -webkit-line-clamp: 2; }
  .single-post .tagcloud a { padding: .35rem .7rem; }
}

/* ---- Màn hình cảm ứng: bỏ hiệu ứng hover phụ thuộc chuột --------- */
@media (hover: none) {
  article.post:hover .featured-img img { scale: 1; }
  .sl-marquee:hover .sl-marquee__track { animation-play-state: running; }
}

/* ---- In ấn -------------------------------------------------------- */
@media print {
  #masthead, #colophon, .sidebar, .sl-marquee,
  .related-posts, .comments-area, .to-top { display: none !important; }
  .single-post .entry-content > * { max-width: 100%; }
}

/* ---- Trang redesign: lưới thẻ ở khổ tablet ------------------------ */
/* Elementor giữ 3 cột tới tận 768px, ở đó mỗi thẻ chỉ còn ~230px.
   Chuyển sang 2 cột cho dễ đọc; Elementor tự xếp 1 cột dưới 480px. */
@media (max-width: 1024px) and (min-width: 481px) {
  .sl-band > .elementor-container > .elementor-column.sl-card,
  .sl-band > .elementor-container > .elementor-column.sl-gallery-item {
    width: 50%;
  }
}
@media (max-width: 1024px) and (min-width: 769px) {
  .sl-band > .elementor-container > .elementor-column.sl-gallery-item { width: 25%; }
}