/* ==========================================================================
   AlpenPura · Editorial facelift (Sept 2026)
   --------------------------------------------------------------------------
   Loaded on every page right after ap-refine.css. Direction approved by the
   owner on the prototype (prototype-editorial preview, 25 Sept 2026):
   flat Pine buttons, calmer and larger typography, more air, image heroes
   with a slow zoom and line-by-line text, scroll motion (js/ap-reveal.js)
   and a mobile booking bar (js/ap-bookbar.js).

   Note for the CI document: buttons are now flat Pine #1E2B1F with square
   corners (CI v1.0 still shows the brown gradient with 2px radius).

   EasyBooking widgets (#ebFrontEndFrame, #ebOffer, #ebAvailability*,
   #sstrip, #ssm) are never restyled here, except the Pine search button of
   the homepage quick search (#ssm .sb1), as on the approved prototype.
   To roll back: remove the <link> to this file (and the two scripts).
   ========================================================================== */

:root { --pine: #1E2B1F; }

/* ─── 1 · Buttons: flat, square, Pine / outline ─────────────────────── */
.btn-p, #nav .btn-p, #nav.solid .btn-p {
  background: var(--pine) !important;
  border: 1px solid var(--pine) !important;
  border-radius: 0 !important;
  padding: 13px 38px !important;
  letter-spacing: .22em !important;
  transition: background .35s, color .35s !important;
}
.btn-p:hover, #nav .btn-p:hover { background: transparent !important; color: var(--pine) !important; opacity: 1 !important; }
.btn-o { border-radius: 0 !important; padding: 12px 36px !important; letter-spacing: .22em !important; }
.btn-o:not([style*="color:rgba(255"]):not([style*="color:#fff"]) { border-color: var(--on-s) !important; color: var(--on-s) !important; }
/* outline buttons on dark photo bands stay light */
.btn-o[style*="color:rgba(255"], .btn-o[style*="color:#fff"] { border-color: rgba(255, 255, 255, .72) !important; color: #fff !important; }
.btn-g { border-radius: 0 !important; border-color: #fff !important; color: #fff !important; letter-spacing: .22em !important; }
/* Buttons styled inline with the old brown gradient (compare cards, CTAs) */
:is(a, button, div, span)[style*="linear-gradient(135deg,#86715A"]:not(:where(#ebFrontEndFrame, #ebOffer, #ebAvailability, #ebAvailabilityGams) *),
:is(a, button, div, span)[style*="linear-gradient(135deg,var(--p-dim)"]:not(:where(#ebFrontEndFrame, #ebOffer, #ebAvailability, #ebAvailabilityGams) *),
#ssm .sb1 {
  background: var(--pine) !important;
  border-radius: 0 !important;
}
/* Tablets: slimmer bar button */
@media (min-width: 768px) and (max-width: 1099px) { #nav .btn-p { padding: 13px 26px !important; } }

/* ─── 2 · Typography: larger section titles ─────────────────────────── */
/* Homepages (section titles carry .serif) */
section h2.serif:not(:where(#ebAvailability, #ebAvailabilityGams) *) { font-size: clamp(2rem, 3.4vw, 3rem) !important; }
/* Chalet, landing, booking pages: stand-alone section titles */
section h2[style*="font-size:clamp(1.8rem,3vw,2.6rem)"],
section h2[style*="font-size:clamp(1.8rem,4vw,2.8rem)"],
section h2[style*="font-size:clamp(1.6rem,3vw,2.4rem)"] { font-size: clamp(2rem, 3.4vw, 3rem) !important; line-height: 1.18 !important; }
section h2[style*="font-size:clamp(1.5rem,2.5vw,2rem)"],
section h2[style*="font-size:clamp(1.6rem,2.5vw,2.2rem)"],
section h2[style*="font-size:clamp(1.4rem,2.2vw,1.9rem)"] { font-size: clamp(1.75rem, 2.8vw, 2.5rem) !important; line-height: 1.2 !important; }

/* ─── 3 · More air between sections ─────────────────────────────────── */
section.py-24, section.py-20 { padding-top: clamp(88px, 10vw, 128px) !important; padding-bottom: clamp(88px, 10vw, 128px) !important; }
section[style*="padding:80px 24px"] { padding-top: clamp(80px, 9vw, 120px) !important; padding-bottom: clamp(80px, 9vw, 120px) !important; }

/* ─── 4 · Motion keyframes ──────────────────────────────────────────── */
@keyframes apZoom { from { transform: scale(1); opacity: 1; } to { transform: scale(1.16); opacity: .86; } }
@keyframes apZoomSoft { from { transform: scale(1); } to { transform: scale(1.1); } }
@keyframes apLine { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@keyframes apFade { from { opacity: 0; } to { opacity: 1; } }
:root { --ap-ease: cubic-bezier(.22, .61, .36, 1); }

/* ─── 5 · Homepage hero: text bottom-left, slow zoom, lines one by one ── */
#home { background: #1C1914 !important; }
#home .relative.z-10.text-center { position: absolute !important; left: 6vw; bottom: 14vh; text-align: left !important; max-width: 720px !important; margin: 0 !important; padding: 0 !important; }
#home h1 { font-size: clamp(2.2rem, 4.6vw, 4.2rem) !important; margin-bottom: 22px !important; }
#home .a3 { margin-left: 0 !important; margin-bottom: 30px !important; font-size: 1.05rem !important; letter-spacing: .04em; }
#home .a4 { justify-content: flex-start !important; }
#home > .absolute.inset-0 > img { animation: apZoom 25s linear both; transform-origin: 50% 40%; will-change: transform; }
#home h1.a2 { animation: none !important; }
#home h1 .ap-hl { display: block; animation: apLine 1.6s var(--ap-ease) .3s both; }
#home h1 .ap-hl + .ap-hl { animation-delay: 1s; }
#home .a3 { animation: apLine 1.6s var(--ap-ease) 1.55s both !important; }
#home .a4 { animation: apFade 1.4s ease 1.95s both !important; }

/* Homepage logo at the top of the page: larger and set lower */
#nav-logo { transition: top .3s ease; }
@media (max-width: 767px) { #nav.nav-top #nav-logo { top: calc(50% + 10px) !important; } }
@media (min-width: 768px) and (max-width: 1199px) { #nav.nav-top #nav-logo { top: calc(50% + 16px) !important; } }
@media (min-width: 1200px) {
  html #nav.nav-top #ll-img { height: 150px !important; }
  #nav.nav-top #nav-logo { top: calc(50% + 28px) !important; }
}

/* Homepage intro: photo bleeds to the right edge */
@media (min-width: 768px) {
  #chalet .md\:col-span-5.relative { margin-right: calc((100vw - min(100vw, 1280px)) / -2 - 48px); }
  #chalet .iz { aspect-ratio: 4 / 5; border-radius: 0 !important; }
}

/* Homepage stories: staggered, taller photos, no card */
.grid.md\:grid-cols-3 > .rounded-2xl[style*="box-shadow"] { border-radius: 0 !important; }
.grid.md\:grid-cols-3 > .rounded-2xl[style*="box-shadow"] > div:first-child { height: 420px !important; }
@media (min-width: 768px) { .grid.md\:grid-cols-3 > .rounded-2xl[style*="box-shadow"]:nth-child(2) { margin-top: 110px; } }
.grid.md\:grid-cols-3 > .rounded-2xl[style*="box-shadow"] h3 { font-family: 'Inter', sans-serif !important; font-weight: 600 !important; font-size: 13px !important; letter-spacing: .2em !important; text-transform: uppercase; }

/* ─── 6 · Image heroes (landing pages, booking and enquiry pages) ─────── */
.ap-hero-img { background: #1C1914 !important; }
.ap-hero-img > img, .ap-hero-img > .absolute.inset-0 > img { animation: apZoom 25s linear both; transform-origin: 50% 45%; will-change: transform; }
.ap-hero-txt h1 .ap-hl { display: block; animation: apLine 1.6s var(--ap-ease) .35s both; }
.ap-hero-txt h1 .ap-hl + .ap-hl { animation-delay: .95s; }
.ap-hero-txt > p:first-child { animation: apFade 1.2s ease .15s both; color: rgba(249, 222, 195, .92) !important; }
.ap-hero-txt > h1 + * { animation: apLine 1.6s var(--ap-ease) 1.45s both; }
.ap-hero-txt > h1 + * + * { animation: apFade 1.4s ease 1.8s both; }
.ap-hero-txt > h1 + * + * + * { animation: apFade 1.4s ease 2s both; }
/* Landing pages: a taller, calmer hero */
section.ap-hero-img { min-height: 82vh !important; }
@media (max-width: 767px) { section.ap-hero-img { min-height: 78vh !important; } }
.ap-hero-img h1 { font-size: clamp(2.2rem, 4.6vw, 4rem) !important; }

/* ─── 7 · Chalet pages: split hero, photo bleeds to the right edge ───── */
.ap-hero-split .iz img { animation: apZoomSoft 25s linear both; transform-origin: 50% 45%; }
.ap-hero-split h1 { font-size: clamp(2.2rem, 3.3vw, 3.2rem) !important; line-height: 1.12 !important; margin-bottom: 24px !important; }
.ap-hero-split h1 .ap-hl { display: block; animation: apLine 1.6s var(--ap-ease) .3s both; }
.ap-hero-split h1 .ap-hl + .ap-hl { animation-delay: .85s; }
.ap-hero-split h1 .ap-hl + .ap-hl + .ap-hl { animation-delay: 1.4s; }
.ap-split-txt > p.ey { animation: apFade 1.2s ease .1s both; }
.ap-split-txt > h1 ~ * { animation: apFade 1.4s ease 1.7s both; }
.ap-split-txt > h1 + * { animation: apLine 1.6s var(--ap-ease) 1.35s both; }
@media (min-width: 1024px) {
  section.ap-hero-split { padding: 0 !important; }
  section.ap-hero-split > div {
    max-width: none !important;
    margin: 0 !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) !important;
    gap: 0 !important;
    align-items: stretch !important;
    min-height: min(calc(100vh - 72px), 920px);
  }
  section.ap-hero-split .ap-split-txt {
    align-self: center;
    padding: 96px clamp(40px, 4.5vw, 80px) 96px max(32px, calc((100vw - 1280px) / 2 + 32px));
  }
  section.ap-hero-split .iz { position: relative; aspect-ratio: auto !important; border-radius: 0 !important; min-height: 560px; }
  section.ap-hero-split .iz img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
}
@media (max-width: 1023px) {
  section.ap-hero-split { padding: 0 0 56px !important; }
  section.ap-hero-split > div { gap: 36px !important; }
  section.ap-hero-split .iz { order: -1; border-radius: 0 !important; aspect-ratio: 4 / 3.4 !important; }
  section.ap-hero-split .ap-split-txt { padding: 0 24px; }
}

/* Reduced motion: no zoom, no sliding */
@media (prefers-reduced-motion: reduce) {
  #home > .absolute.inset-0 > img, .ap-hero-img > img, .ap-hero-img > .absolute.inset-0 > img, .ap-hero-split .iz img { animation: none !important; }
  #home h1 .ap-hl, #home .a3, #home .a4, .ap-hero-txt h1 .ap-hl, .ap-hero-txt > *, .ap-hero-split h1 .ap-hl, .ap-split-txt > * { animation: apFade .6s ease both !important; }
}

/* ─── 8 · Scroll motion (js/ap-reveal.js) ───────────────────────────── */
/* Start states only exist on elements the script has prepared */
html.ap-motion .ap-a { opacity: 0; transform: translate3d(0, 64px, 0); transition: opacity 1.2s var(--ap-ease), transform 1.3s cubic-bezier(.19, 1, .22, 1); }
html.ap-motion .ap-a.ap-fade { transform: none; transition: opacity 1.2s var(--ap-ease); }
html.ap-motion .ap-a.ap-in { opacity: 1; transform: none; }
html.ap-motion img.ap-img { scale: 1.12; transition: scale 1.9s cubic-bezier(.19, 1, .22, 1); }
html.ap-motion img.ap-img.ap-in { scale: 1; }
@media (max-width: 767px) { html.ap-motion .ap-a:not(.ap-fade):not(.ap-in) { transform: translate3d(0, 36px, 0); } }
@media print {
  html.ap-motion .ap-a { opacity: 1 !important; transform: none !important; }
  html.ap-motion img.ap-img { scale: 1 !important; }
}

/* ─── 9 · Mobile booking bar (js/ap-bookbar.js) ─────────────────────── */
.ap-bb { position: fixed; left: 0; right: 0; bottom: 0; z-index: 150; display: flex; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(251, 250, 248, .97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid #D1C4BA; transform: translateY(110%); transition: transform .35s; }
.ap-bb.on { transform: none; }
.ap-bb a { flex: 1; text-align: center; font: 500 11px/1 'Inter', sans-serif; letter-spacing: .2em; text-transform: uppercase; padding: 15px 0; text-decoration: none; }
.ap-bb .o { border: 1px solid var(--on-s); color: var(--on-s); }
.ap-bb .s { background: var(--pine); color: #fff; border: 1px solid var(--pine); }
@media (min-width: 768px) { .ap-bb { display: none; } }
/* keep the cookie dialog and the mobile menu above the bar */
body:has(#mnav.open) .ap-bb { transform: translateY(110%); }