/* ==========================================================================
   Sabai v3: sivukohtaiset tyylit (lahjakortit/, yrityspalvelut/, tietoa-meista/,
   yhteystiedot/, varaa-aika/). Ladataan style.css:n jälkeen. Kaikki luokat pi-etuliitteellä;
   design-järjestelmän komponentit (.panels, .giftcard, .ledger, .stack, .media) tulevat
   style.css:stä sellaisinaan.
   ========================================================================== */

/* style.css asettaa sekä html { scroll-padding-top } että [id] { scroll-margin-top }: ne summautuvat
   (ankkuri jää 184 px eikä 92 px). Näillä sivuilla vain scroll-margin-top jää voimaan. */
html { scroll-padding-top: 0; }

/* ---------- sivun pää (alasivut): header + väli, ei heroa ---------- */
.pi-head { padding-top: calc(var(--header-h) + clamp(56px, 7vw, 104px)); }
.pi-center { display: flex; flex-direction: column; align-items: center; text-align: center; }
.pi-center > h1, .pi-center > h2 { margin-inline: auto; }
.pi-note { font-size: 15px; line-height: 1.55; color: var(--cream-70); max-width: 52ch; }
.stack > .btn-row + .pi-note, .stack > .btn + .pi-note { margin-top: 20px; }
.pi-frame { border: 1px solid var(--line-gold); border-radius: var(--radius); padding: clamp(28px, 3.4vw, 44px); }
.pi-frame p + p { margin-top: 1em; }

/* ---------- lahjakortit: pää + tiili ---------- */
.pi-gift__grid { align-items: center; row-gap: 72px; }
.pi-gift .lead { max-width: 46ch; }
.pi-gift .giftcard-wrap { position: relative; padding-block: 24px; }
.pi-gift .giftcard { max-width: 560px; z-index: 1; }
/* toinen tiili takana: kultahiusviiva, kallistettu, ei täyttöä kullalla */
.pi-gift .giftcard-wrap::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: min(100%, 560px);
  aspect-ratio: 1.586 / 1;
  border: 1px solid var(--line-gold);
  border-radius: var(--radius);
  background: var(--bg-2);
  transform: translate(-50%, -50%) translate(-5%, 5%) rotate(-5deg);
  pointer-events: none;
}
@media (max-width: 899px) {
  .pi-gift .giftcard-wrap { padding-inline: 12px; }
  /* tabletilla tiili 560 px keskelle ja takatiili saman kokoiseksi (oli palstan levyinen, 720 px) */
  .pi-gift .giftcard { margin-inline: auto; }
  .pi-gift .giftcard-wrap::before { width: min(calc(100% - 24px), 560px); transform: translate(-50%, -50%) translate(-3%, 5%) rotate(-4deg); }
}

/* ---------- lahjakortit: sähköinen ---------- */
.pi-voucher { row-gap: 48px; }
.pi-voucher__side .pi-terms-list { margin-top: 40px; }
.pi-terms-list .ledger__row { display: block; padding: 18px 0; font-family: var(--f-display); font-size: 1.375rem; line-height: 1.3; color: var(--cream); }
.pi-voucher__body > .stack p { max-width: 58ch; }
.pi-voucher__body > .stack p + p { margin-top: 1em; }
.pi-voucher__fig { margin-top: 40px; max-width: 450px; }
.pi-voucher__fig img {
  width: 100%;
  max-width: 450px;
  border-radius: var(--radius);
  outline: 1px solid var(--line-gold);
  outline-offset: 10px;
  box-shadow: var(--shadow-float);
}
.pi-voucher__fig figcaption { margin-top: 28px; }
.pi-dl svg { transform: rotate(90deg); }
.pi-dl:hover svg { transform: rotate(90deg) translateX(3px); }
.pi-voucher__buy { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.pi-voucher__buy .pi-note { max-width: 34ch; }
@media (min-width: 900px) {
  .pi-voucher__side { position: sticky; top: calc(var(--header-h) + 48px); align-self: start; }
}
@media (max-width: 899px) {
  /* mobiilissa ensin selitys ja kuva, ehdot vasta niiden jälkeen */
  .pi-voucher { display: flex; flex-direction: column; row-gap: 0; }
  .pi-voucher__side { display: contents; }
  .pi-voucher__body { order: 2; margin-top: 20px; }
  .pi-voucher__side .pi-terms-list { order: 3; margin-top: 48px; }
}
@media (max-width: 599px) {
  .pi-voucher__buy .btn { width: 100%; }
}

/* ---------- lahjakortit: hierontaedulla ---------- */
.pi-benefit { row-gap: 48px; align-items: start; }
.pi-benefit__head > .btn { margin-top: 28px; justify-self: start; }
.pi-benefit__head { display: flex; flex-direction: column; align-items: flex-start; }
.pi-steps { border-bottom: 1px solid var(--line); }
.pi-steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; padding: 26px 0; border-top: 1px solid var(--line); }
.pi-steps__n { font-size: 14px; font-weight: 500; line-height: 2.1; color: var(--gold-2); font-variant-numeric: lining-nums tabular-nums; }
.pi-steps p { font-family: var(--f-display); font-size: 1.5rem; line-height: 1.3; }
.pi-steps p a { overflow-wrap: anywhere; }
.pi-benefit .pi-frame { margin-top: 40px; color: var(--cream-70); font-size: 16px; }
@media (max-width: 599px) {
  .pi-benefit__head > .btn { width: 100%; }
  .pi-steps li { grid-template-columns: 28px minmax(0, 1fr); column-gap: 8px; }
  .pi-steps p { font-size: 1.3125rem; }
}

/* ---------- jaettu: teksti + kuva -pää ---------- */
.pi-split { align-items: center; row-gap: 48px; }
.pi-split .lead { max-width: 44ch; }

/* ---------- yrityspalvelut: kolme palvelua ---------- */
.pi-svc { align-items: center; row-gap: 32px; }
.pi-svc + .pi-svc { margin-top: var(--section); }
.pi-svc__text h2 { max-width: 16ch; }
.pi-svc__text p { max-width: 52ch; }
.pi-svc__aside { margin-top: 1em; font-family: var(--f-display); font-size: 1.5rem; line-height: 1.3; color: var(--gold-2); }
.pi-svc--portrait .pi-svc__media { max-height: 760px; }
.pi-svc--strip .pi-svc__strip { aspect-ratio: 21 / 9; }
.pi-svc--strip .pi-svc__strip > img { object-position: 50% 62%; }
.pi-svc__under { margin-top: clamp(40px, 4.5vw, 64px); row-gap: 20px; align-items: start; }
.pi-svc__long { color: var(--cream-70); max-width: 60ch; }
@media (min-width: 900px) {
  .pi-svc--wide .pi-svc__text { padding-left: clamp(0px, 2.4vw, 40px); }
  .pi-svc__long { font-size: 1.125rem; padding-top: 22px; }
  .pi-svc--portrait .pi-svc__text { grid-column: 2 / span 5; grid-row: 1; }
  .pi-svc--portrait .pi-svc__media { grid-column: 8 / span 5; grid-row: 1; }
}
@media (max-width: 899px) {
  .pi-svc--strip .pi-svc__strip { aspect-ratio: 16 / 10; }
  .pi-svc--portrait .pi-svc__media { order: -1; aspect-ratio: 4 / 5; max-height: 560px; }
}

/* ---------- yrityspalvelut: pyydä tarjous ---------- */
.pi-quote { row-gap: 48px; align-items: start; }
.pi-dl-list { margin: 0; border-bottom: 1px solid var(--line); }
.pi-dl-list__row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 4px 24px; padding: 22px 0; border-top: 1px solid var(--line); align-items: baseline; }
.pi-dl-list dt { font-size: 14px; color: var(--cream-70); }
.pi-dl-list dd { margin: 0; font-family: var(--f-display); font-size: 1.5rem; line-height: 1.3; }
.pi-dl-list dd a { transition: color var(--dur-micro); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: var(--line-gold); }
.pi-dl-list dd a:hover { color: var(--gold-2); text-decoration-color: var(--gold-2); }
@media (max-width: 599px) {
  .pi-dl-list__row { grid-template-columns: 1fr; }
  .pi-dl-list dd { font-size: 1.375rem; overflow-wrap: anywhere; }
}

/* ---------- tietoa meistä ---------- */
.pi-about { padding-bottom: clamp(64px, 7vw, 112px); }
.pi-about h1 { margin-top: 0; }
.pi-about__lead { margin-top: 28px; max-width: 30ch; font-family: var(--f-display); font-size: clamp(1.5rem, 2.4vw, 1.75rem); line-height: 1.3; color: var(--cream); text-wrap: balance; }
.pi-about__body { margin-top: 28px; max-width: 62ch; color: var(--cream-70); }
.pi-about__body p + p { margin-top: 1em; }
.pi-team { padding-top: 0; }
.pi-team__grid { align-items: end; row-gap: 40px; }
.pi-team__fig figcaption { margin-top: 16px; font-size: 14px; color: var(--cream-70); }
.pi-team__quote { font-family: var(--f-display); font-size: clamp(1.75rem, 3.2vw, 2.75rem); line-height: 1.2; letter-spacing: -0.005em; color: var(--cream); max-width: 18ch; text-wrap: balance; }
.pi-team__welcome { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line-gold); font-family: var(--f-display); font-size: 1.5rem; line-height: 1.3; color: var(--gold-2); max-width: 22ch; }
@media (min-width: 900px) {
  .pi-team__text { padding-bottom: 40px; }
}
.pi-ethics { row-gap: 48px; align-items: start; }
.pi-ethics__head p { max-width: 46ch; }
.pi-rules { border-bottom: 1px solid var(--line); }
.pi-rules li { padding: 28px 0; border-top: 1px solid var(--line); font-family: var(--f-display); font-size: 1.375rem; line-height: 1.38; font-weight: 400; color: var(--cream); }
@media (min-width: 900px) {
  .pi-ethics__head { position: sticky; top: calc(var(--header-h) + 48px); align-self: start; }
}

/* ---------- yhteystiedot ---------- */
.pi-contact { padding-bottom: clamp(64px, 7vw, 104px); }
.pi-contact__grid { align-items: end; row-gap: 48px; }
.pi-contact__lines { border-bottom: 1px solid var(--line); }
.pi-bigline { display: grid; gap: 2px; padding: 18px 0 20px; border-top: 1px solid var(--line); }
.pi-bigline__label { font-size: 14px; color: var(--cream-70); }
.pi-bigline__value { font-family: var(--f-display); font-size: 2rem; line-height: 1.15; color: var(--cream); overflow-wrap: anywhere; transition: color var(--dur-micro); }
.pi-bigline:hover .pi-bigline__value { color: var(--gold-2); }
.pi-places { padding-top: 0; }
.pi-panels { height: 720px; }
.pi-panels .panel__body .lotus { margin-bottom: 14px; }
@media (min-width: 900px) { .pi-panels .panel__img--lift { scale: 1.5; } }
.pi-panel__where { margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--cream); max-width: 34ch; }
.pi-panels .panel__addr { margin-top: 4px; color: var(--cream-70); }
@media (max-width: 899px) {
  .pi-panels { height: auto; }
  .pi-panels .panel { height: 620px; }
}
.pi-booking { row-gap: 48px; align-items: start; }
.pi-booking p a { white-space: nowrap; }
.pi-frame--terms h3 { font-size: 1.75rem; }
.pi-frame--terms p { margin-top: 16px; color: var(--cream-70); max-width: 52ch; }

/* ---------- varaa aika ---------- */
.pi-book h1 { max-width: none; }
.pi-book .lead { margin-top: 20px; max-width: 40ch; }
.pi-book .lead a { white-space: nowrap; }
.pi-btn-lg { margin-top: 32px; min-height: 58px; padding: 18px 40px; font-size: 16px; }
.pi-book .pi-note { margin-top: 24px; }
.pi-book__media { margin-top: clamp(56px, 6vw, 88px); width: 100%; max-width: 960px; }
.pi-cancel p { margin-top: 20px; max-width: 56ch; color: var(--cream-70); }
@media (max-width: 599px) {
  .pi-btn-lg { width: 100%; }
}

/* breakpoint-kierros 15.10.: puhelin vaakatilassa pää mahtuu ensimmäiseen näkymään */
@media (max-height: 500px) and (orientation: landscape) {
  .pi-head { padding-top: calc(var(--header-h) + 1.25rem); }
  .pi-head .lead { max-width: 64ch; }
  .pi-book .lead { max-width: none; }
  .pi-btn-lg { margin-top: 1.25rem; min-height: 3rem; padding-block: 0.75rem; }
}