/* ============================================================
   ABOUT PAGE
   Fix #6: staircase layout — proper image sizes, text paired with image
   Each gallery-item = ONE unit that never splits on mobile
   ============================================================ */

/* Intro */
.about-intro-section{background:#fff}
.about-intro-inner{
  max-width:1200px;margin:0 auto;
  padding:clamp(48px,7vw,80px) clamp(20px,6.5vw,80px);
  display:flex;align-items:flex-start;gap:60px;
}
.about-intro-text{flex:1;min-width:0}
.about-intro-img{flex:1;min-width:0;display:flex;justify-content:center;align-items:flex-start}
.about-intro-img img{max-width:360px;width:100%;border-radius:24px;object-fit:contain}
.about-body{font-size:16px;color:var(--text-sec);line-height:1.8;margin-bottom:16px}

/* Gallery section */
.gallery-section{background:var(--surface)}
.gallery-inner{
  max-width:1200px;margin:0 auto;
  padding:clamp(48px,7vw,80px) clamp(20px,6.5vw,80px);
}

/* ─────────────────────────────────────
   STAIRCASE LAYOUT
   Each .gallery-item is ONE paired unit.
   image + text always stay together.
───────────────────────────────────── */
.gallery-item{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:56px;
  align-items:center;
  margin-bottom:72px;
}
.gallery-item:last-child{margin-bottom:0}

/* Normal: image left (col1), text right (col2) */
.gallery-item > .gallery-img { grid-column:1; grid-row:1 }
.gallery-item > .gallery-text{ grid-column:2; grid-row:1 }

/* Reverse: text left (col1), image right (col2) */
.gallery-item.reverse > .gallery-text{ grid-column:1; grid-row:1 }
.gallery-item.reverse > .gallery-img { grid-column:2; grid-row:1 }

/* Image wrappers */
.gallery-img{display:flex;justify-content:center;align-items:center}

.gallery-img.portrait img{
  width:100%;max-width:320px;max-height:460px;
  border-radius:20px;object-fit:cover;
  box-shadow:0 8px 32px rgba(91,44,154,0.15);
}
.gallery-img.landscape img{
  width:100%;max-height:340px;
  border-radius:20px;object-fit:cover;
  box-shadow:0 8px 32px rgba(91,44,154,0.15);
}

/* Text */
.gallery-text h3{
  font-size:clamp(18px,2.2vw,22px);font-weight:700;
  color:var(--text);margin:12px 0 14px;line-height:1.3;
}
.gallery-text p{
  font-size:clamp(14px,1.5vw,16px);
  color:var(--text-sec);line-height:1.8;
}

/* Tablet ≤1100px */
@media(max-width:1100px){
  .about-intro-inner{padding:60px 40px;gap:40px}
  .gallery-inner{padding:60px 40px}
  .gallery-item{column-gap:36px;margin-bottom:56px}
  .gallery-img.portrait img{max-width:280px;max-height:380px}
  .gallery-img.landscape img{max-height:280px}
}

/* Mobile ≤768px — image+text stay together, image on top */
@media(max-width:768px){
  .about-intro-inner{
    padding:48px 20px;
    flex-direction:column;gap:24px;
  }
  .about-intro-img{width:100%}
  .about-intro-img img{max-width:100%;border-radius:16px}

  /* Single column — image always row1, text always row2 */
  .gallery-inner{padding:48px 20px}

  .gallery-item,
  .gallery-item.reverse{
    grid-template-columns:1fr;
    column-gap:0;
    row-gap:20px;
    margin-bottom:48px;
  }

  /* Force image=row1, text=row2 regardless of .reverse */
  .gallery-item > .gallery-img,
  .gallery-item.reverse > .gallery-img  { grid-column:1; grid-row:1 }
  .gallery-item > .gallery-text,
  .gallery-item.reverse > .gallery-text { grid-column:1; grid-row:2 }

  .gallery-img.portrait img{ max-width:100%; max-height:280px }
  .gallery-img.landscape img{ max-height:220px }
  .gallery-text h3{ font-size:18px; margin:8px 0 10px }
  .gallery-text p { font-size:14px }
}