.elementor-3683 .elementor-element.elementor-element-c8f2642{--display:flex;--min-height:65vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--overlay-opacity:0.38;--padding-top:140px;--padding-bottom:100px;--padding-left:40px;--padding-right:40px;}.elementor-3683 .elementor-element.elementor-element-c8f2642:not(.elementor-motion-effects-element-type-background), .elementor-3683 .elementor-element.elementor-element-c8f2642 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://pianointeriors.com/wp-content/uploads/2026/05/project-banner.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-3683 .elementor-element.elementor-element-c8f2642::before, .elementor-3683 .elementor-element.elementor-element-c8f2642 > .elementor-background-video-container::before, .elementor-3683 .elementor-element.elementor-element-c8f2642 > .e-con-inner > .elementor-background-video-container::before, .elementor-3683 .elementor-element.elementor-element-c8f2642 > .elementor-background-slideshow::before, .elementor-3683 .elementor-element.elementor-element-c8f2642 > .e-con-inner > .elementor-background-slideshow::before, .elementor-3683 .elementor-element.elementor-element-c8f2642 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:transparent;--background-overlay:'';background-image:linear-gradient(180deg, var( --e-global-color-astglobalcolor2 ) 0%, var( --e-global-color-astglobalcolor2 ) 100%);}.elementor-3683 .elementor-element.elementor-element-9c81f71 .elementor-heading-title{font-family:"Arial", Sans-serif;font-size:40px;color:var( --e-global-color-astglobalcolor5 );}.elementor-3683 .elementor-element.elementor-element-0828825 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0% 50% 0% 0%;}.elementor-3683 .elementor-element.elementor-element-0828825{font-family:"Arial", Sans-serif;color:var( --e-global-color-astglobalcolor5 );}.elementor-3683 .elementor-element.elementor-element-230eb79{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:12px 0px;--row-gap:12px;--column-gap:0px;}.elementor-3683 .elementor-element.elementor-element-230eb79:not(.elementor-motion-effects-element-type-background), .elementor-3683 .elementor-element.elementor-element-230eb79 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-3683 .elementor-element.elementor-element-b7e2bfd{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:12px 0px;--row-gap:12px;--column-gap:0px;}.elementor-3683 .elementor-element.elementor-element-b7e2bfd:not(.elementor-motion-effects-element-type-background), .elementor-3683 .elementor-element.elementor-element-b7e2bfd > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-3683 .elementor-element.elementor-element-b7e2bfd.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-3683 .elementor-element.elementor-element-4e4d216{--item-display:flex;--read-more-alignment:1;--grid-row-gap:35px;--grid-column-gap:30px;}.elementor-3683 .elementor-element.elementor-element-4e4d216 .elementor-posts-container .elementor-post__thumbnail{padding-bottom:calc( 0.58 * 100% );}.elementor-3683 .elementor-element.elementor-element-4e4d216:after{content:"0.58";}.elementor-3683 .elementor-element.elementor-element-4e4d216 .elementor-post__thumbnail__link{width:100%;}.elementor-3683 .elementor-element.elementor-element-4e4d216 .elementor-post__meta-data span + span:before{content:"•";}.elementor-3683 .elementor-element.elementor-element-4e4d216 .elementor-post__text{margin-top:20px;}.elementor-3683 .elementor-element.elementor-element-4e4d216 .elementor-post__badge{right:0;}.elementor-3683 .elementor-element.elementor-element-4e4d216 .elementor-post__card .elementor-post__badge{margin:20px;}.elementor-3683 .elementor-element.elementor-element-4e4d216 .elementor-pagination{text-align:center;}body:not(.rtl) .elementor-3683 .elementor-element.elementor-element-4e4d216 .elementor-pagination .page-numbers:not(:first-child){margin-left:calc( 10px/2 );}body:not(.rtl) .elementor-3683 .elementor-element.elementor-element-4e4d216 .elementor-pagination .page-numbers:not(:last-child){margin-right:calc( 10px/2 );}body.rtl .elementor-3683 .elementor-element.elementor-element-4e4d216 .elementor-pagination .page-numbers:not(:first-child){margin-right:calc( 10px/2 );}body.rtl .elementor-3683 .elementor-element.elementor-element-4e4d216 .elementor-pagination .page-numbers:not(:last-child){margin-left:calc( 10px/2 );}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-3683 .elementor-element.elementor-element-c8f2642{--padding-top:100px;--padding-bottom:100px;--padding-left:32px;--padding-right:32px;}.elementor-3683 .elementor-element.elementor-element-0828825 > .elementor-widget-container{padding:0% 20% 0% 0%;}.elementor-3683 .elementor-element.elementor-element-230eb79{--padding-top:80px;--padding-bottom:80px;--padding-left:32px;--padding-right:32px;}.elementor-3683 .elementor-element.elementor-element-b7e2bfd{--padding-top:80px;--padding-bottom:80px;--padding-left:32px;--padding-right:32px;}}@media(min-width:768px){.elementor-3683 .elementor-element.elementor-element-c8f2642{--content-width:1200px;}.elementor-3683 .elementor-element.elementor-element-230eb79{--content-width:1200px;}.elementor-3683 .elementor-element.elementor-element-b7e2bfd{--width:86.944%;}}@media(max-width:767px){.elementor-3683 .elementor-element.elementor-element-c8f2642{--min-height:0vh;--gap:12px 0px;--row-gap:12px;--column-gap:0px;--padding-top:120px;--padding-bottom:64px;--padding-left:24px;--padding-right:24px;}.elementor-3683 .elementor-element.elementor-element-0828825 > .elementor-widget-container{padding:0% 0% 0% 0%;}.elementor-3683 .elementor-element.elementor-element-230eb79{--padding-top:64px;--padding-bottom:64px;--padding-left:24px;--padding-right:24px;}.elementor-3683 .elementor-element.elementor-element-b7e2bfd{--padding-top:64px;--padding-bottom:64px;--padding-left:24px;--padding-right:24px;}.elementor-3683 .elementor-element.elementor-element-4e4d216 .elementor-posts-container .elementor-post__thumbnail{padding-bottom:calc( 0.5 * 100% );}.elementor-3683 .elementor-element.elementor-element-4e4d216:after{content:"0.5";}.elementor-3683 .elementor-element.elementor-element-4e4d216 .elementor-post__thumbnail__link{width:100%;}}/* Start custom CSS *//* ================================
   PIANO Blog Listing Page
   Fixed Image Version
================================ */


/* 分类按钮区域 */
.piano-blog-filter {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto !important;
  padding: 34px 20px 18px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

/* 分类按钮 */
.piano-blog-filter .elementor-button,
.piano-blog-filter a.elementor-button {
  background: #ffffff !important;
  color: #07142d !important;
  border: 1px solid #d8e2ef !important;
  border-radius: 999px !important;
  padding: 14px 30px !important;
  min-height: 48px !important;
  min-width: 92px !important;
  box-shadow: 0 8px 24px rgba(7, 20, 45, 0.05) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  transition: all 0.22s ease !important;
}

/* 分类按钮 hover */
.piano-blog-filter .elementor-button:hover,
.piano-blog-filter a.elementor-button:hover {
  background: #07142d !important;
  color: #ffffff !important;
  border-color: #07142d !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(7, 20, 45, 0.14) !important;
}

/* All 默认高亮：给 All 按钮 CSS ID 填 blog-filter-active */
#blog-filter-active .elementor-button,
#blog-filter-active a.elementor-button {
  background: #07142d !important;
  color: #ffffff !important;
  border-color: #07142d !important;
}


/* Blog 文章区域 */
.piano-blog-section {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto !important;
  padding: 34px 20px 90px !important;
}

/* Posts 组件 */
.piano-blog-posts {
  width: 100%;
}

/* 网格间距 */
.piano-blog-posts .elementor-posts-container {
  column-gap: 30px !important;
  row-gap: 42px !important;
}

/* 卡片 */
.piano-blog-posts .elementor-post__card {
  border: none !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  box-shadow: 0 14px 38px rgba(7, 20, 45, 0.08) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

/* 卡片 hover */
.piano-blog-posts .elementor-post__card:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 50px rgba(7, 20, 45, 0.14) !important;
}


/* ================================
   特色图片修复重点
================================ */

/* 图片链接外层 */
.piano-blog-posts .elementor-post__thumbnail__link {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* Elementor Cards 默认图片比例容器 */
.piano-blog-posts .elementor-post__thumbnail {
  position: relative !important;
  width: 100% !important;
  padding-bottom: 58% !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
}

/* 图片本身：居中铺满 */
.piano-blog-posts .elementor-post__thumbnail img {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: translate(-50%, -50%) scale(1) !important;
  transition: transform 0.35s ease !important;
}

/* 鼠标移上去：简单轻微放大，不错位 */
.piano-blog-posts .elementor-post__card:hover .elementor-post__thumbnail img {
  transform: translate(-50%, -50%) scale(1.045) !important;
}


/* 分类 Badge */
.piano-blog-posts .elementor-post__badge {
  background: rgba(7, 20, 45, 0.84) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  padding: 7px 16px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
}


/* 卡片文字区域 */
.piano-blog-posts .elementor-post__text {
  padding: 28px 30px 30px !important;
}

/* 标题 */
.piano-blog-posts .elementor-post__title {
  margin: 0 0 12px !important;
  font-size: 21px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  letter-spacing: -0.25px !important;
  color: #07142d !important;
}

/* 标题链接 */
.piano-blog-posts .elementor-post__title a {
  color: #07142d !important;
  text-decoration: none !important;
  background: none !important;
  box-shadow: none !important;
}

/* 标题 hover */
.piano-blog-posts .elementor-post__title a:hover {
  color: #0057b8 !important;
}

/* 日期 */
.piano-blog-posts .elementor-post__meta-data {
  margin: 0 0 14px !important;
  padding: 0 !important;
  border: none !important;
  color: #8a94a6 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
}

/* 摘要 */
.piano-blog-posts .elementor-post__excerpt {
  margin: 0 0 22px !important;
}

.piano-blog-posts .elementor-post__excerpt p {
  margin: 0 !important;
  color: #667085 !important;
  font-size: 16px !important;
  line-height: 1.68 !important;
}

/* Read More */
.piano-blog-posts .elementor-post__read-more {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #0057b8 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: color 0.22s ease !important;
}

.piano-blog-posts .elementor-post__read-more::after {
  content: "→";
  font-size: 16px;
  line-height: 1;
  transition: transform 0.22s ease;
}

.piano-blog-posts .elementor-post__read-more:hover {
  color: #07142d !important;
}

.piano-blog-posts .elementor-post__read-more:hover::after {
  transform: translateX(4px);
}


/* 分页 */
.piano-blog-posts .elementor-pagination {
  margin-top: 60px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.piano-blog-posts .elementor-pagination a,
.piano-blog-posts .elementor-pagination span {
  min-width: 40px !important;
  height: 40px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #667085 !important;
  background: #ffffff !important;
  border: 1px solid #d9e2ef !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  transition: all 0.22s ease !important;
}

.piano-blog-posts .elementor-pagination a:hover,
.piano-blog-posts .elementor-pagination .current {
  background: #07142d !important;
  color: #ffffff !important;
  border-color: #07142d !important;
}


/* 平板 */
@media (max-width: 1024px) {
  .piano-blog-filter {
    padding: 30px 18px 16px !important;
    gap: 12px !important;
  }

  .piano-blog-section {
    padding: 30px 18px 75px !important;
  }

  .piano-blog-posts .elementor-posts-container {
    column-gap: 24px !important;
    row-gap: 34px !important;
  }

  .piano-blog-posts .elementor-post__text {
    padding: 24px 24px 28px !important;
  }

  .piano-blog-posts .elementor-post__title {
    font-size: 19px !important;
  }
}


/* 手机 */
@media (max-width: 767px) {
  .piano-blog-filter {
    justify-content: flex-start !important;
    padding: 24px 16px 14px !important;
    gap: 10px !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
  }

  .piano-blog-filter .elementor-button,
  .piano-blog-filter a.elementor-button {
    padding: 12px 20px !important;
    min-height: 42px !important;
    font-size: 14px !important;
    white-space: nowrap !important;
  }

  .piano-blog-section {
    padding: 26px 16px 60px !important;
  }

  .piano-blog-posts .elementor-posts-container {
    row-gap: 28px !important;
  }

  .piano-blog-posts .elementor-post__text {
    padding: 23px 22px 26px !important;
  }

  .piano-blog-posts .elementor-post__title {
    font-size: 20px !important;
  }

  .piano-blog-posts .elementor-post__excerpt p {
    font-size: 15px !important;
  }
}/* End custom CSS */