/* About page – premium layout, testimonial slider, image placeholders */

/* Center Experiences Shared heading and subtitle on desktop */
.section--testimonials .sectionHead--block {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.section--testimonials .sectionHead--block .section__subtitle {
  margin-left: auto;
  margin-right: auto;
}

/* Spacing and typography improvements */
.aboutPage__grid {
  gap: 28px;
  align-items: start;
}
.aboutPage__story .section__title,
.aboutPage__story .bodytext {
  margin-bottom: 1em;
}
.aboutPage__story .bodytext:last-of-type {
  margin-bottom: 0;
}
.section .section__title {
  margin-bottom: 0.5em;
}
.cert__grid {
  gap: 24px;
}
.section--soft .section__title {
  margin-top: 0;
}

/* Image containers: subtle placeholder when image missing or broken */
.frame--img {
  min-height: 200px;
  background: rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}
.frame--img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.frame--tall.frame--img {
  min-height: 280px;
}

/* Certificates image: larger, no distortion */
.cert__grid .frame--img{
  min-height: 260px;
}
.cert__grid .frame--img img{
  max-width: 100%;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Certificates caption: title only, no helper text */
.caption .caption__title {
  margin-bottom: 0;
}

/* ===== Testimonial slider ===== */
.testimonialSlider {
  position: relative;
  overflow: hidden;
  margin-top: 24px;
}
.testimonialSlider__track {
  display: flex;
  transition: transform 0.35s ease;
  will-change: transform;
}
.testimonialSlider__slide {
  flex: 0 0 100%;
  min-width: 0;
  padding: 0 6px;
}
.testimonialSlider__slide .card {
  height: 100%;
  min-height: 140px;
  display: flex;
  flex-direction: column;
}
.testimonialSlider__slide .card__quote {
  flex: 1;
}
.testimonialSlider__slide .card__meta {
  margin-top: 12px;
  font-weight: 600;
  color: rgba(239, 229, 214, 0.9);
}

/* 2 per view from 600px */
@media (min-width: 600px) {
  .testimonialSlider__slide {
    flex: 0 0 50%;
  }
}
/* 3 per view from 900px */
@media (min-width: 900px) {
  .testimonialSlider__slide {
    flex: 0 0 33.333%;
  }
}

/* Nav: arrows + dots */
.testimonialSlider__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 20px;
  padding-top: 8px;
}
.testimonialSlider__btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(239, 229, 214, 0.95);
  font-size: 24px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.testimonialSlider__btn:hover {
  border-color: rgba(200, 164, 106, 0.5);
  background: rgba(200, 164, 106, 0.12);
}
.testimonialSlider__btn:focus-visible {
  outline: 2px solid rgba(200, 164, 106, 0.6);
  outline-offset: 2px;
}
.testimonialSlider__dots {
  display: flex;
  gap: 10px;
  align-items: center;
}
.testimonialSlider__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.testimonialSlider__dot:hover {
  background: rgba(255, 255, 255, 0.2);
}
.testimonialSlider__dot.is-active {
  background: rgba(200, 164, 106, 0.8);
  border-color: rgba(200, 164, 106, 0.9);
}

/* Gallery items: placeholder if image missing */
.galleryGrid .gItem {
  min-height: 180px;
  background: rgba(0, 0, 0, 0.2);
}
.galleryGrid .gItem img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 180px;
}

/* Gallery label overlay (bottom-centered text inside image) */
.gItem{
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 14px;
}

.gItem img{
  display: block;
  width: 100%;
  height: auto;
}

.gItem__label{
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.2px;

  /* readable highlight */
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,0.72), rgba(0,0,0,0.28));
  backdrop-filter: blur(2px);
}

.gItem:hover .gItem__label{
  background: linear-gradient(to top, rgba(0,0,0,0.82), rgba(0,0,0,0.34));
}

/* About gallery cards: image + description + button */
.galleryGrid--about > *{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.gCard--about{
  background: rgba(0,0,0,0.22);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  padding: 10px 10px 14px;
}
.gCard__desc{
  margin: 8px 2px 6px;
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(239,229,214,0.86);
}
@media (max-width: 600px) {
  .gCard__desc {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
.gCard__btn{
  align-self: flex-start;
  font-size: 13px;
}

/* ===== About-only: My Commitment ===== */
.aboutCommitment {
  padding: 48px 0;
  background: linear-gradient(180deg, rgba(0,0,0,.12), transparent 70%);
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.aboutCommitment__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.aboutCommitment__title {
  margin-bottom: 1rem;
  color: #C8A46A;
}
.aboutCommitment__text {
  font-size: clamp(15px, 1.35vw, 17px);
  line-height: 1.8;
  color: rgba(239, 229, 214, 0.9);
  margin: 0;
}

/* ===== About-only: Where I Serve ===== */
.aboutReach {
  padding: 44px 0;
  background: rgba(200, 164, 106, 0.04);
  border-top: 1px solid rgba(200, 164, 106, 0.12);
  border-bottom: 1px solid rgba(200, 164, 106, 0.12);
}
.aboutReach__inner {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}
.aboutReach__title {
  margin-bottom: 0.75rem;
  color: #C8A46A;
}
.aboutReach__text {
  font-size: clamp(15px, 1.3vw, 16px);
  line-height: 1.75;
  color: rgba(239, 229, 214, 0.88);
  margin: 0;
}
