/* ==========================================================================
   KH Haircare — about page
   Loaded only by about.html, after layout.css. Nothing here is used by any
   other page, which is why it is a separate sheet rather than more layout.

   Profile · specialisations · work grid · practical details · CTA
   ========================================================================== */


/* ==========================================================================
   PROFILE
   Portrait leading, copy alongside. Portrait is first in the DOM, so it leads
   on the inline-start side in both directions with no RTL override needed.
   ========================================================================== */

/* The header is fixed and stays transparent until the page scrolls, and there
   is no hero here to sit beneath it — so the first section clears it itself,
   the same way .hero__content does on the home page. */
.about-intro{
  padding-block:calc(var(--header-h) + clamp(2rem,5vw,3.5rem)) clamp(2.5rem,6vw,4rem);
}

.about-intro__inner{
  display:flex;
  align-items:center;
  gap:clamp(1.5rem,4vw,3rem);
}

.about-intro__portrait{
  flex:none;
  inline-size:var(--portrait);
  block-size:var(--portrait);
  border-radius:50%;
  object-fit:cover;
}

/* Below the hero's --step-3 so the name does not shout, but still clearly
   ahead of the section headings further down the page. */
.about-intro__name{
  margin-block:.5rem 1.2rem;
  font-size:var(--step-2);
}

.about-intro__bio{
  max-inline-size:56ch;
  color:var(--kh-muted);
}

.about-intro__bio p + p{
  margin-block-start:.5rem;
}


/* ==========================================================================
   AREAS OF EXPERTISE
   Three grouped blocks, each a label over one line of related terms. Opened
   by a hairline rather than boxed, so it reads as the same system as the
   practical block further down.
   ========================================================================== */

.about-spec{
  padding-block:clamp(1rem,3vw,2rem) clamp(2.5rem,6vw,4rem);
}

/* Doubles as the section heading, so it carries h2 semantics but none of the
   display-face styling. base.css's [dir="rtl"] h2 rule outranks this class, so
   Arabic still resolves to Almarai. */
.about-spec__lead{
  margin-block-end:1.5rem;
  font-family:var(--font-body);
  font-size:var(--step-0);
  font-weight:400;
  line-height:inherit;
  text-align:start;
  color:var(--kh-muted);
}

.about-spec__groups{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:clamp(1.5rem,4vw,3rem);
  /* Only does anything once the columns stack, where it separates one block's
     terms from the next block's hairline. */
  row-gap:clamp(1.25rem,4vw,2rem);
}

.about-spec__group{
  padding-block-start:.9rem;
  border-block-start:1px solid var(--kh-line);
}

/* Deliberately not the display face: this is the practical block's label
   treatment, which is what ties the two sections together. The RTL rule in
   base.css is more specific than this class, so Arabic still resolves to
   Almarai rather than falling back through the Latin stack. */
.about-spec__group-title{
  font-family:var(--font-body);
  font-size:var(--step--1);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--kh-muted);
}

.about-spec__group-terms{
  margin-block-start:.4rem;
  color:var(--kh-ink);
}


/* ==========================================================================
   WORK
   The photographs are the same drifting, draggable band as the home page, so
   everything that draws them — the card sizing, the seams, the snap, the
   cursor — lives in GALLERY TRACKS in layout.css and nothing is restated here.
   This section only spaces it.

   It was a CSS-columns masonry until the band became scrollable on both pages;
   a column layout cannot be one horizontal track, so the columns are gone. The
   section also leaves .wrap in the markup, which is what lets the band run
   full bleed the way the home-page strip does.
   ========================================================================== */

.about-work{
  padding-block:0 clamp(2.5rem,6vw,4rem);
}


/* ==========================================================================
   PRACTICAL
   Label / value rows on a hairline grid. No card, no shadow.
   ========================================================================== */

.about-practical{
  padding-block:0 clamp(2.5rem,6vw,4rem);
}

/* No column-gap: a real gap would break each row's hairline into two floating
   segments. The label carries the separation as padding instead, so the two
   borders meet and the row reads as one continuous line. */
.about-practical__list{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  max-inline-size:var(--measure);
}

.about-practical__list dt,
.about-practical__list dd{
  padding-block:.8rem;
  border-block-start:1px solid var(--kh-line);
}

/* Closes the block off at the bottom. */
.about-practical__list dt:last-of-type,
.about-practical__list dd:last-of-type{
  border-block-end:1px solid var(--kh-line);
}

.about-practical__list dt{
  padding-inline-end:clamp(1rem,4vw,2.5rem);
  font-size:var(--step--1);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--kh-muted);
  white-space:nowrap;
}

.about-practical__list dd{
  color:var(--kh-ink);
}


/* ==========================================================================
   CTA
   ========================================================================== */

.about-cta{
  padding-block:0 clamp(3.5rem,8vw,6rem);
  text-align:center;
}


/* ==========================================================================
   PHONES  (< 768px)
   ========================================================================== */

@media (max-width:767.98px){

  .about-intro__inner{
    flex-direction:column;
    align-items:center;
    text-align:center;
  }

  .about-intro__portrait{
    inline-size:var(--portrait-sm);
    block-size:var(--portrait-sm);
  }

  /* max-inline-size is a ch measure, which stops the centred copy from
     centring inside a box narrower than the screen. */
  .about-intro__bio{
    max-inline-size:none;
  }

  /* Stacked: three columns would leave each terms line too narrow to read. */
  .about-spec__groups{
    grid-template-columns:minmax(0,1fr);
  }

  /* The label column stops being affordable at this width: stack the value
     under its label instead of squeezing both onto one line. */
  .about-practical__list{
    grid-template-columns:minmax(0,1fr);
    max-inline-size:none;
  }

  .about-practical__list dt{
    padding-block:.8rem .1rem;
    padding-inline-end:0;
    white-space:normal;
  }

  .about-practical__list dd{
    padding-block:0 .8rem;
    border-block-start:0;
  }

  .about-practical__list dd:last-of-type{
    border-block-end:1px solid var(--kh-line);
  }
}


/* ==========================================================================
   RTL
   Arabic drops the Latin tracking, exactly as the shared sheets do.
   ========================================================================== */

[dir="rtl"] .about-spec__group-title,
[dir="rtl"] .about-practical__list dt{
  letter-spacing:0;
}