/* ==========================================================================
   About Page CSS — H&T Library Theme
   ========================================================================== */


/* ══════════════════════════════════════════════════════════════════════════
   WHY WE STARTED
   ══════════════════════════════════════════════════════════════════════════ */
.ht-library-story-why {
  background:        #181512;
  padding-top:       clamp(4rem, 8vw, 6rem);
  padding-bottom:    20px;
  position:          relative;
}
.ht-library-story-why::after {
  content:        '';
  position:       absolute;
  bottom:         0; left: 0; right: 0;
  height:         2px;
  background:     linear-gradient(to right, transparent, rgba(183, 83, 61, .4), transparent);
  pointer-events: none;
}

.ht-library-story-why__header {
  text-align:    center;
  max-width:     620px;
  margin-inline: auto;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.ht-library-story-why__eyebrow {
  font-size:      .78rem;
  font-weight:    700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color:          var(--primary);
  margin:         0 0 .6rem;
}

.ht-library-story-why__title {
  font-family:    var(--bpt-heading-font);
  font-size:      clamp(2rem, 3.2vw + .5rem, 2.9rem);
  font-weight:    700;
  color:          #FFF7F0;
  letter-spacing: -.02em;
  margin:         0 0 .9rem;
}

.ht-library-story-why__divider {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             .75rem;
  margin-bottom:   1.25rem;
  color:           var(--primary);
}
.ht-library-story-why__divider-line {
  height:      1.5px;
  width:       56px;
  background:  linear-gradient(to right, var(--primary-light), transparent);
  flex-shrink: 0;
}
.ht-library-story-why__divider-line:last-child {
  background: linear-gradient(to left, var(--primary-light), transparent);
}

.ht-library-story-why__sub {
  font-size:   1.02rem;
  line-height: 1.75;
  color:       rgba(255, 247, 240, .6);
  margin:      0;
}

.ht-library-story-why__grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   1.5rem;
}

.ht-library-story-why__card {
  background:    #211D18;
  border:        1px solid rgba(255, 255, 255, .08);
  border-radius: 22px;
  padding:       clamp(1.75rem, 3vw, 2.5rem);
}

.ht-library-story-why__card-head {
  display:       flex;
  align-items:   center;
  gap:           .85rem;
  margin-bottom: 1.5rem;
}
.ht-library-story-why__card-icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           48px;
  height:          48px;
  border-radius:   50%;
  background:      rgba(183, 83, 61, .16);
  color:           var(--primary);
  flex-shrink:     0;
}
.ht-library-story-why__card-label {
  font-size:      .75rem;
  font-weight:    700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color:          var(--primary-light);
  margin:         0;
}

.ht-library-story-why__card-heading {
  font-family:    var(--bpt-heading-font);
  font-size:      clamp(1.25rem, 1.8vw + .4rem, 1.55rem);
  font-weight:    700;
  color:          #FFF7F0;
  line-height:    1.35;
  margin:         0 0 .85rem;
}

.ht-library-story-why__card-rule {
  display:       block;
  width:         40px;
  height:        2px;
  background:    var(--primary);
  margin-bottom: 1.1rem;
}

.ht-library-story-why__card p {
  font-size:   .95rem;
  line-height: 1.75;
  color:       rgba(255, 247, 240, .6);
  margin:      0px;
}

.ht-library-story-why__quote-divider {
  display:     flex;
  align-items: center;
  gap:         .75rem;
  margin:      1.4rem 0 1.1rem;
  color:       var(--primary);
}
.ht-library-story-why__quote-divider .ht-library-story-why__divider-line {
  height:      1.5px;
  width:       56px;
  flex-shrink: 0;
  background:  linear-gradient(to right, var(--primary-light), transparent);
}
.ht-library-story-why__quote-divider .ht-library-story-why__divider-line:last-child {
  background: linear-gradient(to left, var(--primary-light), transparent);
}

.ht-library-story-why__quote {
  font-family: var(--bpt-heading-font);
  font-style:  italic;
  font-size:   1.05rem;
  line-height: 1.6;
  color:       #FFF7F0;
  margin:      0 0 .75rem;
}

.ht-library-story-why__cite {
  display:        block;
  font-style:     normal;
  font-size:      .8rem;
  font-weight:    700;
  letter-spacing: .02em;
  color:          var(--primary-light);
}

.ht-library-story-why__mission {
  color:       var(--primary-light) !important;
  font-weight: 500;
  margin-bottom: 0 !important;
}

@media (max-width: 1024px) {
  .ht-library-story-why__grid { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════════════════════════════════
   TESTIMONIALS  — rich dark warm section
   ══════════════════════════════════════════════════════════════════════════ */
.ht-library-testimonials {
  background:     #181512;
  padding-top:    0;
  padding-bottom: 20px;
  position:       relative;
}
.ht-library-testimonials::after {
  content:        '';
  position:       absolute;
  bottom:         0; left: 0; right: 0;
  height:         2px;
  background:     linear-gradient(to right, transparent, rgba(183, 83, 61, .4), transparent);
  pointer-events: none;
}

.ht-library-testimonials__card {
  position:      relative;
  overflow:      hidden;
  background:    #211D18;
  border:        1px solid rgba(255, 255, 255, .08);
  border-radius: 22px;
  padding:       clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem);
}

/* Large open-quote watermark — left */
.ht-library-testimonials__card::before {
  content:       '\201C';
  position:      absolute;
  top:           -3rem;
  left:          3%;
  font-size:     clamp(14rem, 20vw, 22rem);
  line-height:   1;
  font-family:   Georgia, serif;
  color:         rgba(232, 213, 182, .05);
  pointer-events: none;
  z-index:       0;
  user-select:   none;
}

/* Glowing halo behind slider */
.ht-library-testimonials__card::after {
  content:       '';
  position:      absolute;
  width:         600px;
  height:        600px;
  border-radius: 50%;
  background:    radial-gradient(circle, rgba(183, 83, 61, .18) 0%, transparent 65%);
  top:           50%;
  left:          50%;
  transform:     translate(-50%, -50%);
  pointer-events: none;
  z-index:       0;
}

.ht-library-testimonials__card > * { position: relative; z-index: 1; }

/* ── Text colours flipped to light ────────────────────────────────────────── */
.ht-library-testimonials__header {
  text-align:    center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.ht-library-testimonials__eyebrow {
  display:        inline-block;
  font-size:      .72rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .18em;
  color:          var(--primary-light, #CE7B63);
  margin-bottom:  .75rem;
}

.ht-library-testimonials__title {
  font-family:    var(--bpt-heading-font);
  font-size:      clamp(1.9rem, 3vw + .5rem, 2.8rem);
  font-weight:    700;
  color:          var(--cream);
  letter-spacing: -.02em;
  margin:         0;
}

/* ── Slider track ──────────────────────────────────────────────────────── */
.ht-library-testimonials__slider {
  position:   relative;
  max-width:  760px;
  margin:     0 auto 0;
  min-height: 300px;
}

/* Each slide */
.ht-library-testi {
  text-align:     center;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            1.25rem;
  padding-inline: clamp(1rem, 4vw, 3rem);

  position:   absolute;
  inset:      0;
  opacity:    0;
  transform:  translateX(40px);
  transition: opacity .45s ease, transform .45s ease;
  pointer-events: none;
}

.ht-library-testi--active {
  position:       relative;
  inset:          unset;
  opacity:        1;
  transform:      translateX(0);
  pointer-events: auto;
}

.ht-library-testi--exit-left {
  opacity:   0;
  transform: translateX(-40px);
}

/* Stars */
.ht-library-testi__stars {
  display: flex;
  gap:     .2rem;
  color:   var(--primary-light, #CE7B63);
  justify-content: center;
}

/* Big decorative opening quote */
.ht-library-testi__mark {
  font-size:   5rem;
  line-height: .5;
  font-family: Georgia, serif;
  color:       var(--primary-light, #CE7B63);
  opacity:     .5;
  margin-bottom: -.5rem;
}

/* Quote */
.ht-library-testi__quote {
  font-family:  var(--bpt-heading-font);
  font-size:    clamp(1.05rem, 1.5vw + .5rem, 1.3rem);
  font-style:   italic;
  font-weight:  400;
  line-height:  1.75;
  color:        rgba(255, 247, 240, .92);
  margin:       0;
  max-width:    640px;
}

/* Author */
.ht-library-testi__author {
  display:     flex;
  align-items: center;
  gap:         .85rem;
  margin-top:  .5rem;
}

.ht-library-testi__avatar {
  width:           48px;
  height:          48px;
  border-radius:   50%;
  background:      linear-gradient(135deg, var(--primary) 0%, var(--primary-light, #CE7B63) 100%);
  color:           #fff;
  font-size:       1.1rem;
  font-weight:     700;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  box-shadow:      0 4px 18px rgba(183, 83, 61, .45);
}

.ht-library-testi__author-info {
  text-align: left;
}

.ht-library-testi__name {
  display:     block;
  font-size:   .95rem;
  font-weight: 700;
  color:       var(--cream);
}

.ht-library-testi__role {
  font-size: .8rem;
  color:     rgba(232, 213, 182, .65);
}

/* ── Controls — prev/next arrows pinned to the card's edges ─────────────── */
.ht-library-testi-btn {
  position:        absolute;
  top:             50%;
  transform:       translateY(-50%);
  width:           42px;
  height:          42px;
  border-radius:   50%;
  border:          1.5px solid rgba(232, 213, 182, .2);
  background:      rgba(255, 247, 240, .06);
  color:           rgba(232, 213, 182, .6);
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  transition:      border-color .2s, color .2s, background .2s;
  flex-shrink:     0;
  z-index:         2;
}
.ht-library-testi-btn:hover {
  border-color: var(--primary-light, #CE7B63);
  color:        var(--primary-light, #CE7B63);
  background:   rgba(183, 83, 61, .15);
}
.ht-library-testi-btn--prev { left:  clamp(.5rem, 2vw, 1.5rem); }
.ht-library-testi-btn--next { right: clamp(.5rem, 2vw, 1.5rem); }

@media (max-width: 640px) {
  .ht-library-testi-btn { display: none; }
}


/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .ht-library-testi {
    padding-inline: .5rem;
  }
  .ht-library-testi__quote {
    font-size: 1rem;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   CLOSING CARD
   ══════════════════════════════════════════════════════════════════════════ */
.ht-library-story-close {
  background:     #181512;
  padding-top:    0;
  padding-bottom: clamp(3rem, 6vw, 4.5rem);
}

.ht-library-story-close__card {
  display:       flex;
  align-items:   stretch;
  background:    #211D18;
  border:        1px solid rgba(255, 255, 255, .08);
  border-radius: 24px;
  overflow:      hidden;
  box-shadow:    0 4px 24px rgba(0, 0, 0, .3);
}

.ht-library-story-close__media {
  position:    relative;
  width:       46%;
  flex-shrink: 0;
  min-height:  220px;
}
.ht-library-story-close__media img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}
.ht-library-story-close__media::before {
  content:    '';
  position:   absolute;
  inset:      0;
  z-index:    1;
  background: linear-gradient(to right, transparent 45%, #211D18 100%);
  pointer-events: none;
}

.ht-library-story-close__body {
  flex:            1;
  min-width:       0;
  padding:         clamp(1.25rem, 2.5vw, 1.75rem);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  text-align:      center;
  gap:             .5rem;
}

.ht-library-story-close__icon {
  color:         var(--primary);
  margin-bottom: .4rem;
}

.ht-library-story-close__quote {
  font-family:    var(--bpt-heading-font);
  font-style:     italic;
  font-size:      clamp(1.35rem, 2vw + .6rem, 1.85rem);
  font-weight:    500;
  color:          #FFF7F0;
  line-height:    1.4;
  letter-spacing: -.01em;
  margin:         0;
  max-width:      380px;
}

.ht-library-story-close__divider {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             .75rem;
  margin-top:      .6rem;
}
.ht-library-story-close__divider-line {
  height:      1.5px;
  width:       56px;
  background:  linear-gradient(to right, var(--primary-light), transparent);
  flex-shrink: 0;
}
.ht-library-story-close__divider-line:last-child {
  background: linear-gradient(to left, var(--primary-light), transparent);
}
.ht-library-story-close__divider svg { color: var(--primary); opacity: .85; flex-shrink: 0; }

@media (max-width: 1024px) {
  .ht-library-story-close__card {
    flex-direction: column;
  }
  .ht-library-story-close__media {
    display: none;
  }
}