/* ================================================================
   Hello-Archi(R) — Architecture Studio
   studio.css
   Studio page only. Reuses the shared .hero, .section-label, .reveal,
   .cta, footer and modal (all in base.css). Only the sections unique
   to this page are styled here: hero scroll cue extras, Who We Are,
   Philosophy/Mission/Vision, Process cards, Team cards, Awards table.
   Split from the original styles.css. Loaded on the studio page
   (after base.css).
   ================================================================ */

/* ---- Hero ------------------------------------------------------- */
/* Reuses .hero (full viewport) + .hero__bg / .hero__overlay / .hero__eyebrow.
   The headline sizing/weight is inherited from .hero__headline, and the
   horizontal scroll cue (.hero__scroll-hint) comes from base.css. */
.studio-hero { min-height: 100vh; }

/* ---- Who We Are — dark section, large fade-up statement --------- */
.who {
  background: var(--black);
  color: var(--white);
  padding-block: clamp(90px, 14vw, 200px);
}
.who .section-label { color: var(--grey); }
.who__statement {
  font-size: clamp(1.7rem, 3.6vw, 3rem);   /* large editorial headline copy */
  line-height: 1.25;
  font-weight: 400;
  letter-spacing: -0.02em;
  max-width: 17ch;                          /* keep the measure narrow + impactful */
  margin-top: clamp(28px, 4vw, 52px);
}
/* Re-flow to a comfortable reading width below the headline scale */
@media (min-width: 760px) {
  .who__statement { max-width: 24ch; }
}

/* ---- Philosophy · Mission · Vision ----------------------------- */
/* Each value is a two-column row (heading | paragraph) separated by a
   hairline rule, with generous vertical white space between blocks. */
.values {
  background: var(--black);
  color: var(--white);
  padding-bottom: clamp(80px, 12vw, 170px);
}
.value-row {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(28px, 6vw, 90px);
  padding-block: clamp(40px, 6vw, 78px);
  border-top: 1px solid rgba(245, 245, 245, 0.14);
  align-items: start;
}
.value-row:last-child { border-bottom: 1px solid rgba(245, 245, 245, 0.14); }
.value-row__title {
  display: flex;
  align-items: center;
  gap: 0.7em;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
/* Small circular bullet preceding each heading */
.value-row__dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--white);
}
.value-row__body {
  font-size: clamp(1rem, 1.3vw, 1.18rem);
  line-height: 1.6;
  color: var(--beige);
  max-width: 56ch;
}

/* ---- Our Process — blurred bg image + four rounded cards -------- */
.process {
  position: relative;
  overflow: hidden;
  padding-block: clamp(80px, 12vw, 160px);
  color: var(--white);
}
/* Semi-opaque, blurred architecture photo behind the cards */
.process__bg {
  position: absolute;
  inset: -40px;                  /* bleed so the blur never shows an edge */
  background: url("../images/process-bg.a8a381d9a956.jpg") center / cover no-repeat;
  filter: blur(7px) grayscale(40%) brightness(0.6);
  transform: scale(1.06);
  z-index: 0;
}
.process__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.78), rgba(10,10,10,0.86));
  z-index: 1;
}
.process__inner { position: relative; z-index: 2; }
.process__headline {
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.12;
  max-width: 18ch;
  margin-bottom: clamp(40px, 6vw, 72px);
}
/* Two rows × two columns of rounded glass cards */
.process__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(18px, 2.4vw, 32px);
}
.process-card {
  background: rgba(20, 20, 20, 0.55);
  border: 1px solid rgba(245, 245, 245, 0.12);
  border-radius: 16px;
  padding: clamp(26px, 3vw, 44px);
  backdrop-filter: blur(6px);
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), background 0.5s var(--ease);
}
.process-card:hover {
  transform: translateY(-6px);
  border-color: rgba(245, 245, 245, 0.32);
  background: rgba(28, 28, 28, 0.7);
}
.process-card__step {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey-light);
  margin-bottom: 1.4rem;
}
.process-card__title {
  font-size: clamp(1.2rem, 1.8vw, 1.6rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  margin-bottom: 0.9rem;
}
.process-card__desc {
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--beige);
}

/* Process cards enter with the shared staggered fade-up (workFadeUp, in
   base.css), triggered on scroll by the `.reveal` observer.
   Why an animation and not `.reveal`'s transition: `.process-card` defines
   its own `transition` (for the hover lift) which lists transform/border/
   background but NOT opacity — that rule replaces `.reveal`'s opacity
   transition, so on entrance the card slid up while its opacity SNAPPED
   0->1. That mismatch is the jank. Driving the entrance with a keyframe
   sidesteps the transition entirely; `backwards` fill holds the hidden
   first frame through each card's stagger delay, then releases so the
   :hover lift (a transition) still works. */
.process__grid .process-card.reveal.is-in {
  animation: workFadeUp 0.9s var(--ease) backwards;
}
.process__grid .process-card.reveal.is-in:nth-child(2) { animation-delay: 0.10s; }
.process__grid .process-card.reveal.is-in:nth-child(3) { animation-delay: 0.20s; }
.process__grid .process-card.reveal.is-in:nth-child(4) { animation-delay: 0.30s; }

/* ---- Our Team — black section, three profile cards ------------- */
.team {
  background: var(--black);
  color: var(--white);
  padding-block: clamp(80px, 12vw, 170px);
}
.team .section-label { color: var(--grey); }
.team__headline {
  font-size: clamp(2rem, 4.4vw, 3.6rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.06;
  margin-bottom: clamp(44px, 6vw, 80px);
}
.team__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.6vw, 36px);
}
.team-card {
  border-radius: 10px;
  overflow: hidden;
  background: var(--near-black);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.team-card:hover {
  transform: translateY(-6px) scale(1.012);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5);
}
.team-card__photo {
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center;
  filter: grayscale(100%) contrast(1.02);
  transition: filter 0.6s var(--ease), transform 0.7s var(--ease);
}
.team-card:hover .team-card__photo {
  filter: grayscale(0%) contrast(1.02);
  transform: scale(1.04);
}
.team-card__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(18px, 2vw, 26px);
}
.team-card__name {
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  font-weight: 500;
  letter-spacing: -0.015em;
}
.team-card__role {
  margin-top: 0.3rem;
  font-size: 0.9rem;
  color: var(--grey-light);
}
/* Small LinkedIn icon button — subtle hover lift/fill */
.team-card__social {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(245, 245, 245, 0.2);
  border-radius: 50%;
  color: var(--beige);
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease, transform 0.3s var(--ease);
}
.team-card__social:hover {
  color: var(--black);
  background: var(--white);
  border-color: var(--white);
  transform: translateY(-2px);
}

/* Team cards enter with the same staggered fade-up as the project and
   article cards (the shared `workFadeUp` keyframe, defined in base.css).
   The grid sits far down the page, so we keep the existing `.reveal`
   IntersectionObserver trigger (it adds `.is-in` when scrolled into view)
   and play the keyframe then, each card delayed after the last.
   `backwards` fill holds the hidden first frame through the stagger delay
   but does NOT persist after the run — so the card settles into the
   `.reveal.is-in` resting state and the :hover lift keeps working. */
.team__grid .team-card.reveal.is-in {
  animation: workFadeUp 0.9s var(--ease) backwards;
}
.team__grid .team-card.reveal.is-in:nth-child(2) { animation-delay: 0.12s; }
.team__grid .team-card.reveal.is-in:nth-child(3) { animation-delay: 0.24s; }

/* ---- Awards and Recognition — heading left, table right -------- */
.awards {
  background: var(--black);
  color: var(--white);
  padding-block: clamp(70px, 11vw, 150px);
  border-top: 1px solid rgba(245, 245, 245, 0.1);
}
.awards__layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(40px, 7vw, 110px);
  align-items: start;
}
/* Keep the heading visible while the table scrolls past on desktop */
.awards__intro { position: sticky; top: 120px; }
.awards__headline {
  font-size: clamp(1.8rem, 3.4vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.1;
  max-width: 16ch;
}
/* CSS-grid "table": Award | Year | Organization, hairline-divided rows */
.award-row {
  display: grid;
  grid-template-columns: 1.4fr 0.5fr 1.3fr;
  gap: clamp(14px, 2.4vw, 40px);
  align-items: baseline;
  padding-block: clamp(20px, 2.4vw, 32px);
  border-bottom: 1px solid rgba(245, 245, 245, 0.14);
}
.award-row--head {
  padding-block: 0 16px;
  border-bottom-color: rgba(245, 245, 245, 0.28);
}
.award-row--head span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
}
.award-row__name {
  font-size: clamp(1.05rem, 1.6vw, 1.32rem);
  font-weight: 500;
  letter-spacing: -0.015em;
}
.award-row__year {
  font-family: var(--font-mono);
  font-size: 0.92rem;
  color: var(--beige);
}
.award-row__org {
  font-size: 0.98rem;
  color: var(--grey-light);
  line-height: 1.45;
}

/* ---- Studio page responsive ------------------------------------ */
@media (max-width: 900px) {
  .value-row { grid-template-columns: 1fr; gap: 18px; }
  .awards__layout { grid-template-columns: 1fr; gap: 40px; }
  .awards__intro { position: static; top: auto; }
}

@media (max-width: 760px) {
  /* Stack the process and team grids into a single column */
  .process__grid { grid-template-columns: 1fr; }
  .team__grid { grid-template-columns: 1fr; gap: 28px; }
  /* Give the awards table room: stack the year + organization beneath the name */
  .award-row { grid-template-columns: 1.4fr 1.2fr; }
  .award-row__year { grid-row: 1; grid-column: 2; text-align: right; }
  .award-row__org { grid-column: 1 / -1; }
  .award-row--head { display: none; }   /* labels are redundant once stacked */
}

/* Reduced motion: show the process + team cards immediately (no fade-up)
   so the keyframe's hidden first frame never sticks. */
@media (prefers-reduced-motion: reduce) {
  .process__grid .process-card.reveal.is-in,
  .team__grid .team-card.reveal,
  .team__grid .team-card.reveal.is-in {
    opacity: 1;
    transform: none;
    animation: none;
  }
}