/* Blog archive (body.blog / archive / search) — Figma "Blog - tablet" (744 x 1687) and "Blog - mobile" (393 x 2115).
 * Loaded by mu-plugins/beheshti-inner-responsive.php after inner-chrome.css. Everything is inside max-width:1024px
 * (desktop >=1025px untouched). Selectors use the html:not(#bg):not(#bg) bump to beat beheshti-blog-archive.css.
 * Frame: title -> 60 -> search -> 60 -> category row (full-bleed hairline) -> 60 -> cards -> 80 -> footer.
 */
@media (max-width: 1024px) {
  :root { --bg-cyan: var(--e-global-color-accent, #99f1ff); }
  html:not(#bg):not(#bg) body.blog,
  html:not(#bg):not(#bg) body.archive,
  html:not(#bg):not(#bg) body.search { overflow-x: clip; }

  /* section shells */
  html:not(#bg):not(#bg) body:is(.blog, .archive, .search) .elementor-217 > .elementor-section { max-width: none !important; width: 100% !important; margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
  html:not(#bg):not(#bg) body:is(.blog, .archive, .search) .elementor-217 > .elementor-section > .elementor-container { max-width: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
  html:not(#bg):not(#bg) body:is(.blog, .archive, .search) .elementor-217 .elementor-column,
  html:not(#bg):not(#bg) body:is(.blog, .archive, .search) .elementor-217 .elementor-widget-wrap { padding: 0 !important; margin: 0 !important; width: 100% !important; }
  html:not(#bg):not(#bg) body:is(.blog, .archive, .search) .elementor-217 .elementor-widget:not(:last-child) { margin-bottom: 0 !important; }
  html:not(#bg):not(#bg) body:is(.blog, .archive, .search) .elementor-217 .elementor-widget-container { margin: 0 !important; padding: 0 !important; }

  /* hero: title + search */
  html:not(#bg):not(#bg) body:is(.blog, .archive, .search) .elementor-217 .elementor-element-6278819 { padding: var(--bg-hero-pt) var(--bg-px) 0 !important; }
  html:not(#bg):not(#bg) body:is(.blog, .archive, .search) .elementor-217 .elementor-heading-title { margin: 0 !important; font-size: var(--bg-h1-fs) !important; line-height: var(--bg-h1-lh) !important; font-weight: 200 !important; text-align: right !important; }
  html:not(#bg):not(#bg) body:is(.blog, .archive, .search) .elementor-217 .elementor-widget-search-form { width: 100% !important; max-width: none !important; margin: 60px 0 0 !important; }
  html:not(#bg):not(#bg) body:is(.blog, .archive, .search) .elementor-217 .elementor-search-form__container { min-height: var(--bg-s-h) !important; height: var(--bg-s-h) !important; }
  html:not(#bg):not(#bg) body:is(.blog, .archive, .search) .elementor-217 .elementor-search-form__container::after { right: var(--bg-s-padx) !important; width: var(--bg-s-ico) !important; height: var(--bg-s-ico) !important; }
  html:not(#bg):not(#bg) body:is(.blog, .archive, .search) .elementor-217 .elementor-search-form__input {
    min-height: var(--bg-s-h) !important; height: var(--bg-s-h) !important; padding: 12px var(--bg-s-padl) 12px var(--bg-s-padx) !important; padding-right: calc(var(--bg-s-padx) + var(--bg-s-ico) + var(--bg-s-gap)) !important;
    font-size: var(--bg-s-fs) !important; line-height: var(--bg-s-lh) !important; font-weight: 500 !important; color: #9e9e9e !important;
  }
  html:not(#bg):not(#bg) body:is(.blog, .archive, .search) .elementor-217 .elementor-search-form__input::placeholder { font-size: var(--bg-s-fs) !important; line-height: var(--bg-s-lh) !important; font-weight: 500 !important; color: #9e9e9e !important; opacity: 1 !important; }
  html:not(#bg):not(#bg) body:is(.blog, .archive, .search) .elementor-217 .elementor-search-form__submit {
    flex: 0 0 var(--bg-sb-w) !important; width: var(--bg-sb-w) !important; min-height: var(--bg-s-h) !important; height: var(--bg-s-h) !important; padding: 0 !important; margin: 0 !important;
    font-size: var(--bg-sb-fs) !important; line-height: var(--bg-sb-lh) !important; font-weight: 400 !important; background: #000 !important; border: 0.5px solid #fff !important; color: #fff !important; border-radius: 0 !important;
  }

  /* category row: 34px, full-bleed 0.5px hairline, chips hug their text and scroll sideways */
  html:not(#bg):not(#bg) body:is(.blog, .archive, .search) .elementor-217 .elementor-element-9094052 { padding: 60px 0 0 !important; border-bottom: 0.5px solid #fff !important; box-sizing: border-box !important; height: 94px !important; overflow: hidden !important; }
  html:not(#bg):not(#bg) body:is(.blog, .archive, .search) .beheshti-blog-cats ul { padding: 0 20px !important; align-items: stretch !important; flex-wrap: nowrap !important; height: 33.5px !important; box-sizing: border-box !important; }
  html:not(#bg):not(#bg) body:is(.blog, .archive, .search) .beheshti-blog-cats li { align-items: stretch !important; }
  html:not(#bg):not(#bg) body:is(.blog, .archive, .search) .beheshti-blog-cats a {
    box-sizing: border-box !important; height: 33.5px !important; padding: 8px 10px !important; margin: 0 !important; color: #fff !important; font-size: 14px !important; line-height: 17px !important; font-weight: 200 !important;
    border: 0 !important; border-bottom: 0.5px solid #fff !important;
  }
  html:not(#bg):not(#bg) body:is(.blog, .archive, .search) .beheshti-blog-cats li.is-active a { color: #fff !important; font-weight: 500 !important; border-bottom: 1px solid #fff !important; margin: 0 !important; padding: 8px 10px !important; }
  /* hover: cyan label + cyan rule, at the active rule's weight (2x the 0.5px hairline) */
  html:not(#bg):not(#bg) body:is(.blog, .archive, .search) .beheshti-blog-cats a:hover,
  html:not(#bg):not(#bg) body:is(.blog, .archive, .search) .beheshti-blog-cats li.is-active a:hover { color: var(--bg-cyan) !important; border-bottom: 1px solid var(--bg-cyan) !important; }

  /* cards */
  html:not(#bg):not(#bg) body:is(.blog, .archive, .search) .elementor-217 .elementor-element-1725376 { padding: 60px var(--bg-px) 80px !important; background: var(--e-global-color-secondary, #021a51) !important; }
  html:not(#bg):not(#bg) body:is(.blog, .archive, .search) .beheshti-archive-grid { display: grid !important; grid-template-columns: var(--bg-cols) !important; gap: var(--bg-gap) !important; align-items: start !important; width: 100% !important; }
  html:not(#bg):not(#bg) body:is(.blog, .archive, .search) .beheshti-archive-card {
    display: flex !important; flex-direction: row !important; align-items: stretch !important; box-sizing: border-box !important; width: 100% !important; height: var(--bg-card-h) !important; min-height: 0 !important;
    padding: 6px !important; margin: 0 !important; gap: var(--bg-card-gap) !important; grid-template-columns: none !important; background: transparent !important; box-shadow: none !important;
  }
  html:not(#bg):not(#bg) body:is(.blog, .archive, .search) .beheshti-archive-card:hover { background: #000 !important; box-shadow: none !important; }
  html:not(#bg):not(#bg) body:is(.blog, .archive, .search) .beheshti-archive-card__media { flex: none !important; width: var(--bg-img-w) !important; height: var(--bg-img-h) !important; min-height: 0 !important; }
  html:not(#bg):not(#bg) body:is(.blog, .archive, .search) .beheshti-archive-card__body {
    flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; box-sizing: border-box !important; min-width: 0 !important; height: var(--bg-img-h) !important;
    padding: var(--bg-body-pad) !important; overflow: visible !important;
  }
  html:not(#bg):not(#bg) body:is(.blog, .archive, .search) .beheshti-archive-card__cats { display: flex !important; flex-wrap: wrap !important; gap: var(--bg-cats-gap) !important; margin: 0 !important; font-size: var(--bg-cat-fs) !important; line-height: var(--bg-cat-lh) !important; }
  html:not(#bg):not(#bg) body:is(.blog, .archive, .search) .beheshti-archive-card__cats a { font-size: var(--bg-cat-fs) !important; line-height: var(--bg-cat-lh) !important; font-weight: var(--bg-cat-fw) !important; color: var(--bg-cyan) !important; }
  html:not(#bg):not(#bg) body:is(.blog, .archive, .search) .beheshti-archive-card__title { margin: var(--bg-title-mt) 0 0 !important; flex: none !important; font-size: var(--bg-t-fs) !important; line-height: var(--bg-t-lh) !important; font-weight: var(--bg-t-fw) !important; -webkit-line-clamp: 3 !important; line-clamp: 3 !important; }
  html:not(#bg):not(#bg) body:is(.blog, .archive, .search) .beheshti-archive-card__title a { color: #fff !important; }
  html:not(#bg):not(#bg) body:is(.blog, .archive, .search) .beheshti-archive-card__meta {
    margin: 0 !important; padding: var(--bg-meta-pt) 0 0 !important; border-top: 1px solid rgba(153, 241, 255, 0.3) !important; height: var(--bg-meta-h) !important; box-sizing: border-box !important; gap: 8px !important; align-items: flex-start !important; line-height: 1 !important;
  }
  html:not(#bg):not(#bg) body:is(.blog, .archive, .search) .beheshti-archive-card__date { gap: var(--bg-date-gap) !important; font-size: var(--bg-date-fs) !important; line-height: var(--bg-row-h) !important; height: var(--bg-row-h) !important; font-weight: 400 !important; align-items: center !important; }
  html:not(#bg):not(#bg) body:is(.blog, .archive, .search) .beheshti-archive-card__date svg { width: 8px !important; height: 8px !important; margin: 0 !important; }
  html:not(#bg):not(#bg) body:is(.blog, .archive, .search) .beheshti-archive-card__more { font-size: var(--bg-more-fs) !important; line-height: var(--bg-row-h) !important; height: var(--bg-row-h) !important; font-weight: 400 !important; align-items: center !important; gap: 0 !important; }
  html:not(#bg):not(#bg) body:is(.blog, .archive, .search) .beheshti-archive-card__arrow {
    display: inline-block !important; width: var(--bg-arrow-w) !important; height: var(--bg-arrow-h) !important; margin-inline-start: var(--bg-arrow-gap) !important; border: 0 !important;
    background: var(--bg-arrow) center / 100% 100% no-repeat !important;
  }
}

/* ---- Mobile: Figma 393 ---- */
@media (max-width: 743px) {
  :root {
    --bg-px: 20px; --bg-hero-pt: 80px; --bg-h1-fs: 28px; --bg-h1-lh: 34px;
    --bg-s-h: 42px; --bg-s-padx: 8px; --bg-s-padl: 8px; --bg-s-ico: 16px; --bg-s-gap: 6px; --bg-s-fs: 14px; --bg-s-lh: 18px; --bg-sb-w: 100px; --bg-sb-fs: 14px; --bg-sb-lh: 17px;
    --bg-cols: 1fr; --bg-gap: 24px; --bg-card-h: 112px; --bg-card-gap: 8px; --bg-img-w: 105px; --bg-img-h: 100px; --bg-body-pad: 4px;
    --bg-cat-fs: 10px; --bg-cat-lh: 12px; --bg-cat-fw: 400; --bg-cats-gap: 0 5.77px; --bg-title-mt: 8px; --bg-t-fs: 14px; --bg-t-lh: 17px; --bg-t-fw: 300;
    --bg-meta-h: 16px; --bg-meta-pt: 7px; --bg-row-h: 8px; --bg-date-fs: 10px; --bg-date-gap: 4.6px; --bg-more-fs: 12px; --bg-arrow-gap: 6px; --bg-arrow-h: 4.6px; --bg-arrow-w: 2.3px; --bg-arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2.3 4.6' fill='none'><path d='M2.3 4.6L0 2.3L2.3 0' stroke='%2399f1ff' stroke-width='0.577'/></svg>");
  }
}

/* ---- Tablet: Figma 744 ---- */
@media (min-width: 744px) and (max-width: 1024px) {
  :root {
    --bg-px: 20px; --bg-hero-pt: 120px; --bg-h1-fs: 32px; --bg-h1-lh: 39px;
    --bg-s-h: 49px; --bg-s-padx: 20px; --bg-s-padl: 20px; --bg-s-ico: 20px; --bg-s-gap: 12px; --bg-s-fs: 20px; --bg-s-lh: 25px; --bg-sb-w: 140px; --bg-sb-fs: 18px; --bg-sb-lh: 22.43px;
    --bg-cols: repeat(2, minmax(0, 1fr)); --bg-gap: 20px; --bg-card-h: 162px; --bg-card-gap: 0px; --bg-img-w: 100px; --bg-img-h: 150px; --bg-body-pad: 8px 16px 8px 8px;
    --bg-cat-fs: 12px; --bg-cat-lh: 15px; --bg-cat-fw: 350; --bg-cats-gap: 0 10px; --bg-title-mt: 12px; --bg-t-fs: 16px; --bg-t-lh: 20px; --bg-t-fw: 400;
    --bg-meta-h: 25px; --bg-meta-pt: 7px; --bg-row-h: 17px; --bg-date-fs: 12px; --bg-date-gap: 8px; --bg-more-fs: 14px; --bg-arrow-gap: 8px; --bg-arrow-h: 8px; --bg-arrow-w: 4px; --bg-arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 8' fill='none'><path d='M4 8L0 4L4 0' stroke='%2399f1ff' stroke-width='1'/></svg>");
  }
}