/* === NEW: Full-width Featured Image === */
.featured-area {
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative; /* For caption positioning */
  background-color: #f0f0f0; /* Fallback color */
}

.featured-area .single-featured-image {
  margin: 0; /* Reset figure default margin */
  padding: 0;
  line-height: 0; /* Remove space below image */
}

.featured-area .single-featured-image img {
  width: 100% !important;
  height: clamp(400px, 60vh, 800px) !important; /* پیش‌فرض */
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

/* ارتفاع کامل فقط برای دسکتاپ */
@media (min-width: 1024px) {
  .featured-area .single-featured-image img {
    height: 100vh !important; /* ارتفاع تمام‌صفحه */
  }
}

.featured-area .single-caption-text {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
  padding: 2.5rem 1rem 1rem;
  font-size: 1.2rem;
  font-weight: bold;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
  line-height: 1.4;
}

.featured-area .single-caption-text .tie-icon-camera {
  margin-right: 0.5em;
  opacity: 0.8;
}

/*
برای قرارگیری منو زیر بنر و ایجاد فاصله از بالا، به منوی اصلی margin-top اضافه کنید.
*/
.main-navigation,
#main-header,
.header-container {
  margin-top: calc(clamp(400px, 60vh, 800px) + 30px);
}

/* --- Content images: no cut with desktop height cap --- */
.tpp-frame {
  position: relative;
  display: block;
  width: 100%;
  max-width: 900px;
  margin: 1rem auto;
  overflow: visible;
  border-radius: 0;
  box-shadow: none;
}

.tpp-frame img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

@media (min-width: 1024px) {
  .tpp-frame img { max-height: 520px; }
}

.post-thumbnail img,
.single .post-thumbnail img,
.single .featured-media img,
.single .entry-header img,
.single .featured-image img,
.tie-post-featured img,
.single-featured-image-header img {
  max-height: 420px;
  height: auto !important;
  object-fit: contain;
}

/* Zoom lens */
.tpp-zoom-lens {
  position:absolute;
  width:160px; height:160px;
  border-radius:50%;
  pointer-events:none;
  box-shadow:0 6px 18px rgba(0,0,0,.2);
  background-repeat:no-repeat;
  background-position:center;
  background-size:200% auto;
  border:2px solid rgba(0,0,0,.1);
  display:none; z-index:10;
}
.tpp-frame.tpp-zoom-active .tpp-zoom-lens{ display:block; }
.tpp-frame{ cursor: zoom-in; }
.tpp-frame.tpp-zoom-active{ cursor: zoom-out; }

/* Lazy indicator */
img.tpp-lazy {
  filter: blur(8px);
  transition: filter .3s ease;
  background: url('data:image/svg+xml,%3Csvg viewBox=\'0 0 100 100\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Ccircle cx=\'50\' cy=\'50\' r=\'30\' stroke=\'%23999\' stroke-width=\'10\' fill=\'none\' stroke-dasharray=\'47 94\'%3E%3CanimateTransform attributeName=\'transform\' type=\'rotate\' from=\'0 50 50\' to=\'360 50 50\' dur=\'1s\' repeatCount=\'indefinite\'/%3E%3C/circle%3E%3C/svg%3E') center center no-repeat;
  background-size: 32px;
}
img.tpp-lazy-loaded{ filter:none; background:none!important; }

/* حالت موبایل */
@media (max-width: 767px) {
  .featured-area .single-featured-image img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    object-position: center !important;
  }
}