/* Main Page Highlighted Zone */
.swiper {
  max-width: calc(var(--default-max-width) - var(--header-padding) * 3);
  margin: 0 auto;
  position: relative; /* 为绝对定位的导航按钮提供参考点 */
}


/* Hide the article title in the swiper */
.swiper h2.node__title {
  display: none;
}


/* Swiper Slide layout and effect */
.swiper-slide {
  box-sizing: border-box;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  will-change: transform;
  /* box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.15); */
  border-radius: 8px;
  /* border: 1px solid rgba(0, 0, 0, 0.15); */
}

/* Float/elevate effect on hover/focus (left, right and bottom shadows) */
.swiper-slide:hover .node--view-mode-highlight-teaser,
.swiper-slide:focus-within .node--view-mode-highlight-teaser {
  transform: translateY(-6px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
}

.slide-image--placeholder{
  /* border: 2px solid red; */
  width: 100%;
  height: var(--swiper-image-height);
  /* aspect-ratio: 16/9; */
  /* background-color: #f0f0f0; */
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-style: italic;
}



/* ================================ */
/*  Swiper Navigation Buttons */
/* ================================ */  
/* Scope to your swiper to increase specificity */
.swiper {
  --swiper-navigation-size: 12px ; /* arrow glyph size */
}

/* Force button look */
.swiper .swiper-button-next,
.swiper .swiper-button-prev {
  width: 48px ;
  height: 48px ;
  border-radius: 50% ;
  background: #69666E;
  opacity: .50 ;
  top: 50% ;
  transform: translateY(-50%) ;
  z-index: 10;
  color: #fff ;
  position: absolute;
}

/* Positioning */
.swiper .swiper-button-next { right: 12px ; }
.swiper .swiper-button-prev { left: 12px ; }

/* Arrow glyph */
.swiper .swiper-button-next::after,
.swiper .swiper-button-prev::after {
  font-size: var(--swiper-navigation-size) ;
  font-weight: 700 ;
  color: #fff ; /* some builds use currentColor */
}

/* Disabled */
.swiper .swiper-button-disabled {
  opacity: .35 ;
  pointer-events: none ;
}

/* Hover/focus states */
.swiper-button-next:hover,
.swiper-button-prev:hover,
.swiper-button-next:focus,
.swiper-button-prev:focus {
  background: linear-gradient(135deg, #a6adb4 0%, #616970 100%);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.24) inset, 0 -2px 6px rgba(0, 0, 0, 0.28) inset;
}

/* ================================ */
/*  Swiper Pagination */
/* ================================ */
.swiper .swiper-pagination {
  position: relative;
  margin-top: 20px;
  text-align: center;
}

.swiper .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: #ccc;
  opacity: 0.5;
  margin: 0 6px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-block;
}

.swiper .swiper-pagination-bullet-active {
  background: #69666E;
  opacity: 1;
  transform: scale(1.2);
}

.swiper .swiper-pagination-bullet:hover {
  opacity: 0.8;
  transform: scale(1.1);
}

/* ================================ */
/*  Mobile Swiper Modifications */
/* ================================ */
/* Mobile layout: Show first 3 images vertically */
@media (max-width: 768px) {

  /* Hide navigation buttons on mobile */
  .swiper .swiper-button-next,
  .swiper .swiper-button-prev,
  .swiper .swiper-pagination {
    display: none ;
  }

  .swiper {
    border: 1px solid none;
    height: 300px; /* Set a fixed height for vertical swiper */
    min-height: 1000px; /* Limit maximum height */
    overflow: hidden;
    padding: 30px 0;

  }
  
  
  .swiper-slide {
    /* Adjust slide height for vertical layout */
    border: 1px solid none;
    height: auto;
    min-height: 300px;
    display: flex;
    align-items: center;
    padding: 8px;
  }
  
  .node--view-mode-highlight-teaser{
    border: 1px solid none;
    position: relative;
    width: 85%;
    margin: 0 auto;
    padding: 0.5rem;
  }
}




.swiper-slide .node--view-mode-highlight-teaser .node__content{
  padding-block-end: 0px;

  display: grid;
  grid-template-rows: auto auto ;
  grid-template-areas:
    "swiper-image"
    "swiper-text";
  gap: 1rem;

  align-content: end;
}

.swiper-slide .node--view-mode-highlight-teaser .node__content .field--name-field-entry-page-thumbnail{
  grid-area: swiper-image;
  width: 100%;
  height: var(--swiper-image-height);
  padding: 0.5rem;
  padding-top: 1rem;
  /* overflow: hidden; */
}

.swiper-slide .node--view-mode-highlight-teaser .node__content .field--name-field-entry-page-thumbnail a img{
  display: block;
  width: 100%;
  height: 100%;
  object-position: center;
}


.swiper-slide .node--view-mode-highlight-teaser .node__content .field--name-field-entry-page-short-text{
  padding: 0.5rem;
  grid-area: swiper-text;
}

/* remove the image margins under the image*/
.field:not(:last-child) {
  margin-block-end: 0;
}


/* 重写父类样式， 导致不断抖动 */
.swiper-autoheight, .swiper-autoheight .swiper-slide {
  height: 100%;
}