/* GENERATED by scripts/build-ltr-css.mjs from ../beheshti-blog-single.css: do not edit, edit the source and rebuild. */
/**
 * Single post — Figma "Blog Details": desktop 1440 / tablet 744 / mobile 393.
 *
 * Measured from the design frames:
 *   full-bleed hero (300 / 250 / 200 tall), then a WHITE article body,
 *   content column 1180px centred with a #f8f8f8 link+share panel beside it
 *   on desktop and below it from 1023px down, then a navy "آخرین مقالات"
 *   section and the footer.
 */

body.single-post {
  --bh-navy: #021a51;
  --bh-cyan: #99f1ff;
  --bh-panel: #f8f8f8;
  --bh-max: 1240px;
  --bh-gutter: 20px;
  --bh-aside: 320px;
  --bh-aside-gap: 80px;
}

/* the article and the related strip sit in their own Elementor sections;
   neither should keep the theme's default page padding */
body.single-post .elementor-221 > .elementor-section {
  padding: 0 !important;
}

body.single-post .elementor-221 > .elementor-section.beheshti-single-wrap,
body.single-post .elementor-221 > .elementor-section:first-child,
body.single-post .elementor-section:has(.beheshti-single) {
  max-width: 1440px !important;
  width: 100% !important;
  margin-inline: auto !important;
  background-color: #fff !important;
}

body.single-post .elementor-221 > .elementor-section:not(.beheshti-related-wrap):not(:has(.beheshti-related)) > .elementor-container,
body.single-post .elementor-section:has(.beheshti-single) > .elementor-container,
body.single-post .beheshti-single-wrap > .elementor-container {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.single-post .elementor-221 > .elementor-section.beheshti-related-wrap,
body.single-post .beheshti-related-wrap,
body.single-post .elementor-221 .elementor-section:has(.beheshti-related),
body.single-post .elementor-section:has(.beheshti-related) {
  max-width: 100% !important;
  width: 100% !important;
  margin-inline: 0 !important;
  background-color: var(--b-color-black, #000) !important;
}

body.single-post .elementor-221 > .elementor-section.beheshti-related-wrap > .elementor-container,
body.single-post .beheshti-related-wrap > .elementor-container,
body.single-post .elementor-221 .elementor-section:has(.beheshti-related) > .elementor-container,
body.single-post .elementor-section:has(.beheshti-related) > .elementor-container,
body.single-post .elementor-element-2010946 > .elementor-container,
body.single-post .elementor-container:has(.beheshti-related) {
  max-width: 1440px !important;
  width: 100% !important;
  margin-inline: auto !important;
  background-color: var(--bh-navy, #021a51) !important;
  padding: 100px 100px !important;
  box-sizing: border-box !important;
}

body.single-post .elementor-221 .elementor-column,
body.single-post .elementor-221 .elementor-widget-wrap,
body.single-post .elementor-221 .elementor-widget-shortcode,
body.single-post .elementor-221 .elementor-widget-container,
body.single-post .elementor-section:has(.beheshti-single) .elementor-column,
body.single-post .elementor-section:has(.beheshti-single) .elementor-widget-wrap,
body.single-post .elementor-section:has(.beheshti-single) .elementor-widget-shortcode,
body.single-post .elementor-section:has(.beheshti-single) .elementor-widget-container {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* ---- Hero ------------------------------------------------------------- */

body.single-post .beheshti-single {
  display: block !important;
  background: #fff !important;
  direction: ltr !important;
}

body.single-post .beheshti-single__hero {
  margin: 0 !important;
  padding: 0 !important;
  height: 300px !important;
  /* Site Settings → Custom CSS caps this at 240px below 767; the frames
	   want a taller band */
  max-height: none !important;
  min-height: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  background: var(--bh-navy) !important;
}

body.single-post .beheshti-single__hero img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* the frames tint the hero photo with the brand navy */
body.single-post .beheshti-single__hero::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(2, 26, 81, 0.45) !important;
  pointer-events: none !important;
}

/* ---- Article shell ---------------------------------------------------- */

body.single-post .beheshti-single__shell {
  max-width: var(--bh-max) !important;
  margin-inline: auto !important;
  padding: 116px 0 149px !important;
}

body.single-post .beheshti-single__body {
  display: grid !important;
  /* RTL: the first track is the right-hand one, so content leads */
  grid-template-columns: minmax(0, 1fr) var(--bh-aside) !important;
  column-gap: var(--bh-aside-gap) !important;
  align-items: start !important;
}

body.single-post .beheshti-single__content {
  min-width: 0 !important;
}

/* ---- Meta row --------------------------------------------------------- */

body.single-post .beheshti-single__meta {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding-bottom: 3px !important;
  border-bottom: 1px solid var(--bh-cyan) !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  color: var(--bh-navy) !important;
}

body.single-post .beheshti-single__cats {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  min-width: 0 !important;
  gap: 8px 10px !important;
}

body.single-post .beheshti-single__cats-label {
  color: var(--bh-navy) !important;
}

body.single-post .beheshti-single__pill {
  display: inline-block !important;
  padding: 1px 9px !important;
  border: 1px solid var(--bh-cyan) !important;
  color: var(--bh-navy) !important;
  text-decoration: none !important;
  font-size: 14px !important;
  line-height: 18px !important;
  font-weight: 400;
}

body.single-post .beheshti-single__pill:hover {
  background: var(--bh-navy) !important;
  color: #fff !important;
}

body.single-post .beheshti-single__date {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: var(--bh-navy) !important;
  white-space: nowrap !important;
}

body.single-post .beheshti-single__date-icon {
  display: inline-flex !important;
  color: var(--bh-navy) !important;
}

/* ---- Title ------------------------------------------------------------ */

body.single-post .beheshti-single__title {
  margin: 33px 0 0 !important;
  font-family: Aria, sans-serif !important;
  font-size: 40px !important;
  font-weight: 500 !important;
  line-height: 52px !important;
  color: var(--bh-navy) !important;
  text-align: left !important;
}

/* ---- Content ---------------------------------------------------------- */

body.single-post .beheshti-single__inline-media {
  margin: 44px 0 0 !important;
  padding: 0 !important;
  /* the frames crop this to a consistent 12:7 regardless of the source */
  overflow: hidden !important;
}

body.single-post .beheshti-single__inline-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

body.single-post .beheshti-single__content h2 {
  margin: 54px 0 0 !important;
  font-size: 22px !important;
  font-weight: 500 !important; /* Figma: Medium */
  line-height: 1.6 !important;
  color: #000 !important;
  text-align: left !important;
}

body.single-post .beheshti-single__content p {
  margin: 22px 0 0 !important;
  font-size: 20px !important;
  font-weight: 400 !important; /* Figma: Normal */
  line-height: 32px !important; /* Figma body measure */
  color: #000 !important;
  text-align: left !important;
}

body.single-post .beheshti-single__content a {
  color: var(--bh-navy) !important;
}

/* ---- Link + share panel ----------------------------------------------- */

body.single-post .beheshti-single__aside {
  /* top edge aligns with the cyan meta rule above the title */
  margin-top: 24px !important;
  padding: 26px 29px 28px !important;
  background: var(--bh-panel) !important;
  direction: ltr !important;
  position: sticky !important;
  top: 120px !important;
}

/* the kit styled the link box as its own card; in the frames it is flat
   on the panel */
body.single-post .beheshti-single__linkbox {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.single-post .beheshti-single__aside-label {
  display: block !important;
  margin: 0 0 19px !important;
  font-size: 15px !important;
  line-height: 21px !important;
  font-weight: 400 !important;
  color: #1a1a1a !important;
  text-align: left !important;
}

body.single-post .beheshti-single__copy {
  display: flex !important;
  align-items: stretch !important;
  height: 35px !important;
  background: #fff !important;
  direction: ltr !important;
}

body.single-post .beheshti-single__copy input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  border: 0 !important;
  background: #fff !important;
  padding: 0 12px !important;
  font-size: 13px !important;
  font-weight: 300 !important;
  color: #6b7280 !important;
  direction: rtl !important;
  text-align: right !important;
}

body.single-post .beheshti-single__copy-btn {
  flex: 0 0 35px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #000 !important;
  color: #fff !important;
  cursor: pointer !important;
  padding: 0 !important;
}

body.single-post .beheshti-single__share {
  /* the frames rule the panel off with a 3px white line */
  margin-top: 18px !important;
  padding-top: 16px !important;
  border-top: 3px solid #fff !important;
}

body.single-post .beheshti-single__share-icons {
  display: flex !important;
  align-items: center !important;
  justify-content: center;
  gap: 38px !important;
  line-height: 0 !important;
}

body.single-post .beheshti-single__share-icons a {
  display: inline-flex !important;
  color: var(--bh-navy) !important;
  text-decoration: none !important;
  transition: opacity 0.2s ease !important;
}

body.single-post .beheshti-single__share-icons a:hover {
  opacity: 0.65 !important;
}

/* ---- Related posts ---------------------------------------------------- */

body.single-post .beheshti-related {
  background: transparent !important;
  padding: 0 !important;
  direction: ltr !important;
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

body.single-post .beheshti-related__title {
  max-width: 100% !important;
  margin: 0 auto !important;
  font-family: Aria, sans-serif !important;
  font-size: 60px !important;
  font-weight: 200 !important;
  line-height: 1.4 !important;
  color: #fff !important;
  text-align: center !important;
}

body.single-post .beheshti-related__grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 32px !important;
  max-width: 100% !important;
  width: 100% !important;
  margin: 62px auto 0 !important;
}

body.single-post .beheshti-related__card {
  display: flex !important;
  flex-direction: column !important;
  background: transparent !important;
  transition:
    background 0.2s ease,
    box-shadow 0.2s ease !important;
}

body.single-post .beheshti-related__card:hover {
  background: #000 !important;
  box-shadow: 0 0 0 8px #000 !important;
  padding-bottom: 16px;
}

body.single-post .beheshti-related__media {
  display: block !important;
  aspect-ratio: 370 / 350 !important;
  overflow: hidden !important;
  background: #0a1633 !important;
}

body.single-post .beheshti-related__media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

body.single-post .beheshti-related__cats {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 0px !important;
  font-size: 14px !important;
  line-height: 16.8px !important;
  font-weight: 400 !important;
  color: var(--bh-cyan) !important;
  margin-top: 24px!important;
  padding: 0 16px!important;
}

body.single-post .beheshti-related__card-title {
  margin: 20px 0 0 !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 23px !important;
  /* keep every card the same height whatever the headline length */
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  overflow: hidden !important;
  padding: 0 16px!important;
  height: 45px;
}

body.single-post .beheshti-related__card-title a {
  color: #fff !important;
  text-decoration: none !important;
}

body.single-post .beheshti-related__meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-top: 20px !important;
  font-size: 15px !important;
  line-height: 21px !important;
  font-weight: 300 !important;
  padding: 0 16px!important;
  color: rgba(255, 255, 255, 0.62) !important;
}

body.single-post .beheshti-related__date {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: var(--bh-cyan) !important;
  font-weight: 400 !important;
}

body.single-post .beheshti-related__more {
  color: #99F1FF !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  font-size: 16px;
}

body.single-post .beheshti-related__more:hover {
  color: var(--bh-cyan) !important;
}

body.single-post .beheshti-related__all {
  max-width: var(--bh-max) !important;
  margin: 41px auto 0 !important;
  text-align: center !important;
}

body.single-post .beheshti-related__all a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 376px !important;
  max-width: 100% !important;
  height: 45px !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  background: transparent !important;
  color: #fff !important;
  text-decoration: none !important;
  font-size: 18px !important;
  font-weight: 400 !important;
}

body.single-post .beheshti-related__all a:hover {
  background: #fff !important;
  color: var(--bh-navy) !important;
}

/* ---- Below 1180: symmetric gutters ------------------------------------ */

@media (max-width: 1219px) {
  body.single-post .beheshti-single__shell,
  body.single-post .beheshti-related__title,
  body.single-post .beheshti-related__grid,
  body.single-post .beheshti-related__all {
    max-width: none !important;
    padding-inline: var(--bh-gutter) !important;
  }
}

/* ---- Tablet: the 744 frame -------------------------------------------- */

@media (max-width: 1023px) {
  body.single-post .beheshti-single__hero {
    height: 250px !important;
  }

  body.single-post .beheshti-single__shell {
    padding-top: 76px !important;
    padding-bottom: 60px !important;
  }

  /* the panel drops below the article and becomes a two-up row */
  body.single-post .beheshti-single__body {
    display: block !important;
  }

  body.single-post .beheshti-single__meta {
    padding-bottom: 7px !important;
  }

  body.single-post .beheshti-single__title {
    margin-top: 34px !important;
    font-size: 26px !important;
    line-height: 36px !important;
  }

  body.single-post .beheshti-single__inline-media {
    margin-top: 44px !important;
  }

  body.single-post .beheshti-single__content h2 {
    margin-top: 40px !important;
    font-size: 18px !important;
  }

  body.single-post .beheshti-single__content p {
    margin-top: 18px !important;
    font-size: 15px !important;
    line-height: 24px !important;
    font-weight: 400 !important;
    text-align: left !important;
  }

  body.single-post .beheshti-single__aside {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 40px !important;
    margin-top: 56px !important;
    padding: 26px 24px !important;
  }

  body.single-post .beheshti-single__linkbox {
    grid-column: 1 !important; /* RTL: right-hand half */
  }

  body.single-post .beheshti-single__share {
    grid-column: 2 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-left: 40px !important;
    border-top: 0 !important;
    /* the rule turns vertical once the panel is a two-up row */
    border-left: 3px solid #fff !important;
  }

  body.single-post .beheshti-related {
    padding: 56px 0 60px !important;
  }

  body.single-post .beheshti-related__title {
    font-size: 30px !important;
  }

  body.single-post .beheshti-related__grid {
    gap: 32px !important;
    margin-top: 46px !important;
  }

  body.single-post .beheshti-related__media {
    aspect-ratio: 209 / 193 !important;
  }

  body.single-post .beheshti-related__card-title {
    margin-top: 14px !important;
    font-size: 15px !important;
    line-height: 20px !important;
    min-height: 60px !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
  }

  body.single-post .beheshti-related__cats {
    margin-top: 16px !important;
    font-size: 11px !important;
  }

  body.single-post .beheshti-related__meta {
    margin-top: 16px !important;
    font-size: 13px !important;
  }

  body.single-post .beheshti-related__all a {
    width: 100% !important;
    height: 44px !important;
  }
}

/* ---- Mobile: the 393 frame -------------------------------------------- */

@media (max-width: 600px) {
  body.single-post .beheshti-single__hero {
    height: 200px !important;
  }

  body.single-post .beheshti-single__shell {
    padding-top: 76px !important;
    padding-bottom: 40px !important;
  }

  body.single-post .beheshti-single__meta {
    padding-bottom: 7px !important;
    font-size: 12px !important;
  }

  body.single-post .beheshti-single__pill {
    font-size: 11px !important;
    padding: 1px 7px !important;
  }

  body.single-post .beheshti-single__title {
    margin-top: 38px !important;
    font-size: 22px !important;
    line-height: 26px !important;
  }

  body.single-post .beheshti-single__inline-media {
    margin-top: 41px !important;
  }

  body.single-post .beheshti-single__content h2 {
    margin-top: 34px !important;
    font-size: 17px !important;
  }

  body.single-post .beheshti-single__content p {
    margin-top: 16px !important;
    font-size: 14px !important;
    line-height: 22px !important;
    font-weight: 400 !important;
    text-align: left !important;
  }

  /* stacked again, full width */
  body.single-post .beheshti-single__aside {
    display: block !important;
    margin-top: 48px !important;
    padding: 24px 20px !important;
  }

  body.single-post .beheshti-single__share {
    margin-top: 18px !important;
    padding-top: 16px !important;
    padding-left: 0 !important;
    border-left: 0 !important;
    border-top: 3px solid #fff !important;
  }

  body.single-post .beheshti-related {
    padding: 48px 0 52px !important;
  }

  body.single-post .beheshti-related__title {
    font-size: 26px !important;
  }

  /* the mobile frame scrolls the cards sideways instead of stacking them */
  body.single-post .beheshti-related__grid {
    display: flex !important;
    gap: 21px !important;
    margin-top: 38px !important;
    padding-inline: var(--bh-gutter) !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
  }

  body.single-post .beheshti-related__grid::-webkit-scrollbar {
    display: none !important;
  }

  body.single-post .beheshti-related__card {
    flex: 0 0 210px !important;
    scroll-snap-align: start !important;
  }

  body.single-post .beheshti-related__media {
    aspect-ratio: 210 / 200 !important;
  }

  body.single-post .beheshti-related__card:hover {
    box-shadow: none !important;
    background: transparent !important;
  }
}