/* #########################################################
   PAGE: Our Team  —  html.pg-team
   ######################################################### */
/* =========================================================
   Travel Point – Our Team
   Loaded after common.css and inner.css; reuses tokens, header,
   phero, shead, divider, checklist, buttons and xcta.
   ========================================================= */
:where(.pg-team) .phero--team .phero__media img{ object-position: 50% 30%; }

/* ---------- Hero stats ---------- */
:where(.pg-team) .tstats{
  position: relative; z-index: 3; display: grid; grid-template-columns: repeat(4, 1fr);
  background: #fff; border-radius: 16px; box-shadow: 0 14px 40px rgba(18, 48, 46, .12);
  padding: clamp(16px, 1.6vw, 26px) 8px; max-width: 980px;
}
:where(.pg-team) .tstats li{ display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 14px; padding: 4px clamp(14px, 1.8vw, 30px); border-left: 1px solid var(--line); }
:where(.pg-team) .tstats li:first-child{ border-left: 0; }
:where(.pg-team) .tstats i{ grid-row: span 2; font-size: clamp(24px, 2vw, 32px); color: var(--gold); }
:where(.pg-team) .tstats b{ font-family: var(--serif); font-size: clamp(20px, 1.33vw, 22.5px); font-weight: 700; color: var(--heading); line-height: 1.1; }
:where(.pg-team) .tstats span{ font-size: clamp(12px, .85vw, 14px); color: var(--muted); }

/* ---------- Leader ---------- */
:where(.pg-team) .tlead{ padding: clamp(50px, 5vw, 96px) 0 clamp(40px, 4vw, 80px); background: #fff; }
:where(.pg-team) .tlead__inner{ display: grid; grid-template-columns: minmax(300px, 400px) 1fr; gap: clamp(30px, 5vw, 96px); align-items: center; }

:where(.pg-team) .tlead__card{
  position: relative; text-align: center; padding: clamp(30px, 2.6vw, 44px) clamp(22px, 2vw, 36px);
  background: linear-gradient(180deg, #0d4c49 0%, #023c3c 100%); color: #e6efee; border-radius: 22px;
  box-shadow: 0 24px 50px rgba(8, 64, 63, .28); overflow: hidden; isolation: isolate;
}
:where(.pg-team) .tlead__card::before{ content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--pattern); background-size: 90px; opacity: .08; }
:where(.pg-team) .tlead__card::after{ content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold)); }

/* Arch-shaped monogram, echoing the mosque arches used across the site */
:where(.pg-team) .tlead__avatar{
  width: 128px; height: 150px; margin: 0 auto 20px; padding: 6px;
  border-radius: 64px 64px 18px 18px; background: linear-gradient(180deg, var(--gold-light), var(--gold));
  box-shadow: 0 12px 26px rgba(0, 0, 0, .25);
}
:where(.pg-team) .tlead__avatar span{
  width: 100%; height: 100%; display: grid; place-items: center; border-radius: 58px 58px 14px 14px;
  background: radial-gradient(circle at 50% 30%, #145c58, #023c3c); color: var(--gold-light);
  font-family: var(--serif); font-size: 46px; font-weight: 700; letter-spacing: .04em;
}
:where(.pg-team) .tlead__name{ font-family: var(--serif); font-weight: 700; font-size: clamp(21px, 1.60vw, 25.4px); color: #fff; }
:where(.pg-team) .tlead__role{ display: inline-block; margin: 8px 0 20px; padding: 5px 16px; border: 1px solid rgba(238, 193, 105, .55); border-radius: 999px; color: var(--gold-light); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
:where(.pg-team) .tlead__contact{ display: grid; gap: 10px; text-align: left; padding: 18px 0; border-top: 1px solid rgba(255, 255, 255, .12); border-bottom: 1px solid rgba(255, 255, 255, .12); }
:where(.pg-team) .tlead__contact a{ display: flex; align-items: center; gap: 12px; font-size: 15px; color: #e6efee; word-break: break-word; }
:where(.pg-team) .tlead__contact a:hover{ color: var(--gold-light); }
:where(.pg-team) .tlead__contact i{ flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .08); color: var(--gold-light); font-size: 14px; }
:where(.pg-team) .tlead__btns{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
:where(.pg-team) .tlead__btns .btn{ padding: 12px 10px; }
:where(.pg-team) .tlead__wa{ background: #25d366; color: #fff; border-color: #25d366; }
:where(.pg-team) .tlead__wa:hover{ background: #1da851; border-color: #1da851; }
:where(.pg-team) .tlead__wa i{ font-size: 1.25em; }

:where(.pg-team) .tlead__content .section-title{ margin-top: 8px; }
:where(.pg-team) .tlead__text{ font-size: clamp(14.5px, 1.05vw, 16.7px); line-height: 1.8; color: var(--muted); margin: 18px 0 22px; max-width: 62ch; }
:where(.pg-team) .tlead__list{ gap: 10px; margin-bottom: 28px; }
:where(.pg-team) .tlead__approved{ padding-top: 22px; border-top: 1px dashed var(--line); }
:where(.pg-team) .tlead__approved p{ font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-2); margin-bottom: 12px; }
:where(.pg-team) .tlead__approved img{ width: 100%; max-width: 640px; height: auto; }

/* ---------- Desks ---------- */
:where(.pg-team) .tdesks{ position: relative; padding: clamp(46px, 4.6vw, 86px) 0; background: linear-gradient(180deg, #fbf7ef 0%, #fff 100%); }
:where(.pg-team) .tdesk-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.6vw, 28px); }
:where(.pg-team) .tdesk{
  position: relative; display: flex; flex-direction: column; gap: 18px; padding: clamp(24px, 2vw, 34px);
  background: #fff; border: 1px solid #f1ebdf; border-radius: 16px; box-shadow: 0 8px 26px rgba(18, 48, 46, .07);
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
:where(.pg-team) .tdesk::after{ content: ""; position: absolute; left: 24px; right: 24px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--gold); transform: scaleX(0); transition: transform .35s; }
:where(.pg-team) .tdesk:hover{ transform: translateY(-6px); box-shadow: 0 18px 40px rgba(18, 48, 46, .14); border-color: #ecdcb8; }
:where(.pg-team) .tdesk:hover::after{ transform: scaleX(1); }
:where(.pg-team) .tdesk__icon{ width: 62px; height: 62px; border-radius: 16px; display: grid; place-items: center; font-size: 26px; color: var(--gold-light); background: linear-gradient(135deg, #0d4c49, #023c3c); box-shadow: 0 10px 20px rgba(8, 64, 63, .22); }
:where(.pg-team) .tdesk__body{ display: flex; flex-direction: column; flex: 1; }
:where(.pg-team) .tdesk h3{ font-family: var(--serif); font-weight: 700; font-size: clamp(19px, 1.22vw, 19.1px); color: var(--heading); margin-bottom: 8px; }
:where(.pg-team) .tdesk p{ font-size: clamp(14px, .98vw, 16px); line-height: 1.7; color: var(--muted); flex: 1; }
:where(.pg-team) .tdesk__link{
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 0;
  border: 0; background: none; cursor: pointer; font-family: var(--sans); font-size: 14.5px; font-weight: 600; color: var(--gold-2);
}
:where(.pg-team) .tdesk__link i{ font-size: .85em; transition: transform .25s; }
:where(.pg-team) .tdesk__link:hover{ color: var(--heading); }
:where(.pg-team) .tdesk__link:hover i{ transform: translateX(4px); }

/* ---------- Steps ---------- */
:where(.pg-team) .tsteps{ position: relative; padding: clamp(46px, 4.6vw, 86px) 0; background: linear-gradient(135deg, #0d4c49 0%, #023c3c 100%); color: #e6efee; overflow: hidden; isolation: isolate; }
:where(.pg-team) .tsteps::before{ content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--pattern); background-size: 110px; opacity: .06; }
:where(.pg-team) .tsteps__title{ color: #fff; }
:where(.pg-team) .tsteps__list{ display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 1.6vw, 28px); list-style: none; }
:where(.pg-team) .tsteps__list li{
  position: relative; padding: clamp(24px, 2vw, 32px); border-radius: 16px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); transition: background .3s, transform .3s;
}
:where(.pg-team) .tsteps__list li:hover{ background: rgba(255, 255, 255, .1); transform: translateY(-4px); }
:where(.pg-team) .tsteps__num{ position: absolute; top: 18px; right: 22px; font-family: var(--serif); font-size: 34px; font-weight: 700; color: rgba(238, 193, 105, .28); line-height: 1; }
:where(.pg-team) .tsteps__list i{ font-size: 30px; color: var(--gold-mid); margin-bottom: 16px; }
:where(.pg-team) .tsteps__list h3{ font-family: var(--serif); font-weight: 700; font-size: clamp(18px, 1.20vw, 18.7px); color: #fff; margin-bottom: 8px; }
:where(.pg-team) .tsteps__list p{ font-size: clamp(14px, .95vw, 15.5px); line-height: 1.65; color: #cfe0de; }

/* ---------- Team at work ---------- */
:where(.pg-team) .tlife{ padding: clamp(46px, 4.6vw, 86px) 0; background: #fff; }
:where(.pg-team) .tlife__head{ display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: clamp(22px, 2.2vw, 36px); }
:where(.pg-team) .tlife__grid{ display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(150px, 13vw, 240px); gap: clamp(10px, 1vw, 18px); }
:where(.pg-team) .tlife__item{ position: relative; overflow: hidden; border-radius: 14px; background: #eee; }
:where(.pg-team) .tlife__item--wide{ grid-column: span 2; grid-row: span 2; }
:where(.pg-team) .tlife__item--tall{ grid-row: span 2; }
:where(.pg-team) .tlife__item:nth-child(5), :where(.pg-team) .tlife__item:nth-child(6){ grid-column: span 2; }
:where(.pg-team) .tlife__item:nth-child(3) img{ object-position: 50% 20%; }
:where(.pg-team) .tlife__item img{ width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
:where(.pg-team) .tlife__item:hover img{ transform: scale(1.06); }
:where(.pg-team) .tlife__item figcaption{
  position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 16px 12px; color: #fff; font-size: 14px; font-weight: 500;
  background: linear-gradient(0deg, rgba(1, 30, 30, .82), transparent);
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  :where(.pg-team) .tlead__inner{ grid-template-columns: 1fr; }
  :where(.pg-team) .tlead__card{ max-width: 440px; width: 100%; margin: 0 auto; }
  :where(.pg-team) .tdesk-grid{ grid-template-columns: repeat(2, 1fr); }
  :where(.pg-team) .tsteps__list{ grid-template-columns: repeat(2, 1fr); }
  :where(.pg-team) .tlife__grid{ grid-template-columns: repeat(3, 1fr); }
  :where(.pg-team) .tlife__item--tall{ grid-row: auto; }
  :where(.pg-team) .tlife__item:nth-child(5), :where(.pg-team) .tlife__item:nth-child(6){ grid-column: auto; }
}

@media (max-width: 860px) {
  :where(.pg-team) .tstats{ grid-template-columns: repeat(2, 1fr); row-gap: 14px; margin-bottom: 8px; }
  :where(.pg-team) .tstats li:nth-child(3){ border-left: 0; }
}

@media (max-width: 767px) {
  :where(.pg-team) .tstats li{ padding-inline: 10px; column-gap: 10px; }

  /* Desks become compact list rows */
  :where(.pg-team) .tdesk-grid{ grid-template-columns: 1fr; gap: 10px; }
  :where(.pg-team) .tdesk{ flex-direction: row; align-items: flex-start; gap: 14px; padding: 16px; border-radius: 14px; }
  :where(.pg-team) .tdesk:hover{ transform: none; }
  :where(.pg-team) .tdesk__icon{ flex: 0 0 48px; width: 48px; height: 48px; border-radius: 12px; font-size: 20px; }
  :where(.pg-team) .tdesk h3{ font-size: 17px; margin-bottom: 4px; }
  :where(.pg-team) .tdesk p{ font-size: 13.5px; line-height: 1.6; }
  :where(.pg-team) .tdesk__link{ margin-top: 8px; font-size: 13.5px; }

  :where(.pg-team) .tsteps__list{ grid-template-columns: 1fr; gap: 10px; }
  :where(.pg-team) .tsteps__list li{ display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; padding: 16px; }
  :where(.pg-team) .tsteps__list i{ grid-row: span 2; margin: 2px 0 0; font-size: 24px; }
  :where(.pg-team) .tsteps__list h3{ margin-bottom: 2px; font-size: 17px; }
  :where(.pg-team) .tsteps__num{ top: 14px; right: 16px; font-size: 24px; }

  /* Photos become a swipeable strip */
  :where(.pg-team) .tlife__head{ flex-direction: column; align-items: flex-start; }
  :where(.pg-team) .tlife__grid{
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 10px;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
  }
  :where(.pg-team) .tlife__grid::-webkit-scrollbar{ display: none; }
  :where(.pg-team) .tlife__item, :where(.pg-team) .tlife__item--wide, :where(.pg-team) .tlife__item--tall{ flex: 0 0 78%; height: 240px; scroll-snap-align: start; }
  :where(.pg-team) .tlife__item--tall{ flex-basis: 52%; }

  :where(.pg-team) .tlead__btns .btn{ font-size: 14px; }
}