/* =========================================================
   ABOUT US PAGE LAYOUT
   ========================================================= */
.ct-custom.elementor-widget-image-box,
.ct-custom .elementor-widget-container{
  height: 100%;
}
.ct-custom .elementor-widget-container{
  overflow: hidden;
}
.ct-custom .elementor-image-box-content{
  padding: 0 30px;
}

/* =========================================================
   BUY BUTTON STYLE
   ========================================================= */
.wp-block-button__link{
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.25s ease;
}
.wp-block-button__link:hover{
  background-color: var(--theme-palette-color-3);
  transform: translateY(-1px);
}

/* =========================================================
   POST CARDS (Desktop / Global) — Uncrate-style
   - 4:3 thumbnail box
   - gray content area + top border
   ========================================================= */
.ultp-post-thumbnail{
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 0 !important;
}
.ultp-post-thumbnail img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}
.ultp-block-content{
  background-color: #f7f7f7 !important;
  padding: 15px 15px 20px 15px !important;
  border-top: 2px solid #000 !important;
}
.ultp-block-content > *{
  margin-top: 6px;
  margin-bottom: 6px;
}

/* =========================================================
   SINGLE POST HEADING SIZES
   ========================================================= */
.single-post h2{
  font-size: 32px !important;
  font-weight: 700;
  margin-top: 40px;
}
.single-post h3{
  font-size: 26px !important;
  font-weight: 700;
  margin-top: 30px;
}
.single-post h4{
  font-size: 22px !important;
  font-weight: 600;
  margin-top: 20px;
}

/* =========================================================
   SLIDESHOW SPACING
   ========================================================= */
.osprey-slideshow{
  padding-top: 50px !important;
}

/* =========================================================
   MOBILE — non-PostX fix only
   ========================================================= */
@media (max-width: 700px){
  .single-post .wp-block-quote{
    padding-right: 10px !important;
  }
}

/* =========================================================
   MOBILE — PostX cards (MAIN GRID)
   Goals:
   - square image box
   - images stay CONTAINED (no cropping)
   - prevent long taxonomy (e.g., "Entertainment") from shifting card width
   ========================================================= */
@media (max-width: 700px){

  /* ---- 1) Make the image area square + center image ---- */
  .main-grid .ultp-block-image{
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .main-grid .ultp-block-image > a{
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 0 !important;
  }

  /* Tall images shrink to fit inside the square */
  .main-grid img.ultp-block-image-content{
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    position: static !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ---- 2) Stop long taxonomy text from pushing layout ---- */
  .main-grid .ultp-category-grid,
  .main-grid .ultp-category-aboveTitle,
  .main-grid .ultp-category-borderBoth{
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    justify-content: center !important;
  }

  /* target the taxonomy text itself (covers most PostX setups) */
  .main-grid .ultp-category-grid a,
  .main-grid .ultp-category-grid span,
  .main-grid .ultp-category-aboveTitle a,
  .main-grid .ultp-category-aboveTitle span{
    display: inline-block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Optional: tighten vertical spacing a touch */
  .main-grid .ultp-block-content{
    padding-top: 12px !important;
    padding-bottom: 14px !important;
  }
}
/* =========================================================
   MOBILE — tighten card text spacing + smaller titles
   (MAIN GRID only)
   ========================================================= */
@media (max-width: 700px){

  /* tighten overall content padding a bit */
  .main-grid .ultp-block-content{
    padding: 10px 12px 12px 12px !important;
  }

  /* TAXONOMY (category) spacing */
  .main-grid .ultp-category-grid,
  .main-grid .ultp-category-aboveTitle,
  .main-grid .ultp-category-borderBoth{
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
  }

  /* TITLE: smaller + tighter */
  .main-grid .ultp-block-title{
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
    line-height: 1.1 !important;
  }
  .main-grid .ultp-block-title a{
    font-size: 20px !important;   /* tweak: try 19px if you want tighter */
    line-height: 1.1 !important;
    display: inline-block !important;
  }

  /* EXCERPT: closer + tighter line spacing */
  .main-grid .ultp-block-excerpt,
  .main-grid .ultp-post-excerpt{
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.25 !important;
  }
  .main-grid .ultp-block-excerpt p,
  .main-grid .ultp-post-excerpt p{
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.25 !important;
  }
}
/* =========================================================
   MOBILE — Equal-height cards (works even if PostX grid won't stretch)
   MAIN GRID only
   ========================================================= */
@media (max-width: 700px){

  /* 1) Make each card a flex column */
  .main-grid .ultp-block-content-wrap{
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* 2) Keep image at its natural size */
  .main-grid .ultp-block-image{
    flex: 0 0 auto !important;
  }

  /* 3) Let the text block stretch to match the tallest card */
  .main-grid .ultp-block-content{
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* 4) Keep excerpt from forcing weird spacing at bottom */
  .main-grid .ultp-block-excerpt,
  .main-grid .ultp-post-excerpt{
    margin-top: 6px !important;
  }
}
/* =========================================================
   MOBILE — Make HOME grid side spacing match category + single
   ========================================================= */
@media (max-width: 700px){

  /* Target the homepage PostX grid wrapper only */
  .home .main-grid .ultp-block-wrapper,
  .home .main-grid .ultp-block-row,
  .home .main-grid .ultp-block-items-wrap {
    padding-left: 0px !important;
    padding-right: 0px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* In case PostX is adding negative margins on the homepage grid */
  .home .main-grid .ultp-block-items-wrap {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}