/* ==========================================================================
   Pixel Academy — Public inner pages
   One shared visual language for the three simple public pages:
   teachers directory, teacher details, contact.

   Depends on pixel-v2.css (tokens, typography) and pixel-public.css (shell,
   buttons, atmosphere, header, drawer, footer). It never modifies either and
   never redefines the theme system — every adaptive value below is derived
   from the shell tokens that already flip with html[data-theme].

   Deliberately quieter than the homepage: no hero canvas, no stage, no
   per-page gradients. One page background, one card system, one radius
   system, one state system.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Inner-page tokens
   -------------------------------------------------------------------------- */
:root,
html[data-theme="dark"] {
  /* Deep indigo / purple environment, never one flat dark colour */
  --pxp-page-bg:
    radial-gradient(78% 48% at 84% 0%, rgba(26, 155, 130, 0.22) 0%, transparent 62%),
    radial-gradient(64% 44% at 4% 76%, rgba(217, 145, 63, 0.1) 0%, transparent 64%),
    linear-gradient(180deg, #051a16 0%, #072320 44%, #041614 100%);

  --pxp-card-bg: linear-gradient(180deg, rgba(16, 58, 51, 0.62) 0%, rgba(5, 26, 22, 0.96) 74%);
  --pxp-card-border: rgba(255, 255, 255, 0.12);
  --pxp-card-shadow: 0 18px 40px rgba(2, 12, 10, 0.42);
  --pxp-card-hover-border: rgba(26, 155, 130, 0.52);
  --pxp-card-lift: 0 24px 52px rgba(2, 12, 10, 0.52);

  --pxp-panel-bg: linear-gradient(168deg, rgba(16, 58, 51, 0.5) 0%, rgba(6, 29, 25, 0.9) 76%);
  --pxp-panel-border: rgba(255, 255, 255, 0.13);

  /* A media plate that keeps a portrait separated from the page */
  --pxp-media-bg:
    radial-gradient(78% 70% at 50% 100%, rgba(26, 155, 130, 0.26) 0%, transparent 66%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.015) 100%);
  --pxp-media-border: rgba(255, 255, 255, 0.1);

  --pxp-chip-bg: rgba(255, 255, 255, 0.06);
  --pxp-chip-border: rgba(255, 255, 255, 0.14);

  --pxp-skel-a: rgba(255, 255, 255, 0.05);
  --pxp-skel-b: rgba(255, 255, 255, 0.11);

  --pxp-note-bg: rgba(233, 178, 74, 0.1);
  --pxp-note-border: rgba(233, 178, 74, 0.32);
  --pxp-note-ink: var(--px-gold-2);

  --pxp-gold-ink: var(--px-gold-2);
  --pxp-cyan-ink: var(--px-cyan);
}

html[data-theme="light"] {
  /* Warm off-white with light lavender — not a white Bootstrap page */
  --pxp-page-bg:
    radial-gradient(78% 48% at 84% 0%, rgba(26, 155, 130, 0.14) 0%, transparent 62%),
    radial-gradient(64% 44% at 4% 76%, rgba(217, 145, 63, 0.1) 0%, transparent 64%),
    linear-gradient(180deg, #f9faf6 0%, #eaf4ef 46%, #f7f8f4 100%);

  --pxp-card-bg: linear-gradient(180deg, #ffffff 0%, #f1f8f4 100%);
  --pxp-card-border: rgba(8, 82, 68, 0.16);
  --pxp-card-shadow: 0 16px 34px rgba(6, 58, 50, 0.13);
  --pxp-card-hover-border: rgba(8, 82, 68, 0.44);
  --pxp-card-lift: 0 24px 48px rgba(6, 58, 50, 0.18);

  --pxp-panel-bg: linear-gradient(168deg, #ffffff 0%, #eef6f1 100%);
  --pxp-panel-border: rgba(8, 82, 68, 0.16);

  --pxp-media-bg:
    radial-gradient(78% 70% at 50% 100%, rgba(26, 155, 130, 0.14) 0%, transparent 66%),
    linear-gradient(180deg, rgba(8, 82, 68, 0.07) 0%, rgba(8, 82, 68, 0.02) 100%);
  --pxp-media-border: rgba(8, 82, 68, 0.14);

  --pxp-chip-bg: rgba(8, 82, 68, 0.06);
  --pxp-chip-border: rgba(8, 82, 68, 0.16);

  --pxp-skel-a: rgba(8, 82, 68, 0.07);
  --pxp-skel-b: rgba(8, 82, 68, 0.14);

  --pxp-note-bg: rgba(176, 117, 36, 0.1);
  --pxp-note-border: rgba(176, 117, 36, 0.3);
  --pxp-note-ink: #8a5a1e;

  --pxp-gold-ink: #8a5a1e;
  --pxp-cyan-ink: #8a5a1e;
}

/* --------------------------------------------------------------------------
   2. Page environment
   One continuous background behind the whole inner page, so the three pages
   read as one product rather than three unrelated designs.
   -------------------------------------------------------------------------- */
.pxp-page {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--px-ink);
  background: var(--pxp-page-bg);
  transition: background-color 320ms var(--px-ease);
}

.pxp-page .px-atmo__grid {
  background-image: linear-gradient(var(--px-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--px-grid-line) 1px, transparent 1px);
}

.pxp-page .px-atmo__noise {
  background-image: repeating-linear-gradient(0deg, var(--px-noise) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, var(--px-noise-2) 0 1px, transparent 1px 4px);
}

body.px-body .pxp-page h1,
body.px-body .pxp-page h2,
body.px-body .pxp-page h3,
body.px-body .pxp-page h4 {
  color: var(--px-ink);
}

body.px-body .pxp-page p {
  color: var(--px-ink-2);
}

/* The eyebrow accent keeps its contrast on the warm light surface. */
html[data-theme="light"] .pxp-page .px-eyebrow {
  color: var(--px-violet-deep);
}

/* Ghost buttons sit on adaptive surfaces here, exactly like in the drawer. */
body.px-body .pxp-page .px-btn--ghost {
  color: var(--px-ink);
  background: var(--pxp-chip-bg);
  border-color: var(--pxp-chip-border);
  box-shadow: none;
}

body.px-body .pxp-page .px-btn--ghost:hover {
  color: var(--px-ink);
  background: var(--px-chip-2);
  border-color: var(--px-violet-2);
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   3. Compact page hero — shared by teachers and contact
   -------------------------------------------------------------------------- */
.pxp-hero {
  position: relative;
  z-index: 1;
  /* --px-header-total already contains the Safe Area; never add it twice. */
  padding-top: calc(var(--px-header-total) + clamp(26px, 6vw, 52px));
  padding-bottom: clamp(24px, 5vw, 44px);
}

.pxp-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 780px;
}

body.px-body .pxp-hero__title {
  margin: 0 0 14px;
  font-size: clamp(1.75rem, 6vw, 2.75rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

body.px-body .pxp-hero__text {
  margin: 0;
  max-width: 54ch;
  font-size: clamp(0.95rem, 2.6vw, 1.06rem);
  line-height: 1.85;
}

/* Stepped rectangular Pixel accent — the shared inner-page signature */
.pxp-steps {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  margin-top: clamp(20px, 4vw, 28px);
}

.pxp-steps i {
  display: block;
  width: 14px;
  border-radius: 3px;
  background: var(--px-violet);
}

.pxp-steps i:nth-child(1) {
  height: 8px;
  opacity: 0.55;
}

.pxp-steps i:nth-child(2) {
  height: 15px;
  background: var(--px-violet-2);
}

.pxp-steps i:nth-child(3) {
  height: 23px;
  background: var(--px-cyan);
}

.pxp-steps i:nth-child(4) {
  height: 31px;
  background: linear-gradient(180deg, var(--px-violet-2), var(--px-violet-deep));
}

/* --------------------------------------------------------------------------
   4. Page bands
   -------------------------------------------------------------------------- */
.pxp-band {
  position: relative;
  z-index: 1;
  padding-block: clamp(22px, 4vw, 40px) clamp(48px, 8vw, 90px);
}

/* A band that opens the page on its own (teacher details) still clears the
   fixed header. */
.pxp-band--top {
  padding-top: calc(var(--px-header-total) + clamp(20px, 4vw, 34px));
}

.pxp-sectitle {
  margin: 0 0 clamp(16px, 3vw, 24px);
  font-size: clamp(1.1rem, 3.4vw, 1.4rem);
  font-weight: 800;
}

/* --------------------------------------------------------------------------
   5. Back link
   -------------------------------------------------------------------------- */
body.px-body .pxp-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-bottom: clamp(18px, 3vw, 26px);
  padding: 0 16px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--px-ink-2);
  background: var(--pxp-chip-bg);
  border: 1px solid var(--pxp-chip-border);
  border-radius: var(--px-r-sm);
  transition: color var(--pa-t) var(--px-ease), border-color var(--pa-t) var(--px-ease),
    background-color var(--pa-t) var(--px-ease);
}

body.px-body .pxp-back:hover {
  color: var(--px-ink);
  background: var(--px-chip-2);
  border-color: var(--px-violet-2);
}

.pxp-back i {
  font-size: 0.8em;
  color: var(--px-violet-2);
}

/* --------------------------------------------------------------------------
   6. States — loading, auth, empty, error, partial note
   One panel component covers every state on every page.
   -------------------------------------------------------------------------- */
.pxp-state:empty {
  display: none;
}

.pxp-panel {
  position: relative;
  overflow: hidden;
  max-width: 640px;
  margin-inline: auto;
  padding: clamp(24px, 5vw, 40px) clamp(18px, 4vw, 34px);
  text-align: center;
  background: var(--pxp-panel-bg);
  border: 1px solid var(--pxp-panel-border);
  border-radius: var(--px-r-lg);
  box-shadow: var(--pxp-card-shadow);
}

.pxp-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(var(--px-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--px-grid-line) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(circle at 50% 0%, #000, transparent 70%);
  mask-image: radial-gradient(circle at 50% 0%, #000, transparent 70%);
  opacity: 0.5;
}

.pxp-panel > * {
  position: relative;
  z-index: 1;
}

.pxp-panel__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 16px;
  font-size: 1.2rem;
  color: var(--px-violet-2);
  background: var(--pxp-chip-bg);
  border: 1px solid var(--pxp-chip-border);
  border-radius: var(--px-r-sm);
}

body.px-body .pxp-panel__title {
  margin: 0 0 10px;
  font-size: clamp(1.05rem, 3.2vw, 1.3rem);
  font-weight: 800;
}

body.px-body .pxp-panel__text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.9;
}

.pxp-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 22px;
}

@media (max-width: 400px) {
  .pxp-panel__actions {
    flex-direction: column;
  }

  body.px-body .pxp-panel__actions .px-btn {
    width: 100%;
  }
}

/* Non-blocking note: some data could not be loaded, the rest is still shown */
.pxp-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: clamp(18px, 3vw, 26px);
  padding: 14px 16px;
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--pxp-note-ink);
  background: var(--pxp-note-bg);
  border: 1px solid var(--pxp-note-border);
  border-radius: var(--px-r-sm);
}

.pxp-note i {
  flex: 0 0 auto;
  margin-top: 4px;
}

/* Skeletons */
.pxp-skel {
  position: relative;
  overflow: hidden;
  background: var(--pxp-skel-a);
  border-radius: 8px;
}

.pxp-skel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, var(--pxp-skel-b) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: pxp-shimmer 1500ms infinite;
}

@keyframes pxp-shimmer {
  100% {
    transform: translateX(100%);
  }
}

.pxp-skel--media {
  aspect-ratio: 4 / 5;
  width: 100%;
  border-radius: var(--px-r);
}

.pxp-skel--line {
  height: 13px;
  margin-top: 12px;
}

.pxp-skel--title {
  height: 19px;
  width: 68%;
  margin-top: 16px;
}

.pxp-skel--short {
  width: 46%;
}

.pxp-skel--btn {
  height: 44px;
  margin-top: 18px;
  border-radius: var(--px-r-sm);
}

/* --------------------------------------------------------------------------
   7. Teacher grid + teacher card
   -------------------------------------------------------------------------- */
.pxp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 3vw, 26px);
}

@media (min-width: 560px) {
  .pxp-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .pxp-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1360px) {
  .pxp-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.pxp-tcard {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 14px;
  background: var(--pxp-card-bg);
  border: 1px solid var(--pxp-card-border);
  border-radius: var(--px-r-lg);
  box-shadow: var(--pxp-card-shadow);
  transition: transform 260ms var(--px-ease), border-color 260ms var(--px-ease),
    box-shadow 260ms var(--px-ease);
}

.pxp-tcard:hover {
  transform: translateY(-4px);
  border-color: var(--pxp-card-hover-border);
  box-shadow: var(--pxp-card-lift);
}

/* Stable portrait plate — the same box for every teacher, so a grid of
   mismatched source images still reads as one row. */
.pxp-tcard__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--pxp-media-bg);
  border: 1px solid var(--pxp-media-border);
  border-radius: var(--px-r);
}

.pxp-tcard__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Anchored to the top of the frame, so a face is never cut off. */
  object-position: center top;
}

/* Set by the page script when the source is not a portrait, so a wide image
   is shown whole instead of being cropped. */
.pxp-tcard__img.is-contain,
.pxp-profile__img.is-contain {
  object-fit: contain;
  object-position: center;
}

.pxp-tcard__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  padding: 16px 4px 4px;
}

body.px-body .pxp-tcard__name {
  margin: 0 0 4px;
  font-size: 1.06rem;
  font-weight: 800;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.pxp-tcard__role {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--pxp-cyan-ink);
}

.pxp-tcard__role::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--px-cyan);
}

body.px-body .pxp-tcard__bio {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 12px 0 0;
  font-size: 0.88rem;
  line-height: 1.85;
  overflow-wrap: anywhere;
}

.pxp-tcard__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

body.px-body .pxp-phone {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 14px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--px-ink-2);
  background: var(--pxp-chip-bg);
  border: 1px solid var(--pxp-chip-border);
  border-radius: var(--px-r-sm);
  transition: color var(--pa-t) var(--px-ease), border-color var(--pa-t) var(--px-ease),
    background-color var(--pa-t) var(--px-ease);
}

body.px-body .pxp-phone:hover {
  color: var(--px-ink);
  background: var(--px-chip-2);
  border-color: var(--px-violet-2);
}

.pxp-phone i {
  font-size: 0.85em;
  color: var(--px-violet-2);
}

/* Numbers stay readable inside an RTL paragraph */
.pxp-num {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Social row — only ever rendered when there is at least one real link */
.pxp-social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

body.px-body .pxp-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-size: 0.95rem;
  color: var(--px-ink-2);
  background: var(--pxp-chip-bg);
  border: 1px solid var(--pxp-chip-border);
  border-radius: var(--px-r-sm);
  transition: color var(--pa-t) var(--px-ease), background-color var(--pa-t) var(--px-ease),
    border-color var(--pa-t) var(--px-ease), transform var(--pa-t) var(--px-ease);
}

body.px-body .pxp-social a:hover {
  color: #fff;
  background: linear-gradient(135deg, rgba(26, 155, 130, 0.85), rgba(217, 145, 63, 0.45));
  border-color: rgba(26, 155, 130, 0.6);
  transform: translateY(-2px);
}

/* The optional half of a teacher card — portrait aside, this is bio, phone
   and social links. The directory paints the card from the subjects response
   first and fills this box in afterwards if a profile arrives, so it is a
   real element that is legitimately empty for part of a card's life. Laying
   it out as a flow root keeps the children's own top margins working exactly
   as they did when they were direct children of the card body, and an empty
   box contributes no height at all. */
/* Portrait placeholder — the state a teacher card is in before its profile
   has been fetched, when that fetch was throttled, and when the profile
   simply carries no image. It fills the same plate the portrait would, so a
   card never changes height when the real image arrives. */
.pxp-tcard__ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(26, 155, 130, 0.28) 0%, rgba(26, 155, 130, 0) 62%),
    var(--pxp-chip-bg, rgba(255, 255, 255, 0.06));
}

.pxp-tcard__ph-mark {
  font-size: clamp(1.9rem, 7vw, 2.6rem);
  font-weight: 900;
  line-height: 1;
  color: var(--px-ink-2, rgba(255, 255, 255, 0.74));
  /* The plate reads as deliberate rather than as a missing image. */
  opacity: 0.85;
}

.pxp-tcard__details {
  display: flow-root;
}

.pxp-tcard__details:empty {
  display: none;
}

.pxp-tcard__foot {
  margin-top: auto;
  padding-top: 18px;
}

body.px-body .pxp-tcard__foot .px-btn {
  width: 100%;
}

/* --------------------------------------------------------------------------
   8. Teacher details — profile composition
   -------------------------------------------------------------------------- */
.pxp-profile {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 4vw, 40px);
  align-items: start;
}

@media (min-width: 900px) {
  .pxp-profile {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  }
}

.pxp-profile__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--pxp-media-bg);
  border: 1px solid var(--pxp-media-border);
  border-radius: var(--px-r-lg);
  box-shadow: var(--pxp-card-shadow);
}

@media (min-width: 900px) {
  .pxp-profile__media {
    aspect-ratio: 3 / 4;
  }
}

.pxp-profile__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* A single stepped pixel fragment anchored to the portrait plate */
.pxp-profile__pix {
  position: absolute;
  inset-inline-start: 14px;
  bottom: 14px;
  z-index: 2;
}

.pxp-profile__body {
  min-width: 0;
  padding: clamp(20px, 4vw, 32px);
  background: var(--pxp-card-bg);
  border: 1px solid var(--pxp-card-border);
  border-radius: var(--px-r-lg);
  box-shadow: var(--pxp-card-shadow);
}

body.px-body .pxp-profile__name {
  margin: 12px 0 0;
  font-size: clamp(1.5rem, 5vw, 2.1rem);
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

body.px-body .pxp-profile__bio {
  margin: 18px 0 0;
  font-size: 0.97rem;
  line-height: 1.95;
  overflow-wrap: anywhere;
}

.pxp-profile__block {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--px-rule);
}

.pxp-blocktitle {
  display: block;
  margin-bottom: 12px;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--px-ink-3);
}

.pxp-profile__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

@media (max-width: 400px) {
  .pxp-profile__actions {
    flex-direction: column;
  }

  body.px-body .pxp-profile__actions .px-btn {
    width: 100%;
  }
}

/* Details skeleton keeps the same two-column rhythm as the loaded profile */
.pxp-profile--skel .pxp-profile__body {
  min-height: 220px;
}

/* --------------------------------------------------------------------------
   9. Contact
   -------------------------------------------------------------------------- */
.pxp-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(14px, 3vw, 22px);
}

@media (min-width: 820px) {
  .pxp-contact-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.pxp-call {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(18px, 4vw, 26px);
  background: var(--pxp-card-bg);
  border: 1px solid var(--pxp-card-border);
  border-radius: var(--px-r-lg);
  box-shadow: var(--pxp-card-shadow);
  transition: transform 260ms var(--px-ease), border-color 260ms var(--px-ease),
    box-shadow 260ms var(--px-ease);
}

.pxp-call:hover {
  transform: translateY(-4px);
  border-color: var(--pxp-card-hover-border);
  box-shadow: var(--pxp-card-lift);
}

.pxp-call__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  font-size: 1.05rem;
  color: var(--px-violet-2);
  background: var(--pxp-chip-bg);
  border: 1px solid var(--pxp-chip-border);
  border-radius: var(--px-r-sm);
}

body.px-body .pxp-call__label {
  margin: 16px 0 8px;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--px-ink-3);
}

body.px-body .pxp-call__num {
  display: block;
  font-size: clamp(1.25rem, 5vw, 1.5rem);
  font-weight: 800;
  line-height: 1.4;
  color: var(--px-ink);
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}

.pxp-call__foot {
  margin-top: auto;
  padding-top: 20px;
}

body.px-body .pxp-call__foot .px-btn {
  width: 100%;
}

/* Call and WhatsApp side by side from the first breakpoint that fits them,
   stacked below it, so both actions stay full-width touch targets. */
.pxp-call__foot--dual {
  display: grid;
  gap: 10px;
}

@media (min-width: 380px) {
  .pxp-call__foot--dual {
    grid-template-columns: 1fr 1fr;
  }
}

body.px-body .px-btn--whatsapp {
  color: #fff;
  background: #1faf54;
  border-color: #1faf54;
}

body.px-body .px-btn--whatsapp:hover,
body.px-body .px-btn--whatsapp:focus-visible {
  color: #fff;
  background: #17903f;
  border-color: #17903f;
}

/* Working hours panel */
.pxp-hours {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 16px;
  margin-top: clamp(18px, 3.5vw, 28px);
  padding: clamp(20px, 4vw, 30px);
  background: var(--pxp-panel-bg);
  border: 1px solid var(--pxp-panel-border);
  border-radius: var(--px-r-lg);
  box-shadow: var(--pxp-card-shadow);
}

@media (min-width: 720px) {
  .pxp-hours {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 22px;
  }
}

.pxp-hours__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  font-size: 1.15rem;
  color: var(--pxp-gold-ink);
  background: var(--pxp-note-bg);
  border: 1px solid var(--pxp-note-border);
  border-radius: var(--px-r-sm);
}

body.px-body .pxp-hours__title {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 800;
}

body.px-body .pxp-hours__value {
  margin: 0;
  font-size: clamp(1rem, 3.4vw, 1.15rem);
  font-weight: 700;
  color: var(--px-ink);
}

body.px-body .pxp-lead {
  max-width: 60ch;
  margin: 0 0 clamp(18px, 3vw, 26px);
  font-size: clamp(0.95rem, 2.6vw, 1.02rem);
  line-height: 1.9;
}

/* --------------------------------------------------------------------------
   10. Motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pxp-page,
  .pxp-tcard,
  .pxp-call {
    transition: none;
  }

  .pxp-tcard:hover,
  .pxp-call:hover {
    transform: none;
  }

  body.px-body .pxp-social a:hover {
    transform: none;
  }

  .pxp-skel::after {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   11. Contact — Hamida support roles and the official channel list
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
  .pxp-contact-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 820px) {
  .pxp-contact-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 900px;
  }
}

.pxp-call--science .pxp-call__icon {
  color: var(--pxp-gold-ink);
  background: var(--pxp-note-bg);
  border-color: var(--pxp-note-border);
}

body.px-body .pxp-call__hint {
  margin: 10px 0 0;
  font-size: 0.86rem;
  line-height: 1.75;
  color: var(--px-ink-2);
}

.pxp-band--links {
  padding-top: 0;
}

.pxp-links {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 720px) {
  .pxp-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

@media (min-width: 1200px) {
  .pxp-links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

body.px-body .pxp-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 10px 14px;
  color: var(--px-ink);
  background: var(--pxp-card-bg);
  border: 1px solid var(--pxp-card-border);
  border-radius: var(--px-r);
  box-shadow: var(--pxp-card-shadow);
  transition: transform 220ms var(--px-ease), border-color 220ms var(--px-ease),
    box-shadow 220ms var(--px-ease);
}

body.px-body .pxp-link:hover,
body.px-body .pxp-link:focus-visible {
  color: var(--px-ink);
  transform: translateY(-2px);
  border-color: var(--pxp-card-hover-border);
  box-shadow: var(--pxp-card-lift);
}

.pxp-link__icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  font-size: 1rem;
  color: #fff;
  border-radius: 12px;
  background: var(--px-violet);
}

.pxp-link__icon--fb { background: #1877f2; }
.pxp-link__icon--yt { background: #e02424; }
.pxp-link__icon--ig { background: linear-gradient(135deg, #f58529, #dd2a7b 55%, #8134af); }
.pxp-link__icon--tt { background: #111111; }
.pxp-link__icon--tg { background: #229ed9; }
.pxp-link__icon--wa { background: #25d366; }
.pxp-link__icon--bot { background: linear-gradient(135deg, var(--px-violet), var(--px-violet-deep)); }

.pxp-link__text {
  display: grid;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
}

.pxp-link__text strong {
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.4;
}

.pxp-link__text span {
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--px-ink-3);
  overflow-wrap: anywhere;
}

.pxp-link__go {
  flex: 0 0 auto;
  font-size: 0.8rem;
  color: var(--px-ink-3);
}

@media (prefers-reduced-motion: reduce) {
  body.px-body .pxp-link {
    transition: none;
  }

  body.px-body .pxp-link:hover {
    transform: none;
  }
}