/* ================================================================
   Success-Stories.css  (Success-Stories)
   ================================================================ */

/* ================================================================
   Section 外層
   ================================================================ */
.ss-section {
  position: relative;
  overflow: hidden;
}
.ss-wrap {
  position: relative;
  padding-bottom: 3rem;
}


/* ================================================================
   Blob 背景裝飾
   ================================================================ */
.ss-blob-gold  { top: 0;   right: 0; }
.ss-blob-red   { bottom: 0; left: 0;  }
.ss-blob-teal  { top: 50%; left: 25%; }

        .deco-vine {
            position: absolute;
            top: 40%;
            left: 2%;
            width: 200px;
            height: 300px;
            opacity: 0.05;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 100 C 50 70, 20 60, 10 30 C 5 15, 25 5, 45 25 M50 100 C 50 70, 80 60, 90 30 C 95 15, 75 5, 55 25' fill='none' stroke='%236B21A8' stroke-width='1'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
        }
        .blob-bg {
            position: absolute;
            width: 500px;
            height: 500px;
            border-radius: 50%;
            filter: blur(80px);
            opacity: 0.15;
        }


/* ================================================================
   條紋裝飾（左上角）
   ================================================================ */
.ss-stripe-wrap {
  position: absolute;
  top: 4rem;
  left: 0;
  width: 19%;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  opacity: 0.15;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.ss-stripe-red {
  height: 1.5rem;
  background-color: #1cb0c1;
  width: 100%;
  border-radius: 0 9999px 9999px 0;
}

.ss-stripe-gold {
  height: 0.75rem;
  background-color: #2c9357;
  width: 80%;
  border-radius: 0 9999px 9999px 0;
}

.ss-stripe-teal {
  height: 3rem;
  background-color: #5a4ea0;
  width: 90%;
  border-radius: 0 9999px 9999px 0;
}


/* ================================================================
   方塊裝飾（右下角）
   ================================================================ */
.ss-blocks {
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  gap: 0.5rem;
  opacity: 0.10;
}
.ss-block {
  width: 5rem;
  height: 5rem;
}
.ss-block-navy    { background-color: #5a4ea0; }
.ss-block-gold    { background-color: #f07d4c; }
.ss-block-red     { background-color: #1cb0c1;  }
.ss-block-teal    { background-color: #2c9357; }


/* ================================================================
   Container
   ================================================================ */
.ss-container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.ss-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 2rem;
}


/* ================================================================
   Tab 列
   ================================================================ */
.ss-tab-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
  
}
@media (max-width: 768px) {
.ss-tab-bar {gap: 0.4rem;margin-top: 0rem;margin-bottom: 1rem;}
} 
.ss-tab {
  padding: 0.75rem 2rem;
  border-radius: 9999px;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: all 150ms cubic-bezier(.4,0,.2,1);
  border: 2px solid var(--gdNavy-10);
  cursor: pointer;
}
.ss-tab:hover {
  transform: translateY(-0.25rem);
}

.ss-tab.active {
  background-color: var(--gdNavy);
  color: #fff;
  box-shadow: 0 20px 25px -5px rgba(26,46,90,0.20), 0 8px 10px -6px rgba(26,46,90,0.20);
}

.ss-tab:not(.active) {
  background-color: rgba(255,255,255,0.50);
  color: var(--gdNavy-40);
}
.ss-tab:not(.active):hover {
  background-color: #fff;
  color: var(--gdNavy);
}


/* ================================================================
   Testimonial Slide 容器
   ================================================================ */

/* relative（#testimonial-container） */
.ss-slides { position: relative; }

/* testimonial-slide  預設隱藏，active 顯示 */
.testimonial-slide {
  display: none;
}
.testimonial-slide.active {
  display: block;
}


/* ================================================================
   卡片 Grid
   ================================================================ */
.ss-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0,1fr));
  gap: 2rem;
}
@media (min-width: 768px) {
  .ss-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 1024px) {
  .ss-grid {
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 3rem;
  }
}


/* ================================================================
   卡片外框（書名＋卡片的縱向排列）
   ================================================================ */
.ss-card-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
}


/* ================================================================
   書名標題列
   ================================================================ */
.ss-book-title {
  font-weight: 700;
  font-size: 1.6rem;
  margin-bottom: 2.75rem;
  text-align: center;
  line-height: 1.25;
  letter-spacing: -0.025em;
  padding-left: 1rem;
  padding-right: 1rem;
/*  height: 3.5rem;*/
  /* serif-title 由 Success-Stories.css 定義 */
}
.ss-book-title a{padding: 0 2px;text-decoration: underline;transition: all 300ms ease; display: inline;}
.ss-book-title a:hover{color: var(--gdNavy);text-decoration: none;}

@media (max-width: 768px) {
.ss-book-title {font-size: 1.4rem;margin-bottom: 0.5rem;line-height: 1.25;padding-left: 0.5rem;padding-right: 0.5rem;}
}

/* 書名色彩變體 */
.ss-book-title-burgundy { color: #1cb0c1; }
.ss-book-title-teal     { color: #2c9357; }
.ss-book-title-navy     { color: #5a4ea0; }

/* 書名連結 hover 色 */
/*
.ss-book-link-red:hover  { color: var(--gdNavy); }
.ss-book-link-teal:hover { color: var(--gdNavy); }
.ss-book-link-blue:hover { color: var(--gdNavy); }
*/
.ss-book-link {
  transition: all 300ms cubic-bezier(.4,0,.2,1);
}


/* ================================================================
   Editorial Card 主體
   ================================================================ */
.editorial-card {
  position: relative;
  padding: 2rem;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.25);
  border: 4px solid #fff;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
            transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.editorial-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 30px 60px rgba(0,0,0,0.15);
}

/* 圓角變體 */
.ss-card-burgundy {background-color: #1cb0c1;border-radius: 1.5rem 5rem 1.5rem 1.5rem;}
.ss-card-teal {background-color: #2c9357;border-radius: 3rem;}
.ss-card-navy {background-color: #5a4ea0;border-radius: 1.5rem 1.5rem 6rem 1.5rem;}


/* ================================================================
   卡片內部裝飾
   ================================================================ */

/* --- Burgundy 卡片角落 SVG 裝飾 --- */
.ss-deco-corner {
  position: absolute;
  right: 0; bottom: 0;
  opacity: 0.90;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.ss-deco-gold-circle {
  width: 8rem; height: 8rem;
  background-color: var(--gdGold);
  border-radius: 100% 0 0 0;
  mix-blend-mode: screen;
  opacity: 0.80;
  transition: transform 700ms cubic-bezier(.4,0,.2,1);
}
.ss-card-wrap:hover .ss-deco-gold-circle {
  transform: scale(1.10);
}

.ss-deco-bar {
  width: 10rem; height: 2rem;
  background-color: #112240;
  mix-blend-mode: screen;
  opacity: 0.60;
  margin-top: -1rem;
}

.ss-deco-teal-dot {
  position: absolute;
  left: 1rem; top: 1rem;
  width: 3rem; height: 3rem;
  background-color: var(--gdTeal);
  border-radius: 9999px;
  opacity: 0.60;
  mix-blend-mode: screen;
}

/* --- Teal 卡片花形 SVG 裝飾 --- */
.ss-deco-flower {
  position: absolute;
  top: -2.5rem; right: -2.5rem;
  opacity: 0.15;
  pointer-events: none;
  transition: transform 2000ms cubic-bezier(.4,0,.2,1);
}
.ss-card-wrap:hover .ss-deco-flower {
  transform: rotate(12deg);
}

.ss-deco-gradient {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 50%;
  background: linear-gradient(to top, rgba(0,0,0,0.20), transparent);
  pointer-events: none;
}

/* --- Navy 卡片框線裝飾 --- */
.ss-deco-inner-border {
  position: absolute;
  inset: 0.75rem;
  border: 1px solid var(--white-20);
  border-radius: 1rem 1rem 5.5rem 1rem;
  pointer-events: none;
}

/* --- Navy 卡片星形 SVG --- */
.ss-deco-star {
  position: absolute;
  top: 3rem;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0.15;
  pointer-events: none;
}

/* ================================================================
   頭像區域
   ================================================================ */

/* Burgundy 卡片 */
.ss-avatar-burgundy {
  position: relative;
  z-index: 10;
  margin-left: auto; margin-right: auto;
  width: 6rem; height: 6rem;
  margin-bottom: 2rem;
}

.ss-avatar-bg {
  position: absolute;
  inset: -0.5rem;
  background-color: var(--white-20);
  transform: rotate(12deg);
  transition: transform 500ms cubic-bezier(.4,0,.2,1);
  border-radius: 0.25rem;
}
.ss-card-wrap:hover .ss-avatar-bg {
  transform: rotate(24deg);
}

.ss-avatar-img-wrap-sm {
  position: relative; z-index: 10;
  margin-left: auto; margin-right: auto;
  width: 6rem; height: 6rem;
  overflow: hidden;
  border: 2px solid var(--white-50);
}

/* Teal 卡片 */
.ss-avatar-teal {
  position: relative; z-index: 10;
  margin-left: auto; margin-right: auto;
  width: 7rem; height: 7rem;
  margin-bottom: 1.5rem;
}

.ss-avatar-circle {
  border-radius: 9999px;
  width: 7rem; height: 7rem;
  overflow: hidden;
  border: 3px solid #fff;
}

.ss-avatar-ring {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  border: 1px solid #fff;
  transform: scale(1.15);
  opacity: 0.50;
}

/* Navy 卡片 */
.ss-avatar-navy {
  position: relative; z-index: 10;
  margin-left: auto; margin-right: auto;
  width: 7rem; height: 8rem;
  margin-bottom: 1.5rem;
  margin-top: 0.5rem;
  border-radius: 0.75rem 0.75rem 4rem 0.75rem;
}

.ss-avatar-shadow {
  position: absolute;
  inset: 0;
  background-color: var(--gdGold);
  border-radius: 0.75rem 0.75rem 4rem 0.75rem;
  transform: translate(0.5rem, 0.5rem);
  opacity: 0.50;
}

.ss-avatar-navy-img {
  position: relative; z-index: 10;
  margin-left: auto; margin-right: auto;
  width: 7rem; height: 8rem;
  margin-bottom: 1.5rem;
  margin-top: 0.5rem;
  overflow: hidden;
  border-radius: 0.75rem 0.75rem 4rem 0.75rem;
}

/* 共用頭像圖片 class */
.ss-avatar-photo {
  width: 100%; height: 100%;
  object-fit: cover;
  position: relative; z-index: 10;
  transition: all 500ms cubic-bezier(.4,0,.2,1);
}
.ss-avatar-photo-zoom { transform-origin: center; }
.ss-avatar-photo-zoom15 { transform: scale(1.2); transform-origin: center; }
.ss-avatar-photo-zoom1 { transform: scale(1.5); transform-origin: center; }
.ss-avatar-photo-zoom2 { transform: scale(2.5); transform-origin: center;}
.ss-avatar-photo-zoom3 { transform: scale(3); transform-origin: center; }
.ss-avatar-photo-zoom4 { transform: scale(4); transform-origin: center; }

/* rounded shadow-lg（Burgundy 圓角陰影） */
.ss-avatar-photo-rounded {
  border-radius: 0.25rem;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
}
/* border-2 border-gdGold（Navy 金框） */
.ss-avatar-photo-gold-border { border: 2px solid var(--gdGold); }
/* rounded-full（Teal 圓形） */
.ss-avatar-photo-circle { border-radius: 9999px; }


/* ================================================================
   卡片內文區
   ================================================================ */
.ss-card-body {
  text-align: center;
  position: relative; z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* 上榜 */
.ss-badge {
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 0.1em;
  padding: 0.25rem 0.75rem;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  display: inline-block;
  color: var(--gdNavy);
  background-color: #fff;
  border-radius: 9999px;
  line-height: normal;
}
/* Burgundy 卡片 badge */
/* .ss-badge-burgundy {
  color: var(--gdNavy);
  background-color: #fff;
  border-radius: 9999px;
} */
/* Teal 卡片 badge */
/* .ss-badge-teal {
  color: var(--gdNavy);
  background-color: #fff;
  border-radius: 9999px;
} */
/* Navy 卡片 badge */
/* .ss-badge-navy {
  color: var(--gdNavy);
  background-color: #fff;
  border-radius: 9999px;
} */

.ss-card-name {
  font-size: 1.25rem;
  font-weight: 900;
  color: #fff;
  margin-bottom: 1.5rem;
  letter-spacing: 0.1em;
}

/* 引言容器 */
.ss-quote-wrap { position: relative; width: 100%; }

/* 引號 icon */
.ss-quote-icon {
  position: absolute;
  top: -1rem; left: -0.5rem;
  width: 2rem; height: 2rem;
  color: var(--white-10);
  transform: rotate(180deg);
}

/* 引言文字 */
.ss-quote-text {
  font-size: 16px;
  line-height: 2;
  text-align: left;
  font-family: Georgia, serif;
  position: relative; z-index: 10;
  padding-left: 0.4rem;
    padding-bottom: 3.5rem;
    color: var(--white-90);
    text-align: justify;
}
.ss-quote-text a{display: inline;text-decoration:underline}
.ss-quote-text a:hover{text-decoration: none;}

@media (max-width: 768px) {
.ss-quote-text {line-height: 1.5;padding-left: 0.0rem;padding-bottom: 2rem;}
}
/* pb-[5rem] / pb-[3rem] 變體 */
/*
.ss-quote-text-pb5 { padding-bottom: 5rem; }
.ss-quote-text-pb3 { padding-bottom: 3rem; }
*/
/* 文字顏色變體 */
/*
.ss-quote-text-80 { color: var(--white-80); }
.ss-quote-text-90 { color: var(--white-90); }
*/

/* 引言內連結 */
.ss-quote-link { text-decoration: underline; color: inherit; }


/* ================================================================
   Read More 按鈕
   ================================================================ */

.ss-readmore-wrap {
  position: absolute;
  left: 0; width: 100%;
  display: flex;
  justify-content: center;
  z-index: 20;
}
.ss-readmore-wrap-b6 { bottom: 1.5rem; }
.ss-readmore-wrap-b8 { bottom: 2rem;   }

.ss-readmore {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 150ms cubic-bezier(.4,0,.2,1);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  text-decoration: none;
}

/* Burgundy 樣式 */
.ss-readmore-burgundy {
  color: #FFF;
  border: 1px solid var(--white-60);
  background-color: #1a2e5ad9;
}
.ss-readmore-burgundy:hover {
  color: #fff;
  border-color: var(--gdGold);
}

/* Teal 樣式 */
.ss-readmore-teal {
  color: #fff;
  border: 1px solid var(--white-30);
  background-color: var(--gdTeal-50);
}
.ss-readmore-teal:hover {
  color: #fef08a;
  border-color: rgba(255,255,255,0.80);
}

/* arrow icon */
.ss-readmore-icon {
  width: 0.75rem; height: 0.75rem;
  margin-left: 0.5rem;
}