/*
 * Presentation page "Przystań Example" (/przyklady/rezerwacje-kajaki/).
 * pd-* = Meetlead presentation chrome (follows the site theme),
 * pe-* = the fictional customer site (always light, like the inline/modal renderer).
 */

:root {
  --pd-stage: var(--site-soft);
  --pd-bar: var(--site-card);
  --pd-bar-line: var(--site-line);
  --pd-control: var(--site-paper);
  --pd-control-line: var(--site-line-strong);
  --pd-segmented: var(--site-soft);
  --pd-segmented-active: var(--site-card);
  --pd-ink: var(--site-ink);
  --pd-frame-shadow: var(--site-shadow-panel);
  --theme-browser: var(--site-card);
  /* The fictional customer site keeps the existing light widget palette in either panel theme. */
  --pe-ink: var(--ink);
  --pe-ink-soft: var(--ink-soft);
  --pe-muted: var(--muted);
  --pe-faint: var(--muted);
  --pe-footnote: var(--muted);
  --pe-surface: var(--surface);
  --pe-paper: var(--paper);
  --pe-line: var(--line);
  --pe-line-strong: var(--line-strong);
  --pe-accent: var(--success);
  --pe-on-dark: var(--inverse);
  --pe-hero-fallback: var(--brand-navy-dark);
  --pe-hero-shade: linear-gradient(90deg, color-mix(in srgb, var(--brand-navy-dark) 82%, transparent), color-mix(in srgb, var(--brand-navy-dark) 20%, transparent));
  --pe-card-shadow: var(--shadow-product);
  --pe-font: var(--site-font);
  --pe-mono: var(--font-mono);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
}

body {
  background: var(--pd-stage);
  color: var(--pd-ink);
  font-family: var(--pe-font);
}

/* Presentation chrome — outside the customer page. */

.pd {
  display: flex;
  min-height: 100dvh;
  flex-direction: column;
}

/* The settings float outside the example; closing them never remounts the demo. */
.pd-controls-trigger {
  position: fixed;
  z-index: 80;
  bottom: 24px;
  left: 24px;
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--pd-bar-line);
  border-radius: var(--radius-control);
  background: var(--pd-bar);
  color: var(--pd-ink);
  box-shadow: var(--site-shadow-control);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.pd-controls svg { width: 20px; height: 20px; flex: none; }
.pd-controls-trigger .pd-controls-trigger__chevron { width: 16px; height: 16px; }
.pd-controls:has(.pd-controls-panel:popover-open) .pd-controls-trigger__chevron { transform: rotate(180deg); }
.pd-controls-trigger:hover, .pd-controls-close:hover { background: var(--pd-segmented); }
.pd-controls :focus-visible { outline: 2px solid var(--site-focus); outline-offset: 3px; }

.pd-controls-panel {
  position: fixed;
  inset: auto;
  bottom: 88px;
  left: 24px;
  display: flex;
  flex-direction: column;
  width: min(360px, calc(100vw - 48px));
  max-height: calc(100dvh - 112px);
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--pd-bar-line);
  border-radius: var(--radius-panel);
  background: var(--pd-bar);
  color: var(--pd-ink);
  box-shadow: var(--site-shadow-menu);
  font-family: var(--site-font);
  font-size: 14px;
  line-height: 1.5;
}

.pd-controls-panel:not(:popover-open) { display: none; }
.pd-controls-header { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 8px; padding: 20px 12px 16px 24px; border-bottom: 1px solid var(--pd-bar-line); }
.pd-controls-header p { margin: 0 0 4px; color: var(--site-muted); font-size: 12px; }
.pd-controls-header h2 { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.25; letter-spacing: -.025em; }
.pd-controls-close { display: grid; flex: none; width: 44px; height: 44px; place-items: center; padding: 0; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--pd-ink); cursor: pointer; }
.pd-controls-body { min-height: 0; padding: 20px 24px 24px; overflow-y: auto; overscroll-behavior: contain; }
.pd-controls-note { margin: 0 0 24px; color: var(--site-muted); font-size: 13px; line-height: 1.6; }
.pd-controls-group { display: grid; min-width: 0; margin: 0; padding: 0; gap: 14px; border: 0; }
.pd-controls-group + .pd-controls-group { margin-top: 24px; }
.pd-controls-group legend { width: 100%; padding: 0 0 12px; font-size: 14px; font-weight: 650; }
.pd-controls-field { display: grid; min-width: 0; gap: 6px; font-size: 12px; font-weight: 500; }
.pd-select { width: 100%; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid var(--pd-control-line); border-radius: var(--radius-control); background: var(--pd-control); color: var(--pd-ink); font: inherit; font-size: 14px; }
.pd-segmented { display: flex; gap: 4px; padding: 4px; border-radius: var(--radius-control); background: var(--pd-segmented); }
.pd-segmented button { display: flex; flex: 1; min-width: 0; min-height: 44px; align-items: center; justify-content: center; gap: 6px; padding: 8px; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--pd-ink); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.pd-segmented button[aria-pressed="true"] { background: var(--pd-segmented-active); box-shadow: var(--site-shadow-sheet); font-weight: 600; }
.pd-segmented button small { color: var(--site-muted); font-size: 11px; font-weight: 400; white-space: nowrap; }
.pd-check { display: flex; min-height: 44px; align-items: center; gap: 10px; font-size: 13px; cursor: pointer; }
.pd-check input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--pd-ink); }
.pd-controls-footer { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--pd-bar-line); background: var(--pd-control); }
.pd-controls-footer > a { display: inline-flex; min-height: 44px; align-items: center; gap: 8px; color: var(--pd-ink); font-size: 13px; font-weight: 550; text-decoration: none; }
.pd-controls-footer > a:hover { text-decoration: underline; text-underline-offset: 4px; }
.pd-controls-footer .language-selector > summary { display: flex; height: 44px; min-width: 0; align-items: center; gap: 6px; padding: 0 8px; border: 1px solid var(--pd-control-line); border-radius: var(--radius-control); background: var(--pd-bar); color: var(--pd-ink); font-size: 12px; font-weight: 600; letter-spacing: 0; cursor: pointer; list-style: none; }
.pd-controls-footer .language-selector__menu { top: auto; bottom: calc(100% + 8px); right: 0; }

@media (max-width: 639px) {
  .pd-controls-trigger { bottom: 16px; left: 16px; gap: 8px; padding-inline: 12px; font-size: 13px; }
  .pd-controls-trigger__chevron { display: none; }
  .pd-controls-panel { bottom: 80px; left: 16px; width: calc(100vw - 32px); max-height: calc(100dvh - 96px); }
  .pd-controls-header { padding-left: 20px; }
  .pd-controls-body { padding-inline: 20px; }
  .pd-select { font-size: 16px; }
}

@media (prefers-reduced-motion: no-preference) {
  .pd-controls-trigger, .pd-controls-close { transition: background-color .16s ease; }
  .pd-controls-trigger__chevron { transition: transform .16s ease; }
}

.pd-stage {
  display: flex;
  flex: 1;
  justify-content: center;
}

[data-viewport="mobile"] .pd-stage {
  padding: 24px 12px 48px;
}

/* The customer page — a container, so the phone frame and a real phone share one layout. */

.pe {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  background: var(--pe-surface);
  color: var(--pe-ink);
  color-scheme: light;
  container: pe / inline-size;
}

[data-viewport="mobile"] .pe {
  align-self: flex-start;
  width: 390px;
  border-radius: 28px;
  box-shadow: var(--pd-frame-shadow);
}

.pe a {
  color: var(--pe-ink);
}

.pe a:hover {
  color: var(--pe-accent);
}

.pe :is(a, button):focus-visible {
  outline: 3px solid var(--pe-ink);
  outline-offset: 3px;
}

.pe-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pe-header {
  display: flex;
  max-width: 1240px;
  min-height: 84px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 auto;
  padding: 0 32px;
}

.pe a.pe-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-decoration: none;
}

.pe-logo span {
  color: var(--pe-accent);
  font-size: 1.3em;
}

.pe-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 14.5px;
  white-space: nowrap;
}

.pe a.pe-nav-link {
  text-decoration: none;
}

.pe a.pe-nav-cta {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 0 18px;
  border: 1px solid var(--pe-line-strong);
  border-radius: 10px;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}

.pe a.pe-nav-cta--solid,
.pe a.pe-nav-cta--solid:hover {
  border-color: var(--pe-ink);
  background: var(--pe-ink);
  color: var(--pe-on-dark);
}

.pe-hero {
  position: relative;
  display: flex;
  min-height: 600px;
  align-items: center;
  background: var(--pe-hero-fallback);
}

.pe-hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.pe-hero-shade {
  position: absolute;
  inset: 0;
  background: var(--pe-hero-shade);
}

.pe-hero-content {
  position: relative;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 96px 32px;
  color: var(--pe-on-dark);
}

.pe-kicker {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.pe-hero h1 {
  max-width: 14ch;
  margin: 0;
  font-size: 72px;
  font-weight: 750;
  letter-spacing: -0.035em;
  line-height: 1.02;
  text-wrap: balance;
}

.pe-lead {
  max-width: 40ch;
  margin: 18px 0 0;
  font-size: 19px;
  line-height: 1.55;
}

.pe a.pe-hero-cta,
.pe a.pe-hero-cta:hover {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  margin-top: 24px;
  padding: 0 22px;
  border-radius: 12px;
  background: var(--pe-surface);
  color: var(--pe-ink);
  font-size: 16px;
  font-weight: 650;
  text-decoration: none;
}

.pe .pe-hero a:focus-visible {
  outline-color: var(--pe-on-dark);
}

/* Booking embeds. */

.pe-booking {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
}

.pe-embed {
  position: relative;
  border-radius: 16px;
  background: var(--pe-surface);
  box-shadow: var(--pe-card-shadow);
}

[data-outline] .pe-embed {
  outline: 2px dashed var(--pe-accent);
  outline-offset: 6px;
}

.pe-tag {
  position: absolute;
  top: -30px;
  left: 0;
  display: none;
  max-width: 100%;
  overflow: hidden;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--pe-accent);
  color: var(--pe-on-dark);
  font-family: var(--pe-mono);
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-outline] .pe-tag {
  display: block;
}

.pe-second {
  margin-top: 56px;
}

.pe-second h2,
.pe-narrow h2 {
  margin: 0 0 6px;
  font-size: 40px;
  letter-spacing: -0.025em;
}

.pe-second-lead {
  max-width: 56ch;
  margin: 0 0 20px;
  color: var(--pe-muted);
}

/* Room for the container label, which would otherwise cover the lead. */
[data-outline] .pe-second-lead {
  margin-bottom: 44px;
}

.pe-narrow {
  display: flex;
  max-width: 1240px;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 40px;
  margin: 0 auto;
  padding: 0 32px;
}

.pe-narrow article {
  min-width: 0;
  flex: 1 1 420px;
  padding-top: 48px;
}

.pe-narrow h2 {
  margin-bottom: 12px;
}

.pe-narrow article img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.pe-narrow article p {
  max-width: 60ch;
  margin: 16px 0 0;
  color: var(--pe-ink-soft);
  font-size: 16px;
  line-height: 1.65;
}

.pe-narrow aside {
  max-width: 100%;
  flex: 0 0 320px;
  padding-top: 48px;
}

/* Fallback content inside the div (blocked script). */

.pe-fallback {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  border: 1px solid var(--pe-line);
  border-radius: 16px;
  background: var(--pe-surface);
}

.pe-fallback-title {
  margin: 0;
  font-size: 20px;
}

.pe-fallback p {
  max-width: 58ch;
  margin: 0;
  color: var(--pe-ink-soft);
  line-height: 1.55;
}

.pe a.pe-fallback-link,
.pe a.pe-fallback-link:hover {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  padding: 0 20px;
  border-radius: 12px;
  background: var(--pe-ink);
  color: var(--pe-on-dark);
  font-weight: 650;
  text-decoration: none;
}

.pe-fallback-link svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.pe-fallback .pe-fallback-note {
  color: var(--pe-faint);
  font-size: 13px;
}

/* Practical information and footer. */

.pe-info {
  display: grid;
  max-width: 1240px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 32px 56px;
  margin: 0 auto;
  padding: 96px 32px;
}

.pe-eyebrow {
  margin: 0 0 12px;
  color: var(--pe-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.pe-info h2 {
  margin: 0;
  font-size: 40px;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.pe-info-lead {
  max-width: 46ch;
  margin: 16px 0 0;
  color: var(--pe-muted);
  font-size: 16px;
  line-height: 1.65;
}

.pe-info dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 32px;
  margin: 0;
}

.pe-info dt {
  font-weight: 650;
}

.pe-info dd {
  margin: 6px 0 0;
  color: var(--pe-muted);
  font-size: 14.5px;
  line-height: 1.55;
}

.pe-footer {
  display: flex;
  max-width: 1240px;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 0 auto;
  padding: 28px 32px 36px;
  border-top: 1px solid var(--pe-line);
}

.pe a.pe-logo--footer {
  gap: 8px;
  font-size: 20px;
}

.pe-logo--footer span {
  font-size: 1em;
}

.pe-footer-contact {
  margin: 6px 0 0;
  color: var(--pe-muted);
  font-size: 14px;
}

.pe-footer-note {
  margin: 0;
  color: var(--pe-footnote);
  font-size: 12.5px;
  line-height: 1.5;
  text-align: right;
}

/* Phone layout — follows the customer page width, not the screen (phone frame or a real phone). */
@container pe (max-width: 639px) {
  .pe-header {
    min-height: 68px;
    padding: 0 16px;
  }

  .pe a.pe-logo {
    font-size: 19px;
  }

  .pe a.pe-logo--footer {
    font-size: 20px;
  }

  .pe a.pe-nav-link {
    display: none;
  }

  .pe-hero {
    min-height: 360px;
    align-items: flex-start;
  }

  .pe-hero-image {
    object-position: 65% center;
  }

  .pe-hero-content {
    padding: 60px 16px;
  }

  .pe-hero h1 {
    font-size: 42px;
  }

  .pe-lead {
    font-size: 16px;
  }

  .pe-booking {
    margin-top: 0;
    padding: 0 16px;
  }

  .pe-narrow {
    padding: 0 16px;
  }

  .pe-second h2,
  .pe-narrow h2,
  .pe-info h2 {
    font-size: 30px;
  }

  .pe-info {
    grid-template-columns: minmax(0, 1fr);
    padding: 56px 16px;
  }

  .pe-info dl {
    grid-template-columns: minmax(0, 1fr);
  }

  .pe-footer {
    padding: 28px 16px 36px;
  }
}

/* Editorial customer sections and the actual Widget Studio renderer. */
.pe-proof { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 48px; padding: 24px 32px; border-bottom: 1px solid var(--pe-line); color: var(--pe-ink-soft); font-size: 14px; }
.pe-proof span::before { content: '✓'; margin-right: 10px; color: var(--pe-accent); font-weight: 700; }
.pe-offers, .pe-booking-intro, .pe-about { max-width: 1240px; margin-inline: auto; padding: 88px 32px; }
.pe-section-heading { display: grid; grid-template-columns: 1.4fr 1fr; align-items: end; gap: 40px; margin-bottom: 40px; }
.pe-section-heading > p, .pe-booking-intro > p:last-child, .pe-about p:not(.pe-eyebrow) { max-width: 46ch; color: var(--pe-ink-soft); line-height: 1.7; }
.pe-section-heading h2, .pe-booking-intro h2, .pe-about h2 { margin: 0; font-family: var(--pe-font); font-size: clamp(32px, 3.2vw, 48px); font-weight: 600; line-height: 1.12; letter-spacing: -.045em; }
.pe-offer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.pe-offer-grid article { display: flex; flex-direction: column; padding: 32px 0; border-top: 2px solid var(--pe-accent); }
.pe-offer-grid article > span { color: var(--pe-muted); font-size: 12px; }
.pe-offer-grid h3 { margin: 20px 0 12px; font-family: var(--pe-font); font-size: 25px; font-weight: 600; line-height: 1.15; }
.pe-offer-grid p { color: var(--pe-ink-soft); font-size: 15px; line-height: 1.7; }
.pe-offer-grid a { align-self: flex-start; margin-top: auto; padding-block: 24px 8px; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 6px; }
.pe-booking-intro { padding-block: 56px 32px; text-align: center; }
.pe-booking-intro > p:last-child { margin: 18px auto 0; }
.pe-about { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; padding-bottom: 0; }
.pe-about img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-panel); }
.pe-about p:not(.pe-eyebrow) { margin: 20px 0 26px; }
.pe-widget { position: fixed; z-index: 90; right: 0; bottom: 0; width: 112px; height: 104px; border: 0; background: transparent; color-scheme: light; }
.pe-widget.is-open { width: min(520px, 100vw); height: min(880px, 100dvh); }
.pe-copilot { position: fixed; z-index: 95; bottom: 88px; left: 24px; width: min(560px, calc(100vw - 48px)); padding: 20px; border: 1px solid var(--site-line); border-radius: var(--radius-panel); background: var(--site-card); color: var(--site-ink); box-shadow: var(--site-shadow-panel); }
.pe-copilot > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; font-size: 14px; }
.pe-copilot button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--site-line); border-radius: var(--radius-control); background: var(--site-paper); color: var(--site-ink); font-size: 22px; cursor: pointer; }
.pe-copilot img { display: block; width: 100%; max-width: 512px; height: auto; }
.pe-copilot p { margin-top: 14px; color: var(--site-muted); font-size: 13px; line-height: 1.6; }
@container pe (max-width: 800px) { .pe-offer-grid { gap: 16px; } .pe-about { gap: 32px; } }
@container pe (max-width: 639px) {
  .pe-proof { justify-content: flex-start; padding: 20px 16px; gap: 12px; font-size: 13px; }
  .pe-offers, .pe-booking-intro, .pe-about { padding: 56px 16px; }
  .pe-section-heading, .pe-offer-grid, .pe-about { grid-template-columns: 1fr; }
  .pe-section-heading { gap: 18px; margin-bottom: 28px; }
  .pe-offer-grid { gap: 8px; }
  .pe-offer-grid article { padding-block: 24px; }
  .pe-offer-grid h3 { font-size: 25px; }
  .pe-booking-intro { padding-top: 12px; padding-bottom: 28px; text-align: left; }
  .pe-booking-intro > p:last-child { margin-inline: 0; }
  .pe-about { padding-bottom: 0; }
  .pe-footer-note { text-align: left; }
}
@media (max-width: 639px) { .pe-widget.is-open { z-index: 100; width: 100vw; height: 100dvh; } .pe-copilot { bottom: 80px; left: 16px; width: calc(100vw - 32px); padding: 16px; } }