/* ── TEAM PAGE — app-style cards, replaces the old bare hover-overlay grid ──
   The founder gets a full-width featured card (.team-card-featured) above
   this grid; everyone else renders here.
   Mobile: a fixed (non-scrolling) 2-column grid. Tablet+/Desktop: a wrapping
   grid (3 cols, then 4 cols at 1200px+). */
.team-col { min-width: 0; }

.team-page-grid {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 1.25rem 3.5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}
@media (min-width: 700px) {
  .team-page-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    padding: 0 1.5rem 5rem;
  }
}
@media (min-width: 1200px) {
  .team-page-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* A trailing card left alone in the last row spans full width and centers,
   instead of stranding it against empty columns. Not needed at 4-wide
   desktop (exactly 4 remaining members). */
@media (max-width: 699px) {
  .team-page-grid > .team-card-app:last-child:nth-child(2n+1) {
    grid-column: 1 / -1;
    max-width: calc(50% - 0.425rem);
    justify-self: center;
  }
}
@media (min-width: 700px) and (max-width: 1199px) {
  .team-page-grid > .team-card-app:last-child:nth-child(3n+1) {
    grid-column: 1 / -1;
    max-width: calc(33.333% - 1rem);
    justify-self: center;
  }
}

.team-card-app {
  background: var(--cream);
  border: 1px solid var(--warmgrey);
  border-radius: 18px;
  padding: 0.9rem 0.9rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.team-card-app:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(44,36,32,0.1);
  border-color: transparent;
}
.team-card-bio { flex: 1; }
.team-card-cta { margin-top: auto; }

.team-card-photo {
  position: relative;
  /* Bigger than it was: at 68px a face is barely legible, which defeats the
     point of having a photo of the person at all. */
  width: 104px;
  height: 104px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 0.6rem;
  border: 3px solid var(--linen);
  box-shadow: 0 6px 20px rgba(44,36,32,0.12);
  background: var(--warmgrey);
}
.team-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.team-card-initial {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--taupe), var(--espresso));
  color: #fff;
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 400;
}

.team-card-name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  color: var(--espresso);
  margin-bottom: 0.3rem;
}
.team-card-role {
  display: inline-block;
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--espresso);
  background: var(--blush);
  padding: 0.24rem 0.65rem;
  border-radius: 50px;
  margin-bottom: 0.5rem;
}
.team-card-stars {
  color: var(--gold);
  font-size: 0.6rem;
  margin-bottom: 0.4rem;
  letter-spacing: 0.1em;
}
.team-card-bio {
  font-size: 0.7rem;
  color: var(--greige);
  line-height: 1.5;
  margin-bottom: 0.6rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.team-card-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--blush);
  color: var(--espresso);
  text-decoration: none;
  font-size: 0.68rem;
  margin-bottom: 0.5rem;
  transition: background 0.2s ease, color 0.2s ease;
}
.team-card-social:hover { background: var(--taupe); color: #fff; }

.team-card-cta {
  padding: 0.4rem 0.85rem !important;
  font-size: 0.58rem !important;
  gap: 0.3rem !important;
  display: inline-flex;
}
.team-card-cta i {
  font-size: 0.7rem !important;
}

/* ── FOUNDER'S FEATURED CARD — a wide rectangle that sets Hassan apart
   from the rest of the team grid below it. ── */
.team-featured-wrap {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 1.25rem;
}
/* Photo beside the text at every width, not only on desktop. Stacked on a
   phone the photo took the whole screen and cropped to a pair of eyes, which
   told the client nothing and pushed the name and the Book button below the
   fold. */
.team-card-featured {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  background: var(--linen);
  border: 1px solid var(--gold);
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 1.5rem;
  box-shadow: 0 14px 36px rgba(44,36,32,0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.team-card-featured:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(44,36,32,0.14);
}
.team-card-founder-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  background: var(--gold);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.32rem 0.85rem;
  border-radius: 50px;
}
.team-card-featured-photo {
  /* An explicit width and height, not auto: with align-items:stretch and no
     definite parent height, the percentage-sized <img> falls back to its own
     aspect ratio instead of being cropped, and the card balloons. */
  width: 40%;
  max-width: 260px;
  min-width: 118px;
  height: auto;
  min-height: 100%;
  flex-shrink: 0;
  background: var(--warmgrey);
}
.team-card-featured-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
  display: block;
}
.team-card-featured-photo .team-card-initial {
  width: 100%;
  height: 100%;
  border-radius: 0;
  font-size: 3.5rem;
}
.team-card-featured-info {
  padding: 1.1rem 1.2rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.team-card-featured .team-card-role,
.team-card-featured .team-card-bio {
  max-width: 560px;
  margin-left: 0;
  margin-right: 0;
}
.team-card-featured-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.team-card-featured-actions .team-card-social { margin-bottom: 0; }

@media (min-width: 700px) {
  .team-card-featured-photo { width: 260px; height: 280px; min-height: 0; }
  .team-card-featured-info { padding: 1.5rem 2.25rem; }
  .team-card-featured .team-card-name { font-size: 1.35rem; }
}

/* On a phone the card is tighter: smaller type, no star row, and a bio short
   enough that the Book button stays on screen. */
@media (max-width: 560px) {
  .team-card-photo { width: 88px; height: 88px; }
  .team-card-featured-info { padding: 0.9rem 1rem; }
  .team-card-featured .team-card-name { font-size: 1.05rem; }
  .team-card-featured .team-card-role { font-size: 0.62rem; padding: 0.25rem 0.6rem; }
  .team-card-featured .team-card-bio {
    font-size: 0.78rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ── THE PHOTO IS A BUTTON NOW ── */
.team-card-photo,
.team-card-featured-photo {
  border: 0;
  padding: 0;
  cursor: pointer;
  display: block;
}
.team-card-photo { border: 3px solid var(--linen); }
.team-card-photo-more {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gold);
  color: #fff;
  font-size: 0.6rem;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.team-card-featured-photo { position: relative; }
.team-card-featured-photo .team-card-photo-more { right: 10px; bottom: 10px; width: 30px; height: 30px; font-size: 0.75rem; }
.team-card-photo:hover .team-card-photo-more,
.team-card-featured-photo:hover .team-card-photo-more,
.team-card-photo:focus-visible .team-card-photo-more,
.team-card-featured-photo:focus-visible .team-card-photo-more { opacity: 1; transform: scale(1); }

/* Part of the sentence, not a control below it. */
.team-card-more {
  display: inline;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--gold, #C9A96E);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  white-space: nowrap;
}
.team-card-more:hover { color: var(--espresso, #3f3632); }

/* ── FULL BIO DIALOG ── */
.bio-modal {
  position: fixed;
  inset: 0;
  z-index: 9700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(44, 36, 32, 0.42);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.bio-modal[hidden] { display: none; }
body.bio-modal-open { overflow: hidden; }
.bio-modal-panel {
  position: relative;
  display: grid;
  grid-template-columns: 40% 1fr;
  width: min(46rem, 100%);
  max-height: 88vh;
  overflow: hidden;
  background: var(--linen, #fdfaf5);
  border-radius: 20px;
  box-shadow: 0 30px 70px rgba(44, 36, 32, 0.3);
}
.bio-modal-photo { background: var(--warmgrey, #e9e3db); min-height: 100%; }
.bio-modal-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bio-modal-body {
  padding: 2rem 2rem 1.75rem;
  overflow-y: auto;
}
.bio-modal-close {
  position: absolute;
  top: 0.6rem;
  right: 0.9rem;
  z-index: 2;
  border: 0;
  background: rgba(255,255,255,0.85);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--espresso, #3f3632);
  cursor: pointer;
}
.bio-modal-name {
  font-family: var(--font-display, serif);
  font-size: 1.6rem;
  color: var(--espresso, #3f3632);
}
.bio-modal-role {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--greige, #9f948e);
  margin: 0.3rem 0 1.1rem;
}
.bio-modal-text p {
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--espresso, #3f3632);
  margin-bottom: 0.85rem;
}
.bio-modal-links {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-top: 1.2rem;
}

@media (max-width: 700px) {
  .bio-modal-panel { grid-template-columns: 1fr; max-height: 90vh; overflow-y: auto; }
  .bio-modal-photo { height: 210px; min-height: 0; }
  .bio-modal-body { padding: 1.4rem 1.3rem 1.5rem; }
  .bio-modal-name { font-size: 1.35rem; }
}

/* The cards centre their text, which suits two lines and not four paragraphs.
   Left-aligned prose gives the eye a fixed place to return to on each line. */
.bio-modal-body { text-align: left; }
.bio-modal-name, .bio-modal-role { text-align: left; }
.bio-modal-links { justify-content: flex-start; }


/* The founder's info column centres itself vertically, which left the short
   bio marooned in the middle with dead space above and below. Packed to the
   top instead, so name, role, bio and buttons read as one block. */
/* Centring the info column left the short bio marooned in the middle of the
   card with dead space above and below it. Packed to the top, and the buttons
   follow the text instead of being pushed to the floor - the block reads as
   one thing rather than two stranded at opposite ends. */
.team-card-featured-info { justify-content: center; }
.team-card-featured .team-card-bio { margin-bottom: 1.1rem; }
.team-card-featured-actions { margin-top: 0; }

/* A CTA label is whatever the salon typed, and "Book with Taniya on Instagram"
   is twice the width of "Book with Kani". The button now shrinks its text and
   wraps rather than pushing out past the card it sits in. */
.team-card-cta {
  max-width: 100%;
  white-space: normal;
  text-align: center;
  line-height: 1.35;
}
.team-card-cta span { overflow-wrap: anywhere; }

/* ── THE "MORE" MARKER ──
   The photo is a circle made with overflow:hidden, which was cutting the
   marker in half wherever it sat. The clipping moves onto the image itself, so
   the circle still looks like a circle and the marker can sit proud of its
   edge where it is actually visible. */
.team-card-photo,
.team-card-featured-photo { overflow: visible; }
.team-card-photo img,
.team-card-photo .team-card-initial { border-radius: 50%; }
.team-card-featured-photo img { border-radius: 0; }

.team-card-photo-more {
  /* Sat at the corner of the bounding box, which on a circle is outside the
     visible disc. Pulled onto the edge itself, and always visible rather than
     only on hover - a control nobody can see is a control nobody presses. */
  right: 2%;
  bottom: 6%;
  opacity: 1;
  transform: scale(1);
  box-shadow: 0 2px 8px rgba(44, 36, 32, 0.28);
  border: 2px solid var(--linen, #fdfaf5);
  width: 26px;
  height: 26px;
}
.team-card-featured-photo .team-card-photo-more { right: 12px; bottom: 12px; }
.team-card-photo:hover .team-card-photo-more,
.team-card-featured-photo:hover .team-card-photo-more { transform: scale(1.12); }

/* The marker was gold, the same as every other accent on these pages, so it
   read as decoration rather than as something to press - and it disappeared
   entirely against blonde hair. A dark disc stands off a photo at any
   brightness and looks like a control. */
.team-card-photo-more,
.team-card-featured-photo .team-card-photo-more {
  background: var(--espresso, #3f3632);
  color: #fff;
}
.team-card-photo:hover .team-card-photo-more,
.team-card-featured-photo:hover .team-card-photo-more {
  background: #000;
}

/* ── LET A BIO BE AS LONG AS IT IS WRITTEN ──
   The card clamped every bio to two lines and hid the rest with no way to
   reach it, so a paragraph written to fit the card was cut at the second line
   regardless. The text is already shortened in JS when it genuinely needs to
   be - and that version comes with a "Read more" - so a second, silent cut in
   CSS could only ever remove words nobody could get back.

   Capped rather than unlimited: a very long bio still stops before it can
   push the Book button off the bottom of the card. */
/* Clamped again on purpose. The card shows an opening line and the whole bio
   opens when the photo is tapped, so nothing is unreachable - which was the
   only reason to unclamp it. */
.team-card-bio {
  -webkit-line-clamp: 3;
}

/* ── THE FOUNDER CARD IS NOT A GRID CELL ──
   .team-card-bio carries flex:1 so that in the grid below, every bio pushes
   its Book button down to a common baseline and the row of buttons lines up.
   The featured card is a single flex row, not one of those cells, so there
   is no baseline to meet - flex:1 simply inflated a two-line bio into a tall
   empty box and stranded the buttons at the bottom of the photo's height,
   leaving a void through the middle of the card.

   Sized to its text here, and the column centres it against the photo. */
.team-card-featured .team-card-bio {
  flex: 0 0 auto;
}
/* The role is a pill, and a pill hugs its text. display:inline-block says so,
   but as a child of the info column it is also a flex item, and a flex item
   stretches across the cross axis by default - so "FOUNDER & MASTER STYLIST"
   was drawn as a 950px bar across the whole card. */
.team-card-featured .team-card-role {
  align-self: flex-start;
}