/* /partners, the page for the businesses on the trail: the new layout
   (owner, 2026-10-09: "Partners Page must have a much better UI and UX with
   images"). Its one job is to get an owner to claim their listing (free) and
   then take the Premium Plan.

   PILOT: only the Lycian Way's partners page uses this stylesheet today
   (brands/lycianway/brand.json "shared"). It is written so the same markup can
   go to the other brands and the Göbeklitepe satellite through
   scripts/gen-partners-page.mjs: every class here is brand-neutral, and every
   colour comes from the brand's own tokens in its styles.v2.css (--green,
   --terracotta, --terracotta-text, --sand, --text, --text-muted). The
   per-brand parts are the page's images and strings, nothing in this file.

   Mobile first (most owners open it on a phone, from WhatsApp): one column,
   48px+ tap targets, the app screens in a swipe row, and a sticky "Claim your
   listing" bar on phones that shared/js/partners-page.js shows and hides.
   Everything is scoped to .pp, so the navbar and the footer are untouched.
   The site has no dark theme, so neither has this page. Text colours are AA
   (4.5:1) on the surface they sit on; white text on the hero sits on a dark
   gradient over the photo. */
.pp {
  --pp-pine: var(--green, #2d5016);
  --pp-pine-deep: color-mix(in srgb, var(--pp-pine) 72%, #000);
  --pp-pine-soft: color-mix(in srgb, var(--pp-pine) 11%, #fff);
  --pp-clay: var(--terracotta, #c0623a);
  --pp-clay-text: var(--terracotta-text, #a85633);
  --pp-clay-deep: color-mix(in srgb, var(--pp-clay-text) 80%, #000);
  --pp-clay-soft: color-mix(in srgb, var(--pp-clay) 15%, #fff);
  --pp-ink: var(--text, #1c1c1c);
  --pp-muted: var(--text-muted, #5f6368);
  --pp-sand: var(--sand, #f5f0e8);
  --pp-card: #fffdf9;
  --pp-line: #e3ddd2;
  --pp-field: #857e72;
  --pp-focus: #1d4ed8;
  --pp-waymark-top: #fff;
  --pp-waymark-bottom: #c62828;
  --pp-gutter: 16px;
  --pp-max: 1120px;
  --pp-top: calc(var(--announcement-h, 0px) + var(--navbar-h, 65px));
  display: block;
  color: var(--pp-ink);
  font-size: 16px;
  line-height: 1.55;
}
.pp [id] { scroll-margin-top: calc(var(--pp-top) + 12px); }
.pp h1, .pp h2, .pp h3 { text-wrap: balance; }
.pp p, .pp li, .pp figcaption { overflow-wrap: break-word; }

/* Keyboard focus: one visible ring everywhere, white on the dark surfaces */
.pp a:focus-visible, .pp button:focus-visible, .pp summary:focus-visible,
.pp input:focus-visible, .pp textarea:focus-visible, .pp [tabindex]:focus-visible {
  outline: 3px solid var(--pp-focus);
  outline-offset: 3px;
}
.pp-hero a:focus-visible, .pp-band--pine a:focus-visible { outline-color: #fff; }

/* Buttons */
.pp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 13px 26px;
  border: 2px solid transparent; border-radius: 999px;
  font: 600 1rem/1.25 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color .2s, border-color .2s, box-shadow .2s;
}
/* White label on the AA text-grade accent, as .btn-primary does site-wide. */
.pp-btn-primary { background: var(--pp-clay-text); color: #fff; box-shadow: 0 8px 22px rgba(0, 0, 0, .16); }
.pp-btn-primary:hover { background: var(--pp-clay-deep); }
.pp-btn-ghost { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .8); }
.pp-btn-ghost:hover { background: rgba(255, 255, 255, .18); }

/* Bands and headings */
.pp-band { padding: 56px var(--pp-gutter); }
.pp-band--white { background: #fff; }
.pp-band--sand { background: var(--pp-sand); }
.pp-band--pine { background: var(--pp-pine); color: #fff; }
.pp-wrap { max-width: var(--pp-max); margin: 0 auto; }
.pp-wrap > * { min-width: 0; }
.pp-head { max-width: 680px; margin: 0 0 28px; }
.pp-h2 {
  margin: 0 0 10px;
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; font-weight: 700;
  font-size: clamp(1.75rem, 5.6vw, 2.5rem); line-height: 1.15; color: var(--pp-ink);
}
.pp-band--pine .pp-h2 { color: #fff; }
.pp-sub { margin: 0; font-size: 1.05rem; color: var(--pp-muted); }
.pp-note { margin: 22px 0 0; font-size: .88rem; color: var(--pp-muted); }

/* 1. Hero: a photo from the trail, a dark gradient under the words */
.pp-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end;
  min-height: 640px; min-height: min(92svh, 780px);
  --pp-hero-x: var(--pp-gutter); --pp-hero-b: 28px;
  padding: calc(var(--pp-top) + 56px) var(--pp-hero-x) var(--pp-hero-b);
  background: #24301c; color: #fff;
}
.pp-hero-media, .pp-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.pp-hero-media { z-index: -2; }
.pp-hero-media img { object-fit: cover; object-position: 62% 40%; max-width: none; }
.pp-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(12, 20, 8, .12) 0%, rgba(12, 20, 8, .28) 26%, rgba(12, 20, 8, .80) 54%, rgba(12, 20, 8, .93) 100%);
}
.pp-hero-in { position: relative; width: 100%; max-width: var(--pp-max); margin: 0 auto; }
/* From 768 to 1023px the words fill the width, wherever the photo is bright: a
   scrim that follows the text block, fading in above it, keeps every line AA
   in every language (measured against the lightest pixels behind each line). */
@media (min-width: 768px) and (max-width: 1023px) {
  .pp-hero-in::before {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    left: calc(-1 * var(--pp-hero-x)); right: calc(-1 * var(--pp-hero-x)); top: -110px; bottom: calc(-1 * var(--pp-hero-b));
    background: linear-gradient(180deg, rgba(12, 20, 8, 0) 0, rgba(12, 20, 8, .74) 110px, rgba(12, 20, 8, .86) 100%);
  }
}
.pp-hero-copy { max-width: 760px; }
.pp-hero h1, .pp-lede { max-width: 640px; }
.pp-eyebrow {
  display: flex; align-items: center; gap: 10px; margin: 0 0 14px;
  font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255, 255, 255, .94);
}
/* The trail's paint mark, two bands */
.pp-waymark {
  display: inline-grid; grid-template-rows: 1fr 1fr; flex: none;
  width: 22px; height: 14px; border: 1px solid rgba(255, 255, 255, .7);
}
.pp-waymark::before { content: ""; background: var(--pp-waymark-top); }
.pp-waymark::after { content: ""; background: var(--pp-waymark-bottom); }
.pp-hero h1 {
  margin: 0 0 14px;
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; font-weight: 700;
  font-size: clamp(2.15rem, 8.6vw, 3.8rem); line-height: 1.08; color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
.pp-lede { margin: 0 0 22px; font-size: clamp(1.05rem, 3.9vw, 1.22rem); line-height: 1.5; color: rgba(255, 255, 255, .95); }
.pp-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 22px; }
.pp-ctas .pp-btn { flex: 1 1 100%; }
.pp-trust { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .95rem; font-weight: 500; color: #fff; }
.pp-trust li { display: flex; align-items: flex-start; gap: 9px; }
.pp-trust svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: #bfe3a0; }

/* 2. What hikers see: the app screens in phone frames, a swipe row on phones */
.pp-phones {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(68%, 250px); gap: 16px;
  margin: 0 calc(-1 * var(--pp-gutter)); padding: 4px var(--pp-gutter) 16px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding: 0 var(--pp-gutter);
}
.pp-phones > figure { margin: 0; scroll-snap-align: start; }
.pp-phone {
  padding: 7px; border-radius: 34px; background: #141414;
  box-shadow: 0 18px 40px rgba(28, 28, 28, .22), inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.pp-phone img { display: block; width: 100%; height: auto; aspect-ratio: 640 / 1392; border-radius: 27px; background: #fff; }
.pp-phones figcaption { margin-top: 14px; font-size: .97rem; line-height: 1.45; }

/* 3. Benefits */
.pp-cards { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.pp-card {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: stretch;
  padding: 20px; background: var(--pp-card); border: 1px solid var(--pp-line); border-radius: 18px;
}
.pp-card-body { display: flex; flex-direction: column; align-items: flex-start; }
.pp-card-body .pp-tag { margin-top: auto; }
.pp-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--pp-pine-soft); color: var(--pp-pine); }
.pp-ic svg { width: 24px; height: 24px; }
.pp-card h3 { margin: 0 0 6px; font-family: 'Inter', -apple-system, sans-serif; font-size: 1.06rem; font-weight: 700; line-height: 1.3; }
.pp-card p { margin: 0 0 12px; font-size: .97rem; line-height: 1.5; color: var(--pp-muted); }
.pp-tag { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: .78rem; font-weight: 700; line-height: 1.5; }
.pp-tag--free { background: #eceee8; color: #3a4133; }
.pp-tag--premium { background: var(--pp-clay-soft); color: var(--pp-clay-deep); }

/* 4. The audience: the trail's own month (trail-month.js fills the figures) */
.pp-stats { display: grid; gap: 12px; margin: 0 0 18px; }
.pp-stat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 18px 20px; border-radius: 16px; background: #fff; color: var(--pp-ink); }
/* trail-month.js hides a tile whose count is 0; the cards' display must not show it. */
.pp-stat[hidden] { display: none; }
.pp-stat-n {
  flex: none; font-family: 'Playfair Display', Georgia, serif; font-weight: 700;
  font-size: clamp(2.1rem, 8vw, 3rem); line-height: 1; color: var(--pp-pine); font-variant-numeric: lining-nums tabular-nums;
}
/* A long compound (de "Unterkunftseinträgen") moves under the figure rather than past the card. */
.pp-stat-l { flex: 1 1 9rem; min-width: 0; font-size: 1rem; color: var(--pp-muted); hyphens: auto; overflow-wrap: break-word; }
.pp-aud-cap, .pp-aud-note { margin: 0; max-width: 64ch; font-size: .92rem; color: rgba(255, 255, 255, .9); }
.pp-aud-cap { margin-bottom: 6px; }
.pp-aud-note a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* 5. Of every €100: drawn to scale, 80 + 5 (the 80–85 band, hatched) + 15, and 100 */
.pp-split { margin: 0 0 22px; padding: 22px 20px; background: #fff; border: 1px solid var(--pp-line); border-radius: 18px; }
.pp-split-h { margin: 0 0 16px; font-size: .85rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--pp-muted); }
.pp-bar-row { margin: 0 0 16px; }
.pp-bar-name { margin: 0 0 6px; font-weight: 700; }
.pp-bar { display: flex; height: 36px; overflow: hidden; border-radius: 10px; }
.pp-seg { display: block; height: 100%; }
.pp-seg-owner { background: #a7b0a1; }
.pp-seg-range { background: repeating-linear-gradient(135deg, var(--pp-clay) 0 5px, var(--pp-clay-soft) 5px 10px); }
.pp-seg-site { background: var(--pp-clay); }
.pp-seg-us { background: var(--pp-pine); }
.pp-bar-labels { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; margin: 6px 0 0; font-size: .95rem; font-variant-numeric: tabular-nums; }
.pp-bar-labels > span { white-space: nowrap; }
.pp-bar-labels > :last-child { margin-left: auto; text-align: right; }
.pp-take { color: var(--pp-clay-text); font-weight: 700; }
.pp-keep { color: var(--pp-pine); font-weight: 700; }
.pp-compare { margin: 4px 0 0; font-weight: 700; }
.pp-compare a { color: var(--pp-pine); text-decoration: underline; text-underline-offset: 3px; }

/* 6. The price: one plan card, and what is free beside it */
.pp-price-grid { display: grid; gap: 18px; }
.pp-plan {
  padding: 24px 20px; background: #fff; border: 2px solid var(--pp-pine); border-radius: 22px;
  box-shadow: 0 18px 44px rgba(28, 40, 20, .12);
}
.pp-plan-name { display: inline-block; margin: 0 0 16px; padding: 4px 13px; border-radius: 999px; background: var(--pp-pine); color: #fff; font-size: .88rem; font-weight: 700; }
.pp-prices { display: grid; gap: 14px; margin: 0 0 20px; }
.pp-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.pp-amt {
  flex: none; font-family: 'Playfair Display', Georgia, serif; font-weight: 700;
  font-size: clamp(2.9rem, 12vw, 3.8rem); line-height: 1; color: var(--pp-ink); font-variant-numeric: lining-nums tabular-nums;
}
.pp-kind { flex: 1 1 11rem; font-size: 1rem; color: var(--pp-muted); }
.pp-terms {
  list-style: none; display: grid; gap: 8px; margin: 0 0 20px; padding: 14px 16px;
  border-radius: 14px; background: var(--pp-pine-soft); color: var(--pp-pine-deep); font-weight: 600;
}
.pp-adds-h { margin: 0 0 10px; font-weight: 700; }
.pp-checks { list-style: none; display: grid; gap: 10px; margin: 0 0 22px; padding: 0; }
.pp-checks li, .pp-terms li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.4; }
.pp-checks svg, .pp-terms svg { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--pp-pine); }
.pp-plan .pp-btn { width: 100%; }
.pp-plan-note { margin: 12px 0 0; font-size: .9rem; text-align: center; color: var(--pp-muted); }
.pp-side { display: grid; gap: 18px; align-content: start; }
.pp-free { padding: 24px 20px; background: #fff; border: 1px solid var(--pp-line); border-radius: 22px; }
.pp-free h3 { margin: 0 0 14px; font-family: 'Inter', -apple-system, sans-serif; font-size: 1.1rem; font-weight: 700; }
.pp-free .pp-checks { margin: 0; }
.pp-fine { padding: 4px 20px; background: #fff; border: 1px solid var(--pp-line); border-radius: 18px; }
.pp-fine[open] { padding-bottom: 8px; }
.pp-fine > summary { display: flex; align-items: center; gap: 10px; min-height: 52px; cursor: pointer; font-weight: 700; color: var(--pp-pine); list-style: none; }
.pp-fine p { margin: 0 0 12px; max-width: 75ch; font-size: .94rem; line-height: 1.6; }
.pp-fine a { color: var(--pp-pine); text-decoration: underline; }

/* The disclosure chevron, for the price details and the FAQ */
.pp-fine > summary::-webkit-details-marker, .pp-faq summary::-webkit-details-marker { display: none; }
.pp-fine > summary::before, .pp-faq summary::after {
  content: ""; flex: none; width: 9px; height: 9px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-3px) rotate(45deg); transition: transform .2s;
}
.pp-fine[open] > summary::before, .pp-faq details[open] > summary::after { transform: translateY(2px) rotate(-135deg); }

/* 7. How it works */
.pp-steps { list-style: none; display: grid; gap: 14px; margin: 0; padding: 0; }
.pp-step { position: relative; padding: 20px 20px 22px 76px; border-radius: 18px; background: var(--pp-sand); }
.pp-step-n {
  position: absolute; left: 20px; top: 20px; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%; background: var(--pp-pine); color: #fff; font-weight: 700;
}
.pp-step h3 { margin: 0 0 6px; font-family: 'Inter', -apple-system, sans-serif; font-size: 1.08rem; font-weight: 700; line-height: 1.3; }
.pp-step p { margin: 0; font-size: .97rem; line-height: 1.5; color: var(--pp-muted); }
.pp-steps-note { margin: 18px 0 0; }

/* 8. FAQ, an accordion */
.pp-faq { display: grid; gap: 10px; max-width: 840px; }
.pp-faq details { background: #fff; border: 1px solid var(--pp-line); border-radius: 14px; }
.pp-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px; padding: 14px 18px; cursor: pointer; list-style: none;
  font-weight: 600; line-height: 1.35;
}
.pp-faq summary::after { color: var(--pp-pine); }
.pp-faq details > p { margin: 0; padding: 0 18px 18px; font-size: .97rem; line-height: 1.6; }
.pp-faq a { color: var(--pp-pine); text-decoration: underline; }

/* 9. The contact form (shared/js/partners.js builds it with inline styles,
   which only !important can restyle without touching that shared script) */
.pp-contact { display: grid; gap: 8px; }
.pp-form { padding: 22px 18px; background: #fff; border: 1px solid var(--pp-line); border-radius: 20px; box-shadow: 0 14px 36px rgba(0, 0, 0, .06); }
.pp-form form label { font-size: .92rem !important; color: var(--pp-ink); }
.pp-form form input, .pp-form form textarea {
  min-height: 48px; padding: 12px 14px !important;
  border: 1.5px solid var(--pp-field) !important; border-radius: 12px !important;
  background: #fff; color: var(--pp-ink); font-size: 16px !important;
}
.pp-form form textarea { min-height: 112px; }
.pp-form form input:focus-visible, .pp-form form textarea:focus-visible { border-color: var(--pp-focus) !important; outline-offset: 1px; }
.pp-form form button[type="submit"] {
  width: 100%; min-height: 52px; padding: 13px 24px !important; border-radius: 999px !important;
  background: var(--pp-pine) !important; font-size: 1rem !important;
}
.pp-form form button[type="submit"]:hover { background: var(--pp-pine-deep) !important; }
.pp-form form button[type="submit"]:disabled { opacity: .7; cursor: progress; }

/* The phone bar: shown by partners-page.js between the hero and the form */
.pp-sticky { display: none; }

@media (max-width: 767px) {
  /* Phones: the photo is a full-width band under the navbar (the whole view,
     the lagoon and the path), fading into a solid dark ground that the words
     sit on, so the photo stays visible and every line is AA. */
  .pp-hero {
    --pp-band-h: clamp(240px, 72vw, 340px);
    display: block; min-height: 0;
    padding-top: calc(var(--pp-top) + var(--pp-band-h) - 52px); padding-bottom: 32px;
    background: #18220f;
  }
  .pp-hero-media { top: var(--pp-top); bottom: auto; height: var(--pp-band-h); }
  .pp-hero-media img { object-position: 58% 50%; }
  .pp-hero::after {
    top: var(--pp-top); bottom: auto; height: var(--pp-band-h);
    background: linear-gradient(180deg, rgba(24, 34, 15, 0) 42%, rgba(24, 34, 15, .82) 82%, #18220f 100%);
  }
  .pp-sticky {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    padding: 10px var(--pp-gutter) calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .97); box-shadow: 0 -6px 24px rgba(0, 0, 0, .12);
    transform: translateY(110%); visibility: hidden;
    transition: transform .25s ease, visibility 0s linear .25s;
  }
  .pp-sticky.is-on { transform: none; visibility: visible; transition: transform .25s ease, visibility 0s; }
  .pp-sticky .pp-btn { width: 100%; }
}

@media (min-width: 480px) {
  .pp-ctas .pp-btn { flex: 0 1 auto; }
}

@media (min-width: 640px) {
  .pp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .pp-stats { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .pp-stat { flex-direction: column; flex-wrap: nowrap; gap: 8px; padding: 24px; }
  .pp-stat-l { flex: none; }
}

@media (min-width: 760px) {
  .pp-phones {
    grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px;
    margin: 0; padding: 0; overflow: visible; scroll-snap-type: none;
  }
  .pp-phones > figure { width: 100%; max-width: 280px; justify-self: center; }
}

@media (min-width: 768px) {
  .pp-band { padding: 88px 24px; }
  .pp-hero { --pp-hero-x: 24px; --pp-hero-b: 56px; }
  .pp-hero::after {
    background:
      linear-gradient(90deg, rgba(12, 20, 8, .88) 0%, rgba(12, 20, 8, .74) 45%, rgba(12, 20, 8, .14) 80%),
      linear-gradient(180deg, rgba(12, 20, 8, 0) 50%, rgba(12, 20, 8, .45) 100%);
  }
  .pp-hero-media img { object-position: 50% 45%; }
  .pp-trust { display: flex; flex-wrap: wrap; gap: 10px 22px; }
  .pp-split, .pp-plan, .pp-free { padding: 28px; }
  .pp-form { padding: 28px; }
}

@media (min-width: 900px) {
  .pp-price-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; gap: 24px; }
  .pp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
  .pp-step { padding: 26px 24px; }
  .pp-step-n { position: static; margin: 0 0 14px; }
  .pp-contact, .pp-faq-wrap { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 40px; align-items: start; }
  .pp-faq-wrap .pp-faq { max-width: none; }
}

@media (min-width: 1024px) {
  .pp-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pp-card { grid-template-columns: minmax(0, 1fr); padding: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .pp-btn, .pp-sticky, .pp-sticky.is-on, .pp-fine > summary::before, .pp-faq summary::after { transition: none; }
}