/*
 * Experiências de serviço
 * A marca Montrond mantém o seu cabeçalho/rodapé preto, branco e amarelo.
 * Cada página ganha uma atmosfera própria, sem alterar a identidade principal.
 */

.experience-page {
  --experience-deep: #183e3a;
  --experience-surface: #e8f0ec;
  --experience-panel: #f8fbf9;
  --experience-ink: #15302d;
  --experience-muted: #48635e;
  --experience-rule: #b9cdc5;
  --experience-accent: #277066;
  --experience-gallery: #173b37;
  --experience-caption: #f4f8f5;
  --experience-caption-ink: #15332f;
  --experience-wash: rgba(39, 112, 102, .18);
  --experience-shadow: rgba(21, 48, 45, .14);
  --panel: var(--experience-panel);
  --white: var(--experience-ink);
  --muted: var(--experience-muted);
  --rule: var(--experience-rule);
  background: var(--experience-surface);
  color: var(--experience-ink);
}

.experience-page--pilates {
  --experience-deep: #103b38;
  --experience-surface: #a2c5b8;
  --experience-panel: #dce9e3;
  --experience-ink: #112f2d;
  --experience-muted: #385952;
  --experience-rule: #91b8a8;
  --experience-accent: #14675e;
  --experience-gallery: #123631;
  --experience-caption: #e8f1ec;
  --experience-caption-ink: #163630;
  --experience-wash: rgba(20, 103, 94, .28);
  --experience-shadow: rgba(12, 49, 43, .20);
}

.experience-page--massage {
  --experience-deep: #44242d;
  --experience-surface: #dcb5a7;
  --experience-panel: #f2ded4;
  --experience-ink: #352027;
  --experience-muted: #664750;
  --experience-rule: #c9998d;
  --experience-accent: #873f42;
  --experience-gallery: #3b2028;
  --experience-caption: #f8ebe4;
  --experience-caption-ink: #42252d;
  --experience-wash: rgba(136, 63, 66, .22);
  --experience-shadow: rgba(62, 32, 40, .18);
}

.experience-page--artes {
  --experience-deep: #202541;
  --experience-surface: #edf0fb;
  --experience-panel: #fbfcff;
  --experience-ink: #202541;
  --experience-muted: #56627e;
  --experience-rule: #c4cbea;
  --experience-accent: #a7434e;
  --experience-gallery: #1c2037;
  --experience-caption: #f6f7fe;
  --experience-caption-ink: #232943;
  --experience-wash: rgba(67, 83, 160, .16);
  --experience-shadow: rgba(27, 32, 61, .16);
}

.experience-page--fitnessbar {
  --experience-deep: #2a1712;
  --experience-surface: #e8c5a0;
  --experience-panel: #f6e8d8;
  --experience-ink: #2a1a14;
  --experience-muted: #624339;
  --experience-rule: #b8764f;
  --experience-accent: #c56a2d;
  --experience-gallery: #281713;
  --experience-caption: #f1d7bc;
  --experience-caption-ink: #3b2118;
  --experience-wash: rgba(197, 106, 45, .30);
  --experience-shadow: rgba(42, 23, 18, .20);
}

.experience-page .team-page-header,
.experience-page footer {
  --panel: #1b1c19;
  --white: #f8f8f4;
  --muted: #b8bab2;
  --rule: #34362e;
  background: #111210;
  color: #f8f8f4;
}

.experience-page main {
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 5%, var(--experience-wash), transparent 31rem),
    linear-gradient(180deg, var(--experience-surface) 0%, var(--experience-surface) 72%, var(--experience-panel) 100%);
}

.experience-page .service-profile {
  position: relative;
  gap: clamp(30px, 5.4vw, 84px);
  padding: clamp(56px, 8vw, 116px) max(6%, calc((100vw - 1360px) / 2));
  border-top: 0;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, .34), transparent 56%),
    linear-gradient(180deg, rgba(255, 255, 255, .16), transparent 76%);
}

.experience-page .service-profile::before {
  position: absolute;
  top: 0;
  left: max(6%, calc((100vw - 1360px) / 2));
  width: clamp(108px, 13vw, 190px);
  height: 4px;
  content: "";
  background: linear-gradient(90deg, var(--yellow), var(--experience-accent));
}

.experience-page .service-profile__intro {
  align-self: center;
  padding: clamp(26px, 3.6vw, 46px);
  background: rgba(255, 255, 255, .64);
  border: 1px solid rgba(255, 255, 255, .7);
  border-left: 4px solid var(--experience-accent);
  border-radius: 4px 24px 4px 24px;
  box-shadow: 0 22px 48px var(--experience-shadow);
}

.experience-page--pilates .service-profile__intro {
  background: rgba(232, 240, 236, .90);
  border-color: rgba(255, 255, 255, .38);
}

.experience-page--massage .service-profile__intro {
  background: rgba(248, 235, 228, .88);
  border-color: rgba(255, 255, 255, .34);
}

.experience-page--fitnessbar .service-profile__intro {
  background: rgba(246, 232, 216, .90);
  border-color: rgba(255, 255, 255, .32);
}

/*
 * Os heróis destes serviços precisam de leitura confortável, não de palavras
 * partidas numa coluna estreita. A introdução ganha a largura necessária e a
 * tipografia mantém a presença sem competir com a fotografia.
 */
.experience-page .service-profile {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
}

/* No desktop, a galeria do Fitness Bar é mais alta do que o painel de texto.
 * Mantemos a apresentação no primeiro ecrã em vez de a centrar a meio da galeria. */
@media (min-width: 1121px) {
  .experience-page--fitnessbar .service-profile {
    align-items: start;
  }

  .experience-page--fitnessbar .service-profile__intro {
    align-self: start;
  }
}

.experience-page .service-profile__intro {
  min-width: 0;
  padding: clamp(24px, 2.9vw, 38px);
}

.experience-page .service-profile h1,
.experience-page--massage .service-profile h1,
.experience-page--fitnessbar .service-profile h1 {
  max-width: 19ch;
  margin-bottom: 18px;
  font-family: inherit;
  font-size: clamp(38px, 3.55vw, 58px);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1.04;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  text-wrap: balance;
}

.experience-page .service-profile__intro .eyebrow,
.experience-page .section-heading .eyebrow,
.experience-page .service-catalog__heading .eyebrow {
  color: var(--experience-accent);
}

.experience-page .service-profile h1,
.experience-page .section-heading h2,
.experience-page .service-booking-summary h2,
.experience-page .service-treatment-card h3 {
  color: var(--experience-ink);
}

.experience-page .service-profile h1 span,
.experience-page .section-heading h2 em {
  color: var(--experience-accent);
}

/* Mantém os títulos de cada serviço claros e compactos, sobretudo nas secções
 * de Estética, Pilates e Artes Marciais, sem palavras isoladas em coluna. */
.experience-page .section-heading h2,
.experience-page .service-booking-summary h2 {
  max-width: 21ch;
  font-size: clamp(32px, 3.35vw, 54px);
  letter-spacing: -.042em;
  line-height: 1.06;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  text-wrap: balance;
}

.experience-page .service-profile__lead {
  color: var(--experience-muted);
}

.experience-page .service-profile__switcher a {
  color: var(--experience-ink);
  background: rgba(255, 255, 255, .58);
  border-color: var(--experience-rule);
}

.experience-page .service-profile__switcher a:hover,
.experience-page .service-profile__switcher a[aria-current="page"] {
  color: #111210;
  background: var(--yellow);
  border-color: var(--yellow);
}

.experience-page .service-profile__gallery {
  padding: clamp(12px, 1.6vw, 20px);
  background: linear-gradient(145deg, var(--experience-gallery), #111210);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 4px 26px 4px 26px;
  box-shadow: 0 24px 56px var(--experience-shadow);
}

.experience-page .service-profile__visual {
  background: #111210;
  border: 1px solid rgba(255, 255, 255, .13);
}

.experience-page .service-profile__visual figcaption {
  color: var(--experience-caption-ink);
  background: var(--experience-caption);
}

.experience-page .service-profile__visual figcaption strong {
  color: var(--experience-accent);
}

.experience-page .service-profile__visual figcaption span {
  color: var(--experience-muted);
}

.experience-page .service-profile__approach,
.experience-page .service-catalog {
  padding: clamp(62px, 8vw, 112px) max(6%, calc((100vw - 1360px) / 2));
  border-top-color: var(--experience-rule);
}

.experience-page .service-profile__benefits article,
.experience-page .service-treatment-card,
.experience-page .service-booking-summary {
  background: var(--experience-panel);
  border-color: var(--experience-accent);
  box-shadow: 0 16px 34px rgba(22, 25, 25, .08);
}

.experience-page .service-profile__benefits span,
.experience-page .service-treatment-card__owner,
.experience-page .artes-booking .service-booking-summary__options h3 {
  color: var(--experience-accent);
}

.experience-page .service-profile__benefits h3,
.experience-page .service-booking-summary h3 {
  color: var(--experience-ink);
}

.experience-page .service-profile__benefits p,
.experience-page .service-treatment-card__content > p:not(.service-treatment-card__owner),
.experience-page .service-booking-summary p,
.experience-page .service-catalog__heading > p:last-child,
.experience-page .service-catalog__note,
.experience-page .service-booking-prices dt {
  color: var(--experience-muted);
}

.experience-page .service-booking-prices dd,
.experience-page .service-treatment-card dd {
  color: var(--experience-ink);
}

.experience-page .service-booking-prices > div,
.experience-page .service-treatment-card dl div {
  border-top-color: var(--experience-rule);
}

.experience-page--fitnessbar .service-profile__gallery--bar {
  align-items: start;
}

.experience-page--fitnessbar .service-profile__gallery--bar .service-profile__visual > img:first-child {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: auto;
  object-fit: contain;
}

.experience-page--fitnessbar .service-profile__gallery--bar .service-profile__visual figcaption {
  position: static;
  display: grid;
  gap: 4px;
  padding: 14px 16px 16px;
  line-height: 1.5;
}

/* O seletor do Fitness Bar recebe uma prévia própria antes da entrada completa. */
#service-panel[data-service="fitnessbar"] {
  --panel: #3b251b;
  --white: #fff4e5;
  --muted: #eed0b5;
  --rule: #835339;
  background: linear-gradient(145deg, #3f2419, #201512);
  border: 1px solid #8b5437;
}

#service-panel[data-service="fitnessbar"] .pill {
  color: #ffdc9d;
  border-color: #a6603d;
}

#service-panel[data-service="fitnessbar"] .service-photo {
  padding: 10px;
  background: #281914;
  border: 1px solid #76432d;
}

#service-panel[data-service="fitnessbar"] .service-photo > img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 340px;
  margin-inline: auto;
  object-fit: contain;
}

@media (max-width: 900px) {
  .experience-page .service-profile {
    gap: 32px;
  }

  .experience-page .service-profile__intro {
    position: static;
  }
}

@media (max-width: 1120px) {
  .experience-page .service-profile {
    grid-template-columns: 1fr;
  }

  .experience-page .service-profile__gallery {
    max-width: 820px;
  }
}

@media (max-width: 760px) {
  .experience-page .service-profile,
  .experience-page .service-profile__approach,
  .experience-page .service-catalog {
    padding-right: 6%;
    padding-left: 6%;
  }

  .experience-page .service-profile::before {
    left: 6%;
  }

  .experience-page .service-profile__intro {
    padding: 24px 21px;
    border-radius: 3px 18px 3px 18px;
  }

  .experience-page .service-profile h1,
  .experience-page--massage .service-profile h1,
  .experience-page--fitnessbar .service-profile h1 {
    max-width: 19ch;
    font-size: clamp(34px, 9vw, 48px);
    letter-spacing: -.04em;
    line-height: 1.06;
  }

  .experience-page .section-heading h2,
  .experience-page .service-booking-summary h2 {
    max-width: 21ch;
    font-size: clamp(29px, 8vw, 42px);
    line-height: 1.08;
  }

  .experience-page .service-profile__gallery {
    padding: 9px;
    border-radius: 3px 18px 3px 18px;
  }

  .experience-page .service-profile__visual figcaption {
    position: static;
    padding: 14px 16px 16px;
    background: var(--experience-caption);
  }

  #service-panel[data-service="fitnessbar"] .service-photo > img {
    max-height: none;
  }
}