/* ============================================================
   LINENWEAR — Our Story Stylesheet
   品牌故事页面专用样式
   与全局 Design Tokens 保持一致：字体、颜色、间距均沿用 :root 变量
   ============================================================ */

/* ---------- SECTION 1: Hero Banner ---------- */
.story-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 500px;
  max-height: 900px;
  overflow: hidden;
  margin-bottom: 75px;
}

.story-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  will-change: transform;
}

.story-hero__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 2;
  padding: var(--section-padding-x);
  /* 半透明遮罩确保文字可读性 */
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.2) 0%,
    rgba(0, 0, 0, 0.05) 40%,
    rgba(0, 0, 0, 0.15) 100%
  );
}

.story-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--color-cream);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  margin-bottom: clamp(12px, 1.5vw, 24px);
}

.story-hero__subtitle {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.25vw, 20px);
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--color-cream);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
  opacity: 0.9;
  max-width: 560px;
  line-height: 1.6;
}

/* ---------- SECTION 2/3/5: Alternating Text + Image Blocks ---------- */
.story-block {
  /*padding: clamp(40px, 8vw, 100px) var(--section-padding-x);*/
  background-color: var(--color-cream);
}

.story-block__container {
  display: flex;
  align-items: center;
  gap: 40px;
  max-width: var(--section-max-width);
  margin: 0 auto;
}

.story-block__text {
  flex: 1;
  min-width: 0;
  padding-right: 0;
  margin-right: 0;
}

.story-block__image {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.story-block__img {
  width: 100%;
  height: auto;
  display: block;
}

.story-block__title {
  font-family: var(--font-heading);
  font-size: clamp(24px, 2.78vw, 40px);
  font-weight: 400;
  color: var(--color-dark-text);
  line-height: 1.2;
  margin-bottom: clamp(16px, 2vw, 28px);
  letter-spacing: 0.02em;
}

.story-block__body {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.11vw, 16px);
  font-weight: 300;
  color: var(--color-dark-text);
  opacity: 0.8;
  line-height: 1.8;
  margin-bottom: 1em;
}

.story-block__body:last-child {
  margin-bottom: 0;
}

/* ---------- SECTION 4: Quote / Tagline ---------- */
.story-quote {
  padding: clamp(50px, 10vw, 120px) var(--section-padding-x);
  text-align: center;
}

.story-quote__container {
  max-width: 680px;
  margin: 0 auto;
}

.story-quote__icon {
  display: inline-block;
  color: var(--color-terracotta);
  margin-bottom: clamp(16px, 2.5vw, 32px);
  opacity: 0.6;
}

.story-quote__text {
  font-family: var(--font-heading);
  font-size: clamp(26px, 3.33vw, 48px);
  font-weight: 300;
  font-style: italic;
  color: var(--color-dark-text);
  line-height: 1.3;
  letter-spacing: 0.03em;
  margin-bottom: clamp(16px, 2vw, 28px);
}

.story-quote__byline {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.11vw, 16px);
  font-weight: 400;
  color: var(--color-dark-text);
  opacity: 0.6;
  letter-spacing: 0.05em;
}

/* ---------- SECTION 6: Footer Banner ---------- */
.story-footer-banner {
  position: relative;
  width: 100%;
  height: 70vh;
  min-height: 750px;
  max-height: 900px;
  overflow: hidden;
}

.story-footer-banner__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.story-footer-banner__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 2;
  padding: var(--section-padding-x);
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.25) 0%,
    rgba(0, 0, 0, 0.3) 100%
  );
}

.story-footer-banner__title {
  font-family: var(--font-heading);
  font-size: clamp(28px, 3.5vw, 52px);
  font-weight: 300;
  letter-spacing: 0.05em;
  color: var(--color-cream);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  margin-bottom: clamp(12px, 1.5vw, 20px);
}

.story-footer-banner__text {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.11vw, 17px);
  font-weight: 300;
  color: var(--color-cream);
  opacity: 0.9;
  line-height: 1.7;
  max-width: 600px;
  margin-bottom: clamp(20px, 2.5vw, 36px);
}

.story-footer-banner__actions {
  display: flex;
  justify-content: center;
}

/* ============================================================
   RESPONSIVE — iPad / 平板 (≤ 1024px)
   ============================================================ */
@media (max-width: 1024px) {
  .story-hero {
    height: 70vh;
    min-height: 420px;
    max-height: 700px;
  }

  .story-hero__bg {
    background-position: center 25%;
  }

  .story-footer-banner {
    height: 55vh;
    min-height: 360px;
    max-height: 600px;
  }
}

/* ============================================================
   RESPONSIVE — Mobile (≤ 768px)
   ============================================================ */
@media (max-width: 768px) {
  .story-hero {
    height: 65vh;
    min-height: 380px;
    max-height: 600px;
  }

  .story-hero__bg {
    background-position: center 20%;
  }

  .story-block__container {
    flex-direction: column;
    /*gap: clamp(24px, 5vw, 40px);*/
  }

  /* 移动端统一为文字在上、图片在下 */
  .story-block--image-left .story-block__container {
    flex-direction: column;
  }

  .story-block--image-right .story-block__container {
    flex-direction: column;
  }

  .story-block__image {
    order: -1;
  }

  .story-footer-banner {
    height: 50vh;
    min-height: 320px;
    max-height: 500px;
  }
}

/* ============================================================
   RESPONSIVE — Small Mobile (≤ 480px)
   ============================================================ */
@media (max-width: 480px) {
  .story-hero {
    height: 55vh;
    min-height: 320px;
    max-height: 480px;
  }

  .story-hero__title {
    font-size: clamp(30px, 7.5vw, 42px);
  }

  .story-hero__subtitle {
    font-size: clamp(13px, 3vw, 16px);
  }

  .story-quote__text {
    font-size: clamp(22px, 5.5vw, 32px);
  }

  .story-footer-banner {
    height: 45vh;
    min-height: 280px;
    max-height: 420px;
  }
}