/* Team page base styles — strictly scoped to .ume-team-page so UME common
   Header/Footer CSS cannot leak in and Team styles cannot leak out. */
.ume-team-page {
  background-color: #F5F7FA;
  color: #6C757D;
  font-size: 16px;
  line-height: 1.6;
}
.ume-team-page * {
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  box-sizing: border-box;
}

/* Unclassed <p> fallback (e.g. About body paragraphs): common.css forces
   p{font-size:17px;line-height:1.58;color:#484848} which would beat layered
   Tailwind inheritance. Class-scoped defenses above still win over this
   tag-scoped rule (0,2,0 > 0,1,1), so classed paragraphs are unaffected. */
.ume-team-page p {
  font-size: 16px;
  line-height: 1.6;
  color: #6C757D;
}

/* === Defense against common.css global overrides ===
   common.css (loaded by get_module('common_meta')) is unlayered and can
   override Tailwind v4 utilities that live inside @layer utilities.
   The rules below re-assert the critical Team page text colors with a
   higher-specificity, unlayered selector so they always win inside the
   Team wrapper, while keeping the exact same visual values Tailwind uses. */
.ume-team-page .text-white {
  color: #ffffff;
}
.ume-team-page .text-white\/95 {
  color: rgb(255 255 255 / 0.95);
}
.ume-team-page .text-\[\#FFB700\] {
  color: #FFB700;
}
.ume-team-page .text-gray-200 {
  color: #e5e7eb;
}
.ume-team-page .text-gray-300 {
  color: #d1d5db;
}

/* === UME White Business Card === */
.ume-team-page .ume-white-card {
  background-color: #FFFFFF;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  padding: 24px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ume-team-page .ume-white-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* === UME Gray Auxiliary Card === */
.ume-team-page .ume-gray-card {
  background-color: #F5F7FA;
  border-radius: 8px;
  padding: 16px;
}

/* === UME Buttons === */
.ume-team-page .ume-btn-primary {
  background-color: #0ab596;
  color: #FFFFFF;
  border-radius: 8px;
  height: 44px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, transform 0.15s ease;
  cursor: pointer;
  border: none;
  white-space: nowrap;
}
.ume-team-page .ume-btn-primary:hover {
  background-color: #078870;
}
.ume-team-page .ume-btn-filter {
  background-color: transparent;
  border: 1px solid #0ab596;
  color: #0ab596;
  border-radius: 4px;
  height: 44px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  cursor: pointer;
  white-space: nowrap;
}
.ume-team-page .ume-btn-filter:hover,
.ume-team-page .ume-btn-filter.active {
  background-color: #0ab596;
  color: #FFFFFF;
}
.ume-team-page .ume-view-details {
  background: transparent;
  border: none;
  color: #0ab596;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
}
.ume-team-page .ume-view-details:hover .arrow-icon {
  transform: translateX(4px);
}
.ume-team-page .arrow-icon {
  transition: transform 0.2s ease;
}

/* === Form Inputs === */
.ume-team-page .ume-input {
  border: 1px solid #E8EDF2;
  border-radius: 4px;
  padding: 10px 14px;
  font-size: 14px;
  color: #2D3436;
  width: 100%;
  outline: none;
  transition: border-color 0.2s ease;
}
.ume-team-page .ume-input:focus {
  border-color: #0ab596;
}

/* === Typography defense: re-assert EXACT Tailwind font-size / line-height /
   font-weight for Team page, overriding common.css unlayered global rules
   (h2→25px, h3→16px, p→17px, h1,h2,h3{line-height:1.2;font-weight:normal},
   body{line-height:1.5}). Selectors are CLASS-scoped (.ume-team-page .text-[..])
   so each element keeps its own design size — NOT tag-scoped (h2/p), which
   would flatten the intentional size differences between sections. */
.ume-team-page .text-\[11px\] { font-size: 11px; }
.ume-team-page .text-\[12px\] { font-size: 12px; }
.ume-team-page .text-\[13px\] { font-size: 13px; }
.ume-team-page .text-\[14px\] { font-size: 14px; }
.ume-team-page .text-\[15px\] { font-size: 15px; }
.ume-team-page .text-\[16px\] { font-size: 16px; }
.ume-team-page .text-\[18px\] { font-size: 18px; }
.ume-team-page .text-\[20px\] { font-size: 20px; }
.ume-team-page .text-\[22px\] { font-size: 22px; }
.ume-team-page .text-\[24px\] { font-size: 24px; }
.ume-team-page .text-\[26px\] { font-size: 26px; }
.ume-team-page .text-\[28px\] { font-size: 28px; }
.ume-team-page .text-\[30px\] { font-size: 30px; }
.ume-team-page .text-\[32px\] { font-size: 32px; }
.ume-team-page .text-\[42px\] { font-size: 42px; }
.ume-team-page .text-\[48px\] { font-size: 48px; }

@media (min-width: 640px) {
  .ume-team-page .sm\:text-\[15px\] { font-size: 15px; }
  .ume-team-page .sm\:text-\[16px\] { font-size: 16px; }
  .ume-team-page .sm\:text-\[18px\] { font-size: 18px; }
  .ume-team-page .sm\:text-\[20px\] { font-size: 20px; }
  .ume-team-page .sm\:text-\[30px\] { font-size: 30px; }
  .ume-team-page .sm\:text-\[32px\] { font-size: 32px; }
  .ume-team-page .sm\:text-\[42px\] { font-size: 42px; }
}
@media (min-width: 768px) {
  .ume-team-page .md\:text-\[48px\] { font-size: 48px; }
  .ume-team-page .md\:text-4xl { font-size: 36px; line-height: 40px; }
  .ume-team-page .md\:text-lg { font-size: 18px; line-height: 28px; }
}

/* Tailwind standard size scale (also neutralizes common.css base heading/para sizes) */
.ume-team-page .text-sm { font-size: 14px; line-height: 20px; }
.ume-team-page .text-base { font-size: 16px; line-height: 24px; }
.ume-team-page .text-lg { font-size: 18px; line-height: 28px; }
.ume-team-page .text-xl { font-size: 20px; line-height: 28px; }
.ume-team-page .text-2xl { font-size: 24px; line-height: 32px; }
.ume-team-page .text-3xl { font-size: 30px; line-height: 36px; }
.ume-team-page .text-4xl { font-size: 36px; line-height: 40px; }

/* line-height utilities (common.css forces h1,h2,h3{line-height:1.2}) */
.ume-team-page .leading-\[1\.2\] { line-height: 1.2; }
.ume-team-page .leading-\[1\.3\] { line-height: 1.3; }
.ume-team-page .leading-\[1\.4\] { line-height: 1.4; }
.ume-team-page .leading-\[1\.55\] { line-height: 1.55; }
.ume-team-page .leading-\[1\.6\] { line-height: 1.6; }
/* Headings without leading-* utilities inherit 1.6 from the wrapper locally;
   common.css h1{line-height:40px} / h2{30px} / h3{22px} apply directly and beat
   inheritance, so re-assert the inherited value at tag level. Class-scoped
   leading-* defenses above still win (0,2,0 > 0,1,1). */
.ume-team-page h1, .ume-team-page h2, .ume-team-page h3, .ume-team-page h4 {
  line-height: 1.6;
}
.ume-team-page .leading-none { line-height: 1; }
.ume-team-page .leading-relaxed { line-height: 1.625; }

/* font-weight (common.css forces h1,h2,h3{font-weight:normal}) */
.ume-team-page .font-normal { font-weight: 400; }
.ume-team-page .font-medium { font-weight: 500; }
.ume-team-page .font-semibold { font-weight: 600; }
.ume-team-page .font-bold { font-weight: 700; }

/* === Color defense v2 (2026-09-02) ===
   common.css unlayered tag rules that beat layered Tailwind utilities:
   h1,h2,h3{color:#484848} / p{color:#484848} / a{color:#000} / a:hover{color:#0ab596}
   / button{color:inherit}. Re-assert every text color utility used on the page
   with an unlayered class-scoped selector so the winning value is always the
   Tailwind design value inside the Team wrapper. */
.ume-team-page .text-\[\#0ab596\] { color: #0ab596; }
.ume-team-page .text-\[\#6C757D\] { color: #6C757D; }
.ume-team-page .text-\[\#2D3436\] { color: #2D3436; }
.ume-team-page .text-\[\#484848\] { color: #484848; }
.ume-team-page .text-\[\#718096\] { color: #718096; }
.ume-team-page .text-\[\#4A5568\] { color: #4A5568; }
.ume-team-page .text-\[\#FFFFFF\] { color: #FFFFFF; }
.ume-team-page .text-gray-900 { color: #111827; }
.ume-team-page .text-gray-500 { color: #6b7280; }
.ume-team-page .text-umeGreen { color: #0ab596; }

/* hover-state colors (a:hover{color:#0ab596} and button{color:inherit}
   would otherwise swallow layered hover utilities) */
.ume-team-page .hover\:text-gray-900:hover { color: #111827; }
.ume-team-page .group:hover .group-hover\:text-\[\#0ab596\] { color: #0ab596; }

/* sm:text-lg was missing from the earlier scale block */
@media (min-width: 640px) {
  .ume-team-page .sm\:text-lg { font-size: 18px; line-height: 28px; }
}

/* === Profile card — 1:1 PORT of local index.html hover (2026-09-02) ===
   LOCAL implementation (index.html) is NORMAL-FLOW + max-height animation, NOT
   absolute positioning. The detail layer is a normal flex child of the card;
   on hover it animates max-height 0 -> 500px, opacity 0 -> 1, and adds a 16px
   top margin (group-hover:mt-4), so content reveals DOWNWARD directly beneath
   avatar -> name -> role. Forcing position:absolute changed the containing
   block and made the panel drift / cover the avatar on the live server — that
   is the regression. These unlayered scoped rules re-state the EXACT Tailwind
   utility values from local index.html so common.css cannot override the hover
   logic. They protect the ported local behavior; they do not recreate it. */
.ume-team-page #team-cards-container .group {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ume-team-page #team-cards-container .profile-summary {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ume-team-page #team-cards-container .profile-detail {
  width: 100%;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  pointer-events: none;
  transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, margin-top 0.3s ease-in-out;
}
.ume-team-page #team-cards-container .group:hover .profile-detail {
  max-height: 500px;
  opacity: 1;
  margin-top: 16px;
  pointer-events: auto;
}

/* === Consult CTA button — 1:1 PORT of local index.html (2026-09-02) ===
   LOCAL markup: <a class="h-7 px-2.5 rounded-[4px] bg-[#0ab596] text-white
   hover:bg-[#078870] transition-colors text-[12px] font-semibold flex
   items-center gap-1">Consult</a>, wrapped in <div class="pt-2 border-t
   border-[#E8EDF2] flex items-center justify-center gap-2">. The DOM on live is
   correct (the <a> is present), but the main site common.css (unlayered) sets
   `a { background: transparent }`, which beats Tailwind's bg-[#0ab596] utility
   (it lives in @layer utilities) -> the button renders transparent with white
   text and vanishes on the white card. These unlayered scoped rules re-state the
   EXACT local Tailwind values so common.css cannot strip the green fill. They
   do not recreate the button; they only protect the ported local style. The
   wrapper div + divider already render (border-t is visible), so only the <a>
   fill/hover is defended here. */
.ume-team-page #team-cards-container .profile-detail a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 10px;
  border-radius: 4px;
  background-color: #0ab596;
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
.ume-team-page #team-cards-container .profile-detail a:hover {
  background-color: #078870;
}

/* === Container clipping defense (2026-09-02) ===
   Guarantee the Destination Travel Experts roster is never height-capped or
   clipped: all 14 consultants render, sections stack normally, and nothing
   lets the Operations section overlap. */
.ume-team-page #team-roster,
.ume-team-page #team-cards-container,
.ume-team-page #team-cards-container > div,
.ume-team-page #team-cards-container .grid {
  height: auto;
  max-height: none;
  overflow: visible;
}

/* === Margin utilities defense (2026-09-02, root cause of -254px page height) ===
   common.css ships an UNLAYERED reset: h1,h2,h3,h4,h5,h6,p,figure,form,
   blockquote { margin: 0 } — unlayered rules beat Tailwind v4 utilities
   compiled inside @layer utilities regardless of specificity. Result: every
   mb / mt / mx-auto utility on a heading or paragraph collapsed to 0 and
   space-y spacing between <p> siblings vanished (page 254px shorter than
   local). These unlayered class-scoped re-assertions (0,2,0) restore the
   exact compiled values. --spacing is inherited from tailwind.css :root.
   NOTE: keep asterisk-slash sequences OUT of CSS comments — "mt- slash-star"
   inside a comment terminates it early and swallows the next rule (this is
   exactly how .mb-2 once got eaten while mb-3 onward survived). */
.ume-team-page .mb-2 { margin-bottom: calc(var(--spacing) * 2); }
.ume-team-page .mb-3 { margin-bottom: calc(var(--spacing) * 3); }
.ume-team-page .mb-4 { margin-bottom: calc(var(--spacing) * 4); }
.ume-team-page .mb-6 { margin-bottom: calc(var(--spacing) * 6); }
.ume-team-page .mb-8 { margin-bottom: calc(var(--spacing) * 8); }
.ume-team-page .mt-0\.5 { margin-top: calc(var(--spacing) * 0.5); }
.ume-team-page .mx-auto { margin-inline: auto; }

/* space-y sets margin-block-end on every child but the last via a layered
   :where() rule — also killed by the same unlayered p{margin:0} reset when
   the children are <p>. space-y-reverse is never used on this page. */
.ume-team-page .space-y-4 > :not(:last-child) {
  margin-block-start: 0;
  margin-block-end: calc(var(--spacing) * 4);
}
.ume-team-page .space-y-6 > :not(:last-child) {
  margin-block-start: 0;
  margin-block-end: calc(var(--spacing) * 6);
}

/* === Class-name collision defense (2026-09-02) ===
   common.css defines its OWN legacy utility classes that collide with
   Tailwind names but carry different values, e.g. .mb-10 { margin-bottom:
   10px } (Tailwind: 40px). Being unlayered they beat BOTH the layered
   mb-10 and the layered md:mb-12 — the UME Difference header gap rendered
   10px instead of 48px. Re-assert the Tailwind values, unlayered. */
.ume-team-page .mb-10 { margin-bottom: calc(var(--spacing) * 10); }
@media (min-width: 48rem) {
  .ume-team-page .md\:mb-12 { margin-bottom: calc(var(--spacing) * 12); }
}

/* === Image border defense (2026-09-02) ===
   common.css ships an UNLAYERED img { border: 0 } reset that erases every
   Tailwind border utility on <img>: the CTA avatar stack (border-2 /
   sm:border-3 / border-white) lost its white rings, exposing the green
   overlay beneath, and the modal avatar lost border-4. Re-assert width,
   style and color for the exact utilities used on imgs in this page.
   (border-3 is emitted by Tailwind v4 only inside the sm media query.) */
.ume-team-page img.border-2 { border-style: solid; border-width: 2px; }
.ume-team-page img.border-4 { border-style: solid; border-width: 4px; }
.ume-team-page img.border-white { border-color: #FFFFFF; }
.ume-team-page img.border-\[\#0ab596\]\/20 { border-color: rgba(10, 181, 150, 0.2); }
@media (min-width: 640px) {
  .ume-team-page img.sm\:border-3 { border-style: solid; border-width: 3px; }
}

/* === Chevron arrow size defense (2026-09-02) ===
   common.css unlayered rules override Tailwind @layer utilities (w-3.5 h-3.5).
   Force chevron SVG inside profile-summary to 14px × 14px. */
.ume-team-page #team-cards-container .profile-summary > svg {
  width: 14px;
  height: 14px;
}